Bu codelab'de, birkaç kaynak önceden yüklenerek ve önceden getirilerek aşağıdaki web sayfasının performansı artırılıyor:
Ölçüm
Optimizasyon eklemeden önce web sitesinin performansını ölçün.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından Tam Ekran'a basın.
Glitch'inizin canlı sürümünde Lighthouse performans denetimini çalıştırın (Lighthouse > Seçenekler > Performans) (Ayrıca Lighthouse ile performans fırsatlarını keşfedin başlıklı makaleye de bakın).
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+Shift+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 getirilmez. Bunun yerine, ayrı bir JavaScript dosyası olan fetch-css.js, window.onLoad etkinliğinden sonra bağlantı öğesini DOM'a ekler. Bu, dosyanın yalnızca tarayıcı JS dosyasını ayrıştırmayı ve 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ı indirildikten sonra getirilir.
Kritik istek zinciri, tarayıcı tarafından öncelik verilen ve getirilen kaynakların sırasını gösterir. Bu web sayfası için şu anda şu şekilde görünüyor:
├─┬ / (initial HTML file)
└── fetch-css.js
└── main.css
└── K2D.woff2
CSS dosyası istek zincirinin üçüncü düzeyinde olduğundan Lighthouse, bu dosyayı geç keşfedilen bir kaynak olarak tanımladı.
Kritik kaynakları önceden yükleme
main.css dosyası, sayfa yüklendiği anda hemen ihtiyaç duyulan kritik bir öğedir. Uygulamanızda geç getirilen bu kaynak gibi önemli dosyalar için, dokümanın başına bir bağlantı öğesi ekleyerek tarayıcıyı daha erken indirmesi konusunda bilgilendirmek üzere bir bağlantı önceden yükleme etiketi kullanın.
Bu uygulama için önceden yükleme etiketi ekleyin:
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
</head>
as özelliği, hangi kaynak türünün getirildiğini belirlemek için kullanılır. as="style" ise stil sayfası dosyalarını önceden yüklemek için kullanılır.
Uygulamayı yeniden yükleyin ve Geliştirici Araçları'ndaki Ağ paneline göz atın.
Tarayıcının, CSS dosyasını getirmekten sorumlu JavaScript'in ayrıştırılması tamamlanmadan önce nasıl getirdiğine dikkat edin. Önceden yükleme sayesinde tarayıcı, web sayfası için kritik olduğu varsayımıyla kaynağı önceden getirmesi gerektiğini bilir.
Önceden yükleme doğru şekilde kullanılmazsa kullanılmayan kaynaklar için gereksiz istekler göndererek performansa zarar verebilir. Bu uygulamada details.css, projenin kök dizininde bulunan ancak ayrı bir /details route için kullanılan başka bir CSS dosyasıdır. Önceden yüklemenin nasıl yanlış kullanılabileceğine dair bir örnek göstermek için bu kaynak için de bir
önceden 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 gönderiliyor.
Chrome, önceden yüklenen bir kaynak yüklendikten sonraki birkaç saniye içinde sayfa tarafından kullanılmadığında Konsol panelinde uyarı gösterir.
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 ö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>
as özelliği için kullanılması gereken doğru değerlerle birlikte getirilebilecek tüm kaynak türlerinin listesi için MDN'nin Önceden Yükleme ile ilgili makalesine bakın.
Gelecekteki kaynakları önceden getirme
Önceden getirme, farklı bir gezinme rotası için kullanılan ancak mevcut sayfa için gereken diğer önemli öğelerden daha düşük önceliğe sahip bir öğe isteğinde bulunmak için kullanılabilen başka bir tarayıcı ipucudur.
Bu web sitesinde, resmi tıkladığınızda ayrı bir details/
rotaya yönlendirilirsiniz.
Ayrı bir CSS dosyası olan details.css, bu basit sayfa için gereken tüm stilleri içerir. Bu kaynağı önceden getirmek için index.html öğesine bir bağlantı öğesi ekleyin.
<head>
<!-- ... -->
<link rel="prefetch" href="details.css">
</head>
Bunun dosyayla ilgili 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 nasıl çok düşük öncelikli bir istekte bulunulduğunu görün.
Geliştirici Araçları açıkken web sitesindeki resmi tıklayarak details sayfasına gidin.
details.html içinde details.css getirmek için bir bağlantı öğesi kullanıldığından, kaynak için beklendiği gibi bir istek gönderilir.
Ayrıntılarını görüntülemek için Geliştirici Araçları'nda details.css ağ isteğini tıklayın. Dosyanın tarayıcının disk önbelleğinden alındığını görürsünüz.
Önceden getirme, tarayıcının boşta kalma süresinden yararlanarak farklı bir sayfa için gereken kaynakla ilgili erken bir istekte bulunur. Bu, tarayıcının öğeyi daha erken önbelleğe almasına ve gerektiğinde önbellekten sunmasına olanak tanıyarak gelecekteki gezinme isteklerini hızlandırır.
Webpack ile önceden yükleme ve önceden getirme
Kod bölme ile JavaScript yüklerini azaltma başlıklı yayında, bir paketi birden fazla parçaya bölmek için dinamik içe aktarmaların kullanımı ele alınıyor. Bu, bir form gönderildiğinde Lodash'tan bir modülü dinamik olarak içe aktaran basit bir uygulamayla gösterilir.
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) });
});
Bir paketi bölmek, ilk boyutunu küçülterek sayfa yükleme sürelerini iyileştirir. Webpack'in 4.6.0 sürümünde, dinamik olarak içe aktarılan parçaların önceden yüklenmesi veya önceden getirilmesi desteklenir. Bu uygulamayı örnek olarak ele alırsak lodash yöntemi, tarayıcının boşta kalma süresinde önceden getirilebilir. Kullanıcı düğmeye bastığında kaynağın getirilmesiyle ilgili bir gecikme olmaz.
Belirli bir parçayı önceden getirmek için dinamik içe aktarma işleminde belirli bir webpackPrefetch yorum parametresini kullanın.
Bu uygulama ile nasıl görüneceğini aşağıda görebilirsiniz.
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, kaynak için önceden getirme etiketini belgenin başına yerleştirir. Bu durum, Geliştirici Araçları'ndaki Öğeler panelinde görülebilir.
Ağ panelindeki istekleri incelediğimizde bu parçanın, diğer tüm kaynaklar istendikten sonra düşük öncelikte getirildiği de görülmektedir.
Önceden getirme bu kullanım alanı için daha mantıklı olsa da webpack, dinamik olarak içe aktarılan parçaların önceden yüklenmesini de destekler.
import(/* webpackPreload: true */ 'module')
Sonuç
Bu codelab ile, belirli öğeleri önceden yüklemenin veya önceden getirmenin sitenizin kullanıcı deneyimini nasıl iyileştirebileceği konusunda sağlam bir anlayışa sahip olacaksınız. Bu tekniklerin her kaynak için kullanılmaması gerektiğini ve yanlış kullanıldığında performansa zarar verebileceğini belirtmek önemlidir. En iyi sonuçlar, yalnızca seçici olarak önceden yükleme veya önceden getirme ile elde edilir.
Özetlemek gerekirse:
- Geç keşfedilen ancak mevcut sayfa için kritik öneme sahip kaynaklar için preload 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 önceden yüklemeyi hem de önceden getirmeyi desteklemez. Bu nedenle, uygulamanızın tüm kullanıcıları performans iyileştirmelerini fark etmeyebilir.
Önceden yükleme ve önceden getirme işlemlerinin web sayfanızı nasıl etkileyebileceğiyle ilgili belirli yönler hakkında daha fazla bilgi edinmek isterseniz şu makalelere göz atın: