Tembel Yükleme Nedir? Net Bir Konsept

Tembel yüklemenin ne olduğu hakkında net bir kavram. Tembel yükleme tekniğini uygulayarak site yükleme hızı nasıl iyileştirilir. Önerilen görüntü tembel yükleme eklentileri ve daha fazlası nelerdir?

Tembel yükleme, görüntülerin, videoların ve diğer medya dosyalarının yalnızca gerektiğinde yüklendiği bir tekniktir (bu durumda sayfa görüntüye doğru kaydırılır).

Tembel yükleme, Google tarafından popüler hale getirildi. Google, sahip oldukları yüksek trafikli web sitelerinin çoğunda uygulamıştır.

Aslında, kullanıcılarınız için web sitenizin performansını iyileştirmenin harika bir yoludur.

Bu, dinamik olarak kaynak yüklemeyi uygulamanın ön yüklemeden daha iyi bir yoludur çünkü doğası gereği tembeldir ve varlıkları yalnızca gerektiğinde yükler.

Sayfayı aşağı kaydırdığınızda, medya dosyaları ve özellikle resimler yüklenir. Bu, HTML, CSS ve JavaScript kaynakları için yapılan isteklerin sayısını azaltarak ilk sayfa yükleme süresini önemli ölçüde azaltır.

Tembel yükleme görüntüleri her zaman 3. taraf eklentiler kullanılarak uygulanabilir, ancak HTML/CSS kodu konusunda rahatsanız, mevcut web sitenize uygulamak aslında oldukça basittir.

Neden siteme tembel yükleme eklemeliyim?

Uzun bir süre boyunca, sayfadaki tüm öğeleri paralel olarak yüklemek en iyi uygulamaydı. Ancak günümüzde kullanıcıların sınırlı bağlantıya ve hızlı mobil ağlara sahip olması çok yaygın.

Bu nedenle, ilk başta yalnızca ihtiyacınız olanı yüklemek ve daha sonra gerektiğinde ek kaynakları yüklemek iyi bir fikirdir.

Tembel yükleme, sayfa yükleme zamanında tarayıcı tarafından yapılması gereken iş miktarını da azaltabilir. Bu, sonuçta, kullanıcı için daha hızlı bir sayfa yüklemesi alacağınız anlamına gelir.

Web sitenize tembel yükleme uygulamak için birçok yol yapabilirsiniz. Herhangi bir teknik gibi, her bir yöntemle ilişkili bazı artılar ve eksiler vardır.

WordPress Sitesine tembel yükleme nasıl eklenir?

Bazı basit CSS ve JavaScript kodu eklemeleriyle herhangi bir web sitesine tembel yükleme ekleyebilirsiniz. Tek ihtiyacınız olan biraz da HTML etiketlemesi.

Ancak bu yazıda, bir WordPress sitesinde tembel yükleme resimlerinin avantajlarından yararlanmanıza izin veren yalnızca WordPress tembel yükleme eklentilerinden bahsedeceğim.

Eklenti Kullanarak tembel yükleme nasıl eklenir?

Tek bir tıklamayla web sitenize otomatik olarak tembel yükleme işlevi ekleyecek birçok WordPress eklentisi bulunmaktadır.

Genel site yükleme süresini artırmak istiyorsanız, Permatters hız optimizasyon eklentisini önereceğim. Bu eklenti, web sitenizi daha iyi kullanıcı deneyimi ve performansı için optimize edecektir. Ayrıca tembel yükleme, gzip sıkıştırma vb. gibi birkaç ek özelliğe sahiptir.

Ellerinizi kodla kirletmek istiyorsanız veya bazı ön gereksinimleriniz varsa, aşağıdaki diğer eklentileri önereceğim.

WP Rocket, en popüler WordPress önbellek eklentilerinden biridir. Ayrıca tembel yükleme görüntüleri için en popüler eklentidir. Yükleme hızını azaltmanıza ve toplam sayfa görüntüleme sayısını artırmanıza yardımcı olur. WP Roket İncelemesini okuyabilirsiniz.

