Standartlaştırılmış loading özelliğini kullanmaya yönelik bilgiler
Bu yayınla amacım, İYS platformu geliştiricilerini ve katkıda bulunanları (yani İYS çekirdeklerini geliştiren kişileri) tarayıcı düzeyinde resim geç yükleme özelliği için destek uygulamanın zamanının geldiğine ikna etmek. Ayrıca, geç yükleme özelliğini uygularken yüksek kaliteli kullanıcı deneyimleri sağlamaya ve diğer geliştiricilerin özelleştirme yapmasına olanak tanımaya yönelik öneriler de paylaşacağım. Bu yönergeler, WordPress'e destek ekleme ve Joomla, Drupal ve TYPO3'ün bu özelliği uygulamasına yardımcı olma deneyimimizden yola çıkılarak hazırlanmıştır.
İster İYS platformu geliştiricisi ister İYS kullanıcısı (yani İYS ile web siteleri oluşturan bir kişi) olun, İYS'nizde tarayıcı düzeyinde geç yüklemenin avantajları hakkında daha fazla bilgi edinmek için bu yayını kullanabilirsiniz. İçerik yönetim sistemi platformunuzu geç yüklemeyi uygulamaya teşvik etme konusunda öneriler için Sonraki adımlar bölümüne göz atın.
Arka plan
Geçtiğimiz yıl,
loading özelliğini kullanarak resimleri ve iframe'leri geç yükleme,
WHATWG HTML Standardı'nın bir parçası haline geldi
ve
çeşitli tarayıcılar tarafından giderek daha fazla benimsendi.
Ancak bu aşamalar yalnızca daha hızlı ve daha fazla kaynak tasarrufu sağlayan bir web için temel oluşturur.
Artık loading özelliğinden yararlanmak dağıtık web ekosisteminin sorumluluğundadır.
İçerik yönetim sistemleri, web sitelerinin yaklaşık% 60'ını destekler. Bu nedenle, bu platformlar modern tarayıcı özelliklerinin web'de benimsenmesinde önemli bir rol oynar. WordPress, Joomla ve TYPO3 gibi birkaç popüler açık kaynaklı İYS, resimlerde loading özelliğini desteklemeye başladı. Şimdi bu platformların yaklaşımlarına ve diğer İYS platformlarında bu özelliği kullanmaya başlamak için neler yapılması gerektiğine göz atalım. Medyayı geç yükleme, sitelerin büyük ölçekte yararlanması gereken önemli bir web performansı özelliğidir. Bu nedenle, bu özelliğin CMS çekirdek düzeyinde benimsenmesi önerilir.
Geç yüklemeyi hemen uygulamanız için nedenler
Standartlaştırma
İçerik yönetim sistemlerinde standartlaştırılmamış tarayıcı özelliklerinin benimsenmesi, yaygın testleri kolaylaştırır ve potansiyel iyileştirme alanlarını ortaya çıkarabilir. Ancak içerik yönetim sistemleri genel olarak, bir tarayıcı özelliği standartlaştırılmadığı sürece ilgili platform için bir uzantı veya eklenti biçiminde uygulanması gerektiği konusunda hemfikirdir. Bir özelliğin platformun temelinde kullanılabilmesi için önce standartlaştırılması gerekir.
Tarayıcı desteği
Özelliğin tarayıcı desteği de benzer bir endişe kaynağıdır: İYS kullanıcılarının çoğunluğu özellikten yararlanabilmelidir. Özelliğin henüz desteklenmediği tarayıcıların oranı önemli ölçüde yüksekse özelliğin en azından bu tarayıcılar üzerinde olumsuz bir etkisi olmaması gerekir.
Görüntü alanına uzaklık eşikleri
Geç yükleme uygulamalarıyla ilgili yaygın bir endişe, yükleme döngüsü daha sonraki bir aşamada başladığı için prensipte bir resmin kullanıcının görüntü alanında görünür hale geldiğinde yüklenmeme olasılığını artırmasıdır. Önceki JavaScript tabanlı çözümlerin aksine, tarayıcılar bu konuya temkinli yaklaşır ve ayrıca yaklaşımlarını gerçek dünyadaki kullanıcı deneyimi verilerine göre hassas bir şekilde ayarlayarak etkiyi en aza indirebilir. Bu nedenle, tarayıcı düzeyinde geç yüklemenin CMS platformları tarafından benimsenmesi güvenli olmalıdır.
Kullanıcı deneyimi önerileri
Öğelerde boyut özellikleri zorunlu kılınmalıdır.
Düzen kaymalarını önlemek için uzun süredir resimler veya iFrame'ler gibi yerleştirilmiş içeriklerin her zaman width ve height boyut özelliklerini içermesi önerilir. Böylece tarayıcı, bu öğeleri yüklemeden önce en boy oranını tahmin edebilir. Bu öneri, bir öğenin geç yüklenip yüklenmediğine bakılmaksızın geçerlidir. Ancak görüntü alanına giren bir resmin tam olarak yüklenmeme olasılığının% 0,1 daha fazla olması nedeniyle, geç yükleme uygulandığında biraz daha geçerli hale gelir.
İçerik yönetim sistemleri, tercihen tüm resimlerde ve iframe'lerde boyut özellikleri sağlamalıdır. Bu özelliklerin her ikisini de sağlamayan geç yüklenen resimlerin atlanması önerilir.
Ekranın üst kısmındaki öğeleri geç yüklemekten kaçının
Şu anda İYS'lerin, Largest Contentful Paint metriğinde gecikmeyi önlemek için yalnızca ekranın alt kısmında yer alan resimlere ve iframe'lere loading="lazy" özellikleri eklemesi önerilir. Bu gecikme, Temmuz 2021'de keşfedildiği üzere bazı durumlarda önemli olabilir. Ancak oluşturma işleminden önce bir öğenin görüntü alanına göre konumunu değerlendirmenin karmaşık olduğu kabul edilmelidir. Bu durum özellikle İYS'nin loading özelliklerini eklemek için otomatik bir yaklaşım kullandığı durumlarda geçerlidir. Ancak manuel müdahale söz konusu olduğunda bile farklı görüntü alanı boyutları ve en boy oranları gibi çeşitli faktörlerin dikkate alınması gerekir. Bununla birlikte, hero resimlerin ve ekranın üst kısmında görünme olasılığı yüksek olan diğer resimlerin veya iframe'lerin geç yüklenmemesi önemle tavsiye edilir.
JavaScript yedeklerinden kaçınma
JavaScript, loading özelliğini (henüz) desteklemeyen tarayıcılara geç yükleme sağlamak için kullanılabilse de bu tür mekanizmalar her zaman bir resmin veya iFrame'in src özelliğinin başlangıçta kaldırılmasına dayanır. Bu da özelliği destekleyen tarayıcılar için gecikmeye neden olur. Ayrıca, büyük ölçekli bir İYS'nin ön uçlarında bu tür JavaScript tabanlı bir çözümün kullanıma sunulması, olası sorunların yüzey alanını artırır. Bu nedenle, standartlaştırılmış tarayıcı özelliğinden önce hiçbir büyük İYS, çekirdeğinde geç yüklemeyi benimsememiştir.
Teknik öneriler
Geç yüklemeyi varsayılan olarak etkinleştirme
Tarayıcı düzeyinde geç yükleme uygulayan İYS'ler için genel öneri, bu özelliği varsayılan olarak etkinleştirmektir. Yani loading="lazy", resimlere ve iframe'lere, tercihen yalnızca boyut özellikleri içeren öğeler için eklenmelidir.
Özelliğin varsayılan olarak etkinleştirilmesi, manuel olarak etkinleştirilmesi gereken durumlara (ör. resim bazında) kıyasla daha fazla ağ kaynağı tasarrufu sağlar.
Mümkün olduğunca, loading="lazy" yalnızca ekranın alt kısmında görünme olasılığı yüksek olan öğelere eklenmelidir.
İstemci tarafı farkındalığının olmaması ve çeşitli görüntü alanı boyutları nedeniyle bu şartın bir İYS için uygulanması karmaşık olabilir. Ancak en azından ekranın üst kısmında görünmesi muhtemel hero resimler gibi öğelerin geç yüklenmesini önlemek için yaklaşık sezgisel yöntemler kullanılması önerilir.
Öğe bazında değişikliklere izin verme
loading="lazy", resimlere ve iframe'lere varsayılan olarak eklenmelidir. Ancak LCP için optimizasyon yapmak gibi durumlarda, özelliğin belirli resimlerde atlanmasına izin vermek çok önemlidir. İYS'nin kitlesi ortalama olarak teknoloji konusunda daha bilgili kabul ediliyorsa bu, her resim ve iframe için gösterilen bir kullanıcı arayüzü kontrolü olabilir. Bu kontrol, ilgili öğe için geç yüklemeyi devre dışı bırakmaya olanak tanır.
Alternatif olarak veya buna ek olarak, üçüncü taraf geliştiricilerin kod aracılığıyla benzer değişiklikler yapabilmesi için bir API sunulabilir.
Örneğin WordPress, loading özelliğinin tüm HTML etiketi veya bağlamı ya da içerikteki belirli bir HTML öğesi için atlanmasına olanak tanır.
Mevcut içerikleri uyarlama
Genel olarak, bir İYS'deki HTML öğelerine loading özelliğini eklemenin iki yolu vardır:
- Özelliği arka uçtaki içerik düzenleyiciden ekleyerek veritabanına kalıcı olarak kaydedin.
- Veritabanındaki içeriği ön uçta oluştururken özelliği anında ekleyin.
İçerik yönetim sistemlerinin, geç yüklemenin avantajlarını mevcut içeriklere de uygulamak için özelliği oluşturma sırasında anında eklemeyi tercih etmesi önerilir. Özellik yalnızca düzenleyici aracılığıyla eklenebiliyorsa yalnızca yeni veya yakın zamanda değiştirilmiş içerik parçaları avantajlardan yararlanır. Bu da İYS'nin ağ kaynaklarını koruma üzerindeki etkisini önemli ölçüde azaltır. Ayrıca, özelliği anında eklemek, tarayıcı düzeyinde geç yükleme özelliklerinin daha da genişletilmesi durumunda gelecekteki değişikliklere kolayca olanak tanır.
Özelliği anında eklemek, bir öğede mevcut olabilecek loading özelliğini karşılamalı ve bu özelliğin öncelikli olmasını sağlamalıdır. Bu sayede, CMS veya CMS'nin bir uzantısı, yinelenen özelliklerle çakışmaya neden olmadan düzenleyiciye dayalı yaklaşımı da uygulayabilir.
Sunucu tarafı performansını optimize etme
Sunucu tarafı ara katman yazılımı gibi bir araç kullanarak içeriğe anında loading özelliğini eklerken hız önemli bir faktördür. İçerik yönetim sistemine bağlı olarak özellik, DOM geçişi veya normal ifadeler aracılığıyla eklenebilir. Performans için normal ifadeler önerilir.
Normal ifadelerin kullanımı minimumda tutulmalıdır. Örneğin, içerikteki tüm img ve iframe etiketlerini özellikleri de dahil olmak üzere toplayan ve ardından her bir etiket dizesine uygun şekilde loading özelliğini ekleyen tek bir normal ifade kullanılmalıdır. Örneğin WordPress, belirli öğeler üzerinde anında çeşitli işlemler gerçekleştirmek için tek bir genel normal ifadeye sahiptir. loading="lazy" eklemek, birden fazla özelliği kolaylaştırmak için tek bir normal ifade kullanan bu işlemlerden yalnızca biridir. Bu optimizasyon biçimi, bir CMS'nin çekirdeğinde geç yüklemenin bir uzantı yerine kullanılmasının önerilmesinin başka bir nedenidir. Sunucu tarafında daha iyi performans optimizasyonu sağlar.
Sonraki adımlar
İYS'nizde bu özellik için destek eklemeye yönelik mevcut bir özellik isteği destek kaydı olup olmadığını kontrol edin veya henüz yoksa yeni bir destek kaydı açın. Teklifinizi desteklemek için bu yayına referans verebilirsiniz.
Sorularınız veya yorumlarınız için bana tweet atabilirsiniz (felixarntz@). Tarayıcı düzeyinde geç yükleme desteği eklendiyse içerik yönetim sisteminizin bu sayfada listelenmesi için de bana ulaşabilirsiniz. Başka zorluklarla karşılaşırsanız çözüm bulmak için bunları da öğrenmek isterim.
İçerik yönetim sistemi platformu geliştiricisiyseniz diğer içerik yönetim sistemlerinin geç yüklemeyi nasıl uyguladığını inceleyin:
Araştırmanızdan elde ettiğiniz bilgileri ve bu yayındaki teknik önerileri kullanarak İYS'nize kod katkısında bulunmaya başlayabilirsiniz (ör. yama veya pull isteği şeklinde).