Tembel yükleme ile WordPress’te ekran dışı görüntüler nasıl geciktirilir
Google PagePeed Insights için performans önerilerinden biri, ekranın dışındaki görüntüleri WordPress’te yavaş yükleme ile ertelemektir. WordPress’te yavaş görüntülerin yüklenmesi, içerikten ödün vermeden başlangıç yükleme süresini ve sayfa yükünü azaltır. Yavaş yükleme, ziyaretçilerinizin sadece ihtiyaç duyduklarında ihtiyaç duyduklarına hizmet ederek ziyaretçilerinizin deneyimini geliştirir. Bu, yavaş görüntü trafiği tıkanıklığına neden olan, sadece boşluktaki yükleme yüklenmesinden çok daha verimlidir. Bu yazıda, yavaş yüklemenin sayfa performansını nasıl iyileştirebileceğini ve nasıl çalıştığını göstereceğim. Sonra resminizi WordPress’e yüklemek için nasıl tembel olacağımızı göreceğiz.
Tembel yükleme nedir? Tembel yükleme, “alt yarıda” veya başka bir deyişle, şu anda ViewPort tarayıcısında olmayan her şey kritik olmayan varlıkların yüklenmesini geciktirerek ilk sayfanın hızını ve yükü artırma tekniktir. WordPress’te ekran dışındaki görüntüleri geciktirmek temel olarak göremediğimiz görüntüleri yüklemeyi beklemek anlamına gelir. Varlıkları değil, varlıkları değil, web sayfanızdaki birçok şey, sitenin düzenini ve ilk ziyaretçileriniz tarafından görülen web sayfasının üstünü sunmanız gerekmediği sürece yavaşça yüklenebilir.
Şekil, kaynaklarda çok yoğun olduğu için yavaş yükleme için ideal bir kullanım durumudur. Videolar, senaryolar ve yorumlar da ideal adaylardır, çünkü web sayfalarına çok fazla kilo ekleme eğilimindedirler. Yavaş yükleme ile varlıklar gerektiğine kadar yüklenmez, ancak kullanıcı asla başaramazsa, varlık asla yüklenmez. Tembel yükleme neden sıradan yüklemeden daha iyi? Resminizi WordPress’e yüklemek, sitenizin, SEO’nun ve ziyaretçilerinizin deneyiminin performansını artırır. Yavaş yükleme çok daha hafif bir başlangıç web sayfası sunar ve gerektiğinde öğeler ekler. Yavaş yükleme ile tarayıcı, tüm sayfa yüklemeyi bitirmese bile, kullanıcınızın sitenizle etkileşime girmeye başlayabilmesi için bir DOM oluşturacaktır. Yavaş güçlendirme gerçekten görüntü dosyasını veya web sayfası dosyanızın boyutunu yapmaz küçülür. 3MB sayfa boyutunuz varsa, bu, yavaş yükleme içeren veya olmayan sayfanızdır. Bu görüntülerin sıkıştırılması gibi değil. Ancak yavaş yükleme, sitenizin kullanıcı algısını büyük ölçüde artıracaktır. Daha hızlı hissediyor ve onları bahçede tutmak yeterli olabilir. Google ayrıca PEED sayfasını bir sıralama faktörü olarak kullanır ve performansı artırmak için yavaş yükleme görüntüleri önerir. Ayrıca Google’ın daha yüksek bir sıralamaya sahip daha hızlı bir siteyi takdir ettiğini de biliyoruz, bu nedenle görüntünüzü yüklemek tembel görüntü SEO’nu dolaylı olarak iyileştirmenin bir yoludur.
Yavaş yükleme Smush Pro’yu etkinleştirmeden önce
Yavaş yükleme ayrıca daha az veri kullanır. Yavaş hücresel bağlantılar kullanan ziyaretçileriniz minnettar olacaktır. Yavaş yükleme, ziyaretçiler tüm resimlerinizi yüklemediğinde ve bir sonraki sayfaya geçmeyi bıraktıkları için kullanılan kaynakları azaltır. Tembel yükleme nasıl çalışır? Bu, ekranın dışındaki görüntüleri bir eklenti olmadan geciktirme şeklinizdir. İlk olarak, yavaşça hangi görüntüleri yüklemek istediğinizi belirlemeniz gerekir. Viewport’ta görünmeyen ve sayfanızın yapısına katkıda bulunmayan görüntüleri yüklemek için tembel olmalısınız. Örneğin, vücut metninizin üzerindeki başlık veya kahraman görüntüsündeki logo görüntüsünün yüklenmesi tembel olmamalıdır. En iyi kullanıcı deneyimini sağlamak için, görünümden yaklaşık 500 piksel uzaklıkta olan görüntüleri yüklemeniz gerekir, böylece ziyaretçilerin almadan önce yüklenecek zamanları vardır.
Görüntülerin Normal Yüklemesini Önleme Yavaş yükleme kullandığınızda, her zamanki şekilde yüklenen görüntüleri önlemeniz gerekir. Bunu kullanarak görüntüler için bunu yapmanın bir yolu
etiket
, görüntünün URL’sini SRC özniteliğinden silmek ve geçici olarak orada saklanacak veri-SRC gibi diğer özelliklere taşımaktır. Tarayıcının görüntüleri nasıl algıladığını belirleyin Bir sonraki şeyde, tarayıcının görüntünün görüntüye girip girmediğini nasıl belirleyeceğini aşmaktır. JavaScript olay işleyicisini veya API kavşak gözlemcisini kullanabilirsiniz. JavaScript Olay Niyetleri Tarayıcı uyumluluğu çok önemliyse, daha sonra kaydırma, yeniden boyutlandırma ve oryantasyonChange JavaScrange olay işleyicisi, bir öğenin görüntülüye ulaşıp ulaşmadığını belirlemek için ideal bir yoldur, çünkü bu yöntem bu yöntemdir. Tüm tarayıcılarla uyumlu. Ne yazık ki, bu, GetBoundingClientRect kullanarak öğenin görünürlüğünü tespit etmek için ek adımlar eklemenizi gerektirir. Bu, görüntü oluştururken biraz gecikmeye neden olabilir. Örnekleri burada görebilirsiniz. Yangın Gözlemci Kavşağı Gözlemci API, uyumlu bir tarayıcının bir resmin görünüm alanına ne zaman girdiğini öğrenmesi için modern ve en etkili bir yoldur. Bu aynı zamanda bir olay işleyicisini kullanmaktan daha hızlıdır. Çok daha az bir kod yazacaksınız, çünkü görüntü görünürlüğünün algılanması yöntemini bulmanız gereken kısımdan geçebilir ve görüntüleri görmek ve görüntü görüldüğünde tarayıcının ne yapması gerektiğini belirlemek için gözlemciyi kaydedebilirsiniz.
API Kavşak Gözlemcisi tarayıcı arasında yeterince iyi bir desteğe sahiptir, ancak evrensel olarak benimsenmemiştir, bu nedenle JavaScript işleyici olayını uyumsuz bir tarayıcı için yedek olarak kullanmanız gerekebilir. URL görüntüsünü SRC özniteliğine taşıyın, görüntünün “sahnede” veya ona yakın olduğunu algıladıktan sonra, görüntü URL’sini SRC veya SRCSET özniteliğine çekmenin zamanı geldi. Bu tamamlandıktan sonra, JavaScript kodunuzun tanımlamasına yardımcı olmak için resme eklenen herhangi bir sınıfı silebilir ve gözlemcileri silebiliriz. Tembel yükleme WordPress’e resim yüklemek için nasıl tembelleştirilir, WordPress sitenize eklentiler veya JavaScript ile eklenebilir. Hepsi benzer sonuçlar üretir. Yavaş yüklemenin uygulanması nispeten kolaydır, bu nedenle bir eklenti seçseniz bile, dosya boyutu genellikle 1-3 kb civarındadır ve bu nedenle ışıktır. Seçenek 1: WordPress’te ekran dışındaki görüntüleri geciktirmek için sıradan javascript kullanın, doğrudan JavaScript’i kullanıyorsanız ve tam kontrol etmek istiyorsanız, doğrudan sitenize yavaş yükleme ekleyebilirsiniz. Bu işlevi eklemenin en iyi yolu, elbette JavaScript kodunuz için bir eklenti oluşturmaktır. Bu sayfada iki örnek var. Biri bir olay işleyicisinin nasıl kullanılacağını, diğeri de bir API kavşak gözlemcisinin nasıl kullanılacağını gösterir.
Seçenek 2: JavaScript Tembel Yükleme Kütüphanesi’ni kullanın, yardımcı olmak için JavaScript kitaplığını kullanmak istiyorsanız, birçok seçenek vardır. Birçoğu yukarıda açıkladığım süreci takip ediyor, böylece hızlı bir şekilde başlayabilirsiniz.
Kavşak Gözlemcisi Kullanmadan Yavaş Yükleme React React React React React
Lozad.js – Yalnızca Kavşak Gözlemcisi, Super Light Blazy – Süper Işık, ancak Kavşak Gözlemcisini kullanmaz
Yall.js – kavşak gözlemcisini kullanarak ve etkinlik işleyicisine dön
LazySISSES – Video ve Iframe çok tembel yükleyebilir
JQuery Core WordPress’e dahil edildiğinden JQuery eklentisini iş için de kullanabilirsiniz. Seçenek 3: Tembel Yük Eklentisini kullanın, ancak şimdiye kadar tembel yükleme ile başlamanın en kolay yolu WordPress eklentisini kullanmaktır. Çoğu eklenti, Smush Pro gibi premium görüntüleri optimize eder. Ayrıca, Smush ile tembel yüklemeyi etkinleştirmek için Smush on wordpress.org’un ücretsiz sürümüne dahil ediyoruz, süreci süper bir küçük hale getirdik. Tek yapmanız gereken Smush Pro’daki tembel yükleme bölümüne gitmek ve Etkinleştir düğmesine basmak.
Smush Pro’yu yükleyin ve 2 dakikadan daha kısa bir sürede yavaş yükleme alın
İşte burada. Hangi görüntülerin yavaşça yüklendiğini kontrol etmek istiyorsanız, yavaş yüklemeyi etkinleştirdikten sonra ek seçenekleriniz olacaktır. Smush Pro’da tembel yüklemeyi etkinleştirdiğinizde, görüntünüzü hücresel kullanıcılar için yüklemek için de tembel olacaksınız. Resimleri yüklemek için tembel olduğunda dikkat edilmesi gereken şeyler
Yavaş yükleme, sitenizi yavaşlatan ekstra ağırlık eklemese de, arama motorlarının doğru yapılmazsa sitenizi tarama yeteneğine müdahale edebilir.
En üst paroda resim kaydetmeye çalışırken, Flip cihaza göre değişir, bu nedenle ertelenecek görüntüye karar vermeye çalıştığınızda bunu hatırlayın.
SRC özniteliğini boş bırakmak yerine bir yer tutucu görüntü kullanın. Ve görüntünüz yüklendiğinde içeriğinizin değişmemesi için görüntünüz için yüksekliği ve genişliği belirleyin. Ziyaretçileriniz JavaScript’i devre dışı bırakırsa ne olacağını belirlemek için işaretlemesini kullanın.
Sitenizde resimleri yavaşça yüklemeye çalıştınız mı? Google PagePeed Insights’daki değerinizi artırıyor mu?
Etiket:
Görüntüler
Javascript
jQuery
göstermek
