Codelab: Yükleme hızını iyileştirmek için önemli öğeleri önceden yükleme

Bu codelab'de, birkaç kaynak önceden yüklenmiş ve önceden getirilmiş olarak ayarlanarak aşağıdaki web sayfasının performansı artırılmıştır:

Uygulama Ekran Görüntüsü

Ölçüm

Optimizasyon eklemeden önce web sitesinin nasıl performans gösterdiğini ölçün.

  • Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a tam ekran basın.

Glitch'inizin canlı sürümünde Lighthouse performans denetimini (Lighthouse > Seçenekler > Performans) çalıştırın (Lighthouse ile performans fırsatlarını keşfetme başlıklı makaleyi de inceleyin).

Lighthouse, geç getirilen bir kaynak için aşağıdaki başarısız denetimi gösterir:

Lighthouse: Anahtar isteklerini önceden yükleme denetimi
  • Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
  • sekmesini tıklayın.
Geç keşfedilen kaynağı içeren ağ paneli

main.css dosyası, HTML belgesine yerleştirilen bir Bağlantı öğesi (<link>) tarafından değil, fetch-css.js adlı ayrı bir JavaScript dosyası tarafından getirilir. Bu dosya, window.onLoad etkinliğinden sonra Bağlantı öğesini DOM'a ekler. Bu, dosyanın yalnızca tarayıcı JS dosyasını ayrıştırıp yürütmeyi bitirdikten sonra getirildiği anlamına gelir. Benzer şekilde, main.css içinde belirtilen bir web yazı tipi (K2D.woff2) yalnızca CSS dosyasının indirilmesi tamamlandıktan sonra getirilir.

Kritik istek zinciri, tarayıcı tarafından öncelik verilen ve getirilen kaynakların sırasını temsil eder. Bu web sayfası şu anda aşağıdaki gibi görünüyor:

├─┬ / (initial HTML file)
  └── fetch-css.js
    └── main.css
      └── K2D.woff2

CSS dosyası istek zincirinin üçüncü düzeyinde olduğundan Lighthouse, dosyayı geç keşfedilen bir kaynak olarak tanımladı.

Kritik kaynakları önceden yükleme

main.css dosyası, sayfa yüklendikten hemen sonra ihtiyaç duyulan kritik bir öğedir. Uygulamanızda geç getirilen bu kaynak gibi önemli dosyalar için, belgenin başına bir Bağlantı öğesi ekleyerek tarayıcıyı daha erken indirmesi için bilgilendirmek üzere bağlantı ön yükleme etiketi kullanın.

Bu uygulama için ön yükleme etiketi ekleyin:

<head>
  <!-- ... -->
  <link rel="preload" href="main.css" as="style">
</head>

as özelliği, hangi tür kaynağın getirildiğini belirlemek için kullanılır ve as="style", stil sayfası dosyalarını önceden yüklemek için kullanılır.

Uygulamayı yeniden yükleyin ve DevTools'daki paneline göz atın.

Önceden yüklenmiş kaynağa sahip ağ paneli

Tarayıcının, CSS dosyasını getirmeden sorumlu JavaScript'in ayrıştırma işlemini tamamlamadan önce CSS dosyasını nasıl getirdiğini fark edin. Önceden yükleme özelliği sayesinde tarayıcı, web sayfası için kritik olduğu varsayılarak kaynak için önceden getirme işlemi yapacağını bilir.

Doğru şekilde kullanılmazsa ön yükleme, kullanılmayan kaynaklar için gereksiz istekler göndererek performansa zarar verebilir. Bu uygulamada details.css, projenin kökünde bulunan ancak ayrı bir /details route için kullanılan başka bir CSS dosyasıdır. Ön yüklemenin yanlış şekilde nasıl kullanılabileceğine dair bir örnek göstermek için bu kaynak için de bir ön yükleme ipucu ekleyin.

<head>
  <!-- ... -->
  <link rel="preload" href="main.css" as="style">
  <link rel="preload" href="details.css" as="style">
</head>

Uygulamayı yeniden yükleyin ve paneline göz atın. Web sayfası tarafından kullanılmamasına rağmen details.css öğesinin alınması için istek gönderilir.

Gereksiz ön yükleme içeren ağ paneli

Chrome, önceden yüklenmiş bir kaynak yüklendikten sonraki birkaç saniye içinde sayfa tarafından kullanılmadığında Konsol panelinde bir uyarı görüntüler.

Konsolda ön yükleme uyarısı

Bu uyarıyı, web sayfanız tarafından hemen kullanılmayan önceden yüklenmiş kaynaklarınız olup olmadığını belirlemek için bir gösterge olarak kullanın. Artık bu sayfa için gereksiz ön yükleme bağlantısını kaldırabilirsiniz.

<head>
  <!-- ... -->
  <link rel="preload" href="main.css" as="style">
  <link rel="preload" href="details.css" as="style">
</head>

Getirilebilecek tüm kaynak türlerinin listesini ve as özelliği için kullanılması gereken doğru değerleri Ön yüklemeyle ilgili MDN makalesinde bulabilirsiniz.

Gelecekteki kaynakları önceden getirme

Önceden getirme, farklı bir gezinme rotası için kullanılan bir öğe için istek göndermek amacıyla kullanılabilecek başka bir tarayıcı ipucudur ancak mevcut sayfa için gereken diğer önemli öğelere kıyasla daha düşük bir önceliğe sahiptir.

