Geç yükleme, kaynakları önceden yüklemek yerine ihtiyaç duyulana kadar yüklemeyi bekleme yaklaşımıdır. Bu, ilk sayfa yüklemesinde yüklenmesi ve ayrıştırılması gereken kaynak miktarını azaltarak performansı artırabilir.
İlk sayfa yüklemesi sırasında ekran dışında görünen resimler bu tekniğe ideal adaylardır. İşin en iyi yanı, lazysizes'ın uygulanması oldukça basit bir stratejidir.
Lazysizes komut dosyasını sayfaya ekleyin
- Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
lazysizes.min.js
zaten indirildi ve bu Glitch'e eklendi. Kodu sayfaya eklemek için:
- Şu
<script>
etiketiniindex.html
ürününe ekleyin:
<script src="lazysizes.min.js" async></script>
<!-- Images End -->
</body>
lazysizes, kullanıcı sayfada gezinirken resimleri akıllı bir şekilde yükler ve kullanıcının yakında karşılaşacağı resimlere öncelik verir.
Görüntülerin geç yüklenmesini belirtme
- Geç yüklenmesi gereken resimlere
lazyload
sınıfını ekleyin. Ayrıca,src
özelliğinidata-src
olarak değiştirin.
Örneğin, flower3.png
ile ilgili değişiklikler şöyle görünür:
<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">
Bu örnek için flower3.png
, flower4.jpg
ve flower5.jpg
geç yüklemeyi deneyin.
İşleyiş şeklini görün
İşte bu kadar. Bu değişikliklerin nasıl çalıştığını görmek için aşağıdaki adımları izleyin:
Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran düğmesine basın.
Konsolu açın ve yeni eklenen resimleri bulun. Siz sayfayı aşağı kaydırdıkça
lazyload
olan sınıflarılazyloaded
olarak değişir.
- Sayfayı aşağı kaydırdığınızda görüntü dosyalarının ayrı ayrı yüklendiğini görmek için ağ panelini izleyin.
Lighthouse ile doğrulama
Son olarak, bu değişiklikleri doğrulamak için Lighthouse'u kullanmanız önerilir. Lighthouse'un "Ekran dışındaki resimleri ertele" performans denetimi, ekran dışındaki resimlere geç yüklemeyi eklemeyi unutup unutmadığınızı gösterir.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran düğmesine basın.
- Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Lighthouse sekmesini tıklayın.
- Kategoriler listesinde Performans onay kutusunun seçili olduğundan emin olun.
- Rapor oluştur düğmesini tıklayın.
- Ekran dışındaki resimleri erteleme denetiminin geçildiğini doğrulayın.
Başarıyla gerçekleştirildi. Sayfanıza resimleri geç yüklemek için geç boyutlar kullandınız.