WordPress’te Lazy Yük Görüntü Nasıl Yapılır (+ Yerel tembel yükleme nedir)
Son güncelleme: Haziran 2021 Kimse yavaş bir WordPress web sitesini sevmez. Ancak, görüntüler web’deki en popüler medya biçimidir. Çoğu web sitesi tarafından yayınlanan en zor kaynaklardan biridir ve diğer varlıklardan daha fazla bant genişliği harcarlar. Sonuç olarak, yavaş açılış sayfaları birçok WordPress sitesi için bir sorundur. Bu yüzden WordPress’te görüntüleri optimize etmek çok önemlidir. Ancak, ne kadar optimize edebileceğiniz konusunda sınırlar vardır. Web sayfalarınızda çok fazla resim varsa, ziyaretçilerinizin sayfa yüklenmeden önce bile sıçrama olasılığı yüksektir.
Bu nedenle yavaş görüntü yüklemesi, WordPress sitenizin daha hızlı yüklenmesi için önemli bir adımdır. Yavaş yükleme ile görüntüyü yalnızca kullanıcı belirli bir görüntüye eğittiğinde yükleyebilirsiniz. Alt Paro’daki görüntüleri yalnızca kullanıcı aşağı indiğinde yüklemeye zorlayarak, yavaş yükleme, kullanıcının deneyimine zarar vermeden kritik oluşturma yolunu azaltmak için de kolay bir çözümdür. Bu yazıda, WordPress sitenizdeki görüntüler ve videolar için yavaş yüklemeyi nasıl etkinleştireceğinizi ve devre dışı bırakacağınızı öğreneceksiniz. Ayrıca orijinal tembel yükleme WordPress’in ne olduğunu ve nasıl çalıştığını da anlayacaksınız. Tembel yüklemenin artık sizin için bir sırrı olmayacak!
Tembel yükleme nedir ve nasıl çalıştığı yavaş yavaş yükleme, WordPress sitenizdeki görüntü yüklemenin senkronizasyon dışında olduğu anlamına gelir. Başka bir deyişle, web sayfalarınızdaki görüntüleri ve diğer içeriği farklı zamanlarda yüklemek. Kısacası, yavaş yükleme bu şekilde çalışır: Birisi web sitenizi ziyaret ettiğinde, resim en üst paro’ya yüklenir, ancak sayfadaki kalan resimler yalnızca kullanıcı ekranında göründüğünde indirilir. Başka bir deyişle, tembel yükleme ekran dışındaki görüntüleri geciktirmek anlamına gelir. Birçok web sitesi bu tekniği kullanarak görüntülerle doludur. Sayfayı aşağı kaydırdığınızda, orijinal görüntülerle hızlı bir şekilde doldurulmuş bir yer tutucu görüntü göreceksiniz. İyi bir örnek, popüler bir blog web sitesi olan Medium’dur.
Orta sitede tembel yükleme. Yukarıdaki resimden de görebileceğiniz gibi, ortam, gerçekten tam yüklü yüksek çözünürlüklü görüntülere bulanık bir yer tutucu görüntüsü görüntüler. Bu nedenle, ziyaretçiler bir görüntünün geleceğini biliyorlar. Hücresel yüklemede tembel yükleme, hücresel ve masaüstünde yavaşça işlev görür – ve aynı şey yavaşça yüklemenin nasıl uygulanması gerektiği için geçerlidir. Dahası, mobil yavaş yükleme, kullanıcılara daha yüksek avantaj sağlar, çünkü kaydırmadıkları görüntüleri yüklemek için herhangi bir hücresel veri kullanmaları gerekmez.
Orijinal yavaş yükleme görüntüsü Chrome tarayıcısında (Kaynak: Google) Yukarıda gösterilen tüm demoyu görebilir ve yükleme özniteliklerinin 100 resimle nasıl işlediğini kendiniz görebilirsiniz.
HTML Yükleme Özellikleri aşağıdaki üç değeri destekleyin:
Otomatik: Herhangi bir değer belirlemiyorsanız, yükleme özelliğinin varsayılan değeri, varsayılanın yavaş yükleme davranışına karar vermek için tarayıcıya gönderen otomatiktir.
Not: Yükleme öznitelikleri şimdilik yalnızca ve etiketlerini destekler. Örneğin, CSS arka plan görüntülerini yavaşlatmak için kullanamazsınız.
Yavaş yükleme görüntüleri için orijinal destek pişirmek, sitenizin performansını artırmanızı çok kolaylaştırır.
Sitenizdeki yavaş yükleme işlevini etkinleştirmek için JQuery gibi harici JS kitaplıklarını yüklemenize gerek yoktur. Sitenizde ne kadar az üçüncü taraf kaynağı varsa, performans o kadar iyi olur.
HTML standardının bir parçası olarak tembel yükleme işlevini yapmak, işlevin tüm büyük tarayıcılarda mükemmel çalışmasını sağlayacaktır.
Kullanıcılar ve web sitesi sahipleri için artan veri tasarrufu ve bant genişliği maliyetleri.
Orijinal Yükleme Tarayıcının Destek ve Uyumluluğu Can I’e göre, yükleme özelliği, küresel İnternet kitlesinin% 72’sinden fazlası tarafından kullanılan tarayıcı tarafından desteklenir. Özellikle, orijinal yükleme Google Chrome ve Opera tarafından desteklenir. Chrome 77 ile Google, yavaş yükleme kaynakları için yeni yükleme öznitelikleri kullanma imkanı uygular. Bugün iki ana bekçi tarayıcı safari ve iOS Safari’dir ve bunların her ikisi de çevrimiçi kullanıcıların% 15’inden fazlası tarafından kullanılır.
Ana tarayıcıda yükleme özelliğini desteklemeyen ‘yükleme’ öznitelikleri için destek yavaş yüklemenin avantajlarını görmez, ancak kodunuzdaki Lazy yükleme özelliğini içerir. Not: Gelişmiş Menü> Deneysel Özellikler altında Tarayıcı Safari ve iOS Safari’de yükleme özniteliğini manuel olarak etkinleştirebilirsiniz. Orijinal görüntü, WordPress 5.5’te API tembel yüklemeyi tanıtmak için tembeldir WordPress Core’a yıllardır WordPress katkıda bulunanlar arasında sürekli bir tartışma haline geldi. Ancak, o zaman doğru standartlar olmadan, kolay bir süreç değildi.
Orijinal HTML yükleme özelliğine giriş ve son olarak ana tarayıcı tarafından desteklenerek bunu değiştirin. Birkaç ay sonra, WordPress Core geliştirme ekibi WordPress 5.5’teki orijinal yükleme görüntüsünü duyurdu. WordPress WordPress 5.5’te nasıl tembel yükleme uygulandığı, önceden belirlenmiş geniş ve yükseklik özniteliğine sahip her görüntüye bir çift yükleme özniteliği değer = “tembel” ekleyecektir. Bu durum, kümülatif düzen kaymasının (CLS) önlenmesini içerir. İşte o zaman Web sayfalarının düzeni aniden değişti ve patlayan bir kullanıcı deneyimi yaratıyor. CLS (Kaynak: Google) Google, web sitesini CLS puanlarına göre değerlendirdiği için zayıf kullanıcı deneyimlerine örnekler. Sıralamaları Google tarafından arama sonuçlarını sıralamada kötü bir şekilde cezalandırılanlar. Resimdeki genişlik ve yükseklik özelliklerini içerdiğinden, düzendeki değişimi ortadan kaldırmaya yardımcı olabilir, bu da iyi bir durumdur.
Teknik olarak, orijinal yavaş yükleme görüntüsü özelliği WordPress, SRCSET ve boyut öznitelikleri ekleyerek duyarlı görüntülerin nasıl işleneceğine benzer şekilde çalışır. Yukarıda, WordPress henüz değilse geniş ve yüksek özelliklerle tüm IMG etiketlerini şarj edecektir. Bu, sitenizdeki tüm görüntülerin yavaş yüklemeden yararlanmasını sağlamak için yapılır. Çekirdek ekip ayrıca tüm görüntüleri geniş ve yüksek bir özelliğe sahip olmaya zorlamaya yeni özellikler teşvik ediyor. Varsayılan olarak, WordPress, aşağıdaki işlevlerin veya kancaların çıktısındaki tüm resim etiketlerine yükleme özelliği = “tembel” ekler:
The_content (): İçerik yayınlamadaki görüntüler. The_excerpt (): alıntılar göndermedeki görüntüler.
Widget_text_concent: metin widget’ındaki görüntü. get_avatar (): avatar görüntüsü.
wp_get_attachment_image (): görüntü WordPress’e ek olarak eklenir. Bunlara da şablon görüntüleri denir. Bu işlevin çıktılarının her biri WordPress’te belirli “bağlam” a yol açar. Bir sonraki bölümde bu beş bağlamın önemini öğreneceksiniz. WordPress ayrıca bu geçişi sunucu kaynaklarınıza kolaylaştırmak için bir dizi yeni temel işlev ekledi. Aşağıda, ne yaptıklarının kısa bir açıklaması ile bunların bir listesi var:
WP_FILTER_CONTENT_TAGS (): HTML etiketlerini yeni özellikler içerecek şekilde yayınlamada değiştirme. Örneğin, gerekirse sonraki üç işlevi arayarak IMG etiketini değiştirme. Diğer HTML öğelerini de optimize etmek için benzer işlevler daha sonra eklenebilir.
wp_img_tag_add_width_and_height_attr (): IMG etiketine sahip olmayan geniş ve yüksek öznitelikler ekleyin.
wp_img_tag_add_srcset_and_seses_attr (): Mevcut IMG etiketine srcset öznitelikleri ve boyut ekleyin.
wp_img_tag_add_loading_attr (): IMG etiketine yükleme öznitelikleri ekleyin.
Tembel Orijinal Görüntüyü Ayarlama WordPress Üzerine Yükleme WordPress’teki orijinal görüntünün yavaş yüklenmesinin varsayılan davranışını çeşitli filtrelerden ayarlayabilirsiniz:
En önemli şey, ayarlamalar için üç parametre alan WP_LAZY_LOADING_ENABLE filtresidir: $ varsayılan, $ tag_name ve $ context. Bu filtreye bağlanabilir ve tüm şablon görüntüleri için yavaş yüklemeyi kapatabilirsiniz. Yavaş yüklemeyi devre dışı bırakma hakkında daha fazla bilgi edinmek istiyorsanız, özel bir bölüme atlayın!
WP_IMG_TAG_ADD_Loading_attr adlı başka bir yeni filtre, the_concent, the_excerpt ve widget_text_concent gibi bağlamla ilgili içerikteki görüntüleri değiştirmek için bağlanabilir. Yalnızca görüntüleri (örneğin wp_get_attachment_image () görüntüleyen bağlamlar için, doğrudan php kullanarak $ attr’i değiştirebilirsiniz.
WordPress Core ekibi, tüm özelliklerini bilmenize yardımcı olacak yavaş yükleme ayarlarına ilişkin birkaç örnek yayınladı. Bir WordPress tema geliştiricisi veya eklentisiyseniz, bunu görmenizi şiddetle tavsiye ederiz.
Şimdiye kadar, WordPress yalnızca görüntüler için orijinal yavaş yüklemenin işlevselliğini desteklemektedir. Ancak gelecekte diğer HTML öğelerine (örneğin IFRames) genişletebilirler. WordPress 5.5 tembel yük neden çalışmıyor? WordPress tembel yük çalışmıyorsa, şansınız yavaş yüklemek istediğiniz görüntünün bir arka plan görüntüsü olmasıdır. Arka plan görüntüsünde veya etiketi yok-WordPress tarafından yavaşça yüklenen tek etiket. Ayrıca, orijinal tembel yükün bir eşiği olduğunu hatırlamanız gerekir. Eşiğin üzerindeki resim yüklenecek. Yükleme teknik olarak işlevsel olsa bile, eşiğin üzerindeki resim yavaşça yüklenmeyecektir. WP roketi kullanıyorsanız ve görüntünüz yavaş yüklenmiyorsa, bunun nedeni:
Görüntü kuvvet sayfasına eklenir.
Görüntü komut dosyasına dinamik olarak eklenir.
Görüntü, veri-src ve veri-no-lazy gibi hariç tutulan özelliklerden birini içerir (liste oldukça uzundur).
Özel kaynaklarda bazı görüntülerin neden WP roketiyle tembel bir şekilde yüklenmediği hakkında daha fazla bilgi edinebilirsiniz. WordPress’te Resimlere ve Videolara Tembel Yük Nasıl Etkinleştirilir Sitenize yavaş yükleme eklemek için birçok seçenek vardır. WordPress için en iyi yükleme eklentilerimiz listemizi görebilirsiniz. Ancak şimdiye kadar, sitenize tembel yükleme eklemenin en kolay yolu WP Rocket ile. Etkinleştirilmesi bir dakikadan az sürer. WP Rocket LazyLoad WP Roket ile uyumluluk Lazyload adlı tembel yükleme görüntüsünün uygulanmasıyla birlikte gelir. WP Roket, potansiyel çatışmalardan kaçınmak için tembelload etkin olduğunda orijinal WordPress görüntüsünün yavaş yüklenmesini otomatik olarak devre dışı bırakır. WP roketinin tembel yük özelliğini etkinleştirmek, WordPress yönetici gösterge panelinize ayarlar> WP Roket> Ortam panelini girerek kolayca etkinleştirebilirsiniz. Sayfanın üst kısmındaki tembelload bölümünde “Görüntü için etkinleştir” ve ardından “Değişikliği Kaydet” i tıklayın.
. Yapmanız gereken tek şey bu. Artık siteniz ziyaretçiler için resim yüklemek için tembel olacak. Sitenizdeki herhangi bir güncelleme veya değişiklik gibi, çatışmayı gerçekleştirmek önemlidir. Dolayısıyla, yavaş yüklemenin etkinleştirilmesinin sitenizde herhangi bir şeye zarar verdiğini görürseniz, bu yavaş yükleme ile ilgili genel sorunların listesine bakın. Yavaş yükleme özellikleri, çatışmaya neden olabilecek Revolution Sliders ve Envira Galerisi gibi eklentiler tarafından eklenen görüntülerden hariç tutulacaktır. Aşağıda uyumlu eklentilerin tam bir listesi verilmiştir. Orijinal WordPress uygulamasının aksine, LazyLoad, IFrame ve Video gibi diğer HTML öğeleri için yavaş yükleme sağlar. Bu ayrıca, belirli HTML öğeleri için satırda uygulanırsa yavaş arka plan görüntüleri yükler. Yavaş yükleme orijinal WordPress görüntülerini kullanmak istiyorsanız WP Roket’teki Lazyload seçeneğini devre dışı bırakabilirsiniz. Ancak, bazı tarayıcılar yeni yükleme özelliklerini desteklemez. Ayrıca, WordPress uygulamasını yalnızca resme odaklar. Web siteniz birçok resim, video ve Semanan içeriyorsa, Lazyload WP roketi hala daha iyi bir genel seçenektir. WP Roketi ile orijinal tembel yükleme nasıl etkinleştirilir WP Rocket, orijinal yavaş yükleme kullanarak krom tarayıcı ile otomatik uyumluluk içermese bile, Lazy Orijinal Yükleme Kromu için destek seçebilirsiniz: Merhamet eklentisinden etkinleştirebilirsiniz. Bu hizmetçi eklentisiyle, aşağıdakilerden emin olabilirsiniz: Tüm resimlerinizin yavaş yüklemeyi kullanmak için gerekli HTML işaretlemesi olacak;
Uyumlu krom tarayıcı, orijinal yavaş yüklemeyi otomatik olarak kullanacaktır;
Diğerleri otomatik olarak LazyLoad WP roketini kullanacak. Güçlü tembel yük sistemimizin tadını çıkarmaya devam edebilir veya Chrome’un yavaş yüklemesini kullanmaya karar verebilirsiniz.Size kalmış!Sitenizdeki iki çözümü test edin ve sizin için neyin en iyi olduğuna karar verin.WordPress’e bir arka plan görüntüsü yüklemenin tembel yolu, yukarıda açıklandığı gibi, arka plan görüntüleri tembel yüklemenin çalışmamasının nedeni olabilir.Bir arka plan görüntüsü yüklemek için tembel olmanın en kolay yolu, WP Rocket gibi eklentileri kullanmaktır.WP Rocket, aşağıdaki öğelerde HTML’deki bir satırda yer alan arka plan kuvveti sırasında arka plan görüntüsünde yavaş yüklemeyi destekler:
Diva
ulaşmak
Bölüm
Li
a
Aşağıda uyumlu bir işaretleme örneğidir:
Teknik belgelerimizde WP roketiyle yavaş bir arka plan görüntüsü yükleme hakkında daha fazla bilgi edinebilirsiniz. Özellikle Elementors kullanıyorsanız, Tembel Yük Elementor Arka Plan Görüntüleri eklentisini deneyebilirsiniz. WooCommerce için WooCommerce için tembel yük, diğer tembel yükleme ile aynı şekilde çalışır. Yukarıda açıklandığı gibi yavaş yüklemeyi uyguladığınız sürece, wooocommerce ürün görüntüsünüz veya videonuz yavaş yüklenecektir. Kılavuzumuzda yer alan bilgileri izleyerek yavaş yüklemeyi kolayca etkinleştirebilir ve devre dışı bırakabilirsiniz. Bu nedenle, eşiğin üzerindeki herhangi bir şeyin yavaşça yüklenmeyeceğini de hatırlamanız gerekir. WordPress’te Video Yükleme Videoları Nasıl Yapılır WordPress sitenizde video yüklemek için tembel olmak istiyorsanız, videolar için Velocity veya Lazy Load gibi eklentileri kullanabilirsiniz. Bu eklentinin yalnızca YouTube ve Vimeo’da yayınlanan yavaş videoyu yükleyebileceğini bilin. MP4 videoları yüklemek için tembel olmak istiyorsanız, “ön yük” ve “poster” özelliklerini kullanarak tembel bir şekilde yükleyebilirsiniz.
. Google’ın özel makalelerinde daha fazla bilgi edinebilirsiniz. WordPress’te tembel yükleme nasıl devre dışı bırakılır WP roketinin tembel yüklenmesinin sadece açılıp kapatmaktan daha fazla özellik vardır. Bu eklenti, belirli yayınlar ve görüntüler için yavaş yüklemeyi kaldırma ve belirli görüntülere manuel olarak yavaş yükleme uygulama seçenekleri içerir. Örneğin, bu seçenek üst yarıdaki belirli görüntülerde yavaş yüklemeyi devre dışı bırakmak ve en büyük içerik boya değerini artırmak için yararlı olabilir. Dahası, birkaç kodla, yavaş yükleme görüntüsünüze solma etkisini eklemek için eklentiyi daha fazla ayarlayabilirsiniz. Haydi bakalım. Belirli bir gönderi ve sayfalarda tembelload devre dışı bırakma, yavaş yüklemek için kullanmak istemediğiniz bir gönderi veya sayfa var mı? Sebep ne olursa olsun, kapatmak kolaydır. Belirli bir gönderi veya sayfada yavaş yüklemeyi devre dışı bırakmak, bir gönderi veya sayfayı açmak ve Meta önbellek seçeneği kutusunda “,” Resimler için Lazyload “seçeneğini silin. Değişikliklerinizi kaydetmek için yayınları veya sayfaları yayınlamayı veya güncellemeyi unutmayın.
“Önbellek seçeneği” meta kutusundaki belirli yayınlar ve sayfalar için yavaş yüklemeyi etkinleştirebilir ve devre dışı bırakabilirsiniz. “Resimler için Lazyload” seçeneği gri ise, WP roket ayarlarında (Ayarlar> WP Roket> Temel) küresel olarak etkinleştirmelisiniz. Tembel yüklemenin sitenizde çalışma şeklini kontrol etmek istiyorsanız, kodu kodla devre dışı bırakın, Kod ile WP roketine bağlanın. Kod snippet’ini functions.php dosyasına eklemek, temayı ayarlamanın kolay bir yolu olsa da, aynı zamanda kötü bir uygulamadır. WP roket geliştiricileri özel bir MU eklentisi yapmanızı önerir. Çok kolay – burada daha fazla bilgi edinebilirsiniz. Eklentinizi hazırladıktan sonra, aşağıdaki kod görüntülerinden birini ekleyebilirsiniz. Tüm bu örnek sayfalarda tembel yükün devre dışı bırakılması, yayınınız için resim yüklemek için tembel olmak istiyorsanız, ancak bir sayfa değilse kullanışlıdır. add_filter (‘wp’, ‘__deActivate_Rocket_Lazyload_if_Page’); İşlev __deActivate_Rocket_LazyLoad_if_Page () {if (is_page ()) {add_filter (‘Do_Rocket_LazyLoad’, ‘__Reretur_false’); }} Bu snippet’in ana sayfasındaki tembel yükü devre dışı bırakır Sitenizin ön sayfası için yavaş yüklemeyi devre dışı bırakır (Ayarlar> Okuma> Ön Sayfa’da ayarladığınız sayfa). add_filter (‘wp’, ‘__deActivate_Rocket_Lazyload_if_Page’); İşlev __deActivate_Rocket_LazyLoad_if_Page () {if (is_front_page ()) {add_filter (‘Do_Rocket_LazyLoad’, ‘__Rereturn_false’);
}} Bu Snippet Blog sayfasındaki tembel yükü devre dışı bırakır. Blog ana sayfanız olarak ayarladığınız sayfa için yavaş yüklemeyi devre dışı bırakır (Ayarlar> Okuma> Ön sayfada da ayarladığınız sayfa). add_filter (‘wp’, ‘__deActivate_Rocket_Lazyload_if_Page’); İşlev __deActivate_Rocket_LazyLoad_if_Page () {if (Is_home ()) {add_filter (‘Do_Rocket_LazyLoad’, ‘__return_false’); }} Tek gönderilerde tembel yükü devre dışı bırakma Tüm tek yayınlarda yavaş yüklemeyi devre dışı bırakmak istiyorsanız, ancak yine de blog sayfalarınız ve sayfalarınız için etkinleştirin, add_filter (‘wp’, ‘__deactivate_rocket_lazyload_page’); İşlev __deActivate_Rocket_LazyLoad_if_Page () {if (is_single ()) {add_filter (‘Do_Rocket_LazyLoad’, ‘__Reretur_false’); }} Belirli bir görüntüdeki tembel yükü devre dışı bırakır Belirli bir görüntüdeki yavaş yüklemeyi veri-olmayan özelliklerle devre dışı bırakabilirsiniz: Fase efekt Tembel bir görüntü yüklemek için resmin resmi olduğunuzda, görüntünüz aniden sayfada hiçbir yerden görünmediğinde ziyaretçiler için biraz gürültülü olabilir. Neyse ki, bazı ince efektlerle, daha keyifli bir kullanıcı deneyimi sağlayabilirsiniz. Görüntülerde solma, tembel yükleme ile eşleştirilecek popüler bir etkidir. Aşağıdaki CSS görüntüleri, sitenize solma etkisini ekleyecektir. Kodunuzu stilinize yapıştırın.css (önce bir çocuğun temasını yapmayı unutmayın!): /* ‘Veri’ ile görüntü
