Standartlaştırılmış yükleme özelliğini kullanmaya dair edinilen bilgiler
Bu gönderiyi, İYS platform geliştiricileri ve katkıda bulunanları (yani İYS çekirdeklerini geliştiren kişiler) tarayıcı düzeyinde resimleri gecikmeli yükleme özelliğini destekleme zamanının geldiğini ikna etmek için yazıyorum. Ayrıca, yüksek kaliteli kullanıcı deneyimleri sağlama ve diğer geliştiricilerin özelleştirme yapmasını sağlama için öneriler de paylaşacağım. Bu yönergeler, WordPress'e destek ekleme ve Joomla, Drupal ve TYPO3'ün bu özelliği uygulamaya yardımcı olma deneyimlerimizden alınmıştır.
İYS platformu geliştiricisi veya İYS kullanıcısı (ör. İYS ile web sitesi oluşturan bir kullanıcı) olmanız fark etmeksizin, İYS'nizde tarayıcı düzeyinde gecikmeli yüklemenin avantajları hakkında daha fazla bilgi edinmek için bu yayını kullanabilirsiniz. İYS platformunuzu yavaş yükleme özelliğini uygulamaya teşvik etmeyle ilgili ö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 gecikmeli 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 dönüm noktaları, daha hızlı ve daha az kaynak kullanan bir web için yalnızca temeli atar.
loading özelliğini kullanmak için dağıtılmış web ekosistemine eklendi.
İçerik yönetim sistemleri web sitelerinin yaklaşık% 60'ını desteklediğinden bu platformlar, modern tarayıcı özelliklerinin web'de benimsenmesinde önemli bir rol oynar. WordPress, Joomla ve TYPO3 gibi popüler açık kaynaklı İYS'lerin resimlerde loading özelliği için destek sunmaya başlamasıyla birlikte, bu sistemlerin yaklaşımlarına ve özelliği diğer İYS platformlarında da benimsemek için dikkate alınması gereken noktalara 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ğinin içerik yönetim sistemi temel düzeyinde benimsenmesi önerilir.
Geç yüklemeyi hemen uygulamanın avantajları
Standartlaştırma
Standart olmayan tarayıcı özelliklerinin içerik yönetim sistemlerinde kullanılması, geniş kapsamlı testleri kolaylaştırır ve iyileştirme potansiyeli olan alanları ortaya çıkarabilir. Ancak İYS'ler arasında genel fikir birliği, bir tarayıcı özelliği standartlaştırılmadığı sürece tercihen ilgili platform için uzantı veya eklenti şeklinde uygulanması gerektiği yönündedir. Bir özellik, yalnızca standartlaştırıldıktan sonra platform çekirdeğinde kullanıma sunulabilir.
Tarayıcı desteği
Özelliğin tarayıcı desteği de benzer bir endişedir: İçerik yönetim sistemi kullanıcılarının çoğu bu özellikten yararlanabilmelidir. Özelliğin henüz desteklenmediği tarayıcıların önemli bir yüzdesi varsa bu tarayıcılarda en azından olumsuz bir etki yaratmaması gerekir.
Görüntü alanından uzaklık eşikleri
Yavaş yükleme uygulamalarında sık karşılaşılan bir sorun, yükleme döngüsü daha sonraki bir aşamada başladığı için kullanıcının görüntü alanında görünmeye başladıktan sonra bir resmin yüklenmeme olasılığını artırmasıdır. Önceki JavaScript tabanlı çözümlerin aksine, tarayıcılar bu konuya ihtiyatlı bir yaklaşım sergiler. Ayrıca, gerçek dünyadaki kullanıcı deneyimi verilerine dayanarak yaklaşımlarında ince ayar yaparak etkiyi en aza indirebilir. Bu nedenle, tarayıcı düzeyinde yavaş yükleme, içerik yönetim sistemi platformları tarafından güvenli bir şekilde kullanılabilir.
Kullanıcı deneyimi önerileri
Öğelerde boyut özelliklerini zorunlu kılma
Düzen kaymalarından kaçınmak için, resim veya iFrame gibi yerleşik içeriğin her zaman boyut özelliklerini (width ve height) içermesi gerektiği uzun zamandır öneriliyordu. Böylece tarayıcı, bu öğeleri yüklemeden önce en boy oranlarını tahmin edebilir. Bu öneri, bir öğenin yavaş yüklenmesi veya yüklenmemesinden bağımsız olarak geçerlidir. Ancak bir resmin görüntü alanında bir kez tam olarak yüklenmeme olasılığının% 0,1 daha yüksek olması nedeniyle, gecikmeli yükleme özelliğinin kullanılması biraz daha uygun hale gelir.
İçerik yönetim sistemleri, tercihen tüm resimlerde ve iframe'larda boyut özelliklerini sağlamalıdır. Bu tür her öğe için bu mümkün değilse bu özelliklerin ikisini de sağlamayan, yavaş yüklenen resimleri atlamaları önerilir.
Sayfadaki ilk öğeleri gecikmeli yüklemekten kaçının
Şu anda İYS'lerin, en büyük içerikli boya metriğinde gecikme yaşanmaması için yalnızca sayfanın altında konumlandırılmış resimlere ve iFrame'lere loading="lazy" özellikleri eklemesi önerilir. Bu gecikme, bazı durumlarda Temmuz 2021'de keşfedildiği gibi önemli olabilir. Ancak, bir öğenin, oluşturma işleminden önce görüntü alanına göre konumunu değerlendirmenin karmaşık olduğu kabul edilmelidir. Bu durum özellikle İYS'de loading özellikleri eklemek için otomatik bir yaklaşım kullanılıyorsa geçerlidir. Ancak manuel müdahalede bulunulsa bile farklı görüntü alanı boyutları ve en boy oranları gibi çeşitli faktörlerin dikkate alınması gerekir. Yine de hero resimlerinin ve sayfanın üst kısmında görünme olasılığı yüksek olan diğer resimlerin veya iFrame'lerin, sayfaya yavaş yüklenmesini önlemek için atlanması önemle tavsiye edilir.
JavaScript yedek planından kaçının
JavaScript, loading özelliğini (henüz) desteklemeyen tarayıcılara yavaş yükleme sağlamak için kullanılabilir. Ancak bu tür mekanizmalar her zaman bir resmin veya iFrame'in src özelliğini başlangıçta kaldırır. Bu da özelliği desteklemiş tarayıcılarda gecikmeye neden olur. Ayrıca, büyük ölçekli bir İYS'nin ön uçlarında bu tür bir JavaScript tabanlı çözümün kullanıma sunulması, olası sorunların yüzey alanını artırır. Bu da standartlaştırılmış tarayıcı özelliğinden önce hiçbir büyük İYS'nin temelinde yavaş yüklemeyi benimsememesinin nedenlerinden biridir.
Teknik öneriler
Varsayılan olarak geç yüklemeyi etkinleştirme
Tarayıcı düzeyinde gecikmeli yükleme uygulayan içerik yönetim sistemleri için genel öneri, bunu varsayılan olarak etkinleştirmektir. Yani loading="lazy", tercihen yalnızca boyut özelliklerini içeren öğeler için resimlere ve iFrame'lere eklenmelidir.
Özelliğin varsayılan olarak etkinleştirilmesi, manuel olarak etkinleştirilmesi (ör. resim başına) durumundan daha fazla ağ kaynağı tasarrufu sağlar.
Mümkün olduğunca loading="lazy", yalnızca sayfanın alt kısmında görünmesi muhtemel öğelere eklenmelidir.
Bu şartın, istemci tarafında farkındalık eksikliği ve çeşitli ekran boyutları nedeniyle bir içerik yönetim sistemi için uygulanması karmaşık olabilir. Ancak en azından muhtemelen sayfanın üst kısmında görünecek hero resimleri gibi öğeleri, gecikmeli yüklenmekten kaçınmak için yaklaşık sezgisel yöntemler kullanmanız önerilir.
Öğe başına değişiklik yapılmasına izin ver
loading="lazy", varsayılan olarak resimlere ve iFrame'lere eklenmelidir ancak belirli resimlerde özelliğin atlanmasına izin vermek önemlidir (ör. LCP için optimizasyon yapmak amacıyla). İçerik yönetim sisteminin kitlesi ortalama olarak daha teknoloji meraklısıysa bu, her resim ve iFrame için gösterilen ve söz konusu öğe için gecikmeli yüklemeyi devre dışı bırakmaya olanak tanıyan bir kullanıcı arayüzü denetimi olabilir.
Alternatif olarak veya buna ek olarak, üçüncü taraf geliştiricilerin kod aracılığıyla benzer değişiklikler yapabilmesi için bir API'ye erişimi sağlanabilir.
Örneğin WordPress, HTML etiketinin veya bağlamının tamamı ya da içerikteki belirli bir HTML öğesi için loading özelliğini atlamanıza olanak tanır.
Mevcut içeriği yenileme
Genel olarak, loading özelliğini bir içerik yönetim sistemindeki HTML öğelerine eklemek için iki yaklaşım vardır:
- Özelliği arka uçtaki içerik düzenleyiciden ekleyin ve veritabanına kalıcı olarak kaydedin.
- Ön uçta veritabanından içerik oluştururken özelliği anında ekleyin.
İçerik yönetim sisteminin, mevcut içeriklere de yavaş yükleme avantajlarını sunmak için özelliği oluşturma sırasında anında eklemeyi tercih etmesi önerilir. Özellik yalnızca düzenleyici üzerinden eklenebilseydi yalnızca yeni veya yakın zamanda değiştirilmiş içerik parçaları bu avantajlardan yararlanırdı. Bu da İYS'nin ağ kaynaklarını tasarruf etme üzerindeki etkisini önemli ölçüde azaltırdı. Ayrıca, tarayıcı düzeyinde yavaş yüklemenin özellikleri daha da genişletilirse özelliği anında eklemek, gelecekte kolayca değişiklik yapmanıza olanak tanır.
Özelliği anında eklemek, öğede mevcut olabilecek bir loading özelliğini dikkate almalı ve bu tür bir özelliğin öncelikli olmasını sağlamalıdır. Bu sayede, içerik yönetim sistemi veya onun bir uzantısı, yinelenen özelliklerle çakışmalara neden olmadan düzenleyici odaklı yaklaşımı da uygulayabilir.
Sunucu tarafı performansını optimize etme
loading özelliğini, sunucu tarafı bir orta katman kullanarak (ör.) içeriğe anında eklerken hız dikkate alınmalıdır. İçerik yönetim sistemine bağlı olarak özellik, DOM tarama veya normal ifadeler aracılığıyla eklenebilir. Performans için normal ifadeler önerilir.
Normal ifade kullanımı en aza indirilmelidir. Örneğin, içerikteki tüm img ve iframe etiketlerini, özellikleriyle birlikte toplayan ve ardından geçerli olduğu durumlarda her etiket dizesine loading özelliğini ekleyen tek bir normal ifade. Örneğin WordPress, belirli öğelerde çeşitli işlemleri anında gerçekleştirmek için tek bir genel normal ifadeye sahip olma özelliğine sahiptir. loading="lazy" ekleme, birden fazla özelliği kolaylaştırmak için tek bir normal ifadenin kullanıldığı bu özelliklerden yalnızca biridir. Ayrıca, bu optimizasyon biçimi, bir içerik yönetim sisteminin temelinde uzantı yerine yavaş yüklemenin benimsenmesinin önerilmesinin bir başka nedenidir. Bu yöntem, sunucu tarafında daha iyi performans optimizasyonu sağlar.
Sonraki adımlar
İYS'nizde bu özellik için destek eklemeyle ilgili mevcut bir özellik isteği kaydı olup olmadığını kontrol edin veya henüz yoksa yeni bir kayıt açın. Teklifinizi desteklemek için gerektiğinde bu yayına referans verin.
Sorularınız veya yorumlarınız için veya tarayıcı düzeyinde gecikmeli yükleme desteği eklendiyse İYS'nizin bu sayfada listelenmesini sağlamak için bana (felixarntz@) tweet atın. Başka zorluklarla karşılaşırsanız çözüm bulmak için bu sorunlar hakkında daha fazla bilgi edinmek isterim.
İçerik yönetim sistemi platformu geliştiriciyseniz diğer içerik yönetim sistemlerinin gecikmeli yüklemeyi nasıl uyguladığını inceleyin:
Araştırmanızdan edindiğiniz bilgileri ve bu yayındaki teknik önerileri kullanarak İçerik Yönetim Sisteminize kod katkıda bulunmaya başlayabilirsiniz. Örneğin, yama veya çekme isteği şeklinde katkıda bulunabilirsiniz.
Unsplash'taki Colin Watts tarafından çekilen hero fotoğrafı.