bencede
New member
Performans: Web hayati belirtileri için en büyük ve en zengin içerikli tabloyu optimize eder
Geçen yıl Kümülatif Düzen Kaymasını (CLS) optimize etme çabalarımızı zaten bildirmiştik. Bugün, Önemli Web Verileri değişikliklerine LCP ile devam ediyoruz.
Greatest Glad Paint: Yeni Ne Vardı?
En Büyük İçerikli Boyama (LCP), sayfa yüklemesinin başlangıcından en büyük içerik öğesinin görünüm alanında görüntülenene kadar geçen süredir. Bu genellikle bir resimdir, ancak metin de olabilir. görüntüler ne zaman <img>, <svg> ile <image> orada <video> afiş resmi (<video poster="url">) dikkate alınır. CSS aracılığıyla bir resim eklenmelidir url() LCP’ye uygun olmak için yüklendi. Ölçekli görüntüler için daha küçük olan değer geçerlidir: Büyütülmüş bir görüntü yalnızca orijinal boyutuyla, küçültülmüş bir görüntü ise ölçeklenmiş boyutuyla sayılır.
Temmuz 2021 itibarıyla Haberler’nin masaüstü bilgisayardaki çevrimiçi ana sayfasından alınan bir LCP değeri. Bu saha verileri, Google’ın CrUX raporundandır.
Sayfa yükleme sırasında birden çok LCP olabilir, örneğin bir görüntü metinden sonra işlenir. Sonuç olarak, en son bildirilen LCP, metrik değere dahil edilir. Bu, sayfa oluşturulurken sayfadan kaldırılan bir öğe de olabilir. Daha büyük başka bir öğe görünmezse, bildirilen son öğe LCP olarak kalır.
Google, Önemli Web Verilerini değerlendirmek için bir trafik ışığı sistemi kullanır. Bir LCP, 2,5 saniyeye kadar yeşil (“İyi”), dört saniyeden itibaren kırmızı (“Zayıf”) sayar ve diğer her şey sarıdır (“İyileştirme Gerekiyor”).
Google, saha verileri için, test edilen URL için mevcut olması koşuluyla, üç kategoride bir yüzde dağılımı belirtir. Saha verileri, Google’ın CrUX raporundan alınan ve bu veri toplanmasına izin veren gerçek kullanıcıların Chromium tarayıcıları tarafından alınan ölçümlerden elde edilen verilerdir.
Başlangıç noktası
Heise çevrimiçi ana sayfasındaki en iyi teaser alanı.
Haberler online’ın ana sayfasında en iyi teaser alanımız var. Bunlar, yayıncıların oraya yerleştirdiği bir ila üç teaser arasındaki birkaç satırdır. Bu görsellerden biri bizim için her zaman LCP unsuru oluyor ki bu da tamamen editörlerin özenine bağlı.
2018’den itibaren resimler özelleştirilmiş ürünümüzden alınmıştır. <a-img> teslim edilmiş. Görüntüleme cihazınızın kullanılabilir boyutunu, piksel yoğunluğunu belirler ve aynı zamanda geç yüklemeyi de halleder. Web performansının dezavantajı, tarayıcının bu noktada bir görüntünün oluşturulması gerektiğini yalnızca arka plan JavaScript’i görüntüyü yüklemeyi bitirdiğinde keşfetmesidir. Tarayıcının önceden yüklenmiş tarayıcısı yararlı bir katkı sağlayamaz ve dosyada bir ön yükleme ipucu görür. <head> görüntünün bin farklı varyasyonu olabileceğinden ayarlayamadık.
Kökenlere geri dön
Şubat ayında, sayfaları yükledikten sonra ilk görünür alanda resimleri görüntülemek için klasik yöntemi tekrar kullanmaya karar verdik. <img> teslim et Artık dosyaya ön yükleme için bir ipucu da ekleyebildik. <head> ayrılmak (<link rel="preload" href="/path/to/image.jpg" as="image">).
Daha sonra, Mart ayında resim etiketini şu şekilde değiştirdiğimizde bu yaklaşıma bir iyileştirme getirdik: <img srcset="…"> ayrıca önyükleme önerisini genişletti ve ayarladı <link rel="preload" imagesrcset="…">.
Şimdi web performansı açısından oldukça iyi bir konumdaydık, ancak bu srcset mükemmel değildi. Yalnızca düzenimizin ortak yanıt verme özelliklerini kapsıyordu ve bununla birleştiğinde, oldukça kapsamlı bir sonuç veren ortak piksel yoğunlukları da vardı. srcset-Sihirbaz tanımı.
<a-img> sollamak
Özel öğemizin dezavantajlarına tekrar baktık <a-img> üzerinde. Kullanıcılarımız için en iyi bireysel resmi sunuyordu ve biz de bu avantajdan vazgeçmek istemedik. <a-img> sonunu inşa etti <img> sayfaya yalnızca görüntü arka planda tamamen yüklendikten sonra girin. O zamana kadar ikamet ettiği <div> düzen atlamalarını önlemek için yer tutucu görevi gören noktada. Performans açısından, birkaç DOM yazma işlemi gerçekleştirildiğinden, bu yaklaşım kendi başına ideal değildi:
- <a-img> içinde yazılı <div class="spacer"> DOM’da,
- <a-img> arka planda gerçek resmi yükledi,
- <a-img> bunu sildim <div class="spacer"> DOM e’den
- <a-img> finali yazdı <img> DOM’da.
Tabii ki, önyükleme ipucu artık kullanışlı değil, bu yüzden gerekli olmayan bir resmi kesinlikle yüklemek istemediğimizden onu tekrar kaldırdık. JavaScript’in uygun bir önyükleme ipucu eklemesi de yardımcı olmaz, çünkü bu noktada görüntüyü zaten yüklemeye başlamıştır.
Ganz Haberler online aracılığıyla mobil cihazlardaki en büyük içerik resmine ilişkin CrUX raporundan bir ekran görüntüsü. Gelişim, Ağustos’taki %78,13’ten Mayıs 2021’de %87,05’e, 2,5 saniyeden kısa bir aralıkta (“İyi” kategorisi)
Şimdilik, kullanıcılarımız için iyi bir görüntü kalitesi ve uygun web performansı karışımı bulduk. LCP metriğinin gelişimi de bizimle aynı fikirde. Geçen yılın Ağustos ayından bu yana en büyük içerik tablomuz gelişti ve son aylarda bu sitedeki Önemli Web Verileri testini de geçtik.
(hehe)
ana sayfaya