Seo çalışmalarınızda ve kullanıcı deneyiminin artmasında sitenizin hızı önemli bir rol oynamaktadır. Sitenizin hızını arttırmak için yapılabilecek birçok farklı yöntem bulunmaktadır.Ancak kullanıcı deneyimini arttırmak ve sitenin açılış süresini düşürmek için yapılması gereken en önemli şey görsellere lazyload işlemi uygulamaktır.
Peki LazyLoad Nedir?
Lazyload Türkçe karşılııyla(tembel yükleme), görselleri veya dosyaları hemen yüklemek yerine ihtiyaç duyulana kadar yüklenmesini ertelenmesine denir. İlk sayfa yüklenmesinde eğer bir görsel ekranda görünmüyor ise onu hemen göstermesine gerek yoktur.Lazyload sisteminde ekranda görselleri görmeye başladığınızda görseller yüklenmeye başlar. Yani ihtiyaç doğrultusunda işlem yerine getirilir.
LazyLoad Kullanım Avantajları Neler?
Lazyload sisteminin sadece görseller üzerinde uygulanması bile birden fazla avantaj kazandırır. Tembel veya gecikmeli yükleme olarak adlandırdığımız sistemin en büyük 2 avantajı sitenin ilk açılışında hızını azaltması, sunucu yanıt süresini azaltması yani, dolaylı yoldan kullanıcı deneyimini arttırmasıdır. Bunun sonucunda da SEO performansında da artış söz konusudur.
Tembel Yükleme için Örnek
Örnek verecek olursak mobil cihazda 10 tane görsel bulunan bir blog yazısında içeriğini okurken, web sitesine ilk girdiğinizde açılış ekranında karşınıza yüksek ihtimalle 1 ya da 2 görsel çıkacaktır. Bunun sebebi ekran boyutunuzun 1 ya da 2 görsel sığacak şekilde olmasıdır. Siz sadece ekranda görsel görürken geriye kalan 8-9 görselde yüklenmesi ağır bir işlem olur. Bu yüzden siz metni okumaya devam ederken aşağıya doğru kaydırma yaptıkça Lazyload devreye girerek görsele yükleme isteği arttırmaktadır. Bu yüzden web sitesinin açılış hızı düşmektedir.
LazyLoad Nasıl Yapılır?
Lazyload, web sitelerinde yer alan görsellere javascript kodu ile müdahale edilerek yapılmaktadır.Lazyload yapmak için birçokjavascript kütüphanesi bulunmaktadır. Wordpress gibi hazır sistemler içinse birçok eklentili işlem yapılmaktadır.
- Manuel(Eklentisiz) LazyLoad Yapımı
Eğer özel yazılım bir web sitesine sahipseniz lazyload yapımını çok basit ve temel yazılım bilgisi ile oluşturabilirsiniz. Bunun için ihtiyacınız olan tek şey “lazysizes” isimli javascript kütüphanesidir.
Javascript kodumuzu web sitemizin body alanına şu şeklide eklemesini yapıyoruz.
<scriptsrc=”lazysizes.min.js” async></script>
Daha sonra görsellerimizi tanımladığımız <img> etiketinde ufak bir değişiklik yapmanız gerekiyor. Normal görsel tanımlamasında <imgsrc=”images/gorsel.jpg” alt=”görsel”> bu şekilde bir tanımlama yapılıyorken Lazyloadiçin<img data-src=”images/görsel.jpg” class=”lazyload” alt=”görsel”> şeklinde tanımlama yapmamız gerekmektedir.
Görsel yüklerken “src” yerine “data-src” tercih edilmelidir. Ayrıca görselin tanımlandığı <img> etiketine ‘clas=”lazyload”’
Tanımlanmasını yapmanız gerekir.
2)Wordpress İçin Eklenti ile LazyLoad Yapımı
WpRocket tarafından sunulan LazyLoad eklentisi ile görsellerinizi, iframelerinizi ve videolarınızı lazyloading işlemine tabi tutabilirsiniz. Eklenti üzerinde yapmanız gereken tek işlem ise tembel yüklenmesini istediğiniz bileşenleri seçip kaydetmek. Eklentiye https://wordpress.org/plugins/rocket-lazy-load/linkten ulaşabilirsiniz.
Bugün sizlere LazyLoad Hakkında Bilgilerimizi Sunduk. Bir sonraki yazımızda görüşmek üzere.
Diğer Yazılar