Bu web sitesinde resmi tıkladığınızda ayrı bir details/ rotaya yönlendirilirsiniz.

Rota ayrıntıları

Bu basit sayfa için gereken tüm stiller ayrı bir CSS dosyasında (details.css) bulunur. Bu kaynağı önceden almak için index.html öğesine bir bağlantı öğesi ekleyin.

<head>
  <!-- ... -->
  <link rel="prefetch" href="details.css">
</head>

Bunun dosyaya yönelik bir isteği nasıl tetiklediğini anlamak için DevTools'ta panelini açın ve Önbelleği devre dışı bırak seçeneğinin işaretini kaldırın.

Chrome Geliştirici Araçları&#39;nda önbelleği devre dışı bırakma

Uygulamayı yeniden yükleyin ve diğer tüm dosyalar getirildikten sonra details.css için çok düşük öncelikli bir istek gönderildiğini fark edin.

Önceden getirilmiş kaynağı içeren ağ paneli

Geliştirici Araçları açıkken web sitesindeki resmi tıklayarak details sayfasına gidin. details.css öğesini almak için details.html öğesinde bir bağlantı öğesi kullanıldığı için kaynak için beklendiği gibi bir istek gönderilir.

Ayrıntılar sayfasındaki ağ istekleri

Ayrıntılarını görüntülemek için DevTools'ta details.css ağ isteğini tıklayın. Dosyanın, tarayıcının disk önbelleğinden alındığını fark edersiniz.

Disk önbelleğinden alınan ayrıntı isteği

Ön getirme, tarayıcı boş zamanlarından yararlanarak farklı bir sayfa için gereken bir kaynak için erken istek gönderir. Bu, tarayıcının öğeyi daha erken önbelleğe almasına ve gerektiğinde önbellekten yayınlamasına olanak tanıyarak gelecekteki gezinme isteklerini hızlandırır.

Webpack ile önceden yükleme ve önceden getirme

Kod bölmeyle JavaScript yüklerini azaltma başlıklı makalede, bir paketi birden fazla parçaya bölmek için dinamik içe aktarma işlemlerinin kullanımı incelenmektedir. Bu, bir form gönderildiğinde Lodash'tan dinamik olarak modül içe aktaran basit bir uygulamayla gösterilmektedir.

Kod bölme işlemini gösteren Magic Sorter uygulaması

Bu uygulamayla ilgili Glitch'e buradan erişebilirsiniz.

src/index.js, içinde bulunan aşağıdaki kod bloğu, düğme tıklandığında yöntemin dinamik olarak içe aktarılmasından sorumludur.

form.addEventListener("submit", e => {
  e.preventDefault()
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Paketi bölmek, ilk boyutunu azaltarak sayfa yüklenme sürelerini iyileştirir. Webpack'in 4.6.0 sürümü, dinamik olarak içe aktarılan parçaların önceden yüklenmesi veya önceden önlenmesi için destek sağlar. Bu uygulamayı örnek olarak kullanarak lodash yöntemi, tarayıcı boştayken önceden getirilebilir. Böylece kullanıcı düğmeye bastığında kaynağın getirilmesi için gecikme yaşanmaz.

Belirli bir parçayı önceden almak için dinamik içe aktarma işleminde belirli webpackPrefetch yorum parametresini kullanın. Bu uygulamada bu durum aşağıdaki gibi görünür.

form.addEventListener("submit", e => {
  e.preventDefault()
  import(/* webpackPrefetch: true */ 'lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Uygulama yeniden yüklendikten sonra webpack, kaynağın önceden getirme etiketini dokümanın başına ekler. Bu durumu DevTools'daki Nesneler panelinde görebilirsiniz.

Önceden getirme etiketi içeren öğeler paneli

panelindeki istekleri gözlemlediğimizde de bu paketin diğer tüm kaynaklar istendikten sonra düşük öncelikli olarak getirildiğini görürüz.

Önceden getirilmiş isteği içeren ağ paneli

Bu kullanım alanı için ön yükleme daha mantıklı olsa da webpack, dinamik olarak içe aktarılan parçaların önceden yüklenmesi için de destek sağlar.

import(/* webpackPreload: true */ 'module')

Sonuç

Bu kod laboratuvarını tamamladığınızda, belirli öğeleri önceden yüklemenin veya önceden önbelleğe almanın sitenizin kullanıcı deneyimini nasıl iyileştirebileceğini net bir şekilde anlayacaksınız. Bu tekniklerin her kaynak için kullanılmaması gerektiğini ve yanlış kullanılmasının performansa zarar verebileceğini belirtmek önemlidir. En iyi sonuçlar, yalnızca seçici bir şekilde ön yükleme veya ön besleme yapılarak elde edilir.

Özetlemek gerekirse:

  • Geç keşfedilen ancak mevcut sayfa için kritik olan kaynaklar için önceden yükleme özelliğini kullanın.
  • Gelecekteki bir gezinme rotası veya kullanıcı işlemi için gereken kaynaklar için önceden getirme özelliğini kullanın.

Şu anda tüm tarayıcılar hem ön yüklemeyi hem de ön ön yüklemeyi desteklemez. Bu nedenle, uygulamanızın tüm kullanıcıları performans iyileştirmelerini fark etmeyebilir.

Önceden yükleme ve ön ön yüklemenin web sayfanızı nasıl etkileyebileceğiyle ilgili belirli yönler hakkında daha fazla bilgi edinmek istiyorsanız şu makalelere göz atın: