Kaydol

Merhaba Sevgili Floodlar.com Kullanıcısı, Web sitemizde geçirdiğiniz zaman ve bu büyüleyici flood evrenine katılımınız için teşekkür ederiz. Floodların geniş dünyasıyla dolu deneyiminizi daha fazla keşfetmek için, web sitemizi sınırsız olarak kullanabilmeniz adına giriş yapmanız gerekmektedir.

Oturum aç

Merhaba Floodlar.com Kullanıcısı, İlk üç sayfayı tamamladınız, tebrikler! Ancak, floodların devamını görmek ve daha fazla interaktif deneyim yaşamak için giriş yapmanız gerekiyor. Hesabınız yoksa, hızlıca oluşturabilirsiniz. Sınırsız floodlar ve etkileşimler sizleri bekliyor. Giriş yapmayı unutmayın!

Şifremi hatırlamıyorum

Şifreniz mi unuttunuz? Endişelenmeyin! Lütfen kayıtlı e-posta adresinizi giriniz. Size bir bağlantı göndereceğiz ve bu link üzerinden yeni bir şifre oluşturabileceksiniz.

Fil Necati Masonlar Locası Subreddit Adı Nedir? Cevap: ( N31 )

Üzgünüz, flood girme izniniz yok, Flood girmek için giriş yapmalısınız.

Lütfen bu Floodun neden bildirilmesi gerektiğini düşündüğünüzü kısaca açıklayın.

Lütfen bu cevabın neden bildirilmesi gerektiğini kısaca açıklayın.

Lütfen bu kullanıcının neden rapor edilmesi gerektiğini düşündüğünüzü kısaca açıklayın.

Mobil Uygulamada Açın

Güncel Floodlar En sonuncu Nesne

CMS’ler için tarayıcı düzeyinde yavaş yükleme

CMS’ler için tarayıcı düzeyinde yavaş yükleme

Bu gönderideki amacım, CMS platformu geliştiricilerini ve katkıda bulunanları (yani CMS çekirdeklerini geliştiren kişileri) ikna etmektir. şimdi tarayıcı düzeyinde görüntü yavaş yükleme özelliği için desteği uygulama zamanı. Nasıl yapılacağına dair önerileri de paylaşacağım yüksek kaliteli kullanıcı deneyimleri sağlamak Ve diğer geliştiriciler tarafından özelleştirmeyi etkinleştir tembel yükleme uygularken. Bu yönergeler, WordPress’e destek ekleme ve Joomla, Drupal ve TYPO3’ün özelliği uygulamasına yardımcı olma deneyimimizden gelmektedir.

İster bir CMS platformu geliştiricisi, ister bir CMS kullanıcısı (yani bir CMS ile web siteleri oluşturan bir kişi) olun, bu gönderiyi CMS’nizde tarayıcı düzeyinde yavaş yüklemenin faydaları hakkında daha fazla bilgi edinmek için kullanabilirsiniz. Kontrol et Sonraki adımlar CMS platformunuzu yavaş yüklemeyi uygulamaya nasıl teşvik edebileceğinize ilişkin öneriler için bölüm.

Arka plan #

Geçen yıl boyunca, görüntüleri ve iframe’leri geç yükleme loading öznitelik var WHATWG HTML Standardının bir parçası olun Ve çeşitli tarayıcılar tarafından giderek artan bir şekilde benimsendi. Ancak bu kilometre taşları, yalnızca daha hızlı ve daha fazla kaynak tasarrufu sağlayan bir web için temel oluşturur. Artık dağıtılmış web ekosisteminde loading bağlanmak.

içerik yönetim sistemleri web sitelerinin yaklaşık %60’ına güç, dolayısıyla bu platformlar, modern tarayıcı özelliklerinin web’e uyarlanmasında hayati bir rol oynar. Gibi birkaç popüler açık kaynaklı CMS ile wordpress, JoomlaVe TYPO3 için zaten destek uygulamış olan loading Bu özelliğin diğer CMS platformlarında da benimsenmesiyle ilgili yaklaşımlarına ve çıkarımlarına bir göz atalım. Tembel yükleme ortamı, sitelerin büyük ölçekte yararlanması gereken önemli bir web performans özelliğidir, bu nedenle CMS çekirdek düzeyinde benimsenmesi önerilir.

Tembel yüklemeyi şimdi uygulama durumu #

Standardizasyon #

CMS’lerde standartlaştırılmamış tarayıcı özelliklerinin benimsenmesi, yaygın testleri kolaylaştırır ve potansiyel iyileştirme alanlarını ortaya çıkarabilir. Bununla birlikte, CMS’lerdeki genel fikir birliği, bir tarayıcı özelliği standartlaştırılmadığı sürece, tercihen ilgili platform için bir uzantı veya eklenti biçiminde uygulanması gerektiğidir. Bir özellik yalnızca bir kez standartlaştırıldıktan sonra platform ç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 çoğunluğu bu özellikten yararlanabilmelidir. Özelliğin henüz desteklenmediği tarayıcıların önemli bir yüzdesi varsa, özelliğin en azından onlar için olumsuz bir etkisi olmamasını sağlamalıdır.

