Standart yükleme özelliğini benimsemeyle ilgili dersler
Bu gönderide amacım, tarayıcı düzeyinde görüntü geç yükleme özelliği için desteği uygulama zamanı olan CMS platformu geliştiricilerini ve katkıda bulunanları (İYS çekirdeklerini geliştiren kişiler) ikna etmektir. Ayrıca geç yüklemeyi uygularken yüksek kaliteli kullanıcı deneyimleri sağlama ve diğer geliştiriciler tarafından özelleştirmeyi etkinleştirme ile ilgili öneriler paylaşacağım. Bu kurallar, WordPress'e destek eklemenin yanı sıra Joomla, Drupal ve TYPO3'ün bu özelliği uygulamalarına yardımcı olma deneyimimizden gelmektedir.
İster CMS platformu geliştiricisi ister CMS kullanıcısı (ör. İYS ile web sitesi 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. İYS platformunuzu geç yüklemeyi uygulamaya nasıl teşvik edebileceğinizle 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 kullanan resimlerin ve iframe'lerin geç yüklenmesi NEWG HTML Standardı'nın bir parçası hâline geldi ve çeşitli tarayıcılar tarafından daha fazla benimseniyor.
Ancak bu ara hedefler daha hızlı ve kaynak tasarrufu sağlayan web'in temelini oluşturur.
Artık loading özelliğini kullanmak, dağıtılmış web ekosistemindedir.
İçerik yönetim sistemleri web sitelerinin yaklaşık% 60'ını desteklediğinden, bu platformlar modern tarayıcı özelliklerinin web'e benimsenmesinde hayati bir rol oynar. WordPress, Joomla ve TYPO3 gibi birkaç popüler açık kaynak İYS'nin resimlerde loading özelliğini zaten desteklediğini göz önünde bulundurarak bu içeriklerin yaklaşımlarına ve özelliğin diğer içerik yönetim sistemi platformlarında benimsenmesiyle ilgili çıkarımlarına göz atalım. Medyanın geç yüklenmesi, sitelerin geniş ölçekte yararlanması gereken önemli bir web performansı özelliğidir. Bu nedenle, bu özelliği İYS temel düzeyinde benimsemeniz önerilir.
Şimdi geç yükleme yönteminin uygulanma durumu
Standartlaştırma
İYS'lerde standartlaştırılmamış tarayıcı özelliklerinin benimsenmesi, geniş çaplı testlerin yapılmasını kolaylaştırır ve iyileştirilebilecek potansiyel alanları ortaya çıkarabilir. Bununla birlikte, CMS'ler arasında genel fikir birliği, bir tarayıcı özelliği standart hale getirilmediği sürece tercihen ilgili platforma yönelik bir uzantı veya eklenti biçiminde uygulanması gerektiğidir. Bir özellik, yalnızca bir kez standart hale getirildikten sonra platformun çekirdeğinde benimsenmek üzere değerlendirilebilir.
Tarayıcı desteği
Özelliğin tarayıcı desteği de benzer bir endişe kaynağıdır: CMS kullanıcılarının büyük kısmının bu özellikten yararlanabilmesi gerekir. Özelliğin henüz desteklenmediği tarayıcıların önemli bir yüzdesi varsa özellik, en azından bunlar üzerinde olumsuz bir etkisinin olmamasını sağlamalıdır.
Görüntü alanına olan mesafe eşikleri
Geç yükleme uygulamalarıyla ilgili yaygın endişelerden biri, yükleme döngüsünün daha sonraki bir aşamada başlaması nedeniyle, bir resmin kullanıcının görüntü alanında görünür hale geldikten sonra yüklenmeme olasılığını prensip olarak artırmasıdır. JavaScript tabanlı önceki çözümlerin aksine, tarayıcılar bu konuya muhafazakar bir şekilde yaklaşır ve daha da fazlası, etkiyi en üst düzeye çıkararak yaklaşımlarını gerçek dünyadaki kullanıcı deneyimi verilerine göre hassas bir şekilde ayarlayabilir. Bu nedenle, tarayıcı düzeyindeki geç yüklemenin İYS platformları tarafından benimsenmesi güvenli olmalıdır.
Kullanıcı deneyimi önerileri
Öğelerde boyut özelliklerini zorunlu kıl
Düzen kaymalarını önlemek için uzun zamandır resimler veya iframe'ler gibi yerleştirilmiş içeriklerin width ve height boyut özelliklerini içermesi gerekiyor. Böylece tarayıcı, bu öğeleri gerçekten yüklemeden önce bu öğelerin en boy oranını tahmin edebilir. Bu öneri, bir öğenin geç yüklenmiş olup olmamasından bağımsız olarak geçerlidir. Bununla birlikte, bir resmin görüntü alanında bir kez tam olarak yüklenmeme olasılığı% 0,1 daha yüksek olduğundan geç yükleme yerine bu yöntem biraz daha fazla uygulanabilir.
İYS'ler tercihen tüm resimlerde ve iframe'lerde 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üklenen resimlerin atlanması önerilir.
Ekranın üst kısmındaki öğeleri geç yüklemekten kaçınma
Şu anda İYS'lerin Largest Contentful Paint metriğindeki gecikmeyi önlemek için yalnızca ekranın alt kısmına konumlandırılan resimlere ve iframe'lere loading="lazy" özellikleri eklemeleri önerilir. Böylece, bazı durumlarda Temmuz 2021'de keşfedildiği üzere önemli olabilir. Bununla birlikte, oluşturma işleminden önce bir öğenin görüntü alanına göre konumunun değerlendirilmesinin karmaşık olduğu unutulmamalıdır. Bu durum özellikle CMS'nin loading özelliklerini eklemek için otomatik bir yaklaşım kullandığı durumlarda geçerlidir. Ancak manuel müdahaleye dayalı olsa bile farklı görüntü alanı boyutları ve en boy oranları gibi çeşitli faktörlerin dikkate alınması gerekir. Yine de ekranın üst kısmında görünmesi muhtemel olan hero resimlerin ve diğer resimlerin veya iframe'lerin geç yüklenmesi durumundan çıkarılması kesinlikle önerilir.
JavaScript yedeğinden kaçınma
JavaScript (henüz) loading özelliğini desteklemeyen tarayıcılara geç yükleme sağlamak için kullanılabilir ancak bu mekanizmalar her zaman başlangıçta bir resmin veya iframe'in src özelliğinin 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 için yüzey alanını artırır. Bu da büyük hiçbir İYS'nin, standartlaştırılmış tarayıcı özelliğinden önce özünde geç yüklemeyi benimsemesinin nedenlerinden biridir.
Teknik öneriler
Geç yüklemeyi varsayılan olarak etkinleştirin
Tarayıcı düzeyinde geç yüklemeyi uygulayan İYS'lerin genel olarak bu özelliğin varsayılan olarak etkinleştirilmesi önerilir. Yani loading="lazy", resimlere ve iframe'lere tercihen yalnızca boyut özellikleri içeren öğeler için eklenmelidir.
Bu özelliğin varsayılan olarak etkinleştirilmesi, manuel olarak etkinleştirilmesine kıyasla (örneğin, resim başına) daha fazla ağ kaynağı tasarrufu sağlar.
Mümkün olduğunca loading="lazy", yalnızca ekranın alt kısmında görünebilecek öğelere eklenmelidir.
İstemci tarafı farkındalığı ve çeşitli görüntü alanı boyutları nedeniyle bu şartın bir içerik yönetim sistemi için uygulanması karmaşık olabilir. Ancak, en azından ekranın üst kısmında görünecek hero resimler gibi öğeleri geç yüklenmekten hariç tutmak için yaklaşık buluşsal yöntemlerin kullanılması önerilir.
Öğe başına değişikliklere izin ver
loading="lazy", resimlere ve iframe'lere varsayılan olarak eklenmelidir ancak belirli resimlerde özelliğin atlanmasına izin vermek (ör. LCP için optimizasyon yapmak) çok önemlidir. İYS'nin kitlesi ortalama olarak daha fazla teknoloji meraklısı olarak kabul ediliyorsa bu, her resim ve iframe için söz konusu öğe için geç yüklemeyi devre dışı bırakmaya olanak tanıyan bir kullanıcı arayüzü kontrolü olabilir.
Alternatif olarak ya da bir API'yi üçüncü taraf geliştiriciler de görebilir, böylece onlar da kod aracılığıyla benzer değişiklikler yapabilirler.
Örneğin WordPress, HTML etiketinin tamamı veya bağlamı için ya da içerikteki belirli bir HTML öğesi için loading özelliğinin atlanmasına olanak tanır.
Mevcut içeriği yenileme
İYS'lerde HTML öğelerine loading özelliğini eklemek için genel olarak iki yaklaşım mevcuttur:
- Özniteliği arka uçtaki içerik düzenleyicinin içinden ekleyip veritabanına kalıcı olarak kaydedin.
- Ön uçta veritabanından içerik oluştururken özelliği anında ekleyin.
İYS'nin, geç yükleme avantajlarını mevcut içeriklere de getirmek için oluşturma sırasında özelliği 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ı avantajdan yararlanarak İYS'nin ağ kaynaklarını kaydetme ü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 kullanılabilecek değişikliklere kolayca olanak tanır.
Bununla birlikte, özelliği anında eklemek, bir öğede potansiyel olarak mevcut olan loading özelliğini karşılamalı ve bu tür bir özelliğin öne çıkmasını sağlamalıdır. Bu şekilde, CMS veya buna ait bir uzantı yinelenen özelliklerle bir çakışmaya neden olmadan düzenleyici odaklı yaklaşımı da uygulayabilir.
Sunucu tarafı performansını optimize edin
loading özelliğini, örneğin sunucu tarafı bir ara katman yazılımı kullanarak içeriğe hızlı bir şekilde eklerken hız önemlidir. İçerik yönetim sistemine bağlı olarak özellik, DOM geçişi veya normal ifadeler aracılığıyla eklenebilir. Normal ifadeler ise performans için önerilir.
Normal ifade kullanımı en düşük düzeyde tutulmalıdır. Örneğin, içerikteki tüm img ve iframe etiketlerini özellikleri de dahil olmak üzere toplayıp bunları uygun şekilde her etiket dizesine loading özelliğini ekleyen tek bir normal ifade en aza indirilmelidir. Örneğin WordPress.loading="lazy" Ayrıca bu optimizasyon biçimi, uzantı yerine İYS'nin çekirdeğinde geç yüklemeyi benimsenmesinin diğer bir nedenidir. Böylece, sunucu tarafında daha iyi performans optimizasyonu sağlar.
Sonraki adımlar
CMS'nizdeki özellik için destek eklemek üzere mevcut bir özellik isteği bileti olup olmadığına bakın veya henüz yoksa yeni bir istek açın. Teklifinizi desteklemek için gerektiğinde bu yayına yönelik referansları kullanın.
Sorularınız veya yorumlarınız için bana (felixarntz@) tweet atın ya da tarayıcı düzeyinde geç yükleme desteği eklenmişse İYS'nizin bu sayfada listelenmesini sağlayın. Karşılaştığınız zorluklar hakkında daha fazla bilgi edinip bir çözüm bulmayı umuyorum.
İYS platformu 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 içerik yönetim sisteminize kod katkısında bulunmaya (ör. yama veya pull-isteği) başlayabilirsiniz.
Colin Watts'ın Unsplash'teki hero fotoğrafı.