İçindekiler
Critical Rendering Path yani Kritik Oluşturma Yolu, sitenin açıldığı birinci andan itibaren büsbütün yüklenmesi sürecinde sitenin kaynak belgelerini, görsellerini ziyaretçinin görebileceği hale getirdiği süreçler dizisidir. Sitenin çok daha süratli açılması, ziyaretçilerin bu bilgilere çok daha süratli ulaşabilmesi için Critical Rendering Path sürecindeki adımların iyileştilmesi gereklidir.
Critical rendering path siteye gelen ziyaretçinin görmek istediği içeriği yahut bilgiyi çok daha süratli ve öncelikli olarak görmesine yardımcı olan site suratı metriklerinden biridir. Bu hususumuzda Critical Rendering Path’in ne olduğu, hangi etaplara ve bu basamakların nasıl optimize edileceği üzerinde ayrıntılı bir inceleme yaptık, buyurun gelin birlikte inceleyelim. Kritik oluşturma yolunun nasıl optimize edileceğine evvel bu kavramın nasıl ortaya çıktığı, neden optimize edilmeye gereksinim duyulduğu, tarayıcıların bir internet sitesini render ederken nelere odaklandıklarına bakalım. Ardından bu süreçleri optimize edeceğimiz adımları daima birlikte irdeleyelim.
Critical Rendering Path Nedir?
Bir tarayıcı (browser), web sitesini oluşturmaya web sitesinden aldığı HTML isteğiyle başlar. Sunucu öncelikle HTTP başlıklarını ve yanıtlarını döndürür, daha sonra HTML okumaya, 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 tarz sayfaları (CSS) komut belgeleri, JavasScript (JS) yahut embeded görseller üzere harici kaynakları keşfetttiğinde farklı bir istek başlatır. Bu durum HTML’in geri kalanının ayrıştırılmasını durdurur. Tarayıcı, başka süreçleri bitirene kadar ve CSS Obje Modeli (CSSOM) oluşturana kadar HTML isteklerini işlemeye ve DOM oluşturmaya devam eder. DOM ve CSSROM tamamlandıktan sonra tarayıcı, sayfa üzerinde görünür tüm içeriğin tarzlarını hesaplayarak bir render tree oluşturur. Render tree tamamlandıktan sonra ise öğelerin pozisyonu ve boyutunu tanımlayan bir layout oluşturur. Bu süreçte tamamlandığında ise ekranda boyalı alan olarak nitelendirdiğimiz sayfalar oluşur.
Bu durum sayfa suratınızın olumsuz etkilenmesine neden olur. Doğal ki kimse sitesine gelen ziyaretçiye saniyelerce beyaz ekran göstermek istemez. Kritik (Critical) kısmı, site içerisinde en değerli, en çok kullanılan kodları söz etmektedir. Oluşturma (Rendering) kısmı, tarayıcının web sitesindeki kaynak kodlarını oluşturup kullanıcıya manalı bilgileri göstermeyi söz eder. Kritik ve Oluşturma kısmını birleştirdiğimizde aslında, kritik kodların oluşturulması manası çıkmaktadır. Path ise internet sayfasının bir kullanıcıya gösterilmesindeki durumu tabir eder. Tüm bunların bütününde ise kritik kodların oluşturulmasında meydana gelen olaylar bütününü tabir edebiliriz. Kritik oluşturma yolu, Evrak Obje Modeli (DOM), CSS Obje Modeli (CSSOM), oluşturma ağacı (render tree) ve sistemi (layout) (yukarıda biraz bahsettiğimiz) içerdiğinden pek alışılmış bu yapıyı gerçek anlayabilmek, hayatımıza sokabilmek için DOM, CSSOM, Render Tree ve Layout üzere kavramları tanımamız gerekmektedir.
Document Object Model (Belge Obje Modeli)
DOM, türkçe karşılığı evrak obje modeli, her bir internet sayfasının dinamik olarak oluşturulmasını sağlayan arayüzdür. Ayrıştırılmış durumda olan 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 lisanından bağımsız bir arayüz olarak nitelendirebiliriz. Kök öğeden, <html> etiketinden başlayarak her bir etiket için başka farklı düğümler (node) oluşturur. Öbür öğelerin altında yerleştirilmiş öğeler ise alt düğüm olarak nitelendirilir. Her bir düğüm, ana öğenin özelliklerini taşımaktadır. Bu noktada düğüm sayısı ne kadar çok olursa kritik oluşturma yolu o kadar uzar ve performans maliyeti o kadar artar. Pak, itinayla yazılmış HTML kodları, HTML’yi ayrıştırması 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 Insight aracının verdiği “Aşırı büyük bir DOM boyutundan kaçının” uyarısı aslında büsbütün DOM ile alakalıdır. İlgili Insight aracı, istek atılan web sayfasında bulunan düğümlerin çok fazla olduğunu ve bunun azaltılması ile alakalı brief vermektedir.
CSS Object Model
CSSROM Türkçe sözüyle CSS obje modeli, DOM yapısına çok misal, DOM ağacıyla irtibatlı mevcut olan tarzlarla ilgilenir. CSS tarzını dinamik olarak okumasına ve değiştirmesine yardımcı olur. CSSOM, sayfadaki rastgele bir objeye ilişkin tarz kümesini hesaplarken, tarayıcı o düğün için geçerli olan kuralla sürece başlar. Örneğin, bir ana öğe ilişkin tarzlar tüm alt öğelere de uygulanır. Bu sebeple CSSOM’un bir ağaç yapısına gereksinim vardır.
Örnek CSSOM Tree:
Body etiketine font boyutu 16px olarak tanımlandığı için başka tüm etiketlere birebir font boyutu tanımlandığını üstteki CSSOM ağacında görebilirsiniz.
Render Tree (Oluşturma Ağacı)
Render Tree yani Oluşturma Ağacı olarak nitelendirdiğimiz bu kavram, DOM ve CSSOM’un birleşimidir. DOM ve CSSOM süreçleri tamamlandığında web sayfası üzerinde görünür içeriklerin hesaplamalarını gerçekleştirdiği alandır.
Layout (Düzen)
Düzen yani layout, kullanıcının sayfada göreceği öğelerin pozisyonunu ve boyutlarını ayarlar. Objelerin nerede, nasıl, hangi boyutta olacağını belirler. Bunu yaparken DOM, CSSOM ve Render Tree tarafında yapılan süreçlerden faydalanır. Bu sayede artık yerleşim mümkün hale gelir.
<meta name="viewport" content="width=device-width">
Yukarıdaki kod kullanılmadığı takdirde taşınabilir aygıtlarda boyutlandırmalarda meseleler yaşanabilir. Bu sebeple, gerekli meta-etiketlerin kullanılması epeyce kıymetlidir. Tertip, aygıta nazaran, aygıt ekranında yapılan her bir süreçte tarayıcıyı tekrar boyutlandırıldığında gerçekleşir. Sistem (layout) performansı da DOM’a bağlı bir formda performans maliyetini önemli tesirler. Düğün sayısı ne kadar çoksa tertip sürecini o kadar geç bitirir. Bu tarafta darboğazlar yaşanabilir ve site içerisinde scrolling yahut animiasyonlar sırasında sıkışmaya da neden olabilir. Kritik oluşturma yolunu optimize etmek, time to first render yani birinci işlemeye kadar geçen süreyi güzelleştirir, boyalı alanların ve akışların saniyede altmış kare suratında gerçekleşmesine, yüksek kullanıcı tecrübesine, etkileşimine ve sunucu performansını artırmak için hayli değerlidir.
Painting (Boyama)
Kritik oluşturma yolunda son adım artık ekranın boyanma sürecidir. Boyama müddeti, oluşturma ağacına ne cins güncellemelerin uygulandığına nazaran değişim gösterebilir. Boyama müddeti, çoklukla çok daha süratli tamamlandığından ötürü pek odaklanılmıyor olsa da bir animasyon karesinin ne kadar sürebileceğini ölçümlemek kritik oluşturma yolunun optimize edilmesi tarafında değerli bir detay diyebiliriz. Her bir düğüme uygulanan tarz süreçleri boyama mühletini pek doğal artıracaktır. Lakin burada yapılan boyama süreci çok çok düşük bir mühleti ise ve bunun üzerinde efor harcanıyorsa harcanan eforun karşılığı sağlıklı bir biçimde alınmayabilir. Bu sebeple ölçümleme yapmadan bu tarafta bir aksiyon almak çok yararlı olmayacaktır.
Kritik Oluşturma Yolu Nasıl Optimize Edilir?
Kritik oluşturma yolunun görselleştirmiş hali:
Tarayıcı bir karşılık aldığında, HTML evrakını ayrıştırmaya (parsing) başlar. HTML kodları içerisinde karşılaştığı bir bağımlılık varsa (CSS, JS, Görsel vs.) ilgili belgeyi indirmeye çalışır. Şayet bu bir tarz belgesiyse tarayıcı sayfayı oluşturmadan evvel belgeyi büsbütün ayrıştırması gerekir. Bu süreci yapmadığı durumuna ise render-blocking yani “Oluşturmayı engelleyen kaynaklar” ismi veriliyor.
-
Öncelikli yüklenecek kaynakların belirlenmesi
Hangi kaynakların evvel yükleneceği konusunda emin kararlar vermek, yüklenme sırasını denetim etmek ve bu kaynakların evrak boyutlarını azaltmayı başarmak sayfa yükleme suratına doğrudurdan yarar sağlayacaktır. Örneğin internet sayfasınında birinci olarak <head> kodları ortasında critical css kodlarına yer vermek sayfanın CSSOM, render tree ve boyama mühletlerine yardımcı olacaktır.
-
Kritik olmayan kaynakların indirilmesinin ertelenmesi
Sitenizde yüklenmesinin çok kıymetli olmadığı, kritik olmayan kaynakları erteleyerek critical rendering pathi optimize edebilirsiniz. JS evrakları için “defer”, “async” kodları kullanılabilir. Bu şekil belgeleri </body> kodundan çabucak evvel çağırabilirsiniz.
-
İstek sayılarının azaltılması
Sitenize gelen istek sayılarının azaltılması site performansını optimize edecektir. Siteniz içerisinde bulunan gereksiz, kullanılmayan (üçüncü partiler buna dahil) belgelerin, URL’lerin kaldırılması gerekir. Örneğin CSS & JS belgelerinizi birleştirerek ederek istek sayısını azaltabilirsiniz.
-
Görsellerin optimize edilmesi
Site içerisinde bulunan görsellerin optimize edilmesi sadece web sitesi boyutunu azaltmıyor, kritik oluşturma yolundaki süreçleri de hızlandırıyor. Bu sebeple görsellerin makul düzeyde optimize edilmesi site suratına epey yararlı olacaktır.
Son Olarak…
Mobil ve masaüstü tarayıcılarının sayfaları nasıl oluşturduğu mevzularını derinlemesine incelediğiniz vakit sayfa içerisinde kaynak belgelerle alakalı yaşanan darboğazları yakalayabilecek ve bunları optimize edebileceksiniz. HTML, CSS, Javascript yahut dışarıdan çekilen kaynak evraklarının daha performanslı çalışabilmesi için gerekli çalışmaları gerçekleştirmeniz gerekecek. Tüm bu tahlilleri, Pagespeed Insight, Google Chrome DevTools araçlarını kullanarak gerçekleştirebilirsiniz.
HTTP durum kodlarını manalarını biliyor musun? Çabucak tıklayarak HTTP durum kodlarıyla alakalı kıymetli bilgilere ulaşabilirsin.