Görüntü alanından uzaklık eşikleri #

Yavaş yükleme uygulamalarıyla ilgili yaygın bir endişe, prensip olarak, yükleme döngüsü daha sonraki bir aşamada başladığından, kullanıcının görüntü alanında görünür hale gelen bir görüntünün yüklenmeme olasılığını artırmalarıdır. Önceki JavaScript tabanlı çözümlerin aksine, tarayıcılar buna ihtiyatlı bir şekilde yaklaşır ve ayrıca yaklaşımlarını gerçek dünyadaki kullanıcı deneyimi verilerine dayanarak ince ayar yaparak etkiyi en aza indirebilir, bu nedenle tarayıcı düzeyinde yavaş yükleme, CMS platformları tarafından benimsenmesi güvenli olmalıdır.

Kullanıcı deneyimi önerileri #

Öğelerde boyut öznitelikleri gerektir #

Düzen kaymalarını önlemek için, resimler veya iframe’ler gibi gömülü içeriğin her zaman boyut niteliklerini içermesi uzun süredir devam eden bir öneridir. width Ve height, böylece tarayıcı, bu öğeleri fiilen yüklemeden önce bu öğelerin en boy oranını anlayabilir. Bu öneri, bir öğenin yavaş yüklenip yüklenmediğine bakılmaksızın geçerlidir. Ancak, nedeniyle Görüntü alanında bir görüntünün tam olarak yüklenmeme olasılığı %0,1 daha fazladır yerinde tembel yükleme ile biraz daha uygulanabilir hale gelir.

CMS’ler tercihen tüm resimlerde ve iframe’lerde boyut nitelikleri sağlamalıdır. Bu tür her öğe için bu mümkün değilse, bu özelliklerin her ikisini de sağlamayan geç yükleme resimlerini atlamaları önerilir.

Ekranın üst kısmındaki öğeleri yavaş yüklemekten kaçının #

Şu anda CMS’lerin yalnızca eklenmesi önerilir loading="lazy" Bazı durumlarda Temmuz 2021’de keşfedildiği üzere önemli olabilen En Büyük İçerikli Boyama metriğinde bir gecikmeyi önlemek için ekranın alt kısmına konumlandırılan görüntülere ve iframe’lere öznitelikler. Ancak, oluşturma sürecinden önce bir öğenin görüntü alanına göre konumunu değerlendirmenin karmaşık olduğu kabul edilmelidir. Bu, özellikle CMS eklemek için otomatik bir yaklaşım kullanıyorsa geçerlidir. loading 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, kahraman resimlerin ve ekranın üst kısmında görünmesi muhtemel diğer resimlerin veya iframe’lerin geç yüklenmesinden kaçınılması şiddetle tavsiye edilir.

Bir JavaScript yedeğinden kaçının #

JavaScript, desteklemeyen (henüz) tarayıcılara geç yükleme sağlamak için kullanılabilirken loading öznitelik, bu tür mekanizmalar her zaman başlangıçta src tarayıcılar için bir gecikmeye neden olan bir görüntünün veya iframe’in özniteliği Yapmak niteliği destekler. Ayrıca, büyük ölçekli bir CMS’nin ön uçlarında böyle bir JavaScript tabanlı çözümün kullanıma sunulması, potansiyel sorunların yüzey alanını artırır; bu, standartlaştırılmış tarayıcı özelliğinden önce hiçbir büyük CMS’nin çekirdeğinde yavaş yüklemeyi neden benimsemediğinin bir parçasıdır.

Teknik tavsiyeler #

Yavaş yüklemeyi varsayılan olarak etkinleştir #

Tarayıcı düzeyinde yavaş yükleme uygulayan CMS’ler için genel öneri, varsayılan olarak etkinleştirmesidir, örn. loading="lazy" tercihen resimlere ve iframe’lere eklenmelidir yalnızca boyut özelliklerini içeren öğeler için. Özelliğin varsayılan olarak etkinleştirilmesi, örneğin görüntü bazında manuel olarak etkinleştirilmesine kıyasla daha fazla ağ kaynağı tasarrufuyla sonuçlanacaktır.

mümkün olduğunca loading="lazy" meli yalnızca ekranın alt kısmında görünmesi muhtemel öğelere eklenebilir. İstemci tarafında farkındalık eksikliği ve çeşitli görüntü alanı boyutları nedeniyle bu gereksinimin bir CMS için uygulanması karmaşık olsa da, yavaş yüklendiği için ekranın üst kısmında görünmesi muhtemel kahraman görüntüleri gibi öğeleri çıkarmak için en azından yaklaşık buluşsal yöntemlerin kullanılması önerilir.

