Bu codelab'de birkaç kaynağın önceden yüklenmesi ve önceden yüklenmesiyle şu web sayfasının performansı iyileştirilmiştir:
Ölçüm
Optimizasyon eklemeden önce web sitesinin nasıl performans gösterdiğini ölçün.
- Siteyi önizlemek için Uygulamayı Göster'e, 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+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Ağ sekmesini tıklayın.
main.css dosyası, HTML dokümanına yerleştirilmiş bir Bağlantı öğesi (<link>) tarafından getirilmez. Ancak ayrı bir JavaScript dosyası (fetch-css.js), window.onLoad etkinliğinden sonra Bağlantı öğesini DOM'ye 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 web yazı tipi (K2D.woff2) yalnızca CSS dosyasının indirilmesi tamamlandığında getirilir.
Kritik istek zinciri, tarayıcı tarafından önceliklendirilen ve getirilen kaynakların sırasını temsil eder. Bu web sayfası için şu anda aşağıdaki gibi görünür:
├─┬ / (initial HTML file)
└── fetch-css.js
└── main.css
└── K2D.woff2
CSS dosyası istek zincirinin üçüncü düzeyinde olduğundan Lighthouse bunu geç keşfedilen bir kaynak olarak tanımlamıştır.
Kritik kaynakları önceden yükleme
main.css dosyası, sayfa yüklenir yüklenmez gereken kritik bir öğedir. Uygulamanızda geç kalan bu kaynak gibi önemli dosyalarda, dokümanın başına bir Bağlantı öğesi ekleyerek tarayıcıyı daha erken indirmesi için bilgilendirmek üzere bir link preload etiketi kullanın.
Bu uygulama için bir ön 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 tanımlamak için, as="style" özelliği 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, dosyayı getirmekten sorumlu JavaScript'in ayrıştırma işlemi tamamlanmadan CSS dosyasını nasıl getirdiğine dikkat edin. Önceden yükleme ile tarayıcı, web sayfası için kritik olduğunu varsayarak kaynak için önleme amaçlı bir getirme yapacağını bilir.
Doğru şekilde kullanılmazsa önceden yükleme, kullanılmayan kaynaklar için gereksiz isteklerde bulunarak 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. Önceden yüklemenin nasıl yanlış kullanılabileceğine dair bir örnek göstermek amacıyla 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ılmıyor olsa bile details.css öğesini almak için istekte bulunuldu.
Chrome, önceden yüklenmiş bir kaynak yüklendikten sonraki birkaç saniye içinde sayfa tarafından kullanılmazsa Konsol panelinde bir uyarı görüntüler.
Web sayfanız tarafından hemen kullanılmayan önceden yüklenmiş kaynaklarınız olup olmadığını belirlemek için bu uyarıyı 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>
as özelliği için kullanılması gereken doğru değerlerle birlikte getirilebilecek tüm kaynak türlerinin listesi için Önceden Yükleme hakkındaki MDN makalesine bakın.
Gelecekteki kaynakları önceden getir
Önceden getirme, farklı bir gezinme rotasında kullanılan ancak geçerli sayfa için gereken diğer önemli öğelere göre daha düşük önceliğe sahip bir öğe için istek göndermek üzere kullanılabilecek başka bir tarayıcı ipucudur.
Bu web sitesinde, resmi tıkladığınızda ayrı bir details/ rotasına yönlendirilirsiniz.
Ayrı bir CSS dosyası, 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 dosya isteğini 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 istek yapıldığına bakın.
Geliştirici Araçları açıkken web sitesindeki resmi tıklayarak details sayfasına gidin.
details.css nesnesini getirmek için details.html içinde bir bağlantı öğesi kullanıldığından kaynak için beklendiği gibi bir istek yapılır.
Geliştirici Araçları'nda details.css ağ isteğini tıklayarak ayrıntılarını görüntüleyin. Dosyanın, tarayıcının disk önbelleğinden alındığını fark edeceksiniz.
Önceden getirme, tarayıcının boşta kalma süresinden yararlanarak farklı bir sayfa için gereken bir kaynağı erkenden ister. Bu, tarayıcının öğeyi daha erken önbelleğe almasını ve gerektiğinde önbellekten sunmasını sağlayarak gelecekteki gezinme isteklerini hızlandırır.
Webpack ile önceden yükleme ve önceden getirme
Kod bölmeyle JavaScript yüklerini azaltma yayını, bir paketi birden fazla parçaya bölmek için dinamik içe aktarmaların kullanımını inceler. Bu durum, form gönderildiğinde Lodash'ten bir modülü dinamik olarak içe aktaran basit bir uygulamayla gösterilmiştir.
Bu uygulama için 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 paketin bölünmesi, başlangıç 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ı önceden yüklemeyi veya önceden getirmeyi destekler. Bu uygulama örnek olarak kullanıldığında, lodash yöntemi tarayıcının boşta kaldığında önceden getirilebilir. Kullanıcı düğmeye bastığında, kaynağın getirilmesinde herhangi bir gecikme olmaz.
Belirli bir yığını önceden getirmek için dinamik içe aktarmada belirli webpackPrefetch yorum parametresini kullanın.
Söz konusu uygulamada böyle görünecektir.
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, belgenin başlığına kaynak için bir önceden getirme etiketi ekler. Bu, Geliştirici Araçları'ndaki Öğeler panelinde görülebilir.
Ağ panelindeki isteklerin gözlemlenmesi, bu parçanın diğer tüm kaynaklar istendikten sonra düşük öncelikli olarak getirildiğini de gösterir.
Önceden getirme bu kullanım durumu için daha anlamlı olsa da webpack, dinamik olarak içe aktarılan parçaları önceden yükleme desteği de 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 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 vurgulamak önemlidir. En iyi sonuçlar, yalnızca önceden yükleme veya önceden getirme yoluyla elde edilebilir.
Özetlemek gerekirse:
- Geç keşfedilen ancak geçerli sayfa için kritik öneme sahip olan kaynaklar için önceden yükleme seçeneğini kullanın.
- Gelecekteki bir gezinme rotası veya kullanıcı işlemi için gereken kaynaklar için önceden getirme özelliğini kullanın.
Tüm tarayıcılar şu anda hem önceden yüklemeyi hem de önceden getirme özelliğini desteklemez. Bu, uygulamanızın tüm kullanıcılarının performansta artış fark etmeyebileceği anlamına gelir.
Önceden yüklemenin ve önceden getirmenin web sayfanızı nasıl etkileyebileceğine ilişkin belirli yönler hakkında daha fazla bilgi edinmek istiyorsanız şu makalelere bakın: