Yavaş yüklenme. Tembel yükleme resimleri

Tercüme

Günümüzde web sitesi yükleme hızlarının yüksek olmasının önündeki en büyük engel görsellerdir. Bu özellikle e-ticaret projeleri için tipiktir. Bunlarda, genellikle oldukça "ağır" olan resimler sayfa içeriğinin büyük kısmını oluşturur. Bu genellikle kullanıcının tarayıcısının sayfayı görüntülemek için birkaç megabaytlık grafik verisi indirmesi gerekmesine neden olur. Bu durumda sayfa yüklemesi nasıl hızlandırılır? Bu sorunun cevabı bugün çevirisini yayınladığımız materyalin konusudur.

Genel hükümler Örneğin, Walmart web sitesindeki İçişleri Bakanlığı'nın ana sayfasını düşünün.

Birçok görsel içeren bir sayfa

Bu sayfayı oluşturmak için kaç resim yüklendiği aşağıda açıklanmıştır:

Sayfa oluşturulduğunda yüklenen resimler

Gördüğünüz gibi 137 resim var! Bu, bir sayfayı görüntülemek için gereken ve ağ üzerinden iletilen verilerin %80'inden fazlasının grafik dosyaları biçiminde olduğu anlamına gelir.

Şimdi sayfa yüklendiğinde gerçekleştirilen ağ isteklerini analiz edelim:

Sayfa oluşturulduğunda yapılan ağ istekleri

Bu durumda proje kodunun bölünmesi sonucu ortaya çıkan dosyalar, olduğundan daha geç yüklenir. Bunun nedeni öncelikle cp_ny.bundle ana paketini indirmeniz gerektiğidir. Bant genişliği için birbiriyle yarışan 18 görüntü olmasaydı, bu paket çok daha hızlı yüklenebilirdi.

Nasıl düzeltilir? Bunu gerçekten "düzeltmenin" bir yolu yok, ancak resim yüklemeyi optimize etmek için yapabileceğiniz birçok şey var. Web sayfalarında kullanılan görselleri optimize etmeye yönelik birçok yaklaşım vardır. Bunlar arasında çeşitli grafik dosya formatlarının kullanımı, veri sıkıştırma, bulanıklaştırma animasyon tekniklerinin kullanımı ve CDN kullanımı yer almaktadır. Görüntülerin sözde “tembel yüklenmesi” üzerinde durmak istiyorum. Özellikle bu tekniğin React web sitelerinde nasıl uygulanacağından bahsedeceğiz ancak JavaScript mekanizmalarına dayandığı için her web projesine entegre edilebilir.

Deneysel proje Bu son derece basit React bileşeniyle başlayalım Resim:

Sınıf Görüntüsü PureComponent'i genişletir ( render() ( const ( src ) = this.props; return ; } }
Bir URL'yi özellik olarak alır ve onu HTML img öğesini oluşturmak için kullanır. İşte JSFiddle'daki ilgili kod. Aşağıdaki resimde bu bileşeni içeren sayfa gösterilmektedir. Görüntülediği resmi görmek için sayfanın içeriğini kaydırmanız gerektiğini lütfen unutmayın.

Bir resmi görüntüleyen bileşenin bulunduğu sayfa

Bu bileşende görüntülerin yavaş yüklenmesi tekniğini uygulamak için aşağıdaki üç adımı uygulamanız gerekir:

Görüntüyü yükledikten hemen sonra oluşturmayın.

Yapılandırma, sayfa içeriği görüntüleme alanındaki bir görüntünün görünümünü algılamak anlamına gelir.

Görüntünün görüntüleme alanında olduğu algılandıktan sonra görüntüyü görüntüleyin.

Şimdi bu adımlara bakalım. Adım 1 Bu adımda görüntü yüklendikten hemen sonra görüntülenmez.

Oluştur() ( dönüş ; }

Adım 2 Burada bir görüntünün izleme alanına girdiği anı tespit etmemizi sağlayan mekanizmaları kuruyoruz.