Öğe başına değişikliklere izin ver #

Sırasında loading="lazy" varsayılan olarak görüntülere ve iframe’lere eklenmelidir, örneğin LCP için optimize etmek için, belirli görüntülerde özniteliğin çıkarılmasına izin verilmesi çok önemlidir. CMS hedef kitlesinin ortalama olarak daha teknoloji meraklısı olduğu düşünülüyorsa, bu, her görüntü ve iframe için o öğe için geç yüklemeyi devre dışı bırakmaya izin veren bir kullanıcı arabirimi kontrolü olabilir. Alternatif veya ek olarak, bir API, kod aracılığıyla benzer değişiklikler yapabilmeleri için üçüncü taraf geliştiricilere açıklanabilir.

Örneğin WordPress, loading öznitelik ya bir tüm HTML etiketi veya bağlamı ya da bir içerikteki belirli HTML öğesi.

Mevcut içeriği güçlendirin #

Yüksek düzeyde, eklemek için iki yaklaşım vardır. loading bir CMS’deki HTML öğelerine öznitelik:

  • Ya özniteliği arka uçtaki içerik düzenleyicisinden ekleyin ve ısrarla veritabanına kaydedin.
  • Ön uçta veritabanından içerik işlerken özelliği anında ekleyin.

CMS’nin, geç yükleme avantajlarını mevcut herhangi bir içeriğe getirmek için, oluşturma sırasında özelliği anında eklemeyi seçmesi önerilir. Öznitelik yalnızca düzenleyici aracılığıyla eklenebilseydi, yalnızca yeni veya yakın zamanda değiştirilmiş içerik parçaları avantajlardan yararlanırdı ve bu da CMS’nin ağ kaynaklarını koruma üzerindeki etkisini büyük ölçüde azaltırdı. Ayrıca, özelliği anında eklemek, tarayıcı düzeyinde yavaş yükleme yeteneklerinin daha da genişletilmesi durumunda, gelecekteki değişikliklere kolayca izin verecektir.

Özelliği anında eklemek, potansiyel olarak var olan bir özelliği karşılamalıdır. loading yine de bir öğedeki öznitelik ve böyle bir özniteliğin öncelik kazanmasına izin verin. Bu şekilde, CMS veya bunun bir uzantısı, yinelenen özniteliklerle çakışmaya neden olmadan düzenleyici odaklı yaklaşımı da uygulayabilir.

Sunucu tarafı performansını optimize edin #

eklerken loading (örneğin) bir sunucu tarafı ara yazılımı kullanarak anında içeriğe öznitelik, hız bir husustur. CMS’ye bağlı olarak, özellik DOM geçişi veya normal ifadeler yoluyla eklenebilir, ikincisi performans için önerilir.

Normal ifadelerin kullanımı minimumda tutulmalıdır, örneğin tümünü toplayan tek bir normal ifade img Ve iframe öznitelikleri de dahil olmak üzere içerikteki etiketler ve ardından şunları ekler: loading geçerli olduğu şekilde her bir etiket dizisine öznitelik. Örneğin WordPress şu ana kadar gider: belirli öğelere çeşitli anında işlemleri gerçekleştirmek için tek bir genel normal ifadeye sahip olmakbunların eklenmesi loading="lazy" birden çok özelliği kolaylaştırmak için tek bir normal ifade kullanan yalnızca bir tanesidir. Ayrıca bu optimizasyon biçimi, bir uzantı yerine bir CMS’nin çekirdeğinde tembel yüklemenin benimsenmesinin tavsiye edilmesinin başka bir nedenidir – daha iyi sunucu tarafı performans optimizasyonuna olanak tanır.

Sonraki adımlar #

CMS’nizdeki özelliğe destek eklemek için mevcut bir özellik istek bileti olup olmadığına bakın veya henüz yoksa yeni bir tane açın. Teklifinizi desteklemek için gerektiğinde bu gönderiye yapılan referansları kullanın.

beni tweetle (felixarntz@) sorular veya yorumlar için veya tarayıcı düzeyinde geç yükleme desteği eklendiyse CMS’nizin bu sayfada listelenmesini sağlamak için. Başka zorluklarla karşılaşırsanız, umarım bir çözüm bulmak için onlar hakkında daha fazla bilgi edinmek isterim.

Bir CMS platformu geliştiricisiyseniz, diğer CMS’lerin yavaş yüklemeyi nasıl uyguladığını inceleyin:

Araştırmanızdan öğrendiklerinizi ve bu gönderideki teknik önerileri, örneğin bir yama veya çekme isteği şeklinde CMS’nize kod eklemeye başlamak için kullanabilirsiniz.

yazan kahraman fotoğrafı Colin Watt Açık Unsplash.

İlgili Mesajlar

Yorum eklemek için giriş yapmalısınız.