Bu sayfa, Cloud Translation API ile çevrilmiştir.

Duyarlı resimleri önceden yükleme

Barry Pollard

Yoav Weiss

Duyarlı resimleri önceden yükleyerek resimlerinizin yüklenmesini sağlayabilirsiniz tarayıcının doğru resmi tanımlamasına yardımcı olarak önemli ölçüde daha hızlı img etiketini oluşturmadan önce bir srcset etiketinden alınır.

Duyarlı resimlere genel bakış

Tarayıcı Desteği

Web'de 300 piksel genişliğindeki bir ekranla göz attığınızı ve en baştan sona 300 piksel 1500 piksel genişliğinde bir resim isteğinde bulunur. Bu sayfa, mobil cihazınızın önemli bir bölümünü harcadı veri yoktur, çünkü ekranınız bu ekstra çözünürlükle hiçbir şey yapamaz. İdeal olarak tarayıcı, resmin yalnızca küçük daha geniş bir çerçeve sunar (ör. 325 piksel). Bu sayede yüksek çözünürlüklü resimler kullanır ve resmin daha hızlı yüklenmesini sağlar.

Duyarlı resimler Tarayıcıların farklı cihazlar için farklı resim kaynakları getirmesini sağlar. Şunu yapmazsanız: bir resim CDN kullanın, her öğe için birden fazla boyut kaydedin görüntüsü içine ekleyin ve srcset özelliğinde bunları belirtin. w değeri, genişliğine göre ayarlamak, böylece sayfa için uygun sürümü herhangi bir cihazda:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

Önceden yüklemeye genel bakış

Tarayıcı Desteği

Kaynak

Önceden yükleme, tarayıcıya şu veriler hakkında bilgi vermenizi sağlar: en kısa sürede yüklemek istediğiniz kritik kaynakları keşfedeceğiz. Bu, özellikle hazır durumda olmayan kaynaklar için bulunabilir. Örneğin, stil sayfalarında bulunan yazı tipleri, arka plan resimleri veya kaynakların yüklenmesidir.

<link rel="preload" as="image" href="important.png">

`imagesrcset` ve `imagesizes`

<link> öğesi, aşağıdaki işlemler için imagesrcset ve imagesizes özelliklerini kullanır: duyarlı resimleri önceden yükleme. Birlikte kullanın <link rel="preload"> (srcsetsizes <img> öğesi.

Örneğin, şunlarla belirtilen duyarlı bir resmi önceden yüklemek isterseniz:

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

Bunu, HTML'nizin <head> bölümüne aşağıdakileri ekleyerek yapabilirsiniz:

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">

Bu komut, kullandığınız kaynak seçme mantığının aynısını kullanarak srcset ve sizes kullanıyor.

Kullanım alanları

Aşağıda, duyarlı resimleri önceden yüklemeye ilişkin bazı kullanım alanları verilmiştir.

Dinamik olarak yerleştirilen duyarlı resimleri önceden yükle

Her bir slayt gösterisinin parçası olarak hero resimleri dinamik olarak yüklediğinizi ve önce hangi resmin görüntüleneceğini bilmek önemlidir. Bu durumda, ekip arkadaşlarınızın o resmi mümkün olan en kısa sürede gösterin ve slayt gösterisi komut dosyasının yükleyin.

Bu sorunu, dinamik olarak yüklenmiş bir resim galerisi kullanarak bir web sitesinde inceleyebilirsiniz:

Bu slayt gösterisi demosunu açın yeni bir sekme açın.
Geliştirici Araçları'nı açmak için Control+Shift+J (veya Mac'te Command+Option+J) tuşuna basın.
Ağ sekmesini tıklayın.
Throttling açılır listesinden Hızlı 3G'yi seçin.
Önbelleği devre dışı bırak onay kutusunu devre dışı bırakın.
Sayfayı tekrar yükleyin.

ziyaret edin.

Chrome Geliştirici Araçları Ağ panelinde, JPEG kaynağının sadece JavaScript'ten sonra indirilmeye başlandığı bir şelale gösteriliyor. — Önceden yükleme olmadan, resimler tarayıcı komut dosyasını çalıştırmayı bitirdikten sonra yüklenmeye başlar. İlk resim için bu gecikme gerekli değildir.

Burada preload kullanılması resmin önceden yüklenmeye başlamasını sağlar. Böylece ve tarayıcının görüntülemesi gerektiğinde görüntülenmeye hazır olur.

Chrome Geliştirici Araçları ağ panelinde, JavaScript'e paralel olarak indirilen bir JPEG kaynağı bulunan şelale gösteriliyor. — İlk resmin önceden yüklenmesi, komut dosyasıyla aynı anda yüklenmeye başlamasını sağlar.

Önceden yüklemenin yarattığı farkı görmek için, dinamik olarak yüklenen aynı öğeyi inceleyin resim galerisinde (ilk resim önceden yüklenmiş şekilde) aşağıdaki adımları uygulayın.

Resim setini kullanarak arka plan resimlerini önceden yükle

Farklı ekran yoğunlukları için farklı arka plan resimleriniz varsa şunları yapabilirsiniz: bunları CSS'nizde image-set söz dizimiyle belirtin. Böylece tarayıcı ekrandaki özelliklere göre hangisinin görüntüleneceğini DPR.

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

