WordPress’e tembel yükleme nasıl eklenir
WordPress sitenizin performansını artırmanın birçok yolu vardır. Görüntüler ve diğer medya dosyaları, uzun yükleme süresinin arkasındaki en büyük nedenlerden bazılarıdır. Bu, herhangi bir görüntüyü optimize etme yönteminin uygulanmasının site performansını önemli ölçüde etkileyebileceği anlamına gelir ve yavaş yükleme bir istisna değildir. Bu makalede, tembel yüklemenin nasıl çalıştığı ve web sitenize nasıl fayda sağlayabileceği hakkında konuşacağız. O zaman size çeşitli öğeler için WordPress’e gecikmiş yükleme eklemenin en popüler yollarından bazılarını göstereceğiz. Son olarak, bu düzenlemenin neden olabileceği en yaygın teknik sorunlardan bazılarını tartışacağız.
Haydi Yapalım şunu! YouTube kanalımıza abone olun Lazy yükleme nedir? Genellikle, bir web sitesini ziyaret ettiğinizde, tüm bileşenler bir kerede yüklemeye çalışır. Tarayıcınız sayfadaki her medya varlığı, metin, bağlantılar ve diğer öğeleri görüntüler. Sayfada resimler gibi birçok medya varlığı varsa, yükleme süresini önemli ölçüde yavaşlatabilirler. Yükleme sayfaları sırasında görüntülerin etkisini azaltmanın birçok yolu vardır. Görüntüleri optimize edebilir, önbellek tarayıcısını etkinleştirebilir, bir içerik dağıtım ağı (CDN) kullanabilir ve daha küçük dosya türlerini seçebilirsiniz. İdeal olarak, çok hızlı çalışacak ve mümkün olduğunca optimize etme uygulayacaksınız çünkü çok hızlı web sitesi yok.
Yavaş yükleme, görüntü dosyasının boyutunu azaltmaz veya her kullanıcı için yüklenmenin ne kadar sürdüğünü değiştirmez. Tersine, bu ayarlar, tarayıcı görünüm portu dosya ile sayfa bölümüne ulaşana kadar her görüntünün yüklenmesini geciktirebilir:
Varsayılan olarak, yüklemenin ertelenmesi kağıt üzerinde yükleme süresini arttırır. Bununla birlikte, en büyük içerik boya skoruna (LCP) zarar verebilir. LCP, herhangi bir sayfadaki en büyük metni veya blok metni yüklemenin ne kadar sürdüğünü ölçer:
WordPress, web sitenizdeki resimler için html yükleme özellikleri = tembel kullanır. Genel olarak, askıya alınmış yüklemeyi uygulamanın en kolay yoludur. Ancak, tüm tarayıcılar bu özellikleri desteklemez. Belirli görüntüler için ertelenmiş yüklemeyi devre dışı bırakmak istiyorsanız, özniteliği html kullanarak manuel olarak değiştirmeniz gerekir. Alternatif, gecikmiş yüklemeyi farklı bir yaklaşımla (size daha fazla kontrol sağlar) uygulayan bir WordPress eklentisi kullanmaktır. Diğer öğelerin tembel yüklemesi var mı? Teknik olarak, web sitesindeki neredeyse tüm öğeler için yüklemeyi erteleyebilirsiniz. Gecikmeli yükleme görüntülerle çok iyi çalışır ve bu aynı zamanda video varlıkları için bir katil özelliktir. Medya varlıklarına ek olarak, JavaScript ve CSS gibi kod yüklemesini de erteleyebilirsiniz. Aslında, ilk içerikli boya (FCP) puanınızı artırmak için web sitenizde oluşturmayı engelleyebilecek komut dosyasını ertelemenizi öneririz. Ardından, metin varlıklarını yüklemek için tembel olmayı da seçebilirsiniz. Ancak, bu kullanım açısından iyi bir uygulama değildir. Buna ek olarak, bir sayfada tüm kitaplara değer metin gösterseniz bile, yükleme süresini önemli ölçüde etkilemez. En askıya alınan yükleme, yükleme süresini önemli ölçüde etkileyen ağır medya varlıkları için en iyisidir. Ancak, WordPress’in çekirdeği yalnızca görüntüler için yavaş yüklemeyi destekler. Uygulamayı diğer unsurlara genişletmek istiyorsanız, alternatif uygulama bulmalısınız. Eklenti buraya girer. Daha önce de belirttiğimiz gibi, WordPress’te görüntüler ve videolar için tembel yükleme nasıl eklenir, WordPress varsayılan olarak tüm görüntüler için yavaş yükleme ekledi. Ancak, hangi resmin yavaşça yükleneceği üzerinde küçük bir kontrole sahip olacaksınız. Farklı bir yaklaşım seçmek istiyorsanız, Lazy Load A3 eklentisini kullanmalısınız. Adım 1: Tembel Yük A3 A3 eklentisini yükleyin ve etkinleştirin, belirli görüntüleri ve sayfaları yavaş yüklemeden hariç tutmanıza olanak tanır. Ayrıca, bu aynı zamanda web sitenizdeki videolar için gecikmiş yüklemeyi de destekler:
Bu eklenti ayrıca yavaş harici görüntü yükleme ve video için destek ekler. Bu, WordPress Core’un uygulanmasıyla yapılmayan bir şeydir. Eklentiyi WordPress kontrol panelinizden yükleyin ve etkinleştirin. Artık araç ayarlarını ayarlayabilirsiniz. Adım 2: Bir sonraki eklenti görüntü ayarlarını, Ayarları Aç> A3 Lazy Load’u ayarlayın. Tembel yük aktivasyonu altında görünce, eklentinin kurulumdan sonra varsayılan olarak etkinleştirildiğini göreceksiniz.
Tembel Yük Görüntüler sekmesini açın. (1) web sitenize hangi görüntülerin erteleneceğini seçebilir ve (2) JavaScript’i engelleyen tarayıcıların yedekini etkinleştirebilirsiniz. Ayrıca (3) yüklemeyi ertelemek istemediğiniz görüntüler için bir CSS sınıfı oluşturabilirsiniz:
Varsayılan ayarlar, korunmasını önerdiğimiz her seçeneği etkinleştirir. Devam edin ve belirli görüntüler için ertelenmiş yüklemeyi geçmenizi sağlayan bir CSS sınıfı hazırlayın. Adım 3: Sonraki video eklentisi ayarlarını ayarlayın, tembel yük videoları ve IFRames sekmesine geçin. Görüntü gibi, A3 Lazy Load, belirli klipler için gecikmeli yüklemeyi seçmenize olanak tanır. Bu eklenti (1) içerik ve widget’taki videoları destekler ve (2) Javascript’i engelleyen tarayıcılar için (2) geri dönüş özellikleri sunar: Video ayarları (3), belirli videoları ertelenmiş yüklemeden hariç tutan CSS sınıfını belirlemenizi sağlar. Daha kolay yapılandırmalar için, görüntü bölümünde seçtiğiniz sınıfı kullanabilirsiniz. Adım 4: Gecikmeli yüklemeyi (isteğe bağlı) devre dışı bırakın, son olarak, belirli sayfa türleri için ertelenmiş yüklemeyi devre dışı bırakmak istiyorsanız, bunu URL ve sayfa türüne göre hariç tutma sekmesinde yapabilirsiniz. Burada yavaş yükleme kullanmasına izin verilmeyen bir sayfa veya belirli içerik türü girebilirsiniz:
Eklenti ayarlarındaki değişiklikleri kaydedin ve bunu yapmaya hazırsınız. Belirli öğeler için ertelenmiş yüklemeyi devre dışı bırakmak istiyorsanız, düzenleyiciyi açın ve yapılandırmak istediğiniz resimleri veya video bloklarını seçin. Ek CSS sınıfı alanları bulmak için Gelişmiş sekmesine blok ve gezinme ayarları menüsünü açın:
Bu alanı, eklentiyi yapılandırırken hazırladığınız yavaş yükleme istisnası sınıfı eklemek için kullanabilirsiniz. Bunu yaparsanız, kullanıcı sitenizi ziyaret ettiğinde görüntü hemen yüklenir. Yavaş yükleme sorunlarını çözme askıya alınmış yükleme yararlı olmasına ve WordPress’te temel bir özellik olmasına rağmen, web sitenizde çeşitli hatalara neden olabilir. Bu bölüm sorunun ne olduğunu ve nasıl çözüleceğini tartışacaktır. Genel olarak en iyi parodaki görüntülerle ilgili sorunlar, üst paro’ya görüntü yüklemek için tembel olmamanızı öneririz. “Top Paro” dediğimizde, kastettiğimiz şey, ziyaretçilerinizin web sitenizin sayfasını yüklediklerinde gördüğü ilk görüntüleme alanıdır. En iyi parodaki resmi geciktirmek FCP puanınızı etkileyebilir. Ayrıca, web sitenizi ziyaret ederken kullanıcının ilk izlenimini de etkileyebilir. Basit çözüm, sayfa başlığınızdaki ve diğer üst öğelerdeki görüntüler için ertelenmiş yüklemeyi devre dışı bırakmaktır. Örneğin, bu sayfayı alırsak, (1) logo ve (2) arka plan başlığı için yavaş yüklemeyi devre dışı bırakmalısınız:
WordPress, yavaş yüklemenin orijinal uygulamasını devre dışı bırakmak için web sitenize kod eklemenizi gerektirir. Belirli medya varlıkları için ertelenmiş yüklemeyi kapatmanın en kolay yolu, son bölümde tartıştığımız gibi A3 Lazy Load gibi eklentileri kullanmaktır. Düzendeki ertelenmiş yükleme kayması nedeniyle düzen kayması, sayfayı ve hareketli öğeleri görünürken yüklediğinizde gerçekleşir. Kümülatif düzen kayması (CLS), düzendeki kaymayı ölçen hayati bir web çekirdeğidir. Bazı durumlarda, zayıf yavaş yüklemenin uygulanması web sitenizin CLS puanını etkileyebilir. Sayfadaki öğeler aynı anda yüklenmez. Tersine, işlem tarayıcıda neredeyse anında görünse bile, tek tek gelirler. Diğer öğelerden sonra yüklenen bir görüntü dosyanız olduğunda, varlığı hareket ettirebilirler. Sorunun çözümü, WordPress’te tam boyutlu görüntüler kullanmaktan kaçınmaktır. Resimleri WordPress’e yüklediğinizde, CMS boyutunu otomatik olarak standart çözünürlük olarak değiştirir:
