Standart yükleme özelliğini benimsemeyle ilgili öğrenilenler
Bu gönderide, CMS platformu geliştiricilerini ve katkıda bulunanları (İYS çekirdeklerini geliştiren kişileri) artık tarayıcı düzeyinde resim geç yükleme özelliği desteğini uygulamanın zamanının geldiğine ikna etmeyi amaçlıyorum. Geç yükleme uygularken yüksek kaliteli kullanıcı deneyimleri sağlama ve diğer geliştiricilerin özelleştirmesini etkinleştirme ile ilgili önerileri de paylaşacağım. Bu kurallar, WordPress'e destek ekleme ve Joomla, Drupal ve TYPO3'ün bu özelliği uygulamasına yardımcı olma konusundaki deneyimlerimizden gelmektedir.
İster CMS platform geliştiricisi ister CMS kullanıcısı (İYS ile web siteleri oluşturan bir kişi) olun, CMS'nizde tarayıcı düzeyinde geç yüklemenin avantajları hakkında daha fazla bilgi edinmek için bu yayını kullanabilirsiniz. CMS platformunuzu geç yüklemeyi uygulamaya nasıl teşvik edebileceğinize ilişkin öneriler için Sonraki adımlar bölümüne göz atın.
Arka plan
Geçtiğimiz yıl içinde, loading özelliğini kullanan geç yüklenen resimler ve iframe'ler WHATWG HTML Standardı'nın bir parçası haline geldi ve çeşitli tarayıcılar tarafından giderek daha fazla benimsenmeye başladı.
Ancak bu ara hedefler yalnızca daha hızlı ve kaynak tasarrufu sağlayan bir web için zemin hazırlıyor.
loading özelliğinden yararlanmak artık dağıtılmış web ekosistemindedir.
İçerik yönetim sistemleri, web sitelerinin yaklaşık% 60'ını destekler. Bu nedenle, bu platformlar modern tarayıcı özelliklerinin web'e benimsenmesinde hayati bir rol oynar. Daha önce resimlerde loading özelliği desteğini uygulayan WordPress, Joomla ve TYPO3 gibi birkaç popüler açık kaynaklı İYS'den, şimdi bunların yaklaşımlarına ve özelliğin diğer CMS platformlarında benimsenmesiyle ilgili çıkarımlarına göz atalım. Medya geç yükleme, sitelerin geniş ölçekte yararlanması gereken önemli bir web performansı özelliğidir. Bu nedenle bu özelliğin temel CMS düzeyinde kullanılması önerilir.
Geç yüklemenin uygulanma durumu
Standartlaştırma
İYS'lerde standart dışı tarayıcı özelliklerinin benimsenmesi, geniş çaplı testler yapılmasını kolaylaştırır ve potansiyel iyileştirme alanlarını ortaya çıkarabilir. Ancak İYS'lerdeki genel fikir birliği, bir tarayıcı özelliği standartlaştırılmadığı sürece bunun tercihen ilgili platform için bir uzantı veya eklenti biçiminde uygulanması gerektiği konusundadır. Bir özellik, yalnızca standart hale getirildikten sonra platform çekirdeğinde benimseme için değerlendirilebilir.
Tarayıcı desteği
Özelliğin tarayıcı desteği de benzer bir sorundur: CMS kullanıcılarının çoğunluğunun bu özellikten faydalanabilmesi gerekir. Özelliğin henüz desteklenmeyen önemli bir yüzdesi varsa, özelliğin bu özellikler için en azından olumsuz bir etki olmadığından emin olması gerekir.
Görüntü alanına uzaklık eşikleri
Geç yükleme uygulamalarıyla ilgili en yaygın endişelerden biri, yükleme döngüsü daha sonraki bir aşamada başladığından bir resmin kullanıcının görüntü alanında görünür hale geldikten sonra yüklenmeme olasılığını artırmasıdır. Önceki JavaScript tabanlı çözümlerin aksine, tarayıcılar bu duruma ölçülü bir şekilde 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 sayede, tarayıcı düzeyindeki geç yüklemenin İYS platformları tarafından güvenle benimsenmesi gerekir.
Kullanıcı deneyimi önerileri
Öğelerde boyut özelliklerini zorunlu kılın
Düzen kaymalarını önlemek için, resimler veya iframe'ler gibi yerleşik içeriklerin her zaman width ve height boyut özelliklerini içermesi ve böylece tarayıcının bu öğeleri gerçekten yüklemeden önce en boy oranlarını tahmin edebilmesi gerektiği uzun süredir yapılan bir öneridir. Bu öneri, bir öğenin geç yüklenip yüklenmediğinden bağımsız olarak geçerlidir. Bununla birlikte, bir resmin görüntü alanında bir kez tam olarak yüklenmeme olasılığının% 0,1 daha yüksek olması nedeniyle geç yükleme yapıldığında resim biraz daha uygulanabilir hale gelir.
İYS'ler, tercihen tüm resimler ve iframe'ler için boyut özellikleri sağlamalıdır. Bu tür her öğe için bu mümkün değilse bu özelliklerin ikisini de sağlamayan geç yükleme resimlerinin atlanması önerilir.
Ekranın üst kısmındaki öğeleri geç yüklemekten kaçının
Şu anda içerik yönetim sistemlerinin, Largest Contentful Paint metriğinde gecikmeyi önlemek için yalnızca Temmuz 2021'de keşfedildiği gibi önemli olabilecek bir gecikmeyi önlemek için loading="lazy" özelliklerini eklemeleri önerilir. Bununla birlikte, 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 CMS loading özelliklerini eklemek için otomatik bir yaklaşım kullanıyorsa geçerlidir. Ancak manuel müdahaleye göre, farklı görüntü alanı boyutları ve en boy oranları gibi çeşitli faktörlerin de dikkate alınması gerekir. Yine de ekranın üst kısmında görünebilecek hero resimlerin ve diğer resimlerin veya iframe'lerin geç yüklenmesi kesinlikle önerilir.
JavaScript yedeğinden 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ı esasına dayanır. Bu da, özelliği destekleyen tarayıcılarda gecikmeye neden olur. Ayrıca, JavaScript tabanlı bu tür bir çözümü büyük ölçekli bir İYS'nin ön uçlarında kullanıma sunmak, olası sorunlara karşı yüzey alanını artırır. Bu, büyük İYS'lerin standart hale getirilmiş tarayıcı özelliğinden önce çekirdeğinde geç yüklemeyi benimsememesinin bir nedenidir.
Teknik öneriler
Geç yüklemeyi varsayılan olarak etkinleştirin
Tarayıcı düzeyinde geç yüklemeyi uygulayan İYS'ler için genel öneri, bunun varsayılan olarak etkinleştirilmesidir. Yani loading="lazy", tercihen yalnızca boyut özellikleri içeren öğeler için resimlere ve iframe'lere eklenmelidir.
Bu özelliğin varsayılan olarak etkinleştirilmesi, manuel olarak etkinleştirilmeye (ö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ünmesi muhtemel öğelere eklenmelidir.
Bu gereksinimin, istemci tarafı farkındalığının olmaması ve çeşitli görüntü alanı boyutlarının olmaması nedeniyle CMS'de uygulanması karmaşık olabilir. Ancak, en azından ekranın üst kısmında geç yüklenmesi olası hero resimler gibi öğeleri hariç tutmak için yaklaşık buluşsal yöntemlerin kullanılması önerilir.
Öğe bazında değişikliklere izin ver
Resimlere ve iframe'lere varsayılan olarak loading="lazy" eklenmesi gerekir ancak LCP için optimizasyon örneğinde olduğu gibi belirli resimlerde özelliğin atlanmasına izin vermek çok önemlidir. İYS kitlesi ortalama olarak daha teknoloji konusunda bilgili olarak kabul ediliyorsa bu, her resim ve iframe için gösterilen bir kullanıcı arayüzü kontrolü olabilir. Bu kontrol, söz konusu öğe için geç yüklemeyi devre dışı bırakmaya olanak tanır.
Alternatif olarak veya ek olarak bir API, kod aracılığıyla benzer değişiklikler yapabilmeleri için üçüncü taraf geliştiricilere de sunulabilir.
Örneğin WordPress, HTML etiketinin tamamı veya bağlam ya da içerikteki belirli bir HTML öğesi için loading özelliğinin atlanmasına izin verir.
Mevcut içeriği güçlendirin
Özetle, İYS'deki HTML öğelerine loading özelliğini eklemek için iki yaklaşım mevcuttur:
- Özniteliği arka uçtaki içerik düzenleyicinin içinden ekleyin ve veritabanına kalıcı olarak kaydedin.
- Ön uçta veritabanından içerik oluştururken özelliği anında ekleyin.
CMS'nin, geç yükleme avantajlarını mevcut içeriğe de getirmek için oluşturma sırasında özelliği anında eklemeyi etkinleştirmesi önerilir. Öznitelik yalnızca düzenleyici aracılığıyla eklenebildiğinde yalnızca yeni veya kısa süre önce değiştirilmiş içeriklerin avantajları elde edilir. Bu da İYS'nin ağ kaynaklarının tasarrufu üzerindeki etkisini önemli ölçüde azaltır. Ayrıca, özelliğin anında eklenmesi, tarayıcı düzeyinde geç yükleme özelliklerinin daha da genişletilmesi durumunda gelecekte yapılacak değişikliklere kolayca olanak tanır.
Öte yandan, bu özelliği anında eklemek bir öğede potansiyel olarak mevcut olan bir loading özelliğini sağlamalı ve böyle bir özelliğin öncelikli olmasını sağlamalıdır. Bu şekilde, İYS veya bunun bir uzantısı da yinelenen özelliklerle çakışmaya yol açmadan düzenleyiciye dayalı yaklaşımı uygulayabilir.
Sunucu tarafı performansını optimize etme
Örneğin, sunucu tarafı bir ara katman yazılımı kullanarak loading özelliğini anında içeriğe eklerken hız dikkate alınır. Özellik, İYS'ye bağlı olarak DOM geçişi veya normal ifadeler aracılığıyla eklenebilir. Normal ifadeler ise performans için önerilir.
Normal ifade kullanımı minimum düzeyde tutulmalıdır. Örneğin, özellikleri dahil içerikteki tüm img ve iframe etiketlerini toplayan ve ardından her etiket dizesine loading özelliğini uygun şekilde ekleyen tek bir normal ifade. Örneğin WordPress, belirli öğelere çeşitli anında işlemler gerçekleştirmek için tek bir genel normal ifadeye sahip olma kadar ileri gider. Buna loading="lazy" ekleme, birden fazla özelliği kolaylaştırmak için tek bir normal ifade kullanarak yalnızca birdir. Bu optimizasyon biçimi, ayrıca İYS'nin çekirdeğinde geç yüklemenin bir uzantı yerine tavsiye edilmesinin bir başka nedenidir. Bu sayede, sunucu tarafında daha iyi performans optimizasyonu sağlanır.
Sonraki adımlar
İYS'nizde bu özelliğe destek eklemek için mevcut bir özellik isteği bileti olup olmadığına bakın veya henüz bir destek kaydı yoksa yeni bir destek kaydı açın. Teklifinizi desteklemek için gerektiğinde bu yayına yönelik referansları kullanın.
Sorular veya yorumlar için ya da tarayıcı düzeyinde geç yükleme desteği eklenmişse İYS'nizin bu sayfada listelenmesini sağlamak için bana tweet gönderin (felixarntz@). Başka zorluklarla karşılaşırsanız bunlarla ilgili daha fazla bilgi edinmeyi ve bir çözüm bulmayı umuyorum.
İçerik Yönetim Sistemi platform geliştiricisiyseniz diğer İYS'lerin geç yüklemeyi nasıl uyguladığını inceleyin:
Araştırmanızdan öğrendiklerinizi ve bu yayındaki teknik önerileri kullanarak, CMS'nize kod eklemeye (ör. yama veya pull-istek şeklinde) başlayabilirsiniz.
Colin Watts'ın Unsplash'teki hero fotoğrafı.