CSS arka plan resimleriyle ilgili sorun, tarayıcının bu resimleri bulmasıdır Yalnızca sayfanın <head> öğesindeki tüm CSS'yi indirip işledikten sonra.

Bu sorunu örnek bir web sitesinde inceleyerek duyarlı arka plan resmi.

Chrome Geliştirici Araçları Ağı panelinde, JPEG kaynağının sadece biraz CSS'den sonra indirilmeye başlandığı bir şelale gösteriliyor. — Bu örnekte, CSS tamamen indirilene kadar resim indirme işlemi başlamamaktadır. Bu durum, resmin ekranında gereksiz gecikmeye neden olur.

Duyarlı resimleri önceden yükleme özelliği, bu resimleri daha hızlı yüklemenizi sağlar.

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">

href özelliğini çıkarmak, <link> öğesinde imagesrcset desteği var, ancak şurada image-set destekleniyor: CSS doğru kaynağı indiriyor. Ancak bu dosyalarda önceden yükleme işlevinden bu bilgilerden yararlanabilirsiniz.

Önceki örneğin, önceden yüklenmiş duyarlı bir reklam öğesi ile nasıl davrandığını inceleyebilirsiniz. duyarlı arka plan önceden yükleme demosındaki arka plan resmi.

Chrome Geliştirici Araçları Ağ panelinde, bazı CSS'lere paralel olarak indirilen bir JPEG kaynağı bulunan şelale gösteriliyor. — Burada, resim ve CSS aynı anda indirilmeye başlar ve resmin daha hızlı yüklenmesini sağlar.

Duyarlı resimleri önceden yüklemenin pratik etkileri

Duyarlı resimlerinizi önceden yüklemek bunları teoride hızlandırabilir. Peki resimlerinizi ne işe yarar?

Demo PWA mağazasının iki kopyasını oluşturdum: resimleri önceden yüklemeyen, bazılarını önceden yükleyen bir çözüm. Site, görselleri JavaScript kullanarak geç yüklediği için, ilk görüntü alanında görünenlerin önceden yüklenmesini sağlar.

Bu işlem, şu sorgu için şu sonuçları verdi: önceden yükleme yok ve görüntünün önceden yüklenmesi için:

Oluşturmayı Başlat aynı kaldı.
Hız endeksi biraz iyileştirildi (273 ms, resimler daha hızlı ulaştığından bulunur).
Last Painted Lokomotif resim 1, 2 saniye gibi büyük bir oranda iyileşti.

ziyaret edin.

Önceden yüklenmiş resimleri gösteren WebPageTest film şeridi karşılaştırması yaklaşık 1,5 saniye daha hızlı görüntüleniyor. — Resimler önceden yüklendiğinde önemli ölçüde daha hızlı ulaşır ve kullanıcı deneyimini büyük ölçüde iyileştirir.

Önceden yükle ve `<picture>`

Web Performansı Çalışma Grubu, şu anda her web sitesi için önceden yükleme eşdeğerinin srcset ve sizes (<picture> değil) öğesi ("resim yönü" bir şablon görevi görür.

<picture> önceden yüklenmesiyle ilgili olarak hâlâ çözülmesi gereken birkaç teknik sorun var. Ancak bu arada geçici çözümler bulabilirsiniz:

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

<picture> öğesinin resim kaynağı seçme mantığı media eşiğini aşıyor özelliklerini sıraya sokmak için, <source> öğelerinin ekli kaynağı kullanır ve bu kaynağı kullanır.

Duyarlı önyüklemede "sipariş" kavramı olmadığından "ilk eşleşme"yi seçerseniz ayrılma noktalarını aşağıdaki gibi bir şeye çevirmeniz gerekir:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">

Önceden yükle ve `type`

<picture> öğesi, aşağıdakileri yapabilmeniz için ilk type öğesinde eşleştirmeyi de destekler. Tarayıcının ilk resim biçimini seçebilmesi için farklı resim biçimleri sağlar yardımcı olur. Bu kullanım alanı, önceden yüklemede desteklenmez.

Tür eşleştirmeyi kullanan sitelerde önceden yüklemeden kaçınmanızı ve bunun yerine, önceden yükleme tarayıcısı Bunun yerine <picture> ve <source> öğelerini kullanın. Bu en iyi uygulamalardan biridir. özellikle önceliklerinizi belirlerken Getirme Önceliği'ni kullanırken uygun resim.

Largest Contentful Paint (LCP) üzerindeki etkiler

Resimler Largest Contentful Paint (LCP) adayları olabileceğinden bunların önceden yüklenmesi web sitenizin LCP'sini iyileştirebilir.

Önceden yüklediğiniz resmin duyarlı olup olmamasına bakılmaksızın önceden yüklemeler çalışır resim kaynağı ilk işaretleme yükünde bulunabilir olmadığında en iyi şekilde çalışır. Ayrıca, istemcide işaretleme oluşturan sitelerde daha fazla LCP iyileştirmesi elde edersiniz gönderen sitelere göre daha değerli olabilir.