WordPress kullanıcıları arasında bir diğer popüler eklenti olan Light Speed ​​Cache eklentisini de kullanabilirsiniz. Web siteniz için sayfa yükleme süresini iyileştirmeye yardımcı olan ve bant genişliği kullanımını azaltan gelişmiş önbelleğe alma kurallarını kullanmanızı sağlar.

Ayrıca, yukarıdaki eklentiler iFrame'lerin yüklenmesine yardımcı olur. Bunun için bu eklentileri tavsiye ederim.

Tembel yükleme vs dinamik yükleme vs JavaScript ön yükleme vs İstekli tembel yükleme

Dört terim arasındaki en büyük fark, bir kullanıcı sitenizi ilk ziyaret ettiğinde ne olduğudur.

Tembel yükleme: Geç yükleme ile kaynaklar gerektiği gibi yüklenir (adından da anlaşılacağı gibi). Bu, kullanıcıların eylemlerine bağlı olarak belirli öğelerin hiç yüklenmeyebileceği anlamına gelir.

Dinamik yükleme : Dinamik yükleme ile, gerekli olmasa bile her şeyi önceden yüklemeniz gerekir. Bu nedenle, ne kadar veri göndermeniz gerektiğine bağlı olarak, bu, içeriğin bir kısmı hiç kimse tarafından hiç görüntülenmese bile, sayfa yükleme süresini önemli ölçüde artırabilir.

JavaScript ön yüklemesi:

JavaScript Ön Yükleme, görüntü gecikmeli yükleme işleminin önemli bir parçasıdır. HTML (ve stil tabanlı bir çözüm kullanıyorsanız CSS) sunarak tarayıcı önbelleğini kolaylaştırır.

Sayfanızdaki her resim için ayrı bir dosya sunmak için AJAX kullanır. Bu, tarayıcıların görüntüleri tam olarak yüklenmeden önce indirmeye başlamasına olanak tanır, böylece yavaş bir ağ bağlantısı veya yavaş bir istemci bilgisayar üzerinden yüklenebilecek görüntü sayısını artırır.

İstekli tembel yükleme : Bu, tembel yüklemeye benzer ve kaynakları gerektiği gibi yüklersiniz. Fark şu ki, istekli yöntemle, şu anda bir şeyin görünür olup olmadığı konusunda endişelenmenize gerek yok. Halihazırda yüklenmişse, iyi ve güzel - yoksa sadece gerekli olduğunda yükleyin.

SEO için Tembel Yüklemeyi Anlamak

Bazı insanlar, görüntülerin tembelce yüklenmesinin bir SEO'nun içeriğine erişme yeteneğini olumsuz etkileyeceğinden endişe duyuyor.

Google, web sitenizdeki kaynakları her taradığında önbelleğe alma konusunda harika bir iş çıkarıyor, bu nedenle öğeleri zaman içinde hızlı kalacak ve çok sık değişmeyecek şekilde yüklerseniz, kimsenin aramalarını etkileme konusunda endişelenmesi gerektiğini düşünmüyorum. motor sıralaması

Tembel Yükleme ve CDN

Sektörde, görüntü ve medya dosyalarınızı dağıtmanıza yardımcı olabilecek bazı yararlı CDN'ler vardır. Bu hizmetlerin çoğu, sizin için tembel yükleme işlevi uygulayarak harika bir kullanıcı deneyimi sağlar.

Cloudflare CDN, diğer CDN servisleri arasında öne çıkarmak istediğim bir tanesi.

Cloudflare, tüm hesap kullanıcıları için ücretsiz ve ücretli CDN sunan bir içerik dağıtım ağıdır. Ayrıca Sayfa hızı optimizasyonu, HTTP/2 ve daha pek çok gelişmiş stratejiyi uygulayarak web sitenizi optimize eder ve güvenliği artırır. Ayrıca web sitenizin görüntüsünü ve medya dosyalarını tembelce yüklemenize yardımcı olur.

Masaüstünde veya Mobilde Tembel Yükleme: Google SEO'yu nasıl etkiler?

