Lighthouse'da "Kritik İstekleri Zincirleme Yapmaktan Kaçının" Sorununu Düzeltin.

İndirme önceliği nasıl belirlenir

Kritik istekler, ilk sayfa yüklemesi sırasında yüksek öncelikle indirilen kaynaklardır. Bu öncelik nasıl belirlenir?

İndirme önceliği tarayıcının kendisi tarafından belirlenir. Tarayıcı, her bir varlığın önceliğini belirlemek için bir dizi kural izler. Hangi öğelerin en yüksek önceliği alacağı sayfanın yapısına bağlıdır. Tarayıcınızın sayfanın ilk oluşturulması için gerekli gördüğü öğelere en yüksek öncelik verilir.

Tarayıcınız başlangıçta hangi öğelerin en önemli olduğuna dair bilinçli bir tahmin yapar. Genel olarak, indirme önceliği şöyle çalışır: HTML her zaman en yüksek önceliği alır, ardından Stil sayfaları, senkron JavaScript, Yazı tipleri, Ajax İstekleri, sayfanın üst kısmındaki görseller, sayfanın alt kısımlarındaki görseller ve ardından asenkron JavaScript'ler gelir.

Sayfanızda hangi kaynaklara yüksek öncelik verildiğini kendiniz görebilirsiniz. Geliştirici konsolunu Ctrl + Shift + J ile açın. Ağ sekmesine gidin, sütun adlarına sağ tıklayın ve 'Priority' seçeneğini seçin.

Kritik İstek Zinciri sayfa yükleme süresini nasıl etkiler?

Bir sayfayı yüklerken, tarayıcı 'görüntü engelleme' modunda başlar. Bu modda, en önemli kaynaklar yüksek öncelikle indirilir. Bunlar kritik kaynaklardır.

Bir tarayıcı, tüm kritik kaynaklar indirilene kadar sayfayı tam olarak oluşturmaya başlamaz. Bu nedenle herhangi bir kritik kaynak, bir sayfanın ilk oluşturulmasını engelleyebilir.

Bir sayfanın kritik kaynakları ne kadar az olursa, tarayıcının ilk içeriği ekrana getirmek için yapması gereken iş o kadar az olur ve CPU ile diğer kaynaklar için rekabet de o kadar azalır.

Lighthouse'da "Kritik İstekleri Zincirleme Yapmaktan Kaçının" nasıl düzeltilir?

Kritik isteklerin etkisini üç şekilde azaltabilirsiniz:

1. Kritik kaynak sayısını azaltın . Kritik kaynakları kaldırarak veya erteleyerek kritik olmayan kaynaklara dönüştürün.
2. Kritik bayt sayısını azaltın . Açıkça anlaşılabilir, ancak kritik yol kaynaklarının bayt sayısını azaltmak, kritik kaynakların daha hızlı indirilmesini sağlar. Örneğin gzip sıkıştırma, JavaScript tree shaking, görsel optimizasyonu veya yazı tipi alt kümeleme yoluyla.
3. Kritik yolun indirme sırasını iyileştirin . Kaynak keşfini atlamak ve kritik kaynakların mümkün olduğunca hızlı indirilmesini sağlamak için preloading gibi kaynak ipuçlarını kullanın.

Birçok seçenek vardır. Hangi seçeneğin en iyi olduğu kaynağın dosya türüne bağlıdır:

1. HTML

Aslında ziyaret ettiğiniz sayfa olan HTML, her zaman en yüksek öncelikle indirilir. Sayfanın kendisi her zaman kritik istek zincirinin bir parçasıdır. Bu nedenle, kritik istek zincirini optimize ederken düşünülmesi gereken ilk şey sayfanın kendisidir.

İçeriğin gecikmeli yüklenmesi: Google'ın kendisi de dahil olmak üzere birçok büyük site, kritik istek zincirini azaltmak için bu tekniği kullanır. Örneğin arama sonuçları sayfasında, hemen ihtiyaç duyulmayan içerik bölümleri daha sonra bir AJAX isteği aracılığıyla yüklenir.

Küçültme: Daha küçük her zaman daha hızlıdır, sayfadan yorumları, boşlukları ve boş satırları kaldırmak için html küçültme kullanın.

Sıkıştırma : Son olarak, stil sayfalarını Brotli veya GZIP sıkıştırma ile düzgün bir şekilde sıkıştırmak önemlidir.

2. Stil Sayfaları

Sayfanın başlık bölümündeki stil sayfaları her zaman kritiktir. Stiller olmadan, bir tarayıcı sayfanın nasıl görüneceğini bilemez. Bu nedenle stil sayfaları, Lighthouse'daki kritik istek zincirinin standart bir parçasıdır.

Critical CSS: Stil sayfaları, kaynak ipuçları aracılığıyla önceden yüklenerek ve önceden yükleme tamamlandıktan sonra stil sayfası olarak eklenerek basit bir hile ile kritik olmayan hale getirilebilir.
Sayfaya aşağıdaki kodu ekleyin: Tarayıcınız artık stil sayfasını daha düşük bir öncelikle indirecek ve CSS'yi oluşturmayı engellemeyen olarak değerlendirecektir. CSS'yi beklemeden oluşturmaya başlayacaktır.

<link rel="preload"
      href="css.css"
      type="text/css"
      as="style"
      onload="this.onload=null;this.rel='stylesheet';"/>

Şimdi sayfada garip bir şeyin gerçekleştiğini izleyin. Önce sayfa gösterilir ve ancak CSS yüklendikten sonra stil uygulanır. Tüm içerik, stilsiz içerikten stilli içeriğe doğru yanıp sönecektir. Bunu Critical CSS ile düzeltebiliriz.
Critical CSS, sayfanın görünür bölümü için ihtiyaç duyduğunuz tüm CSS kurallarının bir koleksiyonudur. Critical CSS'yi NodeJS aracılığıyla veya çeşitli çevrimiçi araçlar aracılığıyla kendiniz oluşturabilirsiniz. Bu Critical CSS'yi sayfanın başlık bölümüne yerleştirin ve CSS'nin geri kalanını daha düşük bir öncelikle yükleyin.

Medya sorguları : Yalnızca cihazınız için gereken stilleri yükleyin. Sayfanız genellikle mobilde ziyaret edilir. Bu nedenle aslında Masaüstü ve Yazdırma için stilleri indirmeniz gerekmez. Bu, zaman kazandırır ve böylece Lighthouse'daki kritik istek zincirini kısaltır.

Media özniteliğini kullanın. Media özniteliği, bir stilin yalnızca kullandığınız medya ile eşleşmesi durumunda indirilmesini sağlar.

<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet" media="screen and (min-device-width: 1024px)">

Küçültme: Kullanılmayan CSS'yi kaldırın. Birçok site, bootstrap gibi CSS kütüphaneleri kullanır. Bu kütüphaneler genellikle gereğinden fazla kapsamlıdır ve tüm stil tanımlamaları kullanılmaz.
Bu kütüphaneleri bir CSS ön işlemcisi (SASS gibi) aracılığıyla düzenlemek kolaydır. Kullanılmayan stil gruplarını, neyin dahil edilmesi gerektiğini değiştirerek kaldırarak onları çok daha küçük hale getirin. Bu ön işlemciler ayrıca tüm boşlukları ve yeni satırları kaldırarak CSS'nizi küçültme seçeneği de sunar.

Sıkıştırma : Son olarak, stil sayfalarını Brotli veya GZIP sıkıştırma ile düzgün bir şekilde sıkıştırmak önemlidir.

3. JavaScript

Sayfanın başlık bölümündeki JavaScript dosyaları varsayılan olarak yüksek öncelikle indirilir ve indirilirken ve çalıştırılırken sayfanın oluşturulmasını engeller. Bu nedenle JavaScript, kritik istek zincirinin standart bir parçasıdır.

Defer ve Async : JavaScript dosyalarının önceliğini async veya defer özniteliği aracılığıyla asenkron olarak yükleyerek ayarlayın. Asenkron betik dosyaları daha düşük bir öncelikle paralel olarak indirilir. Ertelenmiş JavaScript de paralel olarak yüklenir ve JavaScript dosyasının çalıştırılması ertelenir, böylece JavaScript çalıştırılması da sayfanın ilk yüklemesini engellemez.

// yükleme ve çalıştırmayı engeller
<script src="normalscript.js">
// async yükleme sırasında engellemez, ancak çalıştırma sırasında engeller
<script async src="asyncscript.js">
// defer hem yükleme hem de çalıştırma sırasında engellemez
<script defer src="deferscript.js">

Kod bölme ve önceden yükleme: Sayfa JavaScript'in asenkron olarak yüklenmesine izin vermiyorsa, JavaScript'i birden fazla dosyaya bölmek iyi bir fikir olabilir. Sayfa yüklemesi sırasında kritik olan JavaScript bölümünü küçük bir dosyaya yerleştirin ve bu dosyayı önceden yükleyin. Kritik olmayan JavaScript'i başka bir dosyaya yerleştirin ve ertelenmiş veya asenkron olarak yüklenmesini ve çalıştırılmasını sağlayın.

Küçültme : JavaScript bayt sayısını bir JavaScript Uglifier aracı ile iki şekilde azaltın. Bu, JavaScript'i analiz eden ve mümkün olduğunca küçük hale getiren akıllı bir araçtır.

Sıkıştırma : Ayrıca, JavaScript'i Gzip veya Brotli ile sıkıştırarak bayt sayısını azaltın.

4. Web Yazı Tipleri

Web yazı tipleri genellikle kritik istek zincirindeki son yüklenen dosyalardır. Bunun nedeni, web yazı tiplerinin keşfe bağlı olmasıdır. Yalnızca tarayıcı ihtiyaç duyulduğunu anladığında yüklenirler. Bunun için tarayıcının önce HTML'yi analiz etmesi ve stil sayfasında hangi yazı tipinin kullanıldığını araştırması gerekir.

Önceden yükleme : Bir yazı tipine güveneceğinizden emin olduğunuzda, bu yazı tipini önceden yüklemek genellikle daha hızlıdır. Yazı tipi böylece mümkün olan en erken zamanda indirilir ve kritik istek zinciri üzerindeki etkisini en aza indirir. Sayfanın başlık bölümüne mümkün olduğunca erken şu kodu ekleyerek bir yazı tipini önceden yükleyin:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Yazı tipi stratejisi : Ayrıca, yazı tiplerinin daha hızlı yüklenmesini sağlamanın birçok başka yolu vardır.

• Her zaman yerel web yazı tiplerine güvenin ve asla Google fonts gibi uzaktan barındırılan yazı tiplerini kullanmayın.
• Yazı tipini yazı tipi alt kümeleme ile yeniden boyutlandırın
• Kritik olmayan yazı tiplerini JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/API/FontFace">fontface arayüzü</a> aracılığıyla yükleyin
• Yazı tipinin ilk oluşturmayı engellemesini önlemek için display = swap kullanın
• Yazı tipi sentezi aracılığıyla tarayıcıların kendi yazı tipi varyantlarını oluşturmasına izin verin

Görseller

Sayfa yüklemesi sırasında görünür görüntü alanında görünen görsellere de yüksek öncelik verilebilir ve kritik yolu etkileyebilir. Bir görselin her zaman web sitesinin görünür bölümünde görüneceğinden eminseniz, bu görseli de önceden yüklemek faydalı olabilir.

<link rel="preload" as="image" href="important-image.webp">

Hemen görünmeyen tüm görseller için ihtiyatlı davranın ve bu görselleri tembel yükleyin. Görselin yüklemesini görünür hale gelmeden hemen öncesine kadar geciktirmek için loading = "lazy" kullanın.

<img loading="lazy" src="lazy-image.webp" width="20" height="20" alt="...">

5. AJAX İstekleri

Ajax isteklerine her zaman yüksek öncelik atanır. Bu nedenle, tercihen Ajax isteklerini sayfa oluşturmayı tamamlayana kadar erteleyin. Sayfanın "load" olayını gönderene kadar bekleyin.

AJAX isteğini ertelemek mümkün değilse, Ajax isteğini önceden yükleyerek tarayıcının kullanımına hazır hale getirebilirsiniz.

window.addEventListener('load', (event)=>{
  console.log('bu bir AJAX isteği için iyi bir zamandır');
});

6. iframe'ler

iframe'ler genellikle yüksek öncelikle indirilir. Bir iframe aslında sayfa içinde bir sayfa olduğundan, bir iframe sayfa yükleme sürelerinde çok önemli bir gecikmeye neden olabilir. iframe'in gerektirdiği kaynaklar da yüksek öncelikle indirilebilir ve kendi kritik istek zincirini oluşturabilir. Bu nedenle iframe kullanımı Lighthouse puanınızı önemli ölçüde etkileyebilir.

Bir iframe'in yüklemesini loading = "lazy" özniteliği aracılığıyla geciktirebilirsiniz. Bu, iframe yükleme sırasında hemen görünmediğinde genellikle fark yaratır. iframe'i JavaScript aracılığıyla sayfaya enjekte etmek genellikle daha hızlıdır. Bu, zamanlama üzerinde daha fazla kontrol sağlar ve kritik istek zincirine dahil olmamasını garanti eder.