Google, görünüm geçişlerini kullanarak yeni yapay zeka modu için nasıl bağlantılı bir deneyim oluşturdu?

Jason Michelson
Jason Michelson
GitHub LinkedIn
Bramus

Yayınlanma tarihi: 28 Ağustos 2025

Google Arama, dünyadaki en geniş erişim alanlarından birine sahiptir. Bu nedenle, kullanıcı deneyimimizde yapılan değişiklikler milyarlarca kullanıcıyı etkileyebilir. Uzun zamandır daha modern ve uygulama benzeri bir web deneyimi sunmayı hayal ediyorduk. AI Modu'nun geliştirilmesine başlandığında, kullanıcılarımız için standart aramadan AI Modu'na geçişin sorunsuz ve bağlantılı olduğu bir deneyim oluşturmak istedik. Belgeler arası görünüm geçişleri özelliğini duyduğumuzda bu özelliğin, belgeler arası görünüm geçişleri için mükemmel bir eşleşme olduğunu anladık. Bu örnek olay, yapay zeka modunun kullanıma sunulmasıyla birlikte geçiş özelliğini eklerken öğrendiklerimizi paylaşıyor.

Google Arama ile yapılan bir aramanın kaydı, arama sonuçlarından AI Modu'na geçiş. Geçişte görünüm geçişleri kullanılıyor.

Dokümanlar arası görünüm geçişleri, yerel tarayıcı araçları açısından oyunun kurallarını değiştiriyor. Bu özelliğin web'i nasıl şekillendireceğini görmek için sabırsızlanıyoruz.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

Mevcut durumu değiştirme

Google Arama'nın tarayıcı desteğiyle ilgili katı ve muhafazakar şartları vardır. Genellikle, sınırlı erişimli özelliklerin kullanılması yasaktı. Dokümanlar arası görünüm geçişlerinde, piksel anlık görüntüleme API'si olmadığı ve tüm görünüm alanının klonlanmasının büyük performans sorunlarına yol açtığı için bir polyfill'in kullanılamayacağını tespit ettik. Bu nedenle, özelliği aşamalı iyileştirme olarak kullanmak, AI Modu ile birlikte kullanıma sunmanın en iyi yoluydu. Görünüm geçişleriyle oluşturulan animasyonlar web sitesinin işlevselliğini doğrudan etkilemediğinden, desteklenmeyen trafik için bu animasyonlar devre dışı bırakılırdı. Bu, geçiş animasyonları olmadan da geçerli olan mevcut üretim durumuyla aynıdır.

Bu aşamalı geliştirme stratejisini ilk olarak şirket içi kullanıcılarımızla test ettik. Bu sayede, büyük oranda olumlu olan erken geri bildirimler aldık. Alınan geri bildirimlerde, performans sorunları ve diğer özelliklerle (ör. çakışan yığınlama bağlamları) istenmeyen etkileşimler gibi hatalar da ortaya çıktı.

Bu stratejinin başarılı olduğunu gördük ve gelecekte diğer yeni tarayıcı özelliklerinde de deneyeceğimizi düşünüyoruz.

Karşılaştığımız zorluklar ve bunların çözümü

Gecikme, oluşturmayı engelleme ve watchdog zamanlayıcıları

Genel olarak, MPA görünüm geçişleriyle gelen ek gecikme, özellikle modern donanımlarda kullanım alanlarının% 99'u için ihmal edilebilir düzeydedir. Ancak Google Arama, gecikme konusunda son derece yüksek bir standarda sahiptir ve tüm cihazlarda iyi çalışan kullanıcı deneyimleri oluşturmaya çalışırız. Bizim için birkaç milisaniye bile önemlidir. Bu nedenle, kullanıcı deneyimini olumsuz etkilemeden dokümanlar arası görünüm geçişlerini nasıl düzgün bir şekilde uygulayacağımıza yatırım yapmamız gerekti.

Oluşturmayı engelleme, dokümanlar arası görünüm geçişleriyle iyi çalışan bir tekniktir. Gelen dokümanın sözde öğe anlık görüntüleri yalnızca daha önce oluşturulmuş içeriği gösterebilir. Bu nedenle, gelen dokümandaki içeriği canlandırmak için canlandırmak istediğiniz hedef öğe oluşturulana kadar blok oluşturmanız gerekir. Bunu yapmak için HTMLLinkElement üzerinde blocking özelliğini kullanın. Oluşturmayı engellemenin dezavantajları vardır. Gelen dokümanın DOM ağacının sonuna doğru olan bir öğenin beklenmesi önemli bir gecikme etkisi yaratabilir. Bu dengeyi buna göre kurmamız ve yalnızca sayfa yaşam döngüsünde çok erken oluşturulan öğelerde engelleme yapmamız gerekiyordu.

<!-- Link tag in the <head> of the incoming document -->
<link blocking="render" href="#target-id" rel="expect">

<!-- Element you want to animate in the <body> of the incoming document -->
<div id="target-id">
  some content
</div>

Bazı durumlarda, hangi öğede oluşturma engelleme uyguladığınızı belirtmek yeterli olmuyordu. DOM ağacının başlangıcına yakın bir öğede oluşturmayı engelleyen durumlar olsa bile belirli cihazlar veya bağlantılar, eklenen gecikmeyi görmeye devam eder. Bu durumları ele almak için, gelen belgenin oluşturulmasının engellenmesini zorlamak amacıyla belirli bir süre geçtikten sonra HTMLLinkElement öğesini kaldıran bir watchdog zamanlayıcı komut dosyası yazdık.

Bunu yapmanın basit bir yolu şöyledir:

function unblockRendering() {
  const renderBlockingElements = document.querySelectorAll(
    'link[blocking=render]',
  );
  for (const element of renderBlockingElements) {
    element.remove();
  }
}

const timeToUnblockRendering = t - performance.now();

if (timeToUnblockRendering > 0) {
  setTimeout(unblockRendering, timeToUnblockRendering);
} else {
  unblockRendering();
}

Kapsamla ilgili sınırlamalar

Karşılaştığımız bir diğer sorun ise dokümanlar arası görünüm geçişleri @kuralının navigation: auto doküman içinde genel düzeyde gerçekleşmesi. Belgeler arası görüntüleme geçişlerinin etkinleştirilmesini yalnızca belirli tıklama hedefleriyle sınırlamanın yerleşik bir yolu yoktur. Bu değişiklik çok büyük olduğundan Google Arama'daki gezinmelerin% 100'ünde dokümanlar arası görünüm geçişlerini etkinleştiremedik. Kullanıcının etkileşimde bulunduğu özelliğe bağlı olarak dokümanlar arası görünüm geçişlerini dinamik olarak etkinleştirecek veya devre dışı bırakacak bir yöntem gerekiyordu. Bizim durumumuzda, bu işlevleri yalnızca yapay zeka moduna geçiş ve yapay zeka modundan çıkış için etkinleştirdik. Bunu, hangi hedefin tıklandığına veya dokunulduğuna bağlı olarak gezinme @kuralını programatik olarak güncelleyerek yaptık.

Görüntüleme geçişi @kuralını etkinleştirmenin veya devre dışı bırakmanın bir yolu şöyledir:

let viewTransitionAtRule: HTMLElement | undefined;
const DISABLED_VIEW_TRANSITION = '@view-transition{navigation:none;}';
const ENABLED_VIEW_TRANSITION = '@view-transition{navigation:auto;}';

function getVtAtRule(): HTMLElement {
  if (!viewTransitionAtRule) {
    viewTransitionAtRule = document.createElement('style');
    document.head.append(viewTransitionAtRule);
  }
  return viewTransitionAtRule;
}

function disableVt() {
  getVtAtRule().textContent = DISABLED_VIEW_TRANSITION;
}

function enableVt() {
  getVtAtRule().textContent = ENABLED_VIEW_TRANSITION;
}

Kalitesiz animasyonlar ve birleştirilmiş animasyonlar

