Önemli istekleri önceden yükleyin

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

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

Lighthouse işaretleri, adayları nasıl belirler?

Sayfanızın kritik istek zincirinin aşağıdaki gibi göründüğünü varsayalım:

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

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

Olası tasarruflar, önceden yükleme bağlantıları beyan etmeniz durumunda tarayıcının istekleri ne kadar erken başlatabileceğine bağlıdır. Örneğin app.js hizmetinin indirilmesi, ayrıştırılması 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ı olmadan, 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 için yalnızca app.js indirildikten, ayrıştırıldıktan ve yürütüldükten sonra istenir.

Buradaki sorun, tarayıcının yalnızca app.js dosyasını indirdikten, ayrıştırıp çalıştırdıktan sonra bu son 2 kaynağı fark etmesidir. Ancak bu kaynakların önemli olduğunu ve bir an önce indirilmesi gerektiğini biliyorsunuz.

HTML'nizde önceden yükleme bağlantıları tanımlayarak tarayıcıya önemli kaynakları mümkün olan en kısa sürede indirme talimatı verin.

<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ında styles.css ve ui.js, app.js ile aynı anda istenir.

Daha fazla yardım için Yükleme hızını iyileştirmek için önemli öğeleri önceden yükleme konusuna da bakın.

Tarayıcı uyumluluğu

Haziran 2020 itibarıyla Chromium tabanlı tarayıcılarda önceden yükleme desteklenmektedir. Güncellemeler için Tarayıcı uyumluluğu bölümüne bakın.

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

Tooling.Report'un Öğeleri Önceden Yükleme sayfasına bakın.

Yığına özel rehberlik

Angular

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

Magento

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

Kaynaklar