Kritik oluşturma yolu, web sayfasının tarayıcıda oluşturulmaya başlanması için gereken adımları belirtir. Tarayıcıların sayfaları oluşturmak için HTML belgesinin kendisine ve bu belgeyi oluşturmak için gereken tüm kritik kaynaklara ihtiyacı vardır.
HTML dokümanının tarayıcıya aktarılması, önceki HTML performansıyla ilgili dikkat edilmesi gereken noktalar modülü kapsamında yer alıyordu. Ancak bu modülde, tarayıcının sayfayı oluşturmak için HTML dokümanını indirdikten sonra ne yaptığına daha fazla bakacağız.
Progresif oluşturma
Web, doğası gereği dağıtılır. Kullanımdan önce yüklenen yerel uygulamaların aksine, tarayıcılar sayfayı oluşturmak için gerekli tüm kaynaklara sahip web sitelerine bağlı olamaz. Bu nedenle, tarayıcılar sayfaları aşamalı olarak oluşturmada çok başarılıdır. Yerel uygulamaların genellikle bir yükleme aşaması, ardından da bir çalıştırma aşaması vardır. Ancak web sayfaları ve web uygulamaları için bu iki aşama arasındaki çizgiler çok daha az ayırt edilir ve tarayıcılar özel olarak bu göz önünde bulundurularak tasarlanmıştır.
Tarayıcının bir sayfayı oluşturacak kaynakları olduğunda, genellikle bunu yapmaya başlar. Bu nedenle, oluşturma işleminin ne zaman yapılacağına karar verilir: Ne zaman çok erken?
Tarayıcı, sadece bir miktar HTML içerdiğinde, ancak CSS'ye veya gerekli JavaScript'e sahip olmadan mümkün olan en kısa sürede oluşturulursa, sayfa anında bozuk görünür ve son oluşturma işleminde önemli ölçüde değişir. Bu durum, başlangıçta boş ekran göstermekten daha kötü bir deneyimdir. Bu durum, tarayıcının daha iyi bir kullanıcı deneyimi sunan ilk oluşturma işlemi için gereken kaynaklardan daha fazlasını elde etmesini sağlar.
Diğer yandan, tarayıcı sıralı oluşturma yapmak yerine tüm kaynakların kullanılabilir olmasını beklerse kullanıcı uzun bir süre bekler. Bu da genellikle sayfa çok daha erken bir noktada kullanılabilir olduğunda gereksizdir.
Tarayıcının, açıkça bozuk bir deneyim sunmamak için beklemesi gereken minimum kaynak sayısını bilmesi gerekir. Diğer yandan, tarayıcı kullanıcıya içerik sunmadan önce gerekenden daha uzun süre beklememelidir. Tarayıcının ilk oluşturma işlemini gerçekleştirmeden önce attığı adımlar dizisi, kritik oluşturma yolu olarak bilinir.
Kritik oluşturma yolunu anlamak, ilk sayfanın oluşturulmasını gereğinden fazla engellememenizi sağlayarak web performansını artırmanıza yardımcı olabilir. Bununla birlikte, kritik oluşturma yolundan ilk oluşturma için gerekli kaynakları kaldırarak oluşturmanın çok erken gerçekleşmesine izin vermemek de önemlidir.
(kritik) oluşturma yolu
Oluşturma yolu aşağıdaki adımları içerir:
- HTML'den Belge Nesne Modeli (DOM) oluşturma.
- CSS'den CSS Nesne Modeli (CSSOM) oluşturma.
- DOM veya CSSOM'yi değiştiren herhangi bir JavaScript uygulama.
- DOM ve CSSOM'den oluşturma ağacı oluşturma.
- Hangi öğelerin nereye sığdığını görmek için sayfada stil ve düzen işlemleri gerçekleştirin.
- Bellekteki öğelerin piksellerini boyayın.
- Çakışan pikseller varsa bunları birleştirin.
- Ortaya çıkan tüm pikselleri fiziksel olarak ekrana çizin.
Kullanıcı, ancak tüm bu adımlar tamamlandıktan sonra ekranda içerik görür.
Bu oluşturma işlemi birkaç kez gerçekleşir. İlk oluşturma bu işlemi çağırır ancak sayfanın oluşturulmasını etkileyen daha fazla kaynak kullanılabilir hale geldikçe, tarayıcı kullanıcının gördüklerini güncellemek için bu işlemi (veya yalnızca bazı bölümlerini) yeniden çalıştırır. Kritik oluşturma yolu, ilk oluşturma için daha önce açıklanan sürece odaklanır ve bu işlem için gereken kritik kaynaklara bağlıdır.
Kritik oluşturma yolunda hangi kaynaklar bulunur?
Tarayıcının, ilk oluşturma işlemini tamamlayabilmesi için bazı kritik kaynakların indirilmesini beklemesi gerekir. Şu kaynaklara göz atabilirsiniz:
- HTML'nin bir parçasıdır.
<head>öğesinde oluşturmayı engelleyen CSS.<head>öğesinde oluşturmayı engelleyen JavaScript.
Önemli noktalardan biri, tarayıcının HTML'yi akış şeklinde işlemesidir. Tarayıcı, bir sayfanın HTML'sinin herhangi bir kısmını alır almaz bunu işlemeye başlar. Böylece tarayıcı, bir sayfanın geri kalan HTML'sini almadan önce sayfayı iyice oluşturmaya karar verir (ve genellikle de yapar).
Daha da önemlisi, ilk oluşturma işlemi için tarayıcı genellikle aşağıdakileri beklemez:
- HTML'nin tamamı.
- Yazı tipleri.
- Resimler.
- Oluşturmayı engellemeyen,
<head>öğesinin dışındaki JavaScript (örneğin, HTML'nin sonuna yerleştirilmiş<script>öğeleri). <head>öğesinin dışındaki, oluşturma işlemini engellemeyen CSS veya geçerli görüntü alanı için geçerli olmayan birmediaözellik değerine sahip CSS.
Yazı tipleri ve resimler genellikle sonraki sayfa yeniden oluşturma işlemleri sırasında doldurulacak içerik olarak tarayıcı tarafından değerlendirilir. Bu nedenle, ilk oluşturma işlemini bekletmeleri gerekmez. Ancak bu durum, yazı tiplerinde beklerken veya görseller kullanıma sunulana kadar metin gizlenirken ilk oluşturma işleminde boş alan bırakılabileceği anlamına gelebilir. Daha da kötüsü, belirli içerik türleri için yeterli alan ayrılmadığında (özellikle de HTML'de resim boyutları sağlanmadığında), bu içerik daha sonra yüklendiğinde sayfanın düzeni kayabilir. Kullanıcı deneyiminin bu yönü, Cumulative Layout Shift (CLS) metriğiyle ölçülür.
<head> öğesi, kritik oluşturma yolunun işlenmesinde kilit rol oynar. Öyle ki sonraki bölümde bu konuyu ayrıntılı olarak ele alacağız. <head> öğesinin içeriğini optimize etmek, web performansının temel unsurlarından biridir. Bununla birlikte, kritik oluşturma yolunu şimdilik anlamak için yalnızca <head> öğesinin sayfa ve kaynaklarıyla ilgili meta veriler içerdiğini, ancak kullanıcının görebileceği gerçek içerik olmadığını bilmeniz gerekir. Görünür içerik, <head> öğesinden sonra gelen <body> öğesinde bulunur. Tarayıcının herhangi bir içeriği oluşturabilmesi için öncelikle oluşturulacak içeriğin hem de nasıl oluşturulacağıyla ilgili meta verilere ihtiyacı vardır.
Bununla birlikte, <head> öğesinde başvurulan tüm kaynaklar ilk sayfa oluşturma işlemi için kesinlikle gerekli değildir. Bu nedenle tarayıcı yalnızca bunları bekler. Kritik oluşturma yolunda hangi kaynakların olduğunu belirlemek için oluşturma engelleme ve ayrıştırıcı engelleyici CSS ve JavaScript'i anlamanız gerekir.
Oluşturmayı engelleyen kaynaklar
Bazı kaynaklar çok önemli olduğundan, tarayıcı bunlarla ilgilenene kadar sayfa oluşturmayı duraklatır. CSS varsayılan olarak bu kategoriye girer.
Bir tarayıcı, CSS'yi (<style> öğesindeki satır içi CSS veya <link rel=stylesheet href="..."> öğesi tarafından belirtilen, harici olarak başvuruda bulunulan bir kaynak) gördüğünde, CSS'yi indirip işlemeyi tamamlayana kadar daha fazla içerik oluşturmaktan kaçınır.
Bir kaynağın oluşturmayı engellemesi, tarayıcının başka bir şey yapmasını da durdurduğu anlamına gelmez. Tarayıcılar mümkün olduğunca verimli olmaya çalışır. Bu nedenle, bir tarayıcı bir CSS kaynağını indirmesi gerektiğini gördüğünde, bu kaynağı ister ve oluşturmayı duraklatır, ancak HTML'nin geri kalanını işlemeye devam eder ve bu sırada yapılacak başka işler aramaya devam eder.
CSS gibi oluşturma engelleyici kaynaklar, keşfedildiklerinde sayfanın tüm oluşturulmasını engellemek için kullanılır. Diğer bir deyişle, bazı CSS'lerin oluşturmayı engelleyip engellemediği, tarayıcının bu CSS'yi bulup bulmadığına bağlıdır. Bazı tarayıcılar (başlangıçta ve şimdi aynı zamanda Chrome) yalnızca oluşturmayı engelleyen kaynağın altındaki içeriklerin oluşturulmasını engeller. Bu da, oluşturma engelleme yolunda kritik olan <head> konumundaki oluşturma engelleyici kaynaklara ihtiyaç duyduğumuz anlamına gelir. Çünkü bu kaynaklar sayfanın tamamının oluşturulmasını etkili bir şekilde engellemiştir.
Chrome 105'e eklenen blocking=render özelliği de diğer yeniliklerden biridir. Bu, geliştiricilerin bir <link>, <script> veya <style> öğesini, öğe işlenene kadar oluşturma engelleyici olarak açık bir şekilde işaretlemelerine olanak tanır. Ancak bu sırada ayrıştırıcının dokümanı işlemeye devam etmesine izin verilir.
Ayrıştırıcı engelleme kaynakları
Ayrıştırıcı engelleyici kaynaklar, tarayıcının HTML'yi ayrıştırmaya devam ederek yapılacak başka işler aramasını engelleyen kaynaklardır. JavaScript, yürütüldüğünde DOM veya CSSOM'yi değiştirebildiğinden, JavaScript varsayılan olarak ayrıştırıcı engelleme özelliğine sahiptir (özellikle eşzamansız veya ertelenmiş olarak işaretlenmediği sürece). Bu nedenle, istenen JavaScript'in bir sayfanın HTML'si üzerindeki tam etkisini öğrenene kadar tarayıcının diğer kaynakları işlemeye devam etmesi mümkün değildir. Dolayısıyla eşzamanlı JavaScript, ayrıştırıcıyı engeller.
Ayrıştırıcı engelleyici kaynaklar da etkili bir şekilde oluşturmayı engeller. Ayrıştırıcı, tamamen işlenene kadar ayrıştırmayı engelleyen bir kaynağı geçirmeye devam edemeyeceği için içeriğe erişemez ve bundan sonra içerik oluşturamaz. Tarayıcı, beklerken o ana kadar alınan tüm HTML'leri oluşturabilir. Ancak kritik oluşturma yolu söz konusu olduğunda <head> içindeki ayrıştırıcı engelleme kaynakları, etkin bir şekilde tüm sayfa içeriğinin oluşturulmasının engellendiği anlamına gelir.
Ayrıştırıcıyı engellemek, oluşturmayı engellemekten çok daha fazla şekilde büyük bir performans maliyetine neden olabilir. Bu nedenle tarayıcılar, birincil HTML ayrıştırıcısı engellenirken gelecek kaynakları indirmek için ön yükleme tarayıcısı olarak bilinen ikincil bir HTML ayrıştırıcıyı kullanarak bu maliyeti azaltmaya çalışır. HTML'yi ayrıştırmak kadar iyi olmasa da, en azından tarayıcıdaki ağ işlevlerinin engellenen ayrıştırıcıdan önce çalışmasına olanak tanır. Böylece, ileride yeniden engellenme olasılığı daha düşüktür.
Engelleyen kaynakları belirleme
Birçok performans denetleme aracı, oluşturma ve ayrıştırıcı engelleme kaynaklarını tanımlar. WebPageTest, oluşturma engelleyici kaynakları kaynak URL'sinin sol tarafında turuncu bir daireyle işaretler:
Oluşturmayı engelleyen tüm kaynakların, işleme başlamadan önce indirilmesi ve işlenmesi gerekir. Bu indirme, şelalede düz koyu yeşil çizgiyle belirtilir.
Lighthouse, oluşturmayı engelleyen kaynakları da daha ince bir şekilde ve yalnızca kaynağın sayfa oluşturmayı geciktirdiği durumlarda vurgular. Bu, oluşturma engelleyiciyi başka bir şekilde en aza indirecekseniz yanlış pozitiflerden kaçınmanızda yardımcı olabilir. Önceki WebPageTest rakamıyla aynı sayfa URL'sinin Lighthouse üzerinden çalıştırılması, stil sayfalarından yalnızca birini oluşturma engelleme kaynağı olarak tanımlar.
Kritik oluşturma yolunu optimize etme
Kritik oluşturma yolunun optimize edilmesi, önceki modülde ayrıntılı olarak açıklandığı gibi HTML'yi (İlk Bayt Süresi (TTFB) metriğiyle temsil edilir) alma süresini azaltmayı ve oluşturmayı engelleyen kaynakların etkisini azaltmayı içerir. Bu kavramlar sonraki modüllerde incelenecektir.
Kritik zengin içerikli oluşturma yolu
Kritik oluşturma yolu uzun zamandır ilk oluşturma işlemiyle ilgilenmektedir. Bununla birlikte, web performansı için daha fazla kullanıcı odaklı metrik ortaya çıkmıştır. Bu metrikler, kritik oluşturma yolunun son noktasının ilk boyama mı yoksa daha sonra gelen daha zengin içerikli boyamalardan biri mi olması gerektiği konusunda bazı sorgulamalara sahiptir.
Alternatif bir yöntem de bunun yerine, kapsamlı bir oluşturma yolunun (veya diğer kişilerin belirttiği anahtar yolun) bir parçası olarak Largest Contentful Paint (LCP) veya hatta First Contentful Paint (FCP) kodlu alana kadar geçen süreye odaklanmaktır. Bu durumda, kritik oluşturma yolunun tipik tanımı olduğu gibi engel teşkil etmeyen ancak zengin içerikli boyamalar oluşturmak için gerekli olan kaynakları eklemeniz gerekebilir.
Neyi "kritik" olarak tanımladığınıza dair kesin bir tanım ne olursa olsun, herhangi bir ilk oluşturma işlemini ve temel içeriğinizi nelerin beklediğini anlamak önemlidir. İlk boyama, kullanıcı için herhangi bir şeyi oluşturma fırsatını ilk kez ölçer. İdeal olarak bu, anlamlı bir şey olmalıdır. Örneğin, arka plan rengi gibi bir şey değil. Ancak içerik barındırmasa bile kullanıcıya bir şey sunmak yine de değerlidir. Bu, geleneksel olarak tanımlanan kritik oluşturma yolunu ölçmenin bir argümanıdır. Aynı zamanda, ana içeriğin kullanıcıya ne zaman sunulduğunu ölçmek de önemlidir.
İçerikli oluşturma yolunu belirleme
Birçok araç, LCP öğelerini ve ne zaman oluşturulduklarını tanımlayabilir. LCP öğesine ek olarak Lighthouse, optimizasyon çalışmalarınızı en iyi şekilde nereye yoğunlaştırmanız gerektiğini anlamanıza yardımcı olmak için LCP aşamalarını ve her bir aşamada harcanan süreyi de tanımlamaya yardımcı olur:
Daha karmaşık siteler için Lighthouse kritik istek zincirlerini de ayrı bir denetimde vurgular:
Bu Lighthouse denetimi, yüksek öncelikli yüklenen tüm kaynakları gözlemler. Bu nedenle, gerçekte oluşturmayı engellemese bile Chrome'un yüksek öncelikli kaynak olarak ayarladığı web yazı tiplerini ve diğer içerikleri içerir.
Bilginizi test etme
Kritik oluşturma yolu ne anlama gelir?
Kritik oluşturma yolunda hangi kaynaklar yer alır?
<head> öğesinde oluşturmayı engelleyen CSS.<head> öğesinde oluşturmayı engelleyen JavaScript.Oluşturma engelleme, sayfa oluşturmanın gerekli bir parçasının neden engelleniyor?
JavaScript neden HTML ayrıştırıcıyı engeller (defer, async veya module özelliklerinin bir <script> öğesinde belirtilmediği varsayılırsa)?
<script>, ayrıştırıcı ve oluşturmayı engeller.Sıradaki: Kaynak yüklemeyi optimize etme
Bu modülde, tarayıcının bir web sayfasını nasıl oluşturduğuyla ilgili teoriden bazıları, özellikle de bir sayfanın ilk oluşturma işlemini tamamlamak için gerekenler ele alınmıştır. Bir sonraki modülde, kaynak yüklemeyi optimize etmeyi öğrenerek bu oluşturma yolunun nasıl optimize edilebileceği ele alınmaktadır.