Ekran dışı resimleri geç boyutlu olarak yükleme

Katie Hempenius

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 teknik için ideal adaylardır. Hepsinden iyisi, lazysizes bunun uygulanması için çok basit bir strateji yapar.

Geç boyut komut dosyasını sayfaya ekleyin

• Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.

lazysizes.min.js zaten indirildi ve bu hataya eklendi. Bu bilgileri sayfaya eklemek için:

• index.html için aşağıdaki <script> etiketini ekleyin:

  <script src="lazysizes.min.js" async></script>
  <!-- Images End -->
</body>

geçitler, kullanıcı sayfayı kaydırırken görselleri akıllı bir şekilde yükler ve kullanıcının yakında karşılaşacağı resimlere öncelik verir.

Geç yüklenecek resimleri belirtin

• Geç yüklenmesi gereken resimlere lazyload sınıfını ekleyin. Ayrıca, src özelliğini data-src olarak değiştirin.

Örneğin, flower3.png için değişiklikler aşağıdaki gibi görünür:

<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">

Bu örnekte 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öster'e, ardından Tam Ekran'a 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ırırken resim dosyalarının ayrı ayrı yüklendiğini görmek için ağ panelini izleyin.

Lighthouse'u kullanarak doğrulayın

Son olarak, bu değişiklikleri doğrulamak için Lighthouse'u kullanmak iyi bir fikirdir. Lighthouse'un "Ekran dışındaki resimleri ertele" performans denetimi, ekran dışı resimlere geç yükleme eklemeyi unutup unutmadığınızı gösterir.

1. Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.
2. Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
3. Lighthouse sekmesini tıklayın.
4. Kategoriler listesinde Performans onay kutusunun seçili olduğundan emin olun.
5. Rapor oluştur düğmesini tıklayın.
6. Ekran dışındaki resimleri ertele denetiminin başarılı olduğunu doğrulayın.

Başarıyla gerçekleştirildi. Sayfanızdaki resimleri geç yüklemek için geç boyutu kullandınız.