Gömme İyileştirici

Açıklama

Bu eklentinin amacı, Tweetler, YouTube videoları, TikTok’lar ve diğerleri gibi WordPress’teki gömülü içeriklerin performansını optimize etmektir.

Mevcut iyileştirmeler şunları içerir:

1. Görünür hâle gelmeden hemen önce gömülü içerikleri geç yükleme
2. İlk görünüm alanındaki gömülü içerikler için dns-prefetch bağlantıları ekleme
3. Yerleşim kaymasını azaltmak için yeniden boyutlanan gömülü içerikler için alan ayırma

Gömülü içerikleri geç yükleme performansı iyileştirir, çünkü gömülü içerikler genellikle çok kaynak yoğundur; geç yükleme, sayfa yüklenirken kaynaklarla rekabet etmelerini engeller. IFRAME-tabanlı gömülü içeriklerin geç yüklenmesi yalnızca loading=lazy özniteliği eklenerek sağlanır. SCRIPT etiketleri içeren gömülü içeriklerin geç yüklenmesi ise bir Intersection Observer kullanılarak, gömülü içeriğin FIGURE kapsayıcısının görünüm alanına girmek üzere olduğu izlenip ardından SCRIPT etiketinin dinamik olarak eklenmesiyle sağlanır.

Bu eklenti ayrıca Optimizasyon Dedektifi eklentisinin kurulmasını ve etkinleştirilmesini önerir, bu da yalnızca geç yüklemenin ötesinde birçok iyileştirmenin önünü açar. Optimizasyon Dedektifi olmadığında geç yükleme, bir gömülü içerik ilk görünür alanda konumlandığında aslında performansı düşürebilir. Bunun nedeni, bu tür ilk görünür alandaki öğelerin geç yüklenmesinin LCP’yi düşürebilmesidir; çünkü öğenin görünür olup olmadığını sınayan mantık, işlemeyi geciktirir. Bu nedenle WordPress Core, sunucu tarafındaki sezgisel yöntemler kusursuz olmasa da, ilk görünür alanda görünen IMG etiketlerinin geç yüklenmesini önlemek için elinden geleni yapar. Optimizasyon Dedektifi tam bu noktada devreye girer; çünkü bir gömülü içeriğin mobil, tablet ve masaüstü gibi kırılma noktasına özgü görünür alanların herhangi birinde görünüp görünmediğini algılar. (Ayrıca bir IMG öğesinin ilk görünür alanda olup olmamasına göre geç yüklemenin doğru biçimde uygulandığından emin olmak için Optimizasyon Dedektifi’ni genişleten Image Prioritizer eklentisine de bakın.)

Optimizasyon Dedektifi etkinleştirildiğinde, sitenize yapılan gerçek ziyaretlere dayanarak hangi gömmelerin başlangıç görünüm alanında göründüğünü izlemeye başlayacak. Bu bilgiler elindeyken Gömme İyileştirici, başlangıç görünüm alanında görünen gömmeleri geç yüklemeyle yüklemeyecek. Ayrıca bu tür ilk ekranda görünen gömmeler için Gömme İyileştirici, bu gömmeler tarafından kullanıldığı bilinen kaynaklara dns-prefetch bağlantıları da ekleyecek. Örneğin başlangıç görünüm alanında bir YouTube gömmesi görünüyorsa, Optimizasyon Dedektifi ile birlikte Gömme İyileştirici loading=lazy kodunu atlayacak ve YouTube video poster görsellerinin sunulduğu alan adı olan https://i.ytimg.com için bir dns-prefetch bağlantısı da ekleyecek. Bu tür bağlantılar, başlangıç görünüm alanındaki gömmelerin daha da hızlı yüklenmesini sağlar.

Optimizasyon Dedektifi tarafından etkinleştirilen Gömme İyileştirici’deki diğer önemli özellik, yüklenirken boyut değiştiren gömmelerin neden olduğu düzen kaymalarını azaltmaktır. Bu durum en çok WordPress yazı gömmelerinde veya Tweet gömmelerinde görülür. Gömme İyileştirici, bu gömmelerin yeniden boyutlandırılan yüksekliklerini takip eder. Bu yükseklikler saklandığında Gömme İyileştirici, kapsayıcı FIGURE öğesinde uygun yüksekliği görünüme özgü min-height değeri olarak ayarlar; böylece gömme yüklendiğinde düzen kayması oluşmaz.

Optimizasyon Dedektifi, sayfanın nasıl düzenlendiğini öğrenmek için sayfa ziyaretlerine dayandığından, optimizasyonların uygulandığını görmeye başlamak için mobil ve masaüstü bir cihazdan ziyaret alana kadar beklemeniz gerekecek. Ayrıca, Optimizasyon Dedektifi’nin oturum açmış yönetici kullanıcılar için varsayılan olarak optimizasyon uygulamadığına dikkat edin.

Optimizasyonların Gömme bloklarına uygulanması amaçlanmaktadır. Bu nedenle optimizasyonların uygulandığını görmüyorsanız gömmelerinizin bir Klasik Blok içinde olmadığından emin olun.

Siteniz, kimlik doğrulaması yapmamış ön yüz ziyaretçilerine erişilebilir bir REST API sunmalıdır; çünkü bir sayfanın nasıl optimize edileceğine dair metrikler bu şekilde toplanır. Bu eklenti, herhangi bir yapılandırma olmadan çalışacak şekilde tasarlandığından şu anda hiçbir ayarı ve kullanıcı arayüzü yoktur.