Kritik İsteklerin Zincirlenmesinden Nasıl Kaçınılır?
Yayınlanan: 2023-08-03PageSpeed Insights testini her çalıştırdığınızda "Kritik istekleri zincirlemekten kaçının" uyarısını alıyor musunuz?
Pekala, bu bugün sona eriyor.
Bu kılavuzu okuduktan sonra, kritik istekler hakkında her şeyi, bunları zincirlemenin performansınızı nasıl etkilediğini ve en önemlisi "Kritik istekleri zincirlemekten kaçının" uyarısını nasıl düzelteceğinizi öğreneceksiniz.
- Kritik talep olarak kabul edilen nedir?
- "Kritik istekleri zincirlemekten kaçının" ne anlama geliyor?
- Zincirleme kritik istekler performansınızı nasıl etkiler?
- WordPress'te kritik istekleri zincirlemekten nasıl kaçınılır?
- Bonus: "Kritik istekleri zincirlemekten kaçının" sorununu düzeltmek için diğer en iyi uygulamalar
Okumaya devam etmek.
Kritik talep olarak kabul edilen nedir?
Kritik istek, bir web sayfasının ilk görünümünü oluşturmak için gerekli olan bir kaynaktır. Başka bir deyişle - ekranın üst kısmına yüklenen her şey.
Örneğin, NitroPack'in ana sayfasını yüklediğimde dizüstü bilgisayarımda gördüğüm şey:
Ekranın üst kısmındaki tüm öğeler kritik kabul edilir çünkü ne kadar hızlı yüklendiklerine bağlı olarak kullanıcı harika bir deneyim yaşayabilir veya hemen geri dönebilir.
Zincirleme Kritik İsteklerden Kaçının ne anlama geliyor?
Basitçe söylemek gerekirse, "Kritik istekleri zincirlemekten kaçının" uyarısı, sayfanızı oluşturmak için gereken kritik kaynakların çok büyük olduğu anlamına gelir.
Zincirleme kısmı açısından, kritik bir istek zinciri, birbirine bağlı olan ve sayfanın oluşturulması için gerekli olan bir dizi istektir. İsteklerin ayrıştırılma ve yürütülme sırası, Kritik Oluşturma Yolu (CRP) tarafından belirlenir.
Kritik İşleme Yolu, bir web tarayıcısının HTML, CSS ve JavaScript kodunu kullanıcının ekranında görsel bir temsile dönüştürmek için gerçekleştirdiği adımların sırasını ifade eder.
Tarayıcı kodu ayrıştırmaya başladığında, atanan önceliğe göre kritik istekleri işler:
Artık CRP'nin ne olduğunu ve tarayıcıların öncelikleri nasıl atadığını öğrendiğinize göre, "kritik istek zinciri" tanımına geri dönelim.
Birbirine bağlı bir dizi istek olduğundan , büyük, optimize edilmemiş kritik isteklerin yüklenmesi kaçınılmaz olarak daha uzun kritik zincirlerle sonuçlanarak sayfa yüklemenizi yavaşlatır.
Bu ifadeyi açıklamak için aşağıdaki örneğe bir göz atalım:
Aşağıdaki kaynakları içeren basit bir web sayfası düşünün:
- index.html – sayfanın yapısını tanımlayan ana HTML dosyası.
- styles.css – sayfanın görsel görünümünü ve düzenini tanımlar.
- main.js – web sayfasına etkileşim ve işlevsellik ekleyen betikler içerir.
- logo.png (Resim dosyası)
Her kaynağın uzun bir kritik istek zincirinin parçası olduğu bir durumu düşünün. Örneğin, HTML dosyasının birkaç CSS ve JavaScript dosyasına başvurduğunu ve bu dosyaların her birinin sırayla başka kaynaklara başvurarak bir bağımlılık zincirine yol açtığını hayal edin.
Böyle bir senaryoda, zincirdeki kaynaklardan herhangi birinin yüklenmesindeki gecikme, kritik yol gecikmesi ve sayfanızın genel performansı üzerinde kademeli bir etkiye sahip olacaktır.
Web performansından bahsetmişken, zincirleme kritik isteklerden en büyük darbeyi hangi metriklerin alacağını görelim…
Zincirleme kritik istekler performansınızı nasıl etkiler?
Zincir ne kadar uzunsa, tarayıcının içeriğinizi görüntülemek için gereken kaynakları oluşturması o kadar uzun sürer.
Web performans ölçütleri açısından bu, yetersiz First Contentful Paint (FCP) ve Largest Contentful Paint (LCP) anlamına gelir.
Başarısız İlk Contentful Paint (FCP)
FCP, tarayıcının bir sayfada DOM içeriğinin ilk parçasını (ör. resim, SVG, boş olmayan tuval öğesi) görselleştirmesinin ne kadar sürdüğünü ölçer.
Bu öğeler önemsiz görünebilir, ancak sitenizin kullanıcı deneyimi için çok önemlidir. Ziyaretçilerinize girdilerinin işlenmekte olduğunu ve sitenin yüklendiğini söylerler. Bir sayfa yüklenmeden önce birkaç saniye boş kalırsa, kullanıcılar bir şey olup olmadığını anlayamaz.
Tarayıcının DOM içeriğinin bu ilk parçasını mümkün olan en kısa sürede oluşturabilmesini garanti etmek için kritik istek zincirlerinin kısa ve hafif olması gerekir. Aksi takdirde, boş bir ekran ve başarısız FCP nedeniyle ziyaretçilerinizin siteden hemen çıkma şansı çokdaha YÜKSEK olacaktır.
Başarısız En Büyük İçerikli Boya (LCP)
LCP, ekranın üst kısmındaki en büyük öğenin bir sayfada yüklenmesinin ne kadar sürdüğünü ölçer.
Sitenizin yükleme süresini, görsel kararlılığını ve etkileşimini ölçen bir dizi kullanıcı merkezli ölçüm olan üç Önemli Web Verisinden (CWV) biridir. Bunlar aynı zamanda birGoogle sıralama faktörüdür .
Bu nedenle, uzun kritik istek zincirlerinin yüklenmesi nedeniyle düşük bir LCP puanına sahip olmak, yalnızca bazıperformans ölçütlerinde başarısız olduğunuz anlamına gelmez, aynı zamanda:
- CWV'yi geçme şansınızı azaltmak
- Sitenizin sıralamasına zarar vermek
- Kötü bir kullanıcı deneyimi sağlama
Tüm bunlardan kaçınmanın kesin yolu, kaynaklarınızın sayısını ve boyutunu optimize ederek kritik yolu kısaltmaktır.
Ve işte nasıl yapılacağı…
Kritik istekleri zincirlemekten nasıl kaçınılır (WordPress'te)
"Kritik istekleri zincirleme yapmaktan kaçının" düzeltmesi için tek bir gidilecek strateji varsa, bu, işlemeyi engelleyen kaynakları ortadan kaldırmak olacaktır.
İşleme engelleme kaynakları, tarayıcının bunlarla karşılaştığında, oluşturma dahil başka bir şey yapmadan önce bunları indirmesi, ayrıştırması ve yürütmesi gereken dosyalardır.
En yaygın olarak "işleme engelleme" olarak işaretlenen ana suçlular, optimize edilmemiş CSS ve JavaScript dosyalarıdır.
Aşağıdaki teknikler, her ikisini de başarılı bir şekilde halletmenize yardımcı olacaktır:
Kullanılmayan CSS'yi Kaldır
Kullanılmayan CSS terimi, geçerli sayfada kullanılmayan CSS kurallarını ifade eder.
Bu kurallar, dosyaları gereğinden fazla büyüterek kodunuzu şişirir ve uzun kritik istek zincirleri oluşturur. Sonuç olarak, dosyalarınızın ve sayfanızın yüklenmesi sonsuza kadar sürer.
Kodunuzda ince ayar yapmak konusunda rahatsanız, PurifyCSS gibi çevrimiçi bir araç kullanabilirsiniz.
Sayfanızın URL'sini girin ve araç gereksiz kodu otomatik olarak çıkarsın. Ardından, "saflaştırılmış" CSS'yi indirebilir ve sitenize yükleyebilirsiniz:
Önemli : Kodunuzu değiştirmek, sitenizin tasarımını ve işlevselliğini bozma riskini gizler.Daha önce teknoloji deneyiminiz yoksa, bir web geliştiricisiyle iletişime geçin veya bunu sizin için otomatik olarak yapacak bir eklenti yükleyin.
Bir düğmeyi tıklayarak kullanılmayan CSS'yi kaldırın. NitroPack'i kurun ve sitenizin otomatik olarak optimize edilmesini sağlayın →
JavaScript'i Ertele
JavaScript dosyalarının ertelenmesi, onları yalnızca gerektiğinde yüklemenize olanak tanır, böylece tarayıcı önce en kritik içeriği (ekranın üst kısmı) sunmaya odaklanabilir.
Zaman uyumsuzluğunu kullanarak JS dosyalarınızı tembel olarak yükleyebilirsiniz. veerteleme Öznitellikler.
- zaman uyumsuz
Eşzamansız yükleme, sayfanın HTML ayrıştırması ve oluşturulması devam ederken betiğin arka planda getirileceği anlamına gelir.
Komut dosyası indirildiğinde, HTML ayrıştırmasını duraklatır, komut dosyasını hemen yürütür ve ardından ayrıştırmaya devam eder. Sonuç olarak, async özniteliğine sahip komut dosyalarının yürütülme sırası, yüklemeyi farklı zamanlarda tamamlayabildikleri için tahmin edilemez olabilir.
Asyncözelliği, sayfanızın yüklenmesini ve oluşturulmasını engellemek istemediğiniz üçüncü taraf komut dosyaları için mükemmeldir.
- ertelemek
async gibi erteleme özniteliği de komut dosyasını eşzamansız olarak yükler, ancak yürütülme biçimine göre farklılık gösterir.
Erteleme özniteliğine sahip betikler, HTML ayrıştırması devam ederken arka planda indirilecek, ancak betiğin yürütülmesi, HTML ayrıştırması tamamlanana kadar ertelenecek. Ertelemeli komut dosyalarının yürütme sırası, HTML'de göründükleri sırayla korunur.
Komut dosyasının yürütme sırasını HTML'de göründüğü şekliyle korumak istediğinizdeertelemeözelliğini kullanın.
Kod sıkıştırma ve küçültme
Kritik istek zinciri optimizasyonunun başka bir katmanı, tarayıcının bunları daha hızlı indirmesine, ayrıştırmasına ve oluşturmasına yardımcı olacağından, kaynaklarınızın toplam boyutunu azaltmaktır.
Ve bunu yapmanın yolu, dosyalarınızı sıkıştırıp küçültmektir.
Sıkıştırma uygulamak, dosyalarınızın ikili kodunu yeniden yazar ve bilgileri orijinalinden daha az bit kullanarak kodlar.
En popüler sıkıştırma aracı gzip'tir. Gzipping, tekrarlayan dizeleri bularak ve bunları dizenin ilk örneğine işaretçilerle değiştirerek çalışır. Bunun yararı, işaretçilerin metinden daha az alan kullanmasıdır.
Minification ise yorumlar, satır sonları veya boşluklar gibi gereksiz kod öğelerini kaldırır:
Kaynak:KeyCDN
Kodunuzu kırparak, kritik isteklerinizi kısaltarak web sitenizin hızını artırabilirsiniz.
Kod boyutunu optimize etmenize yardımcı olabilecek tonlarca ücretsiz çevrimiçi araç vardır. Bunları kullanmak, kodunuzu girmenizi, ardından küçültülmüş/sıkıştırılmış sürümü kopyalayıp sitenize geri yapıştırmanızı gerektirir. İşte birkaç öneri:
- CSSNano
- Toptal JavaScript Minifier
- Kod Güzelleştirme
"Kritik istekleri zincirlemekten kaçının" düzeltmesine yönelik diğer en iyi uygulamalar
Yazı tipi altkümesi
Sitenizin CSS ve JavaScript kaynaklarıyla ilgilendikten sonra, optimizasyon için bir sonraki en iyi aday web yazı tiplerinizdir.
Çoğunlukla gözden kaçan web yazı tipleri, genellikle yüklenmesi biraz zaman alan ve hatta metnin işlenmesini engelleyebilen büyük dosyalardır.
Bundan kaçınmak için, tarayıcının bunları hemen yükleyebilmesi için boyutlarını küçültmeniz gerekir.
Yazı tipi alt kümesini girin.
Yazı tipi alt kümesi, boyutunu büyük ölçüde azaltmak için bir yazı tipinden kullanılmayan glifleri (karakterleri) kaldıran bir optimizasyon tekniğidir.
Örneğin, ana sayfanızın kaç tane benzersiz glif kullandığını düşünün. 100'den fazla olmadıklarına bahse gireriz.
Bunu bir perspektife oturtmak gerekirse, en çok kullanılan ikinci yazı tipi olan (tüm web sitelerinin %7'si tarafından kullanılan) Yazı Tipi Müthiş,26.107 karaktere sahiptir .
Kaynak:Web Almanak
Yalnızca belirli bir sayfa için kesinlikle gerekli olanı yükleyerek tarayıcıya ve ziyaretçilerinize ne kadar zaman kazandırabileceğinizi bir düşünün.
Yazı tipi alt kümesini uygulamanıza yardımcı olabilecek bazı çevrimiçi araçlar vardır. Yazı tipi dosyanızı yüklemeniz ve kaldırılmasını istediğiniz glifleri seçmeniz gerekecek. Ardından, sitenize geri dönün ve alt kümelenmiş dosyayı yükleyin.
Ayrıca, içeriğinizi her güncellediğinizde süreçten geçtiğinizden emin olmanız gerekir.
Önemli : Yazı tipi dosyalarınızı çevrimiçi araçlarla alt kümelemek, optimizasyondan sonra sayfanızdaki karakterlerin eksik olma riskini ortadan kaldırır. Daha önce yazı tipleriyle çalışmadıysanız, bir web performans uzmanıyla iletişime geçmenizi veya bunu sizin yerinize otomatik olarak yapacak bir eklenti kurmanızı şiddetle tavsiye ederiz.
Yazı tiplerinizi risksiz bir şekilde alt gruplara ayırın. NitroPack kurarak boyutlarını %70'e kadar azaltın →
Anahtar isteklerini önceden yükle
Kritik istekleri önceden yüklemek için link rel=preload özniteliğini kullanmak, FCP ve LCP'nizi iyileştirecek ve kritik yolu kısaltacak başka bir optimizasyon stratejisidir.
En kritik isteğinizi belirlemek için sitenizi PageSpeed Insights aracılığıyla çalıştırın ve "Ön yükleme anahtarı isteği" uyarısını kontrol edin:
Ardından, kodunuza gidin ve link rel=preload etiketini ilgili kaynağa ekleyin:
Tarayıcının önceden getirilen kaynağın önceliğini türüne göre ayarlayabilmesi ve önbellekte zaten var olup olmadığını belirleyebilmesi için as niteliğini eklemeyi unutmayın.
Ek kaynaklar: Değerlerin tam listesini kontrol edin.
NitroPack ile kritik istekleri zincirlemekten nasıl kaçınılır?
Doğru araçlara sahip değilseniz, kritik istek zincirlerinizi optimize etmek sıkıcı bir görev olabilir.
Bildiğiniz gibi, kodunuzda ince ayar yapmanın ters tepebileceği ve sitenizin işlevselliğini ve tasarımını bozabileceği birçok durum vardır.
Ancak tek bir PSI uyarısını düzeltmek bu kadar baş ağrısı olmamalı.
Ya da en azından NitroPack ile değil.
NitroPack, aşağıdakileri uygulayarak sitenizin performansını artıracak hepsi bir arada bir hız optimizasyon aracıdır:
- Kullanılmayan CSS'yi Kaldır
- JavaScript'i Ertele
- Yazı tipi altkümesi
Ve sizin için 32'den fazla diğer kanıtlanmış optimizasyon tekniği .
NitroPack ile sitenizin performansını artırmak için hiçbir kodlama veya önceki teknoloji deneyimi gerekmez.
Kulağa gerçek olamayacak kadar iyi mi geliyor?
NitroPack içeren ve içermeyen bir müşterimizin web sitesine bir göz atalım.
İşte NitroPack olmadan elde ettikleri sonuçlar:
Mobilde 41 performans puanı, 47 zincir ve 3.781 ms'lik kritik yol gecikmesi.
NitroPack olmadan
İşte NitroPack ile elde edilen sonuçlar:
95 Performans puanı, 1 zincir, 2 kattan fazla daha kısa kritik yol gecikmesi:
NitroPack ile
Bunu ve diğer bir dizi performans iyileştirmesini de deneyimleyebilirsiniz. NitroPack'i bugün kurun ve sitenizin yıldırım hızıyla ilgilenmesine izin verin.