Tembel yükleme, masaüstü bilgisayarlarda uzun süredir var. Bu, çoğu büyük tarayıcıda bulunan bir özelliktir, ancak önceden yükleme ve kısmi yükleme gibi tüm tarayıcılarda bulunmayan bazı özellikler vardır.

Ancak mobil cihazlarda gecikmeli yükleme, dikkat etmeniz gereken bir şeydir.

Bunu bir SEO sıralama faktörü olarak düşünmeniz önemlidir çünkü Google artık mobil cihazlarda tembel yükleme görsellerine dikkat etmektedir.

Buradaki anahtar, yalnızca tembel yükleme uygulamak değil, aynı zamanda kaynakları hızlı ve verimli bir şekilde yüklediğinden emin olmaktır. Olmazsa, arama motoru sıralamanızın olumsuz etkilenme olasılığı vardır.

Farklı boyutta tembel yükleme görüntüsü

Tembel yükleme görüntülerine odaklanmanızın bir başka nedeni de artan mobil kullanımdır.

İnsanlar telefonlarıyla göz atmayı ve arama yapmayı severler, ancak konu bağlantılara tıklamak olduğunda o kadar hızlı veya doğru değildirler, bu nedenle daha büyük resimlere sahip olmak, insanların tam resim yüklenmeden önce muhtemelen tıklayacağı anlamına gelir.

Bu nedenle, daha küçük resimlere sahip olmak, mobil cihazlar için daha iyi olacaktır, daha fazla veri yüklenmesi gerektiği anlamına gelse bile, uzun vadede buna değer çünkü insanlar web sitenizi tamamen terk etmek yerine tıklayacaktır.

Tembel yükte hangi Çerçeveler kullanılır?

Kullanabileceğiniz birkaç seçenek vardır:

1. Resim Doldurma (varsayılan olarak)

Picturefill, resimleriniz için tembel yükleme işlevi sağlayan bir komut dosyasıdır. Bu hafif JavaScript kitaplığı, neredeyse tüm büyük tarayıcılarla çalışacak ve aynı zamanda duyarlı. Bu nedenle, ne tür bir cihaz kullandığınıza bağlı olarak davranışını değiştirecektir.

2. LazyLoadJS (varsayılan olarak kullanılır)

LazyLoadJS, resimleriniz için tembel yükleme işlevi sağlayan bir komut dosyasıdır ve çok hafiftir ve tüm büyük tarayıcılarla çalışır. Bu yüzden kullanırken herhangi bir sorun hakkında endişelenmenize gerek yok.

Ayrıca, web sitenizin genel performansını iyileştirmek için birden çok sıraya sahiptir ve kullanımı çok kolaydır - tüm beceri seviyelerindeki geliştiriciler onu kullanmakta sorun yaşamamalıdır.

3. LoadCSS (varsayılan kullanım)

LoadCSS, yalnızca resimler veya video dosyalarıyla çalışan diğer kitaplıkların aksine, stil sayfalarınız için tembel yükleme işlevi sağlayan bir komut dosyasıdır. Bu ayrıca HTML ve JavaScript'i önceden yükleyecektir.

4. SlimerJS (mevcut değil)

SlimerJS, resimleriniz için gecikmeli yükleme işlevi sağlayan bir komut dosyasıdır ve herhangi bir JavaScript kitaplığı kullanmaz, ancak resim tembel yüklemenizin çalışma şeklini yapılandırmak için kullanabileceğiniz kendi API'sine sahiptir.

Ayrıca çok hafif ve hızlıdır, bu nedenle web sitenizin performansını hiçbir şekilde etkilemez.

Arka plan resimlerinde tembel yükleme çalışıyor mu?

Evet, arka plan resimlerinde işe yarar.

Çözüm

Tembel yükleme, WordPress ve genel olarak web siteleri söz konusu olduğunda en az kullanılan performans optimizasyon tekniklerinden biridir.

Nasıl yapıldığını öğrendikten sonra uygulaması çok kolaydır, ancak pek çok insan bunun hakkında bilgi sahibi bile değildir. Sayfa yükleme hızınızı artırmak istiyorsanız, resim ve medya dosyaları için tembel yükleme uygulamanızı şiddetle tavsiye ederim.