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

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 hayal ediyoruz. AI Modu'nun geliştirme süreci başladığı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, dokümanlar arası görünüm geçişleri için mükemmel bir eşleşme olduğunu anladık. Bu örnek olay çalışmasında, AI Modu'nun kullanıma sunulmasıyla birlikte geçiş özelliğini eklerken öğrendiklerimiz paylaşılmaktadır.

Belgeler 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.

Mevcut durumu değiştirme

Google Arama'nın katı ve muhafazakar tarayıcı destek şartları vardır. Genellikle, sınırlı kullanılabilen özelliklerin kullanılması yasaktı. Belgeler arası görünüm geçişlerinde, ana engelleyici faktörün piksel anlık görüntüleme API'sinin olmaması ve tüm görünüm alanının klonlanmasının büyük performans sorunlarına yol açması nedeniyle bir polyfill'in uygun olmadığını tespit ettik. Bu nedenle, özelliği progresif geliş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ır. Bu, geçiş animasyonları olmadan da geçerli olan mevcut üretim durumudur.

Bu aşamalı geliştirme stratejisini ilk olarak dahili kullanıcılarımızla test ettik. Bu sayede, büyük ölçüde olumlu olan erken geri bildirimler aldık. Alınan geri bildirimlerde, performans sorunları ve üst üste binmiş yığın bağlamları gibi diğer özelliklerle istenmeyen etkileşimler de dahil olmak üzere 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üyorum.

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

Gecikme, oluşturma engelleme ve güvenlik zamanlayıcıları

Genel olarak, MPA görüntüleme geçişleriyle gelen ek gecikme, kullanım alanlarının% 99'unda, özellikle modern donanımlarda 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ı deneyimine zarar vermeden dokümanlar arası görünüm geçişlerini nasıl doğru şekilde uygulayacağımıza yatırım yapmamız gerekti.

Oluşturmayı engelleme, belgeler arası görünüm geçişleriyle iyi sonuç veren 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 belgedeki 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 belgenin DOM ağacının sonuna doğru olan bir öğenin beklenmesi önemli bir gecikmeye neden olabilir. Bu dengeyi buna göre kurmamız ve yalnızca sayfa yaşam döngüsünde çok erken oluşturulan öğelerde blok oluşturmamı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 işlemler olsa bile belirli cihazlar veya bağlantılarda gecikme yaşanmaya devam eder. Bu durumları ele almak için, belirli bir süre geçtikten sonra HTMLLinkElement öğesini kaldırarak gelen dokümanın oluşturulmasının engellenmesini zorla kaldırmak üzere 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();
}

Kapsam sınırlamaları

Karşılaştığımız bir diğer sorun ise belgeler arası görünüm geçişleri @kuralının navigation: auto belge içinde genel düzeyde gerçekleşmesidir. Dokümanlar arası görünüm 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 AI Moduna geçiş ve AI 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ünüm geçişi @kuralını açıp kapatmanı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;
}

Duraklama 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 sonraki anlık görüntü 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 bir 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üntüleme Geçişleri Uygulandı: Anlık Görüntü İçeren Blokla İlgilenme) başlıklı makalede, yüksek performanslı görüntüleme 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 durum, kapsayıcı öğelerinin z-index değiştirilmesini gerektiren birden fazla hataya neden oluyordu.

Dikkat etmeniz gereken bir diğer nokta da öğelere varsayılan olarak view-transition-name değerleri eklemek istemeyebileceğinizdir. 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.

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

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 yapay zeka modundan çıkışta anlık görüntüsü alınması gerekmeyen öğelerin anlık görüntüsünü gereksiz yere almayız.

Son olarak, tüm yığın 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 öğrenmek için bizi takip etmeye devam edin.