Şu anda resimler hem toplam aktarım boyutu bakımından web'in en büyük öğeleridir. ve sayfa başına istek sayısı. Ortanca web sayfasının toplam aktarım boyutu yaklaşık olarak Haziran 2022 itibarıyla 2 MB (yalnızca resimler, bunun neredeyse yarısını oluşturuyor.) Abartı olmamalıdır resim isteklerini optimize etmenin, yapabileceğiniz en büyük performans optimizasyonu olabileceğini söylemiştik.
Daha sonra, tüm durumlar için tek bir resim sunmaya çalışırken duyarlı resimlerin nasıl geliştiğini, ortaya çıkan sorunlara karşı nasıl yardımcı olduğunu öğreneceksiniz. Bu bölümde, resimlerle ilgili temel performans metriklerini ve bunları nasıl iyileştireceğinizi keşfedin.
Resim isteklerini erteleme
Resim isteklerinizin mümkün olduğunca küçük ve verimli olmasını sağlamanın çeşitli yollarını öğrenmek üzereyken
her zaman için hiç yapılmayan içeriklerdir. Öncelikle, müşteri yolculuğunuza nasıl bir etki yapabileceğiyle ilgili
kullanıcılarınıza loading="lazy" özelliği gibi resim öğeleri sunuyorsunuz.
<img src="image.jpg" loading="lazy" alt="…">
Bu özellik, resim isteklerinin kullanıcının görüntü alanına yaklaşıncaya kadar yapılmamasını sağlar ve bunları ilk andan itibaren erteler. sayfa yükleme (tarayıcının en yoğun olduğu zaman) ve bu istekleri kritik oluşturma yolundan kaldırır.
Pratikte ne kadar basit olursa olsun bu özelliği kullanmak performans üzerinde büyük olumlu etki yaratabilir: Kullanıcının görüntü alanı hiçbir zaman istenmez ve kullanıcının asla görmeyecekleri görüntüler için bant genişliği boşa harcanmaz.
Ancak, dikkat edilmesi gereken bir nokta var: Bu istekleri ertelemek, tarayıcıların istek için hiper optimize edilmiş işlemler
olabildiğince erken ekleyin. img öğelerinde düzenin üst kısmına doğru loading="lazy" kullanılırsa ve dolayısıyla bu durumda
İlk yüklendiğinde kullanıcının görüntü alanında yer alır. Bu görüntüler, son kullanıcıya daha yavaş hissedebilir.
Getirme Önceliği
loading özelliği, geliştiricilere web tarayıcılarının kullanımı üzerinde daha fazla güç vermek için yürütülen daha büyük web standartları çabasına bir örnektir
ve talepleri önceliklendirmek
sizin göreviniz.
Tarayıcıların, kullandığınız getirme önceliğine ilişkin temel yaklaşımları aşağıda bulabilirsiniz:
Örneğin, bir dokümanın <head> öğesinde harici bir CSS dosyası isteği, oluşturmayı engellemek için yeterince önemli kabul edilirken,
</body> üzerindeki harici JavaScript dosyası, oluşturma işlemi tamamlanana kadar ertelenir. <img> üzerindeki bir loading özelliğinin değeri "tembel" ise
İlişkili resim isteği, tarayıcı resmin kullanıcıya gösterileceğini belirleyene kadar ertelenir. Aksi takdirde, bu resim aynı
resimlere göre daha öncelikli hale getirebilirsiniz.
fetchpriority özelliği,
geliştiricilerin öğelerin önceliği üzerinde daha ayrıntılı bir kontrole sahip olması sayesinde kaynakları işaretleyebilirsiniz.
"yüksek" olarak ve "low" aynı türdeki kaynaklara göre
bir öncelik derecesi belirleyebilirsiniz. fetchpriority için kullanım alanları loading ile benzerdir
özelliğini sunuyoruz. Örneğin, fetchpriority="low" özelliğini yalnızca kullanıcı etkileşiminden sonra görünen bir resimde kullanabilirsiniz.
(görüntünün kullanıcının görüntü alanında olup olmadığına bakılmaksızın) veya sayfanın herhangi bir yerinde görünür resimlere öncelik vermek için fetchpriority="high"
sayfa oluşturulur oluşturulmaz görüntü alanında hemen görünür olacağını bildiğiniz bir resme öncelik vermek için kullanın.
fetchpriority öğesinin, tarayıcı davranışını temelde değiştirmemesi bakımından loading ürününden farklı olduğunu unutmayın. Tarayıcıya talimat vermiyor
.
Resimlerin etkisini ölçme
Resim öğeleri optimize edilirken algılanan performans genellikle toplam aktarımdan daha önemlidir ve ölçülmesi daha zordur. bir seçimdir.
Web Verileri, kullanıcıların performansını iyileştirmek için ölçülebilir, işlem yapılabilir metrikler ve yol gösterici bilgiler sunar. veya benzer sorunları vurgulayarak yavaş yanıt süresi, görüntüleme sorunları ve etkileşim gecikmeleri gibi faktörlerden kaynaklanır. Core Web Vitals bu hedeflerin bir alt kümesidir ve odak noktasıdır kullanıcının tek bir sayfadaki doğrudan deneyimine dayanır. Bunlar, deneyimin kullanıcı için ne kadar hızlı hissedildiğini belirleyen bir dizi teknik ölçümdür.
Cumulative Layout Shift
Cumulative Layout Shift (CLS), bir görsel kararlılık ölçüsüdür. Paydaşlarınızın ne kadar Öğeler yüklendikçe ve sayfa oluşturuldukça sayfadaki içeriğin düzeni değişir. Önemli miktarda harcama yapan herkes kullanıcıların web'i kullanırken zamanın, bir sayfanın "atlaması" nedeniyle uzun vadede yerini kaybetmesi gecikmeli bir web yazı tipi veya resim kaynağı olduğundan aniden, veya etkileşimli bir öğenin işaretçinizden aniden uzaklaşmasına neden olabilir. Yüksek CLS, en iyi ihtimalle rahatsız edicidir ve en kötü kullanıcı hatası—bir "iptal" önceden "onayla" düğmesi bulunan bir alana kayan düğme düğmesini tıklayın.
Yüksek yükleme süreleri ve bir düzende kaplayabilecekleri alan miktarı göz önüne alındığında, resimlerin bu tür resimlerde ortak bir neden olması yüksek CLS puanları.
Modern tarayıcılarda yapılan nispeten yakın zamanda yapılan değişiklikler sayesinde, resimlerden kaynaklanan yüksek CLS puanlarından kaçınmak sandığınızdan daha kolay.
Birkaç yıldır ön uç üzerinde çalışıyorsanız <img> üzerindeki width ve height özelliklerine aşina olursunuz:
Bir resmin boyutunu kontrol etmenin tek yolu CSS yaygın şekilde benimsenmeden önce bunlardı.
<img src="image.jpg" height="200" width="400" alt="…">
Stil ile ilgili endişelerimizi işaretlememizden ayrı tutmak için bu özellikler artık kullanılmıyor.
web tasarımı, CSS aracılığıyla yüzdeye dayalı boyutlandırma belirtmeyi gerekli kıldı. Duyarlı web tasarımının ilk günlerinde,
kullanılmayan width ve height özellikleri" CSS'mizde belirttiğimiz değerler gibi genel bir tavsiyeydi: max-width: 100% ve
height: auto - bunları geçersiz kılar.
<img src="image.jpg" alt="…">
img {
max-width: 100%;
height: auto;
}
Önceki örnekte olduğu gibi height ve width özellikleri kaldırıldığında, tarayıcının
Bu durumda resmin yüksekliği kaynağı istemek, ayrıştırmak ve
Stil sayfaları uygulandıktan sonra düzende kapladığı alanın genişliğini değiştirebilirsiniz. Bu sürecin büyük bölümü, sayfa oluşturulduktan sonra
yeni hesaplanan yükseklik ek düzen kaymalarına neden olacak şekilde oluşturulur.
2019'dan itibaren tarayıcı davranışı, width ve height özelliklerini farklı şekilde işleyecek şekilde güncellendi. Bu öğelerin değerlerini kullanmak yerine,
img öğesinin sabit, piksele dayalı boyutunu belirlemek için farklı özellikler kullanırsa bu özelliklerin
resmin en boy oranı aynıdır, ancak söz dizimi aynıdır. Modern tarayıcılar bu değerleri birbirine bölerek
Sayfa oluşturulmadan önce bir img öğesinin doğal en boy oranını belirler. Böylece, düzen oluşturulurken resmin kaplayacağı alanı ayırabilir.
Kural olarak, <img> için her zaman height ve width özelliklerini kullanmanız gerekir. Bu özellikler, resim kaynağınızın gerçek boyutuyla eşleşen değerlerle eşleşmelidir. Dolayısıyla,
ancak HTML özelliğinden yüksekliği geçersiz kılmak için max-width: 100% ile birlikte height: auto değerini belirttiğinizden emin olun.
<img src="image.jpg" height="200" width="400" alt="…">
img {
max-width: 100%;
height: auto;
}
<img> öğelerinizde width ve height özelliklerini kullanarak, görsellerden kaynaklanan yüksek bir CLS puanından kaçınabilirsiniz.
Bu yaklaşımın dezavantajı olmadığını bilmeniz önemlidir. Çünkü bu yaklaşım, köklü bir tarayıcı davranışına (herhangi bir tarayıcı) bağlı olduğundan,
ile birlikte temel CSS desteği her zaman olduğu gibi çalışır. İşaretlemenizdeki height ve width özellikleri, stilleriniz tarafından geçersiz kılınır.
width ve height özellikleri, CLS sorunlarından kaçınmak için resimleriniz için gerekli düzen alanını ayırarak,
bir boşluk bırakan veya düşük kaliteli yer tutucuya sahip kullanıcıların
bir resmin aktarılmasını bekliyorlar ve oluşturma da ideal bir yöntem değil. Ölçülebilir ve algılanabilir reklamların etkisini azaltmak için
etkisine bağlı olarak, tam olarak oluşturulmuş bir görüntüyü kullanıcıya daha hızlı sunmanın tek yolu aktarım boyutunu küçültmektir.
Largest Contentful Paint
Largest Contentful Paint (LCP), kullanıcının görüntü alanında görünür olan en büyük "contentful" öğesinin ( görünen sayfanın en büyük yüzdesini kaplayan içerik öğesidir. İlk bakışta son derece spesifik bir metrik gibi görünebilir ancak öğesi, kullanıcı açısından sayfanın büyük kısmının oluşturulduğu noktanın pratik bir temsili görevi görür. LCP, son derece önemli ölçen tekniklerdir.
DOMContentLoaded veya window.onload etkinliği gibi metrikler, geçerli sayfayı yükleme sürecinin ne zaman olduğunu belirlemede yararlı olabilir
vardır, ancak bunlar her zaman kullanıcının sayfa deneyimine karşılık gelmez. Bir öğenin oluşturulmasında küçük bir gecikme
dışındaki reklamlar bu metriklerden herhangi birinde hesaba katılır, ancak büyük olasılıkla gerçek kullanıcılar tarafından hiçbir şekilde algılanmaz.
Uzun LCP, kullanıcının bir sayfayla ilgili ilk gösteriminin (geçerli görüntü alanındaki en önemli içerik) sayfanın yavaş olması anlamına gelir.
olabilir.
LCP'nin yakaladığı kullanıcı algısı, kullanıcı deneyimi üzerinde doğrudan etkiye sahiptir. Geçen yıl Vodafone tarafından yapılan bir deneme , LCP'deki% 31'lik bir iyileşmenin yalnızca% 8 daha fazla satış (kendi başına güçlü bir sonuç) sağlamakla kalmayıp toplam kullanıcı sayısı içinde de %15'lik bir artış sağladığını belirledi. potansiyel müşteri olan ziyaretçilerin sayısında artış ("ziyaretçi-potansiyel müşteri oranı") ve kullanıcı sayısında% 11 artış kullanıcılar ("alışveriş sepetinin ziyaret sayısına oranı").
Web sayfalarının %70'inden fazlasında, başlangıçtaki en büyük öğe
görüntü alanı, bağımsız bir <img> öğesi veya arka plan resmi olan bir öğe olarak bir resim içerir. Başka bir deyişle,
Sayfaların% 70'inin LCP puanları, resim performansını temel alır. Nedenini görmek için fazla hayal gücünüz gerekmez: büyük, dikkat çekici
resim ve logoların "ekranın üst kısmında" bulunma olasılığı çok daha yüksektir.
LCP gecikmelerini önlemek için uygulayabileceğiniz birkaç adım vardır: Öncelikle loading="lazy" öğesini asla "ekranın üst kısmında" belirtmeyin resim,
İsteği sayfa oluşturulana kadar ertelemek LCP puanınız üzerinde büyük olasılıkla olumsuz bir etki yaratabilir.
İkinci olarak, fetchpriority="high" kullanılması tarayıcıya bu resmin aktarımının sayfada başka bir yerdeki resimlerin üzerinde öncelik verilmesi gerektiğini bildirebilir.
Bu kuralları göz önünde bulundurduğumuzda, bir sayfanın LCP puanını iyileştirmek için yapabileceğiniz en önemli şey, için gerekenden daha az çıkış gerekir. Bunu yapabilmek için resim kaynaklarınızı mümkün olduğunca küçük ve verimli mümkün olan en iyi şekilde (tabii ki kaliteden ödün vermeden) ve kullanıcıların yalnızca en iyi performans gösteren resim öğelerini almalarını daha iyi anlamalarını sağlar.
Sonuç
Resim öğeleri, kullanıcılarınızın üzerinde en çok bant genişliği: Gerekli olan diğer tüm öğelerin aktarımına engel olan bant genişliği kullanır. Resimler, hem sayfayı çevreleyen sayfa sırasında hem de sonrasında, algılanan performans açısından önemli sorunlara yol açar. düzeni oluşturuldu. Kısacası, resim öğeleri zarar verir.
Bu korkutucu olabilir ancak "web'de daha az resim olsa daha iyi olurdu" yalnızca performans açısından da geçerlidir. kullanıcılarına çok büyük bir zarar da verir. Resimler web'in önemli bir parçasıdır ve görsellerin kalitesinden ödün vermemelisiniz. tek başına anlamlı bir içerik üretici olarak değerlendirilebilir.
Bu kursun geri kalanında, resim öğelerimizi destekleyen teknolojiler ve bu hataların etkisini azaltmak için teknikler hakkında bilgi edineceksiniz kaliteden ödün vermeden performansı etkiler.