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.
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.
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.
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.
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;
}
