LiteSpeed’de Lazy Load ve Viewport

 
LiteSpeed'de Lazy Load ve Viewport

Bu üç şey, ne oldukları konusunda net olmayanlar için başlangıçta tanımlanmıştır.

Tembel Yük

Birebir çeviri için “tembel” olarak da adlandırılan tembel yükleme, kullanılmayacak nesnelerin gereksiz ön yüklemesini önlemek için bir nesnenin yüklenmesini veya oluşturulmasını doğru kullanım zamanına kadar geciktirmek için kullanılan bir tasarım modelidir. En yaygın olarak görüntüler için kullanılır ve daha iyi yükleme sürelerine ve bant genişliği tasarrufuna katkıda bulunur.

Her görüntünün işlenmesi, siz görüntü alanında ilerledikçe yüklenerek ihtiyaç duyulana kadar ertelenir

Görünüm Alanı

Görünüm Alanıtam bir çevirisi olmayan, ancak genellikle “grafik pencere” olarak adlandırılan bu pencere, Apple tarafından 2007 yılında iPhone için oluşturuldu ve Nokia’nın Mini Map için tasarladığına benzer bir sanal pencereydi. Bu, web sayfalarının mobil tarayıcılara web tarayıcısının sayfayı nasıl işlemesini istediklerini iletmeleri için bir yol sağlamayı amaçlayan bir meta etiketiydi ve hala da öyle.

Bu meta etiket olmadan, iPhone’lar web sayfalarını kullanıcının yakınlaştırıp uzaklaştırması gereken 980 piksel genişliğinde bir pencere olarak işliyordu. Bu meta etiketle, bir sayfayı gerçek boyutunda oluşturabilir ve ardından mobil tarayıcı kullanırken hepimizin görmeyi beklediği türden bir sayfa sağlamak için düzeni uyarlayabilirsiniz. Sonunda çoğu cihaz tarafından desteklenen standart bir meta etiket haline geldi ve bugün duyarlı tasarım olarak bilinen şey için kullanılıyor.

Litespeed Önbellek

LiteSpeed Web Server bir web sunucusu yazılımıdır ve LiteSpeed Önbellek wordPress (LSCWP), WordPress kullanan ve LiteSpeed çalıştıran bir sunucuda barındırılan siteler için benzersiz bir sunucu çapında önbellek ve bir dizi optimizasyon özelliği içeren hepsi bir arada site hızlandırma eklentisidir.

Resimler yükleniyor

İdeal olarak, sayfa ilk yüklendiğinde zaten görüntü alanında olanlar, yani biz kaydırmadan önce ekranda ilk bakışta gösterilenler hariç tüm görüntüler ertelenmiş olarak yüklenmelidir.

Bunun bir sorunu var. Sayfa ilk yüklemede çirkin görünebilir çünkü görüntüler hareket olmadığı sürece gösterilmez ve gösterilen ilk iki veya üçünü hariç tutmanız gerekir

WordPress 5.5 sürümünden bu yana yerel ertelenmiş yüklemeye sahip olsa da ve bunu aşağıdaki gibi diğer birçok eklentiyle yapabilsek de Perfmattershangi görüntülerin görüntülenmesini istediğinizi sınırlamak için Viewport kontrolü o kadar basit değildir, çünkü örneğin görüntülemek istediğimiz görüntülerin ertelenmiş yüklemesini yapmamasını söyleyebiliriz, ancak bunları ayarlayamaz veya hariç tutamayız ilk iki, üç veya dörtancak her sayfa için belirli görüntüleri basit bir şekilde ayarlayamayız veya hariç tutamayız ve bunu yalnızca toplu olarak.

VPI

25 Temmuz’da LiteSpeed, eklentisinin 5.0 sürüm güncellemesine bunu düzeltmek için VPI (Viewport Images) adını verdiği esnek bir seçenek ekledi.

VPI hizmeti bir URL’yi inceler ve masaüstü görüntülemeler için 1300×900 piksel ekranda hangi görüntülerin görünür olduğunu ve mobil görüntülemeler için 480×800 ekranda hangi görüntülerin görünür olduğunu belirler. LiteSpeed eklentisine bu görüntülerin bir listesini döndürür ve LiteSpeed eklentisi bu URL’yi bir sonraki önbelleğe alışında bu görüntüleri yavaş yüklemenin dışında tutar.