ComponentDidMount() ( this.observer = new IntersectionObserver(() => ( // işte üçüncü adımın kodu), ( root: document.querySelector(".container") )); this.observer.observe(this) .... render() ( dönüş . this.element = el) />; )
Bu koda bakalım. İşte burada yapılanlar:

img öğesine bir ref özelliği eklendi. Bu, daha sonra bileşeni yeniden oluşturmak zorunda kalmadan src'deki görüntü referansını güncellemenize olanak tanır.
Yeni bir IntersectionObserver örneği oluşturuldu (bunun hakkında aşağıda konuşacağız).
IntersectionObserver nesnesinden, gözlemle(this.element) yapısını kullanarak görüntüyü gözlemlemesi istenir.

IntersectionObserver nedir? "Kavşak" kelimesinin "kavşak" olarak çevrildiğini ve "gözlemci"nin "gözlemci" olduğunu düşünürsek, bu nesnenin rolünü zaten tahmin edebilirsiniz. MDN'de bununla ilgili bilgi ararsanız, Kesişme Gözlemcisi API'sinin, web uygulamalarının, bir öğenin üst öğe veya belge görünüm alanı kapsamıyla kesişimindeki değişiklikleri eş zamanlı olmayan bir şekilde izlemesine olanak tanıdığını öğrenebilirsiniz.

İlk bakışta API'nin bu özelliği çok açık görünmeyebilir, ancak aslında yapısı çok basittir. IntersectionObserver örneğine çeşitli parametreler iletilir. Özellikle konteyner olarak değerlendirdiğimiz root DOM elementinin hangi elementin border ile kesişimini bilmemiz gerektiğini belirtmemizi sağlayan root parametresini kullandık. Varsayılan olarak bu, sayfanın görünür kısmının (görüntü alanı) bulunduğu alandır, ancak bunu açıkça JSFiddle iframe öğesinde bulunan kapsayıcıyı kullanacak şekilde ayarladım. Bu, daha sonra iframe öğelerini kullanmak üzere tasarlanmamış bir olasılığı değerlendirmek için yapıldı.

Bir öğenin ne zaman görünür hale geldiğini belirlemek için IntersectionObserver'ı kullanmanın, onScroll ve getBoundingClientRect()'i birlikte kullanmak gibi daha geleneksel yöntemlerden daha popüler olmasının nedeni, IntersectionObserver'ın mekanizmalarının ana iş parçacığının dışında çalışmasıdır. Bununla birlikte, IntersectionObserver öğenin kapsayıcı ile kesişimini tespit ettikten sonra çağrılan geri çağırma doğal olarak ana iş parçacığında yürütülür, dolayısıyla kodu çok ağır olmamalıdır.

Adım 3 Şimdi, hedef öğenin (bizim durumumuzda this.element) kök kapsayıcıyla (bizim durumumuzda bu div element.container'dır) kesişimi tespit edildiğinde çağrılan bir geri çağırma ayarlamamız gerekiyor.

This.observer = new IntersectionObserver(entries => ( entry.forEach(entry => ( const ( isIntersecting ) = giriş; if (isIntersecting) ( this.element.src = this.props.src; this.observer = this.observer) .disconnect(); ) )); (root: document.querySelector(".container"))); ....
Bir kesişme tespit edildiğinde, belirli bir sınırın kesişiminin tespit edildiği tüm hedef elemanların durumunun anlık görüntülerine benzeyen bir dizi giriş elemanı geri çağırmaya iletilir. isIntersecting özelliği kesişimin yönünü belirtir. İzlenen öğe kök öğenin dışından düşüyorsa true olur. Öğe kök öğeden ayrılırsa, false olur.

Dolayısıyla, bir öğenin kabın alt sınırıyla kesiştiği göründüğünde, onun src özelliğini manuel olarak ayarlıyorum ve onun için izlemeyi devre dışı bırakıyorum ki bu artık gerekli değil.

Adım 4 (gizli) Şimdi, çalışmamızın dördüncü gizli adımında, sonuca hayran kalabilir ve başarınıza sevinebilirsiniz. İşte az önce konuştuklarımızı özetleyen kod.

Görüntülerin tembel yüklenmesini kullanmanın sonucu

Ancak başardıklarımıza daha yakından baktığımızda burada pek de iyi olmayan bir şeyin olduğu ortaya çıkıyor. Bunu görebilmek için ağ bağlantısını yavaşlatırken sayfayı hızla kaydırdım.

Hızlı kaydırma sırasında ve ağ bağlantı hızı yavaşladığında sayfa davranışı

Görüntüyü ancak zaten görünür olması gereken alana ulaştıktan sonra yüklediğimiz için, kullanıcının sayfayı kaydırarak görüntünün kapladığı alanı ve tabii ki görüntünün kendisini, görüntülenmeden önce görmesi mümkün değildir. yüklendi. Web siteleri hızlı internete bağlı normal bilgisayarlardan görüntülendiğinde bu durum sorun yaratmaz. Ancak birçok modern kullanıcı web sitelerini telefonlarından ziyaret ediyor, bazen 3G ağlarını veya daha da kötüsü EDGE bağlantılarını kullanıyor.

Ancak bu sorunun üstesinden gelmek o kadar da zor değil. Bu, Intersection Observer API'sinin geliştiriciye kök öğenin (bizim durumumuzda .container öğesi) sınırlarını genişletme veya daraltma yeteneği vermesi nedeniyle yapılabilir. Bu fırsattan yararlanmak için kök kapsayıcının yapılandırıldığı yere bir satır kod eklemeniz yeterlidir:

RootMargin: "0px 0px 200px 0px"
rootMargin özelliğinde, yapısı öğelerin girinti parametrelerini yapılandırmak için kullanılan CSS kurallarına karşılık gelen bir dize yazmanız gerekir. Bizim durumumuzda, elemanın konteynerle kesişimini tespit etmek için kullanılan alt sınırın 200 piksel arttırılması gerektiğini sisteme söylüyoruz. Bu, öğe kök öğenin alt sınırının 200 piksel altındaki bir alana düştüğünde karşılık gelen geri çağırmanın çağrılacağı anlamına gelir (burada varsayılan değer 0'dır).

İşte bu tekniği uygulayan kod.

Görüntülerin geç yüklenmesini iyileştirme

Sonuç olarak, sayfayı sadece 4. liste öğesine kaydırdığımızda görsel, sayfanın görünür alanının 200 piksel altında bir alanda yükleniyor.
Şimdi öyle görünüyor ki yapılması gereken her şey yapılmış. Ama bu doğru değil.

Resim Yüksekliği Sorunu Yukarıdaki GIF'lere yakından baktığınızda, resim yüklendikten sonra kaydırma çubuğunun "atlama" yaptığını fark etmiş olabilirsiniz. Neyse ki bu sorunun üstesinden gelmek zor değil. Bunun nedeni, görüntüyü görüntüleyen öğenin başlangıçta 0 yüksekliğinde olması, görüntü yüklendikten sonra bu yüksekliğin 300 piksele eşit olmasıdır. Bu nedenle, sorunu çözmek için görüntüye height=(300) özelliğini ekleyerek öğeyi sabit bir yüksekliğe ayarlayın. Optimizasyon sonuçları hakkında Walmart olarak bu sayfadaki görüntülerin yavaş yüklenmesini kullandıktan sonra hangi sonuçları elde ettik? ? Aslında belirli sonuçlar, müşterinin ağ bağlantısının hızı, CDN'nin kullanılabilirliği, sayfadaki görsellerin sayısı ve kök öğeyle kesişimi tespit etmek için uygulanan kurallar da dahil olmak üzere çeşitli koşullara bağlı olarak büyük ölçüde değişiklik gösterir. . Başka bir deyişle, görüntülerin geç yüklenmesinin kendi projeniz üzerindeki etkisini değerlendirmek için, bunu kendiniz uygulayıp test etmeniz en iyisidir. Ancak yine de görüntülerin yavaş yüklenmesinin bize neler kazandırdığına bakmak istiyorsanız, işte birkaç Lighthouse raporu. Birincisi optimizasyondan önce, ikincisi ise sonra oluşturulur.

Etiket ekle

İnternette gezinirken herkes web sitesi sayfalarının mümkün olduğu kadar çabuk yüklenmesini ister; hiç kimse belirli bir sayfanın yüklenmesi için uzun süre beklemek istemez. Üstelik sayfada çok fazla görselin olduğu durumlarda bu bekleme oldukça gecikebiliyor. Bir sayfada görsellerin bulunması, sayfayı ziyaretçiler için daha çekici hale getirir, görünürlüğü artırır ve sonuç olarak sitenize gelen trafiğin artmasına yardımcı olur. Ancak görsellerin varlığının sayfaları önemli ölçüde ağırlaştırarak yükleme sürelerini artırdığı gerçeğini de hesaba katmalıyız.

Yavaş sayfa yükleme, web sitenizin SEO optimizasyonunu olumsuz etkiler. Günümüzde pek çok site paylaşımlarında GIF veya PNG görselleri kullanıyor. Bu resimler JPEG resimlerden daha büyüktür ve sonuç olarak sayfaların yüklenmesi daha da uzun sürebilir. Bu tür görsellerin her birini indirmek için ayrı bir HTTP isteği gereklidir, bu da indirme işlemini hızlandırmaz.

Bu sorunu çözmek için, yalnızca kullanıcının ihtiyaç duyduğu görüntülerin yüklendiği "tembel" veya gecikmeli yükleme adı verilen yükleme kullanılır. Bu makalede, sayfa yükleme hızını önemli ölçüde artırabilecek en iyi altı ücretsiz WordPress tembel yükleme eklentisi açıklanmaktadır.

1. a3 Lazy Load - en iyi tembel yükleme eklentisi

Eklenti blogunuzu hızlandırır ve sayfanın PC'lerde, tabletlerde ve cep telefonlarında görsel duyarlılığını artırır.

a3 Lazy Load siteye yük oluşturmaz ve mobil uyumludur. Web sitenizi hızlandıracak, kullanımı kolay bir eklenti. Sitenizde ne kadar çok öğe varsa, eklenti işini o kadar iyi yapar ve performansta o kadar fazla iyileşme görürsünüz.

Tüm görseller, gravatarlar, videolar ve çerçeveler için geç yükleme
Yükleme efektlerini seçme
WooCommerce desteği
Yüksek performans ve düşük yük
Resimleri ve videoları hariç tutabilirsiniz
JavaScript bağlantısını yedekle
Tüm tarayıcıları destekler

2.Tembel Yük

Bu, WordPress.com, TechCrunch ekibi ve Jack Goldman tarafından geliştirilen bir yavaş yükleme resim eklentisidir. Basit bir kodu vardır, bu nedenle sunucu kaynaklarını aşırı yüklemez.

Lazy, kurulumu ve yapılandırması kolay bir eklentidir. Hemen hemen hiçbir kurulum gerektirmez, kurulumdan hemen sonra çalışmaya başlar.

Eklentinin ana özellikleri:

Basit kod.
WordPress tarafından desteklenmektedir.
Kullanımı kolay.
jQuery.sonar'ı kullanır.

3. BJ Tembel Yük

BJ, izlenen alandaki tüm görsellerinizi, küçük resimlerinizi, gravatarlarınızı ve iframe öğesi içeriklerinizi bir "saplama" ile değiştiren başka bir ücretsiz tembel yükleme WordPress eklentisidir. Görseller tarayıcı penceresinde göründükten sonra yüklenir. Bu yöntem, sayfa yüklemeyi hızlandırmanıza ve aynı zamanda kullanıcı trafiğinden tasarruf etmenize olanak tanır.

Eklenti, mobil cihazlarla çalışmasına olanak tanıyan duyarlı bir tasarıma sahiptir. Mobil cihazlarda görüntüler ekran boyutuna sığacak şekilde otomatik olarak ölçeklendirilir. Bu eklenti Retina'ya hazırdır, yani Apple cihazlarda çalışabilir.

Eklentinin ana özellikleri:

Görsellerin “taslak” ile değiştirilmesi.
Görüntülerin otomatik olarak yeniden boyutlandırılması.
Retina desteği.
Kullanıcı trafiğini kaydetme.

4. jQuery Tembel Yük

jQuery, Java betiğini kullanan ücretsiz bir tembel yükleme eklentisidir. Java betiği, görüntüleri yalnızca tarayıcı penceresinin görünür alanında olduklarında yükler.

jQuery, WordPress deposundaki çok popüler bir eklentidir.

Eklentinin ana özellikleri:

Popülerlik.
Java betiği kullanma.
Küçük hacim.
Neredeyse hiçbir ayar gerekmez.

5.Gelişmiş Tembel Yük

Bu, kullanıcı sayfayı aşağı kaydırdığında ve görsel alanına ulaştığında görselleri yükleyen çok iyi bir tembel yükleme WordPress eklentisidir. Bu eklenti aynı zamanda jQuery betiğini de kullanır. Önce metin yüklendiğinden ve görüntüler için yeni bir HTTP bağlantısı oluşturulduğundan yükleme süresini kısaltmanıza olanak tanır.

Sayfaların aynı anda yüklenmemesi, HTTP bağlantılarının sayısını azaltmanıza ve sunucu üzerindeki yükü önemli ölçüde azaltmanıza olanak tanır.

Eklentinin ana özellikleri:

JQuery betiklerini kullanır.
HTTP bağlantılarının sayısını azaltmanıza olanak tanır.
Sayfa yüklemesini hızlandırmanızı sağlar.
İki tür ayarı vardır.

6. Tembel Yükü Ortaya Çıkarın

Bu, jQuery betiği kullanan çok küçük bir eklentidir. Yalnızca 0,6 KB boyutunda bir komut dosyası kullanarak görüntüleri yükler. Eklenti, bağlantı sayısını azaltarak sunucudaki yükü azaltmanıza olanak tanır.

Resim, yavaş yükleme için gerekli olan yinelenen resim ihtiyacını ortadan kaldıran data: URL şeması kullanılarak sayfanın HTML koduna yüklenir.

Eklentinin ana özellikleri:

JQuery betiklerini kullanır.
Hafif komut dosyaları kullanır.
Veri içeren bir şema kullanır: URL.
Bağlantı sayısını azaltmanıza olanak tanır.

Çözüm

Bu makalede, WordPress site sayfalarınızın daha hızlı yüklenmesine yardımcı olacak ücretsiz WordPress tembel yükleme resim eklentileri açıklanmaktadır. Bu eklentilerin yardımıyla mucizeler yaratabilirsiniz. Hangi tembel yükleme görsel eklentisini kullandığınızı yorumlara yazın.

Tembel yükleme, (büyük) web sayfalarına görsellerin yüklenmesini geciktiren, JavaScript ile yazılmış bir jQuery yazılım eklentisidir. Böylece kullanıcının görüş alanı dışında kalan görseller, kullanıcı sayfayı aşağı kaydırana kadar açılmayacaktır. Ön yüklemeyle aynı şey, yalnızca tersi.

Çok sayıda büyük resim içeren sitelerde "tembel yükleme"yi kullanmak, sayfa yüklemeyi hızlandırmanıza olanak tanır; tarayıcı, görünür tüm resimler açılır açılmaz tam açılış raporunu verecektir. Bazı durumlarda bu modülün kullanılması sunucu üzerindeki yükün azaltılmasına yardımcı olur.

Program, YUI ImageLoader Utility adı verilen görüntüleri yüklemek için bir modül temel alınarak yazılmıştır, programın yazarı Matt Mlinak'tır.

Efekti görmek için sayfaları aşağı kaydırın.

Kaynak kodunu toplamak henüz mümkün olmadı. Üzerinde çalışıyorum.

Program nasıl çalışıyor?

Yazılım eklentisi, jQuery'ye (neden?) ve Brandon Aaron tarafından geliştirilen ve artık jQuery işaretlemesine dahil edilen değişkenlere dayanmaktadır. Bunları başlıkta belirtin:

$("img").lazyload();

Bundan sonra, kullanıcı eriştikçe tüm resimler yüklenecektir.

Duyarlı Kurulum

Program, her ayrıntıyı kişisel olarak izlemek isteyen bilgiçler için seçeneklere sahiptir. Görüntünün açılma eşiğini ayarlayabilirsiniz - varsayılan olarak bu değer 0'dır, yani görüntü yalnızca sayfada göründüğünde açılır.

$("img").lazyload(( eşik: 200 ));

Eşik değerini 200 olarak ayarlarsanız, açılmadan önce görüntünün 200 pikseli zaten yüklenecektir.

Resim yer tutucusu

Ayrıca görüntü için bir yer tutucu ve yüklenmeye başlayacak bir etkinlik de ayarlayabilirsiniz. Yer tutucu görselin adresini içermelidir. Yazılım modülü 1*1 piksel boyutunda şeffaf, gri ve beyaz görüntüler sunar.

$("img").lazyload(( yer tutucu: "img/grey.gif" ));

Yüklemeye başlayacak etkinlik

Etkinlik jQuery'de ayarlanır; tıklama veya fare hareketi de dahil olmak üzere herhangi bir şey olabilir. Kendi seçeneklerinizi geliştirebilirsiniz. Varsayılan olarak program, kullanıcı sayfayı aşağı kaydırana kadar bekler - ardından resimler tarayıcı penceresinde görünür. Kullanıcı yer tutucuyu tıklayana kadar görsellerin yüklenmesini önlemek için şunu yapın:

$("img").lazyload((
yer tutucu: "img/grey.gif",
olay: "tıklayın"
});

Efektleri Kullanma

Varsayılan olarak eklenti görüntünün tamamen yüklenmesini bekler ve ardından görüntüyü göstermek için show() işlevini çağırır. Bu eylem dizisine istediğiniz efekti ekleyebilirsiniz. Aşağıdaki kod parçacığı, solma efektinin nasıl ekleneceğini gösterir. Demo sayfasında nasıl göründüğünü görebilirsiniz.

$("img").lazyload((
yer tutucu: "img/grey.gif",
efekt: "solma"
});

Dahili görüntü depolama

Eklentiyi kaydırılabilir kapsayıcılar içinde saklanan görüntüler için de kullanabilirsiniz; bunu yapmak için, kapsayıcıyı kodda bir jQuery nesnesi olarak belirtmeniz yeterlidir. Yatay ve dikey konteynerler için demo seçenekleri mevcuttur.

#container ( yükseklik: 600 piksel; taşma: kaydırma; ) $("img").lazyload(( yer tutucu: "img/grey.gif", konteyner: $("#container")
});

Görüntüler sıra dışı görüntüleniyorsa

Sayfayı kaydırdıktan sonra program, yüklenmemiş görselleri aramaya başlar ve arama sırasında görselin görünür olup olmadığını kontrol eder. Varsayılan olarak arama, görünür ilk görsel bulunduğunda durur; görsellerin sayfadaki sırasının html kodundakiyle aynı olduğu varsayılır. Ancak bazı işaretleme seçeneklerinde durum tam olarak böyle değildir; bu durumda resimlerin görüntülenme sırasını düzenleyen faillimit işlevini kullanmalısınız.

$("img").lazyload(( başarısızlık sınırı: 10
});

Fonksiyon değerini 10 olarak ayarlarsak program 10 adet görünür resim bulduktan sonra aramayı durdurur. Sayfanın karmaşık bir düzeni varsa buraya oldukça büyük bir sayı girmelisiniz.

Programın ana işlevine dahil olmasa da, görüntülerin yavaş yüklenmesini düzenleyebilirsiniz. Aşağıdaki kodu eklerseniz program sayfanın sadece html öğelerinin değil görsellerinin de tam olarak yüklenmesini bekleyecektir. İndirme bittikten beş saniye sonra görünmez resimler de otomatik olarak indirilecektir. Demo versiyonunu inceleyebilirsiniz.

$(function() ( $("img:ekranın altı").lazyload(( yer tutucu: "img/grey.gif", event: "sportif"
});
});
$(window).bind("load", function() ( var timeout = setTimeout(function() ($("img").trigger("sportif")), 5000); ));

Hepsi bugün için! İlginiz için teşekkür ederiz.

Birçok kişi tembel yükleme konseptlerinin faydalarından zaten yararlanırken, bazıları hala tembel yüklemeyi merak ediyor. Tembel yükleme ve neler yapabileceği hakkında biraz fikriniz varsa bu makale tam size göre. Tembel yükleme hakkında bilmeniz gereken her şeyi ele aldık. O halde makaleyi okuyun ve başlayın!

Tembel yüklemenin yararlarına başlamadan önce tembel yüklemenin ne olduğunu ve nasıl çalıştığını bize bildirin.

Tembel yükleme nedir?

Tembel yükleme, belirli bir nesnenin yüklenmesini geciktiremediğimiz bir mekanizmadır; bunu yapabileceğimiz belirli bir noktaya kadar bir video veya yalnızca bir resim olabilir. Basit bir ifadeyle tembel yükleme, tüm nesnelerin varsayılan olarak yüklenmesi yerine, nesnelerin isteğe bağlı olarak yüklenmesi anlamına gelir. Otomatik indirme sorunu çok can sıkıcı. Bu site hızını artırır böylece nesneler daha hızlı yüklenir.

Tembel Yüklemenin SEO Üzerindeki Etkisi Google önbelleğinde görünmüyor.

Google'ın arama motoru geç yüklenen öğeleri görüntüleyemez. Emin değil? İşte bir örnek. Sitenizde ana sayfanın alt kısmında ürün görseli bulunan herhangi bir bölüm varsa ve geç yüklemeyi etkinleştirdiyseniz, o bölüm siz o bölümü vurgulayana kadar yüklenmeyecektir. Sonuç olarak sayfa kaynak kodunun gösterilmemesiyle sonuçlanır. yani o Google önbelleğinde görünmeyecek .

Tembel yüklü nesneler taşınacak

Tembelce indirilen içerik, arama motorları tarafından dizine eklenmez. Çünkü bu içerik indekslenmemiştir, bu da açıkça bu öğeler için daha düşük bir sıralamaya yol açacaktır. Bu şekilde, SEO süreci, arama sonuçlarında görünmesi için geç yüklenen içeriğe bağlı kalmayacaktır.

Tembel yükleme nedeniyle siteniz optimizasyonunu kaybediyor mu?

Bu bir efsane! Web sitesi optimizasyonunun tembel yüklemeyle pek ilgisi yoktur. Ajax betiği çalışmaya devam edecek. Tek fark arka planda çalışacak olmasıdır. Site daha hızlı yüklenecek! Bunda hiç şüphe yok! Site optimizasyonunu etkilemez.

Tembel Yükleme Ne Kadar Yardımcı Olabilir? Tembel Yükleme Sizi "Bekleme" Hissi ile Rahatsız Eder mi?

Tembel yükleme, sizi herkesin arzuladığı bir şeye, yani bir web sitesine ışık hızında ulaştırabilecek bir mekanizmadır. Kabul edelim: hepimiz içeriğin yüklenmesini sabırsızlıkla bekliyoruz. Gecikme meydana geldiğinde birkaç saniye bile web sayfasından çıkmamıza neden olacaktır. Tembel yükleme ile tüm içeriğin yüklenmesini beklemek zorunda değiliz.

Web sayfası çok daha hızlı yüklenir.

İhtiyacınız olan daha az kaynak nasıl indirilir? Bir web sayfasındaki tüm içeriği gereksiz yere indirecek alan yoktur. Bu, sayfanızın çok daha hızlı yüklenmesini sağlar.

WordPress'te tembel yüklemeyi nasıl kullanabilirsiniz? İçeriği tembel olarak yükleyerek her görüntü için ayrı bir HTTP isteği yapmaktan kaçınabilirsiniz.

5 adet ücretsiz ve yükseltilebilir tam ekran görsel içeren bir sayfadaysanız, WordPress gönderisindeki yalnızca ilk birkaç görsel yüklenir ve geri kalanı yalnızca sayfanın altına doğru kaydırdığınızda yüklenir. Bu şekilde sitenin her bir görsel için HTTP isteği göndermesini engelleyebilirsiniz. Önemli sayıda HTTP isteğinden kaçınmak, WordPress sitenize çok fazla zaman kazandırmak anlamına gelir.

WordPress'teki içeriğe daha hızlı erişim

Şu tarihte: WordPress'te tembel yükleme Ayrıca tüm içeriğe daha hızlı erişebilirsiniz. aynı kalsa da içerik yükleme hızı artar.

Gereksiz içerik indirmeleri önlenebilir ve verilerinizin çoğu da kaydedilebilir. İlgilendiğiniz içeriği sayfanın altına kaydırarak gözlemleyebilirsiniz.

Artık tembel yüklemenin çeşitli faydalarına ikna olduğunuza göre bunları web sitenize uygulayabilirsiniz; hedefinize ulaşmanıza yardımcı olacak çeşitli eklentiler vardır.

En İyi Tembel Yükleme Eklentileri1. Görüntü Tembel Yükleme

Bu tembel yükleme eklentisi, geleneksel tembel yüklemenin hafif ve ağırlıklı bir çeşididir. Retina uyumlu ekranlarla yüksek çözünürlüklü görüntüler sunan özel bir destek sistemine sahiptir. Image Lazy Load eklentisi ayrıca, görüntüleri görüntülemeden önce size ulaşan piksel sayısını sıkıştırarak görüntüleri akıllı telefonlara yükleme seçeneklerini de içerir.

2. BJ Tembel Yük

Bu yavaş yükleme eklentisi, kullanıcıların gönderilerdeki görselleri ve küçük resimleri, Gravatar'ları, çerçeveleri seçmesine olanak tanır ve içeriği yer tutucuyla değiştirir. Belirli bir yer tutucuyu seçerken farklı sınıflara sahip görselleri atlayabilirsiniz. BJ Lazy Load ayrıca farklı boyutlarda optimize edilmiş görüntüler sağlar ve Apple'ın retina ekranı gibi farklı HiDPI ekranlar için otomatik olarak HiDPI görüntüler sunar.

Çeşitli görüntülerin Jquery tembel yüklemesini ekler. Bu eklentinin en iyi yanı kullanımının çok kolay olmasıdır. Tek yapmanız gereken onu kurup aktif hale getirmek. Ziyaret ettiğiniz sitedeki görseller, sayfanın altına doğru indiğinizde otomatik olarak yüklenecektir. Resimlerin yüklenmesi için uzun süre beklemenize gerek yok. Tıpkı bir web sayfasını açıp sayfanın en altına kaydırdığınızda görsellerin zaten yüklenmiş olması gibi!

Resimler bir sayfaya iki ana yolla yüklenir: HTML etiketi aracılığıyla ve CSS özelliğinin arka plan görüntüsünü kullanma. Bu yüzden önce etiket örneğine bakacağız ve ardından CSS arka plan resimlerine bakacağız.

img etiketini kullanarak görüntüleri tembel yükleme

Sayfaya resim eklemek için basit bir HTML işaretlemesiyle başlayalım.

Tembel yüklenen görsellerin işaretlemesi hemen hemen aynıdır.

İkinci adım, görüntünün erken yüklenmesini önlemektir. Tarayıcı, görselin yüklenmesini tetiklemek için img etiketinin src özelliğini kullanır. Ve bu görüntünün birinci mi yoksa bininci mi olduğu önemli değil. Tarayıcı işaretlemede src niteliğini bulursa, kapsam dışında olsa bile görüntüyü hemen yüklemeye başlar.

Bir görselin yüklenmesini geciktirmek için görselin URL'sini src özelliği dışında bir özelliğe (örneğin data-src'ye) yerleştirmeniz gerekir. Ve src niteliği boş olduğundan tarayıcı bu resmi yüklemeyecektir.

Artık görselin hemen yüklenmesini engellediğimiz için tarayıcıya görselin ne zaman yüklenmesi gerektiğini söylemenin bir yoluna ihtiyacımız var. Aksi takdirde bu asla gerçekleşmeyecek. Bunu yapmak için görüntünün (bizim durumumuzda yer tutucusu gri bir dikdörtgendir) görünür alanda olup olmadığını kontrol edip yükleriz.

Bir görüntünün kapsam dahilinde olup olmadığını belirlemenin iki yolu vardır. Bu örneklerin her birine kodları üzerinden bakalım.

İlk yöntem. JavaScript olaylarını kullanarak resim yüklemeyi tetikleyin

Bu yöntem şu olaylar için işleyicileri kullanır: kaydırma, yeniden boyutlandırma ve OrientationChange. Scroll olayı, kullanıcının sayfayı kaydırarak sayfadaki mevcut konumunu belirler. Resize ve OrientationChange olayları da aynı derecede önemlidir. Tarayıcı penceresi yeniden boyutlandırıldığında resize olayı tetiklenir ve cihazın yönü yataydan dikey moda ve tekrar geriye değiştiğinde OrientationChange olayı tetiklenir.

Bu üç olayı ekran değişikliklerini tespit etmek ve ekranda görüntülenmesi gereken görüntü sayısını hesaplamak için kullanacağız. Bütün bunlardan sonra onları yükleyeceğiz.

Bu olaylardan herhangi biri gerçekleştiğinde sayfadaki henüz yüklenmemiş tüm görselleri buluyoruz. Bu görüntülerden tam olarak tarayıcının görünür alanında olanları seçiyoruz. Seçim, görüntünün üst uzaklığı, belgenin geçerli üst konumu ve pencerenin yüksekliği hesaplamalarına göre yapılır. Dolayısıyla, görünüm alanında bir resim belirirse, bunun URL'sini data-src özelliğinden seçip src özelliğine taşıyacağız, ardından tarayıcı görseli yükleyecektir.

Tembel sınıfına sahip tüm görselleri seçmek için JavaScript kullandığımızı lütfen unutmayın. Görüntü yüklendikten sonra bu sınıfı kaldıracağız çünkü artık olayı başlatmamıza gerek yok. Tüm görüntüler yüklendikten sonra tüm olay işleyicilerini kaldıracağız.

Sayfayı geri sardığımızda birçok kez kaydırma olayının tetiklendiğini unutmayın. Bu nedenle, performansı artırmak için komut dosyamıza, yavaş yüklemenin yürütülmesini düzenleyen küçük bir zaman aşımı ekliyoruz, böylece tarayıcıda aynı iş parçacığı üzerinde çalışan diğer görevleri engellemez.

İşte bu yaklaşımın çalışan bir örneği:

Bu yazıda tembel resim yüklemenin ilk yöntemini tartıştık ve bir sonraki makalede başka bir yöntemi tartışacağız.