Kritik oluşturma yolu, web sayfası tarayıcıda oluşturulmaya başlayana kadar uygulanan adımları ifade eder. Tarayıcıların sayfaları oluşturması için HTML dokümanın yanı sıra bu dokümanın oluşturulması için gerekli tüm kritik kaynaklara ihtiyacı vardır.
HTML dokümanının tarayıcıya getirilmesi, önceki Genel HTML performansı ile ilgili dikkat edilmesi gereken noktalar modülünde ele alınmıştı. Ancak bu modülde, sayfayı oluşturmak için HTML belgesini indirdikten sonra tarayıcının ne yaptığına daha çok odaklanacağız.
Aşamalı oluşturma
Web, doğası gereği dağıtılmıştır. Kullanımdan önce yüklenen doğal uygulamaların aksine tarayıcılar, sayfayı oluşturmak için gerekli tüm kaynaklara sahip web sitelerine güvenemez. Bu nedenle tarayıcılar, sayfaları kademeli olarak oluşturma konusunda çok başarılıdır. Yerel uygulamalarda genellikle bir yükleme aşaması ve ardından bir çalıştırma aşaması bulunur. Ancak web sayfaları ve web uygulamaları için bu iki aşama arasındaki çizgiler çok daha belirsizdir ve tarayıcılar bu durum göz önünde bulundurularak özel olarak tasarlanmıştır.
Tarayıcı, bir sayfayı oluşturmak için gereken kaynaklara sahip olduğunda genellikle oluşturmaya başlar. Bu nedenle, oluşturma işleminin ne zaman yapılacağıyla ilgili bir seçim yapmanız gerekir: Ne zaman çok erken olur?
Tarayıcı, yalnızca HTML'si olduğunda (ancak CSS veya gerekli JavaScript'i olmadan) en kısa sürede oluşturma işlemini başlatırsa sayfa kısa bir süre için bozuk görünür ve nihai oluşturma işleminde önemli ölçüde değişir. Bu, tarayıcı daha iyi bir kullanıcı deneyimi sunan ilk oluşturma işlemi için gereken bu kaynaklara sahip olana kadar başlangıçta bir süre boyunca boş ekran göstermekten daha kötü bir deneyimdir.
Öte yandan, tarayıcı sıralı oluşturma yerine tüm kaynakların kullanılabilir olmasını beklerse kullanıcı uzun süre beklemek zorunda kalır. Sayfa çok daha önce kullanılabilir durumdaysa bu bekleme genellikle gereksizdir.
Tarayıcı, açıkça bozuk bir deneyim sunmamak için beklemesi gereken minimum kaynak sayısını bilmesi gerekir. Öte yandan, tarayıcı da kullanıcıya içerik sunmadan önce gereğinden uzun süre beklememelidir. Tarayıcının bu ilk oluşturma işlemini gerçekleştirmeden önce uyguladığı adım sırası kritik oluşturma yolu olarak bilinir.
Kritik oluşturma yolunu anlamak, ilk sayfa oluşturma işlemini gereğinden fazla engellemediğinizden emin olarak web performansını artırmanıza yardımcı olabilir. Bununla birlikte, ilk oluşturma işlemi için gerekli kaynakları kritik oluşturma yolundan 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'ni (CSSOM) oluşturma.
- DOM veya CSSOM'u değiştiren JavaScript'lerin uygulanması.
- 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.
- Öğelerin piksellerini bellekte boyayın.
- Örtüşen pikseller varsa bunları birleştirin.
- Elde edilen tüm pikselleri fiziksel olarak ekrana çizin.
Kullanıcı, ekranda içerik görmeden önce tüm bu adımları tamamlamalıdır.
Bu oluşturma işlemi birden çok kez gerçekleşir. İlk oluşturma işlemi bu süreci tetikler ancak sayfanın oluşturulmasını etkileyen daha fazla kaynak kullanılabilir hale geldikçe tarayıcı, kullanıcının gördüğü içeriği 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 ana hatlarıyla belirtilen işleme odaklanır ve bunun için gerekli 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.
Buradaki önemli nokta, tarayıcının HTML'yi akış şeklinde işlemesidir. Tarayıcı, bir sayfanın HTML'sinin herhangi bir bölümünü alır almaz sayfayı işlemeye başlar. Tarayıcı daha sonra, sayfanın HTML'sinin geri kalanını almadan çok önce bu öğeyi oluşturmaya karar verebilir (ve genellikle verir).
Önemli bir nokta, tarayıcının ilk oluşturma işlemi için genellikle şunları beklememesidir:
- Tüm HTML.
- Yazı tipleri.
- Resimler.
<head>öğesinin dışındaki, oluşturmayı engellemeyen JavaScript (örneğin, HTML'nin sonuna yerleştirilen<script>öğeleri).<head>öğesinin dışındaki oluşturmayı engellemeyen CSS veya mevcut görüntü alanı için geçerli olmayan birmediaözelliği değerine sahip CSS.
Yazı tipleri ve resimler, tarayıcı tarafından genellikle sonraki sayfa yeniden oluşturma işlemleri sırasında doldurulacak içerik olarak kabul edilir. Bu nedenle, ilk oluşturma işlemini bekletmeleri gerekmez. Ancak bu, metin yazı tiplerini beklerken veya resimler hazır olana kadar gizliyken ilk oluşturma işleminde boş alan alanları bırakılabileceği anlamına da gelebilir. Daha da kötüsü, belirli içerik türleri için yeterli alan ayrılmadığında (özellikle de resim boyutları HTML'de sağlanmadığında) bu içerik daha sonra yüklendiğinde sayfanın düzeni değişebilir. Kullanıcı deneyiminin bu yönü, Cumulative Layout Shift (CLS) metriği ile ölçülür.
<head> öğesi, kritik oluşturma yolunun işlenmesi için önemlidir. Bu nedenle, bir sonraki bölümde bu konu ayrıntılı olarak ele alınacaktır. <head>
öğesinin içeriğini optimize etmek, web performansının önemli bir parçasıdır. Ancak şimdilik kritik oluşturma yolunu anlamak için <head> öğesinin sayfa ve kaynaklarıyla ilgili meta veriler içerdiğini, ancak kullanıcının görebileceği gerçek içerik içermediğini bilmeniz yeterlidir. Görünen içerik, <head> öğesini izleyen <body> öğesinde yer alır. Tarayıcı herhangi bir içeriği oluşturmadan önce hem oluşturulacak içeriğe hem de içeriğin nasıl oluşturulacağıyla ilgili meta verilere ihtiyaç duyar.
Ancak <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 gerekli olan kaynakları bekler. Kritik oluşturma yolunda hangi kaynakların bulunduğunu belirlemek için oluşturmayı ve ayrıştırıcıyı engelleyen CSS ve JavaScript'i anlamanız gerekir.
Oluşturma engelleyici kaynaklar
Bazı kaynaklar o kadar kritik kabul edilir ki tarayıcı, bu kaynaklarla 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 referanslı bir kaynak) gördüğünde, bu CSS'yi indirip işleyene kadar başka içerik oluşturmaz.
Bir kaynağın oluşturmayı engellemesi, tarayıcının başka bir şey yapmasını engellediği anlamına gelmez. Tarayıcılar mümkün olduğunca verimli olmaya çalışır. Bu nedenle, bir tarayıcı bir CSS kaynağının indirilmesi gerektiğini gördüğünde kaynağı ister ve oluşturma işlemini duraklatır. Ancak HTML'nin geri kalanını işlemeye devam eder ve bu sırada yapılacak başka bir iş olup olmadığını kontrol eder.
CSS gibi oluşturma engelleyici kaynaklar, bulunduklarında sayfanın tüm oluşturma işlemini engellerdi. Bu, bazı CSS'lerin oluşturmayı engelleyip engellemediğinin tarayıcı tarafından keşfedilip keşfedilmediğine bağlı olduğu anlamına gelir. Bazı tarayıcılar (ilk başta Firefox, artık Chrome da) yalnızca oluşturmayı engelleyen kaynağın altındaki içeriğin oluşturulmasını engeller. Bu, kritik oluşturma engelleme yolu için genellikle sayfanın tamamının oluşturulmasını etkili bir şekilde engelledikleri için <head> içindeki oluşturma engelleyen kaynaklarla ilgilendiğimiz anlamına gelir.
Chrome 105'e eklenen blocking=render özelliği daha yeni bir yeniliktir. Bu sayede geliştiriciler, bir <link>, <script> veya <style> öğesini işlenene kadar açıkça oluşturmayı engelleyen olarak işaretleyebilir ancak bu sırada ayrıştırıcının dokümanı işlemeye devam etmesine izin verebilir.
Ayrıştırıcıyı engelleyen kaynaklar
Ayıklama aracını engelleyen kaynaklar, HTML'yi ayrıştırmaya devam ederek tarayıcının başka iş aramasını engelleyen kaynaklardır. JavaScript, yürütüldüğünde DOM veya CSSOM'u değiştirebileceğinden varsayılan olarak ayrıştırıcıyı engeller (özel olarak eşzamanlı veya ertelenen olarak işaretlenmediği sürece). Bu nedenle, istenen JavaScript'in 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. Bu nedenle senkronize JavaScript, ayrıştırıcıyı engeller.
Ayrıştırıcıyı engelleyen kaynaklar da etkili bir şekilde oluşturmayı engeller. Ayrıştırıcı, tam olarak işlenene kadar ayrıştırmayı engelleyen bir kaynağın ötesine geçemediğinden, bu kaynaktan sonraki içeriğe erişip içeriği oluşturamaz. Tarayıcı, beklerken şimdiye kadar aldığı tüm HTML'leri oluşturabilir ancak kritik oluşturma yolu söz konusu olduğunda <head> içindeki tüm ayrıştırıcıyı engelleyen kaynaklar, 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 performans maliyeti getirebilir. Bu nedenle tarayıcılar, birincil HTML ayrıştırıcısı engellenirken gelecekteki kaynakları indirmek için önceden yükleme tarayıcı olarak bilinen ikincil bir HTML ayrıştırıcı 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. Bu da gelecekte tekrar engellenmesinin olasılığını azaltır.
Engelleyici kaynakları belirleme
Birçok performans denetimi aracı, oluşturma ve ayrıştırıcıyı engelleyen kaynakları tanımlar. WebPageTest, oluşturma engelleyici kaynakları kaynağın URL'sinin solunda turuncu bir daireyle işaretler:
Oluşturma işleminin başlaması için oluşturmayı engelleyen tüm kaynakların indirilip işlenmesi gerekir. Bu durum şelaledeki koyu yeşil katı çizgiyle gösterilir.
Lighthouse, oluşturmayı engelleyen kaynakları da vurgular ancak bunu daha belirsiz bir şekilde yapar ve yalnızca kaynak sayfa oluşturmayı gerçekten geciktiriyorsa vurgular. Bu, oluşturmayı engellemeyi en aza indirdiğiniz durumlarda yanlış pozitifleri önlemek için yararlı olabilir. Lighthouse üzerinden önceki WebPageTest figürüyle aynı sayfa URL'sini çalıştırdığınızda, stil sayfalarından yalnızca biri oluşturmayı engelleyen kaynak olarak tanımlanır.
Kritik oluşturma yolunu optimize etme
Kritik oluşturma yolunu optimize etmek, önceki modülde ayrıntılı olarak açıklandığı gibi HTML'yi alma süresini (ilk bayta geçiş süresi (TTFB) metriği ile gösterilir) ve oluşturmayı engelleyen kaynakların etkisini azaltmayı içerir. Bu kavramlar sonraki modüllerde incelenmektedir.
Kritik içerikli oluşturma yolu
Kritik oluşturma yolu uzun süredir ilk oluşturma işlemiyle ilgileniyordu. Ancak web performansı için daha fazla kullanıcı odaklı metrik ortaya çıktı. Bu metrikler, kritik oluşturma yolunun bitiş noktasının ilk boyama mı yoksa daha sonra gelen daha zengin içerikli boyamalardan biri mi olması gerektiği konusunda bazı soruları gündeme getiriyor.
Alternatif bir bakış açısıyla, zengin içerikli oluşturma yolunun (veya başkalarının dediği gibi anahtar yolunun) bir parçası olarak Largest Contentful Paint (LCP)'ye (veya hatta First Contentful Paint (FCP)'ye) kadar geçen süreye odaklanabilirsiniz. Bu durumda, kritik oluşturma yolunun tipik tanımı olduğu gibi, mutlaka engellemeyen ancak içerikli boya oluşturmak için gerekli olan kaynakları eklemeniz gerekebilir.
"Kritik" olarak tanımladığınız şeyin tam tanımınızdan bağımsız olarak, ilk oluşturma işlemini ve önemli içeriğinizi neyin geciktirdiğini anlamak önemlidir. İlk boyama, kullanıcı için herhangi bir şeyi oluşturma olasılığı olan ilk fırsatı ölçer. İdeal olarak bu, anlamlı bir şey olmalıdır (ör. arka plan rengi gibi bir şey değil). Ancak içerik içermese bile kullanıcıya bir şey sunmanın değeri vardır. Bu da kritik oluşturma yolunu geleneksel olarak tanımlandığı şekilde ölçmek için bir argüman oluşturur. Aynı zamanda, ana içeriğin kullanıcıya ne zaman sunulduğunu ölçmenin de değeri vardır.
İçerik barındıran oluşturma yolunu belirleme
Birçok araç, LCP öğelerini ve ne zaman oluşturulduklarını tanımlayabilir. Lighthouse, LCP öğesine ek olarak LCP aşamalarını ve her bir aşamada harcanan süreyi belirlemenize yardımcı olarak optimizasyon çalışmalarınızı nereye odaklamanız gerektiğini anlamanıza yardımcı olur:
Daha karmaşık siteler için Lighthouse, ayrı bir denetimde kritik istek zincirlerini de vurgular:
Bu Lighthouse denetimi, yüksek öncelikli olarak yüklenen tüm kaynakları gözlemlediğinden, aslında oluşturmayı engellemese bile Chrome'un yüksek öncelikli kaynak olarak belirlediği web yazı tiplerini ve diğer içerikleri içerir.
Bilginizi test etme
Kritik oluşturma yolu neyi ifade eder?
Kritik oluşturma yolunda hangi kaynaklar yer alır?
<head> öğesinde oluşturmayı engelleyen CSS.<head> öğesinde oluşturmayı engelleyen JavaScript.Oluşturma işlemini engelleme, sayfa oluşturmanın neden gerekli bir parçasıdır?
JavaScript, HTML ayrıştırıcıyı neden engeller (defer, async veya module özelliklerinin bir <script> öğesinde belirtilmediği varsayılır)?
<script>, ayrıştırıcıyı ve oluşturmayı engeller.Sonraki konu: Kaynak yüklemeyi optimize etme
Bu modülde, tarayıcının bir web sayfasını oluşturma işleminin teorisinin bir kısmı ve özellikle bir sayfanın ilk oluşturma işleminin tamamlanması için gerekenler ele alındı. Sonraki modülde, kaynak yüklemenin nasıl optimize edileceği öğrenilerek bu oluşturma yolunun nasıl optimize edilebileceği ele alınmaktadır.