Görünüm geçişi sözde öğelerinde otomatik olarak oluşturulan animasyonlardan bazıları, eski cihazlarda kare düşmelerine neden olarak kullanıcılara sunmak istediğimiz temiz ve sorunsuz deneyimi bozuyordu. Animasyonların performansını artırmak için bunları, birleştirme yöneticisinde çalıştırılabilen animasyon tekniklerini kullanarak yeniden yazdık. Bunu, önce ve sonra anlık görüntüsünün sözde öğelerinin boyutlarını almak için anahtar kareleri inceleyerek ve anahtar kareleri buna göre yeniden yazmak için matris matematiğini kullanarak yaptık. Aşağıdaki örnekte, her görünüm geçişi sözde öğesi için animasyonun nasıl alınacağı gösterilmektedir:

const pseudoElement = `::view-transition-group(${name})`;
const animation = document
  .getAnimations()
  .find(
    (animation) =>
      (animation.effect as KeyframeEffect)?.pseudoElement === pseudoElement,
  );

View Transitions Applied: Dealing with the Snapshot Containing Block (Görünüm Geçişleri Uygulandı: Anlık Görüntü İçeren Blokla İlgilenme) başlıklı makalede, yüksek performanslı görünüm geçişi anahtar kareleri yazma hakkında daha fazla bilgi edinin.

Dikkat etmeniz gereken diğer noktalar

Daha belirgin sorunlardan biri, öğeleri view-transition-name CSS özelliğiyle etiketlemenin yığınlama bağlamını etkilemesidir (View transitions specification: Section 2.1.1). Bu, kapsayıcı öğelerinin z-index değiştirilmesini gerektiren birden fazla hatanın kaynağıydı.

Ayrıca, öğelere varsayılan olarak view-transition-name değerleri eklemek istemeyebilirsiniz. Google Arama üzerinde çalışan çok sayıda kişi var. Ekibimizin öğelerde ayarladığı view-transition-name değerlerinin, diğer ekiplerdeki kişilerin kullanabileceği değerlerle çakışmasını önlemek için view-transition-name özelliğini yalnızca belirli bir görünüm geçişi türü etkin durumdayken koşullu olarak eklemek üzere görünüm geçişi türlerinden yararlandık.

view-transition-name öğesini yalnızca ai-mode öğesinin görünüm geçişi türü etkin olduğunda bir öğeye eklemek için örnek CSS:the-element

html:active-view-transition-type(ai-mode) {
  #target {
    view-transition-name: the-element;
  }
}

Tüm görünüm geçişleriniz için bu CSS kurallarını uyguladıktan sonra, pageswap ve pagereveal etkinlikleri sırasında herhangi bir gezinme için mevcut görünüm geçişi türünü dinamik olarak değiştirebilirsiniz.

pageswap etkinliği sırasında görünüm geçişi türünü ai-mode olarak güncelleme örneği.

function updateViewTransitionTypes(
  event: ViewTransitionEvent,
  types: string[],
): void {
  event.viewTransition.types.clear();
  for (const type of types) {
    event.viewTransition.types.add(type);
  }
}

window.addEventListener(
  'pageswap',
  (e) => {
    updateViewTransitionTypes(
      e as ViewTransitionEvent,
      ['ai-mode'],
    );
  }
);

Bu sayede, ad çakışmalarını önleriz ve yapay zeka moduna geçişte ve bu moddan çıkışta anlık görüntüsü alınması gerekmeyen öğelerin gereksiz yere anlık görüntüsünü almayız.

Son olarak, tüm yığınlama bağlamı sorunları yalnızca görünüm geçişi sırasında mevcut olur. Bu sorunları çözmek için, görünüm geçişlerini kullanırken bu sorunu çözmek amacıyla orijinal öğelerin z-indekslerini rastgele değiştirmek yerine oluşturulan sözde öğelerin z-indekslerini hedefleyebiliriz.

::view-transition-group(the-element) {
  z-index: 100;
}

Sırada ne var?

Tarayıcılar arası kullanıma sunulduğunda Navigation API ile entegrasyon da dahil olmak üzere Google Arama için belgeler arası görünüm geçişlerini kullanmayı planlıyoruz. Bir sonraki projemizi görmek için bizi takip etmeye devam edin.