Critical Rendering Path, yani Kritik Oluşturma Yolu, tarayıcının sitenin kaynak dosyalarını ve görsellerini, sitenin açıldığı ilk andan itibaren ziyaretçinin görebileceği hale getirmek için izlediği işlemler dizisidir. Sitenin çok daha hızlı açılması ve ziyaretçilerin bilgilere çok daha hızlı ulaşabilmesi için Critical Rendering Path sürecindeki adımların iyileştirilmesi gereklidir.
Critical Rendering Path, siteye gelen ziyaretçinin görmek istediği içeriği çok daha hızlı ve öncelikli olarak görmesini doğrudan etkileyen bir süreçtir. Bu sürecin performansı, First Contentful Paint (FCP) ve Largest Contentful Paint (LCP) gibi metriklerle ölçülür. Bu yazıda Critical Rendering Path'in ne olduğunu, hangi aşamalardan oluştuğunu ve bu aşamaların nasıl optimize edileceğini detaylı bir şekilde inceledik. Önce bu kavramın nasıl ortaya çıktığına, neden optimize edilmesi gerektiğine ve tarayıcıların bir internet sitesini render ederken nelere odaklandığına bakalım. Ardından bu süreçleri optimize edeceğimiz adımları hep birlikte inceleyelim.
Critical Rendering Path Nedir?
Bir tarayıcı (browser), web sitesini oluşturmaya sunucuya gönderdiği HTML isteğiyle başlar. Sunucu öncelikle HTTP başlıklarını ve HTML'i döndürür, tarayıcı da HTML'i okumaya ve ayrıştırmaya başlar. Alınan her bir baytı Document Object Model (DOM) ağacına dönüştürür. Tarayıcı, kaynak kod içerisinde CSS stil dosyaları, JavaScript (JS) dosyaları veya görseller gibi harici kaynakları keşfettiğinde bunlar için ayrı istekler başlatır. Senkron JavaScript dosyaları, indirilip çalıştırılana kadar HTML'in geri kalanının ayrıştırılmasını durdurur. CSS dosyaları ise ayrıştırmayı değil, sayfanın ekrana çizilmesini engeller. Tarayıcı, CSS Nesne Modelini (CSSOM) oluşturana kadar sayfayı göstermez.
DOM ve CSSOM tamamlandıktan sonra tarayıcı, sayfa üzerindeki görünür tüm içeriğin stillerini hesaplayarak bir render tree oluşturur. Render tree tamamlandıktan sonra ise öğelerin konumunu ve boyutunu tanımlayan bir layout oluşturur. Bu işlem de tamamlandığında sayfa ekrana boyanır (paint).
Bu süreçteki engelleyici kaynaklar ne kadar fazla ve büyükse, kullanıcı boş ekranı o kadar uzun görür. Tabii ki kimse sitesine gelen ziyaretçiye saniyelerce beyaz ekran göstermek istemez.
Kavramın adını parçalarına ayırarak inceleyelim. "Kritik" (critical) kısmı, sayfanın ilk görünen kısmının (ekranın üst bölümü) oluşturulması için gereken kodları ifade eder. "Oluşturma" (rendering) kısmı, tarayıcının web sitesindeki kaynak kodları işleyip kullanıcıya anlamlı veriler göstermesini ifade eder. "Yol" (path) ise bu işlemlerin izlediği sırayı ifade eder. Tüm bunların bütününde, kritik kodların ekrana çizilmesi sırasında gerçekleşen olaylar dizisinden söz edebiliriz. Kritik oluşturma yolu; Belge Nesne Modeli (DOM), CSS Nesne Modeli (CSSOM), oluşturma ağacı (render tree) ve düzeni (layout) içerdiğinden, bu yapıyı doğru anlayabilmek için bu kavramları tanımamız gerekmektedir.
Document Object Model (Belge Nesne Modeli)
DOM, Türkçe karşılığıyla belge nesne modeli, her bir internet sayfasının dinamik olarak oluşturulmasını sağlayan arayüzdür. Ayrıştırılmış durumdaki HTML sayfasının temsilidir diyebiliriz. HTML ayrıştırıldıktan sonra bir DOM ağacı oluşur. DOM ağacını, platform ve programlama dilinden bağımsız bir arayüz olarak nitelendirebiliriz. Kök öğeden, yani <html> etiketinden başlayarak her bir etiket için ayrı ayrı düğümler (node) oluşturur. Diğer öğelerin altına yerleştirilmiş öğeler ise alt düğüm olarak nitelendirilir. Bu noktada düğüm sayısı ne kadar fazla olursa kritik oluşturma yolu o kadar uzar ve performans maliyeti o kadar artar. Temiz, özenle yazılmış HTML kodları, HTML'in ayrıştırılması için gereken süreyi azaltmaya yardımcı olur.
Örnek bir DOM ağacı:
Soldaki kod bloğunu, sağdaki görsel ise bu kod bloğunun oluşturduğu DOM ağacını temsil eder.
PageSpeed Insights aracının verdiği "Aşırı büyük bir DOM boyutundan kaçının" uyarısı tamamen DOM ile alakalıdır. Araç bu uyarıyla, istek atılan web sayfasında bulunan düğümlerin çok fazla olduğunu ve azaltılması gerektiğini belirtir.
CSS Object Model (CSS Nesne Modeli)
CSSOM, Türkçe ifadesiyle CSS nesne modeli, DOM yapısına çok benzer ve DOM ağacıyla bağlantılı olan stillerle ilgilenir. CSS stillerinin dinamik olarak okunmasına ve değiştirilmesine yardımcı olur. CSSOM, sayfadaki herhangi bir nesneye ait stil kümesini hesaplarken o düğüm için geçerli olan kuralla işleme başlar. Örneğin bir ana öğeye ait stiller tüm alt öğelere de uygulanır. Bu sebeple CSSOM'un bir ağaç yapısına ihtiyacı vardır.
Örnek CSSOM ağacı:
Body etiketinde font boyutu 16px olarak tanımlandığı için, diğer tüm etiketlere de aynı font boyutunun uygulandığını yukarıdaki CSSOM ağacında görebilirsiniz.
Render Tree (Oluşturma Ağacı)
Oluşturma ağacı olarak nitelendirdiğimiz bu kavram, DOM ve CSSOM'un birleşimidir. DOM ve CSSOM işlemleri tamamlandığında, web sayfası üzerindeki görünür içeriklerin hesaplamalarının gerçekleştirildiği alandır.
Layout (Düzen)
Düzen yani layout, kullanıcının sayfada göreceği öğelerin konumunu ve boyutlarını ayarlar. Nesnelerin nerede, nasıl ve hangi boyutta olacağını belirler. Bunu yaparken DOM, CSSOM ve render tree tarafında yapılan işlemlerden faydalanır.
<meta name="viewport" content="width=device-width, initial-scale=1">
Yukarıdaki kod kullanılmadığı takdirde mobil cihazlarda boyutlandırma sorunları yaşanabilir. Bu sebeple gerekli meta etiketlerinin kullanılması oldukça önemlidir. Düzen işlemi, cihaz ekranında tarayıcı her yeniden boyutlandırıldığında tekrar gerçekleşir. Düzen performansı da DOM'a bağlı olarak performans maliyetini ciddi şekilde etkiler. Düğüm sayısı ne kadar fazlaysa düzen işlemi o kadar geç biter. Bu tarafta darboğazlar yaşanabilir ve site içinde kaydırma (scrolling) veya animasyonlar sırasında takılmalar görülebilir. Kritik oluşturma yolunu optimize etmek, ilk içeriğin ekranda görünme süresini (First Contentful Paint) iyileştirir. Ayrıca animasyonların saniyede altmış kare hızında akıcı bir şekilde çalışmasına ve daha iyi bir kullanıcı deneyimi sunulmasına yardımcı olur.
Painting (Boyama)
Kritik oluşturma yolundaki son adım, ekranın boyanması işlemidir. Boyama süresi, oluşturma ağacına ne tür güncellemelerin uygulandığına göre değişiklik gösterebilir. Boyama genellikle çok daha hızlı tamamlandığından pek odaklanılmasa da, bir animasyon karesinin ne kadar sürdüğünü ölçümlemek kritik oluşturma yolunun optimizasyonunda önemli bir ayrıntıdır. Her bir düğüme uygulanan stil işlemleri boyama süresini artıracaktır. Ancak boyama işlemi çok kısa sürüyorsa ve bunun üzerinde efor harcanıyorsa, harcanan eforun karşılığı alınamayabilir. Bu sebeple ölçümleme yapmadan bu tarafta aksiyon almak çok faydalı olmayacaktır.
Kritik Oluşturma Yolu Nasıl Optimize Edilir?
Kritik oluşturma yolunun görselleştirilmiş hali:
Tarayıcı bir yanıt aldığında HTML dosyasını ayrıştırmaya (parsing) başlar. HTML kodları içerisinde bir bağımlılıkla (CSS, JS, görsel vb.) karşılaşırsa ilgili dosyayı indirmeye çalışır. Eğer bu bir stil dosyasıysa, tarayıcının sayfayı oluşturmadan önce dosyayı tamamen indirip ayrıştırması gerekir. Sayfanın ekrana çizilmesini bu şekilde geciktiren kaynaklara render-blocking, yani "oluşturmayı engelleyen kaynaklar" adı veriliyor.
Öncelikli Yüklenecek Kaynakların Belirlenmesi
Hangi kaynakların önce yükleneceği konusunda doğru kararlar vermek, yüklenme sırasını kontrol etmek ve bu kaynakların dosya boyutlarını azaltmak sayfa yükleme hızına doğrudan fayda sağlayacaktır. Örneğin sayfanın ilk görünen kısmı için gereken kritik CSS kodlarını <head> içinde satır içi (inline) olarak eklemek; CSSOM, render tree ve boyama sürelerini kısaltacaktır.
Kaynakların Önceden Yüklenmesi
Tarayıcıya önemli kaynakları önceden bildirerek yüklenme sırasını iyileştirebilirsiniz. <link rel="preload"> ile kritik dosyaların erken indirilmesini, <link rel="preconnect"> ile üçüncü taraf sunuculara bağlantının önceden kurulmasını sağlayabilirsiniz. LCP görseline fetchpriority="high" özelliği eklemek de bu görselin daha öncelikli yüklenmesine yardımcı olur.
Kritik Olmayan Kaynakların Ertelenmesi
Sitenizde yüklenmesi kritik olmayan kaynakları erteleyerek kritik oluşturma yolunu optimize edebilirsiniz. JS dosyaları için "defer" veya "async" özellikleri kullanılabilir. Bu tarz dosyaları </body> etiketinden hemen önce çağırabilir veya <head> içinde defer ile ekleyebilirsiniz.
İstek Sayısının Azaltılması
Sitenize gelen istek sayısının azaltılması site performansını iyileştirecektir. Sitenizde bulunan gereksiz ve kullanılmayan dosyaların ve URL'lerin (üçüncü taraf kaynaklar dahil) kaldırılması gerekir. Geçmişte bunun için CSS ve JS dosyalarının birleştirilmesi öneriliyordu. HTTP/2 ve HTTP/3 ile birlikte bu yöntem eski önemini kaybetti. Ancak kullanılmayan kodların kaldırılması hala önemlidir.
Görsellerin Optimize Edilmesi
Site içerisindeki görsellerin optimize edilmesi yalnızca web sitesinin boyutunu azaltmakla kalmaz, kritik oluşturma yolundaki süreçleri de hızlandırır. Görselleri WebP veya AVIF gibi modern formatlarda sunmak ve sayfanın alt kısmındaki görseller için lazy load kullanmak site hızına oldukça faydalı olacaktır. Ancak sayfanın ilk görünen kısmındaki LCP görseline lazy load uygulanmamalıdır.
Algılanan Hız: Skeleton Loading (İskelet Ekran)
Kritik oluşturma yolunu optimize etmek gerçek yüklenme süresini kısaltır. Skeleton loading ise kullanıcının hissettiği, yani algılanan hızı iyileştirir.
İskelet ekran (skeleton loading), kullanıcı deneyimi açısından incelediğimizde LinkedIn, Instagram, YouTube gibi sıkça kullandığımız platformlarda karşılaştığımız bir uygulama türü diyebiliriz. Günümüzde genellikle JavaScript tabanlı çalışan web siteleri, iskelet ekranlar sayesinde ziyaretçilerine sitelerinin daha hızlı açıldığı hissini veriyor.
İskelet ekranlar, sayfa içeriği tamamen yüklenmeden önce ilgili bileşenlerin (component) yerinde görünen yer tutuculardır. Bileşenlerin, widget'ların veya ürün kartlarının yüklenmesinden önce aslına uygun bir önizleme sundukları için daha hızlı yüklenme izlenimi verirler. Bu kavram, ürün tasarımcısı Luke Wroblewski tarafından 2013 yılında bekleme sürelerinin iyileştirilmesiyle ilgili yazdığı blog yazısıyla tanıtıldı.
Luke'a göre, kullanıcıların sayfaya girdiğinde bir şeylerin yüklendiğini görmesi, bekleme süresini daha kısa hissettiriyor ve hemen çıkma oranını düşürüyor. Skeleton loading, bilgilerin kademeli olarak yüklenmesine yardımcı olduğu için işlerin hızlı gerçekleştiği hissini yaratır. Preloader görselleri ise kullanıcılara sayfanın yüklenmeyeceği hissini verdiği için kullanıcılar tarafından pek sevilmez. Sayfanın temel yapısını önizleyen bir iskelet ekranla yükleme işleminin nasıl başladığını görürüz: Önce iskelet ekran görünür, ardından sayfa tamamen oluşturulana kadar ekran kademeli olarak içerikle dolar.
Skeleton Loading Türleri Nelerdir?
İskelet ekranları iki türe ayırabiliriz:
- İçerik yer tutucuları: YouTube, LinkedIn gibi uygulamaların kullandığı, yukarıdaki görsellerde de yer alan yapıdır. İçeriklerin bulunacağı alanları açık gri kutu ve dairelerle önizler.
- Renk yer tutucuları: İçerik alanlarından ziyade genellikle görsellerin ilk yüklenme süresinde, görselin baskın renginin önizlemesini yapar.
İskelet Ekranlar SEO ve PageSpeed Tarafına Nasıl Etki Eder?
İskelet ekranlar, doğrudan SEO çalışmalarınızda uygulayıp pozisyon iyileşmesi sağlayabileceğiniz bir uygulama değildir. Altyapı ve işlem maliyeti açısından uygun olan projelerinizde uyguladığınız takdirde kullanıcı deneyimi açısından faydalı bir çalışma yapmış olursunuz. SEO'ya doğrudan etki etmese de kullanıcı odaklı bir çalışma yaptığımız için dolaylı olarak faydalarını görebilirsiniz. İskelet ekranlar sayfanın gerçek yüklenme hızını değil, kullanıcının algıladığı hızı iyileştirmek için tasarlanmıştır.
İskelet ekranlar, spinner'lar ve diğer yükleme animasyonlarıyla benzer bir işlev görür. Ancak spinner'lar kullanıcılara sayfanın geç yükleneceği hissini verirken, iskelet ekranlar sayfanın hızla açılacağı hissini korur ve hemen çıkma oranında iyileşmeler yaratabilir. Bunun sebebi, iskelet ekranların bir ilerleme yanılsaması yaratmasıdır. Spinner'lar içerikle ilgisizdir ve içeriğin yüklenmesi için ne kadar beklememiz gerektiğini belirtmez. Bekleme süresi aynı olsa da, tasarım tarafında yapılan bu iyileştirme ziyaretçileri sitede tutmak için oldukça faydalıdır.
Tüm bunların yanı sıra, iskelet ekranlar Core Web Vitals metriklerinden CLS'yi (Cumulative Layout Shift) de iyileştirebilir. Normalde bir sayfa açıldığında bileşenlerin aniden yüklenip sayfayı kaydırması CLS tarafında olumsuz değerlendirilir. İskelet ekranlar sayfa düzeninin bir önizlemesini sunduğu için bu kaymaların önüne geçebilir. Ancak bunun için yer tutucuların boyutlarının, yerine gelecek içerikle aynı olması gerekir. Aksi halde içerik yüklendiğinde yine kayma yaşanır.
İskelet Ekranları Ne Zaman Kullanmalıyız?
- İskelet ekranlar genellikle CSR (client-side rendering) ile kurgulanmış altyapılarda kullanılır.
- Yükleme süresi uzun olan sayfalarda kullanılabilir.
- Aynı anda birden fazla öğe yüklenirken, ziyaretçiye bir bileşenin yüklendiğini bildirmek için kullanılabilir.
Burada dikkat edilmesi gereken bir nokta var: CSR ile içeriği yalnızca JavaScript üzerinden yüklenen sayfalarda, Google'ın içeriği görebilmesi için sayfayı render etmesi gerekir. Önemli içeriklerin ilk HTML'de bulunması SEO açısından her zaman daha güvenlidir.
Hemen çıkma oranı hakkındaki "Bounce Rate Nedir? Nasıl Düşürülür?" başlıklı yazımızı da buraya bırakalım.
Son Olarak…
Mobil ve masaüstü tarayıcıların sayfaları nasıl oluşturduğunu derinlemesine incelediğinizde, sayfadaki kaynak dosyalarla ilgili yaşanan darboğazları yakalayabilir ve bunları optimize edebilirsiniz. HTML, CSS, JavaScript veya dışarıdan çekilen kaynak dosyalarının daha performanslı çalışabilmesi için gerekli çalışmaları gerçekleştirmeniz gerekecek. Tüm bu analizleri PageSpeed Insights ve Google Chrome DevTools araçlarını kullanarak gerçekleştirebilirsiniz. Gerçek yüklenme hızını iyileştirdikten sonra, skeleton loading gibi küçük UX iyileştirmeleriyle algılanan hızı da artırabilirsiniz.
