WordPress’te uygulanan boyutlarla görüntüleri yüklemek için tembel
Bu makalede, WordPress’te uygulanan boyutlarla yük görüntülerinin nasıl tembelleştirileceğini tartışacağız. Devtools Chrome Konsolunuzu keşfedebilir ve bu hata mesajını bulabilirsiniz: [Müdahale] öğesi yükleme = tembel ile tembeldir, ancak belirtilen boyutları yoktur. Performansı artırmak için boyutları belirleyin. Bu tembel yükleme hatası ne anlama geliyor? Bu hatayı düzeltmeden önce, bunun ne anlama geldiğini kesinlikle tanımlayalım. Bu hata mesajını görürseniz, WordPress’e resim yüklemek için tembel olabilirsiniz. Yani, ziyaretçiler dışında resim yüklenmeyecek. Bu, web sitesi yüklendiğinde aktarılan veri miktarını azaltır ve genel sayfa hızını hızlandırır.
Bu hızlı video klip, tembel yüklemenin nasıl çalıştığını mükemmel bir şekilde görselleştiriyor. Bu özelliği WordPress web sitenize uygulamak için kullanabileceğiniz birçok genel tembel yükleme eklentisi vardır:
Gerçekte ne yapıldığının resmi tanımı aşağıdaki gibidir: * Görüntü veya IFrame görünümden uzaklığın eşiğine ulaşana kadar yüklemeyi geciktirmek için ‘tembel’. Bu hata tetiklenir çünkü yavaş yüklemeyi etkinleştirirsiniz, ancak görüntünün boyutlarını belirlemezsiniz. Bu, görüntü yüklenmeden önce yer tutucu alanının kaldırıldığı anlamına gelir. Yüklemeden önce görüntünün boyutlarını belirleyerek, tarayıcı belirli görüntüleri yüklemek için bir yer tutucu içerecektir. Örneğin, 500 kez 600 piksel boyutu olan bir görüntü belirlediğinde, yüklemek için 500 kat 600 piksel alan olacaktır. Bu, içeriği yukarı ve aşağı doğru itmeyeceği anlamına gelir (bu fenomenin resmi terimi “yansıtır”). Yer tutucunun boyutlarını belirlemezseniz, görüntü yüklendiğinde içeriği yukarı ve aşağı itecektir. Ziyaretçiler ViewPort’a döndüğünde. Chrome bunu sevmez, yavaş yükleme hatalarını tetikler: [Müdahale] öğesi yükleme = tembel ile tembeldir, ancak belirtilen boyutları yoktur. Performansı artırmak için boyutları belirleyin. Bu, bireysel bir eklenti değil, gerçek görüntü ile ilgili bir sorundur ve krom doğanın yavaş yüklenmesi ile tetiklenir. (Ek notlar, bu düzende bir değişikliktir. Bazı durumlarda, düzen değişiklikleri kötü olabilir, ancak bu sadece kullanıcı tarafından tetiklendiği için negatif düzende bir değişiklik olarak hesaplanmaz).
Bu büyük bir sorun mu? Bu hatayı yaşarsanız, bu büyük bir sorun değil. Bu sorunun varsa Google web sitesi sıralamasını cezalandırmayacaktır. En kötüsü, bu ziyaretçiler için küçük bir rahatsızlıktır, çünkü görüntü sayfaya yüklendiğinde içerik taşınır.
Bunu düzeltmenin yolu, WordPress’teki görüntü boyutunun yavaş yükleme problemini düzeltmenin en kolay yolu, bir hata raporuyla önerildiği gibi yapmaktır: WordPress’te yavaşça yüklenen görüntüye boyutlar ekleyin. Bu, şöyle görünmek yerine:
“> Genellikle, WordPress otomatik olarak resim ekler özellikler ve yükseklik ile. Ancak, manuel olarak yapmanız gerekiyorsa, bunu Gutenberg editöründen veya klasik editördeki metin sekmesinden yapabilirsiniz. Başarılı bir gelişme yoksa, yavaş yükleme eklentisini ve/veya temanızı değiştirmeye çalışabilirsiniz. Ancak, bu özellikle temanın sonundan itibaren pratik olmayabilir. Bu durumda, GitHub’da bulduğumuz bu eklentiyi denemek isteyebilirsiniz. Yazıdaki tüm görüntüleri tekrarlar ve görüntü yapısına sarar. Ayrıca, sayfada duyarlı görüntüler sipariş alanı sağlar, böylece yeniden akışı (veya içerik hareketini) önler.
https://github.com/sabatinomasala/codecaptain-image-tos-figure-converter Diğer teknik iyileştirmeler, belirli tema görüntüleri için functions.php dosyasına boyutlar ekliyor. Görüntünün boyutunu belirleyebilir, ardından o boyuta standart bir boyut ekleyebilirsiniz. WordPress’e yeni bir standart boyut ekleyebilirsiniz. add_image_size (String $ name, int $ genişlik, int $ yükseklik, bool | dizi $ chric = false) İşte web sitenizde kullanılmak üzere uyarlanabilecek bazı kod örnekleri: add_image_size (‘Thumbnil’, 600, 350, true) ; add_image_size (‘orta’, 600, 350, true); Aslında bu işlevle ilgili yapabileceğiniz birçok şey vardır ve WordPress geliştirici referansında tartışılır. Bu başarılı olabilir, ancak görüntü duyarlılığını ortadan kaldırabilir. Başka bir daha karmaşık çözüm, ancak her durumda işlev görebilecek çözüme “dolgu altında hackleme” denir. 2013 yılında tanıtılan büyük bir dergi makalesinde, bu hackleme, resim için duyarlı en boy oranının yer tutucusunu ve boyutunu belirler. Temel olarak, bu görüntüleri div’e sarmış ve div’i 16 kez 9 oranına uyacak şekilde ölçmek için dolgu tabancaları kullanılarak. Görüntü daha sonra sağlanan alana doldurmak için ölçülür. Aşağıda, bu makaleden alınan kod:
.img-contraainer {pozisyon: göreceli;Pilding Alt:%56.25;/ * 16: 9 oranı */ yükseklik: 0;Taşma: gizli;} .IMG-Container IMG {Pozisyon: Mutlak;Üst: 0;Sol: 0;Genişlik:%100;Yükseklik:%100;} Sonuç bir sonuç olarak, krom konsolda bu hatanın üstesinden gelmenin en iyi yolu – [müdahale] öğesi , yükleme ile tembel olarak yayınlanmıştır, ancak belirtilen boyutları yoktur.Performansı artırmak için boyutları belirleyin.- Sadece önerildiği gibi yapın ve resme boyut ekleyin.Bunu Gutenberg, Classic Editor, HTML ve More.tldr;WordPress’te yavaş yüklü görüntüye boyutlar ekleyin!Her zamanki gibi, WordPress’e tembel görüntüleri yükleme hakkında sorularınız varsa, aşağıdaki yorumlarla iletişime geçin.
