Render Etme (Rendering) Nedir?

Tarayıcıda render: koddan piksele

Bir tarayıcı sunucudan gelen HTML'i satır satır ayrıştırıp DOM ağacını, CSS dosyalarından da stil kurallarını (CSSOM) oluşturur. İkisi birleşince ekranda görünecek öğeler belirlenir, ardından her öğenin konumu ve boyutu hesaplanır (layout), pikseller boyanır (paint) ve katmanlar birleştirilir. JavaScript bu süreç sırasında DOM'u değiştirebilir, yeni içerik ekleyebilir ya da var olanı silebilir. Bu adımların sırası ve neyin neyi beklettiği kritik render yolu kavramıyla incelenir; kullanıcı açısından sonuç, sayfanın ne kadar hızlı ve doğru göründüğüdür.

Arama motoru tarafında render

Google için render, tarama ile dizine ekleme arasındaki ara aşamadır. Googlebot önce sayfanın ham HTML'ini indirir ve buradaki bağlantıları çıkarır. 200 durum kodu döndüren sayfalar ardından render kuyruğuna alınır. Google'ın belgelerine göre sayfa bu kuyrukta birkaç saniye kalabilir, ama süre daha uzun da olabilir. Sıra geldiğinde Web Rendering Service (WRS), güncel tutulan bir Chromium sürümüyle sayfayı açar, JavaScript'i çalıştırır ve ortaya çıkan HTML dizine ekleme için kullanılır. İlk HTML'de noindex bulunan bir sayfa için Google render adımını hiç çalıştırmayabilir.

WRS gerçek bir ziyaretçi gibi davranmaz

WRS bir tarayıcı motoru kullanır, fakat davranışı insan ziyaretçininkinden birkaç önemli noktada ayrılır:

• Durum tutmaz: Çerezler, Local Storage ve Session Storage sayfa yüklemeleri arasında temizlenir. İçeriği daha önceki bir ziyarete ya da kayıtlı tercihe bağlayan yapılar bot için çalışmaz.
• İzin isteklerini reddeder: Konum, bildirim veya kamera izni gerektiren içerik görünmez.
• Agresif önbellekleme yapar: Google kaynakları uzun süre önbellekte tutabilir ve önbellek başlıklarını yok sayabilir. Dosya adına içerik özeti eklemek (main.2bb85551.js gibi) eski bir betiğin kullanılmasını önler.
• Etkileşime girmez: Tıklamaz ve kaydırmaz. Kaydırmayla tetiklenen yükleme yerine görünür alana girdiğinde yüklenen lazy loading kullanılmalıdır.
• Bazı bağlantı türlerini desteklemez: WebSocket ve WebRTC ile gelen içerik için HTTP tabanlı bir yedek gerekir.

Bu listenin güncel hâli Google'ın JavaScript sorunlarını giderme belgesinde bulunur.

Ham HTML ile render edilmiş HTML'i karşılaştırmak

Pratikte en faydalı kontrol, sunucunun gönderdiği ilk HTML ile render sonrası DOM'u yan yana koymaktır. Search Console'daki URL Denetimi ve Zengin Sonuçlar Testi, Google'ın render ettiği HTML'i, yüklenen kaynakları ve JavaScript konsol hatalarını gösterir. İki sürüm arasındaki şu farklar risk taşır:

• Başlık, canonical veya robots etiketinin render sırasında değişmesi: Google iki farklı sinyal görür ve hangisinin geçerli olacağı belirsizleşir.
• Ana metnin ya da iç bağlantıların yalnızca render sonrası var olması: İçerik tamamen render'a, dolayısıyla kuyruğa ve hatasız çalışan betiklere bağlı kalır.
• Render sırasında hata veren bir API çağrısı: Kullanıcı tarayıcısında çalışan bir istek, WRS'te zaman aşımına uğrayabilir ve sayfa boş görünebilir.

Her bot render etmez

Google, sunucu taraflı render ya da ön render yapmayı hâlâ iyi bir fikir olarak görür; gerekçelerinden biri, her botun JavaScript çalıştıramamasıdır. Google dışındaki arama motorları, sosyal ağ önizleme botları ve yapay zekâ sistemlerinin tarayıcıları için JavaScript desteği değişkendir ve çoğu zaman belgelenmez. Önemli içeriği ilk HTML'de sunmak bu belirsizliği ortadan kaldırır. Hangi render stratejisinin hangi durumda seçileceği JavaScript SEO ve SSR maddelerinde ayrıca ele alınıyor.