Bu codelab'de, birkaç kaynak önceden yüklenmiş ve önceden getirilmiş olduğundan aşağıdaki web sayfasının performansı artırılmıştır:
Ö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
basın.
Glitch'inizin canlı sürümünde Lighthouse performans denetimini (Lighthouse > Seçenekler > Performans) çalıştırın (ayrıca bkz. Lighthouse ile performans fırsatlarını keşfetme).
Lighthouse, geç getirilen bir kaynak için aşağıdaki başarısız denetimi gösterir:
- Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Ağ sekmesini tıklayın.
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ükleyin
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 Ağ paneline göz atın.
Tarayıcının, CSS dosyasını getirmekten sorumlu JavaScript, ayrıştırma bile bitmeden CSS dosyasını nasıl getirdiğine dikkat 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 dizininde bulunan başka bir CSS dosyasıdır ancak ayrı bir /details route için kullanılı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 Ağ paneline göz atın.
Web sayfası tarafından kullanılmamasına rağmen details.css öğesini almak için istek yapılır.
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.
Bu uyarıyı, web sayfanız tarafından hemen kullanılmayan ve önceden yüklenmiş kaynaklarınız olup olmadığını belirlemek için gösterge olarak kullanın. Artık bu sayfa için gereksiz olan önceden 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 öncelikli bir istek gönderir.
Bu web sitesinde resmi tıkladığınızda ayrı bir details/
rotaya yönlendirilirsiniz.
Bu basit sayfa için gereken tüm stiller ayrı bir CSS dosyasında (details.css) yer alır. Bu kaynağı önceden getirmek için index.html hizmetine 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 Geliştirici Araçları'nda Ağ panelini açın ve Önbelleği devre dışı bırak seçeneğinin işaretini kaldırın.
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.
Geliştirici Araçları açıkken web sitesindeki görseli tıklayarak details sayfasına gidin.
details.css öğesini getirmek için details.html öğesinde bir bağlantı öğesi kullanıldığından kaynak için beklendiği gibi bir istek yapılır.
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.
Tarayıcının boşta kalma süresinden yararlanan önceden getirme, farklı bir sayfa için gereken kaynak için erken istek yapar. 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.
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öntemi dinamik olarak içe aktarmaktan 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 getirilmesiyle ilgili 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, dokümanın başına kaynak için bir önceden getirme etiketi ekler. Bu durumu DevTools'daki Nesneler panelinde görebilirsiniz.
Ağ panelindeki istekleri gözlemlediğimizde de bu parçanın diğer tüm kaynaklar istendikten sonra düşük öncelikli olarak getirildiğini görürüz.
Bu kullanım alanı için önceden getirme daha mantıklı olsa da web paketi, dinamik olarak içe aktarılan parçaları önceden yükleme için de destek sağlar.
import(/* webpackPreload: true */ 'module')
Sonuç
Bu codelab'den yararlanarak belirli öğeleri önceden yüklemenin veya önceden getirmenin sitenizdeki kullanıcı deneyimini nasıl iyileştirebileceğini iyice anlamış olmalısı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 prefetching 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: