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 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> etiketini index.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ğini data-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.

1. Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran düğmesine basın.
2. Geliştirici Araçları'nı açmak için "Control+Üst Karakter+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 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.