Önemli istekleri önceden yükleyin

Lighthouse raporunuzun Fırsatlar bölümü , kritik istek zincirinizdeki üçüncü düzey istek düzeyini önceden yükleme adayları olarak işaretler:

Lighthouse Önceden Yükleme önemli istekleri denetiminin ekran görüntüsü

Lighthouse işaretleri önceden yükleme adaylarını nasıl belirler?

Sayfanızın kritik istek zinciri şöyle görünür:

index.html |--app.js |--styles.css |--ui.js

index.html dosyanızda <script src="app.js"> tanımlı. app.js çalıştığında şunu çağırır: styles.css ve ui.js alanlarını indirmek için fetch(). Sayfa tamamlanmış görünmüyor bu son 2 kaynak indirilene, ayrıştırılana ve yürütülene kadar. Yukarıdaki örneği kullanarak Lighthouse, styles.css ve ui.js öğelerini aday olarak işaretler.

Potansiyel tasarruflar, tarayıcının ne kadar erken bir ifadesini kullanın. Örneğin, app.js indirmesi, ayrıştırması ve yürütülmesi 200 ms sürüyorsa app.js artık isteklerin her biri için bir performans sorunu oluşturmadığından her kaynak için potansiyel tasarruf 200 ms'dir.

Önceden yükleme istekleri, sayfalarınızın daha hızlı yüklenmesini sağlayabilir.

Önceden yükleme bağlantıları kullanılmadığında, style.css ve ui.js yalnızca app.js indirildikten, ayrıştırıldıktan ve yürütüldükten sonra istenir.
Önceden yükleme bağlantıları olmadığında, styles.css ve ui.js yalnızca app.js indirildikten sonra istenir, ayrıştırılır ve yürütülür.

Buradaki sorun, tarayıcının yalnızca bu seferki app.js dosyasını indirdikten, ayrıştırdıktan ve yürüttükten sonra bu son 2 kaynağın Fakat bu kaynakların önemli ve en kısa sürede indirilmelidir.

HTML'nizde önceden yükleme bağlantıları tanımlayarak tarayıcıya önemli kaynakları indirme talimatı verin en kısa sürede değiştirmelisiniz.

<head>
  ...
  <link rel="preload" href="styles.css" as="style" />
  <link rel="preload" href="ui.js" as="script" />
  ...
</head>
.
Önceden yükleme bağlantıları kullanıldığında, style.css ve ui.js, app.js ile aynı anda istenir.
Önceden yükleme bağlantılarıyla, styles.css ve ui.js, app.js ile aynı anda istenir.

Yükleme hızını artırmak için önemli öğeleri önceden yükleme başlıklı makaleyi de inceleyin daha fazla bilgi için.

Tarayıcı uyumluluğu

Önceden yükleme, Haziran 2020'den itibaren Chromium tabanlı tarayıcılarda desteklenmektedir. Görüntüleyin Tarayıcı uyumluluğu başlıklı makaleye göz atın.

Önceden yükleme için araç desteği oluşturun

Tooling.report Öğelerini Önceden Yükleme başlıklı makaleye göz atın sayfasını ziyaret edin.

Gruba özel yönergeler

Angular

Navigasyonu hızlandırmak için rotaları önceden yükleyin.

Magento

Temalarınızın düzenini değiştirme ve <link rel=preload> etiket ekleyin.

Kaynaklar