Sonuç olarak sayfa tamamen üst kısımda görüntülenirken alt kısımdaki tüm görseller önceki gibi davranmaya devam eder. Sayfa iyi sayfa hızı puanını korurken, insan ziyaretçiler ilk tam ekran içerikle karşılaşır.

Konfigürasyon

Bu yeni hizmeti kullanmak için, tabii ki, etkinleştirmeniz gerekiyor Tembel Yük eklentide.

VPI’ın yapılandırması basittir, sadece iki anahtarı vardır.

Lazy Load y Viewport en Litespeed

Görünüm alanı görüntüleri (bundan sonra VPI olarak anılacaktır) etkinleştirildiğinde ve cron AÇIK olarak ayarlandığında, VPI görüntüleri cron tabanlı bir kuyruk aracılığıyla arka planda oluşturulacaktır.

Eğer cron’u etkinleştirmek istemiyorsanız, VPI kuyruğunu manuel olarak işlemeniz gerekecektir. Bunu, kuyrukta URL’ler olduğunda görünecek olan“VPI kuyruğunu manuel olarak çalıştır” düğmesinden veya ana kontrol panelinden“Cron’u zorla” seçeneğinden yapabilirsiniz.

LiteSpeed'de Lazy Load ve Viewport

Bu yeni seçenekle ilgili ilginç ve gerçekten kullanışlı olan şey, artık hem klasik düzenleyicide hem de Gutenberg’de, her gönderi ve sayfada LiteSpeed seçeneklerinde bu seçeneği tamamen devre dışı bırakabileceğiniz ve istediğiniz gibi ince ayar yapmak için Görünüm Alanı’ndan herhangi bir görüntüyü kaldırabileceğiniz yeni bir kutu bulacaksınız.

LiteSpeed'de Lazy Load ve Viewport

Bu kutularda görünen resimler ertelenmiş olarak yüklenmeyecektir

Girdi henüz VPI için işlenmemişse, her iki kutu da boş görünecektir, ancak görüntüleri istediğiniz gibi manuel olarak ekleyebilir veya her iki kutudan görüntüleri silebilir ve bir VPI yeniden hesaplamasını zorlayabilirsiniz.

İyi ve daha az iyi

Şüphesiz LiteSpeed’in VPI’sının en büyük avantajı, ertelenmiş yüklemenin hangi belirli görüntülere uygulanmasını istemediğimize hızlı ve kolay bir şekilde karar verebilmek ve bunu her sayfa için manuel olarak ayarlayabilmektir.

İşin püf noktası, bu seçeneğin aşağıdaki diğer WordPress optimizasyon hizmetlerine ek olarak sunulmasıdır QUIC.cloud kritik CSS (CCSS), Benzersiz CSS (UCSS), Düşük Kaliteli Görüntü Yer Tutucuları (LQIP) ve Görüntü Optimizasyonu gibi sınırlı bir ücretsiz ücret sunmamıza rağmen bu her zaman yeterli olmayabilir ve daha sonra kredi satın almanız gerekir pahalı değil.

Sonucu WordPress Core ve Perfmatters’ın (miktar başına sabit dışlamalarla) yerel Tembel Yüklemesi ile karşılaştırmak için test etmeye karar verdim ve şu ana kadar zaten kalan küçük marjda bir iyileşme görebiliyorum.

LiteSpeed'de Lazy Load ve Viewport

Nihai görsel sonuç Perfmatters ile elde edilenle tamamen aynıdır, çünkü sadece yer tutucu griden beyaza çevirin ve bu CSS ile“fade in” efektinin süresini ayarlayın.

/* Litespeed'in Tembel Yüklemesi için Solma - BÖLÜM 1 - Tembel Yüklemeden Önce */
img[data-lazyloaded]{
	opaklık: 0;
}

/* BÖLÜM 2 - Tembel Yükleme Üzerine */
img.litespeed-loaded{
	-webkit-transition: opacity .5s linear 0.2s;
	-moz-transition: opacity .5s linear 0.2s;
	geçiş: opaklık .5s doğrusal 0.2s;
	opaklık: 1;
}


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad
Artículos relacionados

Este blog se aloja en LucusHost

LucusHost, el mejor hosting

Grandes personan que patrocinan.

Patreon

Recibe contenido extra y adelantos desde sólo un dolarcito al mes como ya hacen estos amables lectores:

César D. Rodas - Jorge Zamuz - David Jubete Rafa Morata - Sasha Pardo - Ángel Mentor - Jorge Ariño - Vlad SabouPedro - Álvaro RGV - Araq