Pildid ja lehe kiirus: vormingud, suurused, laisk laadimine

Miks pildid otsustavad laadimisaja

Google kirjutab, et pildid moodustavad sageli suurima osa lehe kogumahust, mis võib muuta lehtede laadimise aeglaseks ja kulukaks. Kaks Core Web Vitalsi mõõdikut sõltuvad otse piltidest. Largest Contentful Paint (LCP) mõõdab laadimist: Google soovitab, et suurim element ilmuks esimese 2,5 sekundi jooksul pärast lehe laadimise algust. Paljudel lehtedel on see element pilt, näiteks suur foto lehe ülaosas. Cumulative Layout Shift (CLS) mõõdab visuaalset stabiilsust ja peaks jääma alla 0,1. Pildid, mis saabuvad ilma reserveeritud ruumita, lükkavad teksti allapoole ja tõstavad seda väärtust.

Õige vorming

• Fotod: JPEG töötab kõikjal. WebP ja AVIF on sarnase kvaliteedi juures sageli selgelt väiksemad.
• Teravate servade või läbipaistvusega graafika: PNG või WebP ja AVIF, mis võivad samuti olla läbipaistvad.
• Logod ja ikoonid: SVG, sest see jääb igas suuruses teravaks ja on tavaliselt väga väike.
• Google Search toetab src-atribuudis pilte vormingutes BMP, GIF, JPEG, PNG, WebP, SVG ja AVIF.

Kui pakud WebP- või AVIF-faile, võid picture-elemendis hoida varuvariandina JPEG-faili. Brauser valib esimese allika, millest ta aru saab.

Õige suurus

Pilt, mis on 2400 pikslit lai, kuid mida näidatakse 600 piksli laiusena, raiskab suurema osa oma baitidest. Ekspordi pildid umbes sellise laiusega, millisena neid näidatakse, ja teravate ekraanide jaoks umbes kaks korda laiemana. Seejärel tihenda need. Paljudes pilditöötlusprogrammides piisab veebifotode jaoks kvaliteediseadest umbes skaala keskel. Kontrolli tulemust täissuuruses, enne kui asendad originaali.

srcset ja sizes

Üks fail ei sobi kunagi igale ekraanile. srcset abil pakud sama pildi mitut faili ja märgid iga faili laiuse. sizes abil ütled brauserile, kui laiana pilti näidatakse. Brauser valib seejärel väikseima faili, mis on piisavalt terav.

<img src="/img/sofa-800.jpg"
     srcset="/img/sofa-400.jpg 400w, /img/sofa-800.jpg 800w, /img/sofa-1600.jpg 1600w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="800" height="533"
     alt="…">

Selles näites täidab pilt kitsastel ekraanidel kogu ekraani ja on laiematel 700 pikslit lai. Google soovitab alati hoida src-atribuudis varuvarianti. Kirjuta kolme punkti asemele päris alt-tekst.

Width ja height paigutuse nihete vastu

Ilma width ja height väärtuseta ei tea brauser enne faili saabumist, kui palju ruumi pilt vajab. Selle all olev tekst hüppab siis allapoole. web.dev juhend paigutuse nihete kohta soovitab: lisa piltidele ja videoelementidele alati width ja height atribuudid, faili pikslisuuruse või vähemalt õige kuvasuhtega. Kaasaegsed brauserid määravad nende väärtuste põhjal pildi vaikimisi kuvasuhte ja reserveerivad ruumi. CSS-is hoiavad width: 100% ja height: auto pildi paindlikuna. Kui sa ei saa atribuute määrata, nimetab juhend alternatiivina CSS-i omadust aspect-ratio.

Laisk laadimine

loading="lazy" korral laadib brauser pildi alles siis, kui see jõuab nähtava ala lähedale. See säästab andmemahtu lehel allpool asuvate piltide puhul. Google ütleb laisa laadimise kohta: ära lisa seda sisule, mis on tõenäoliselt kohe nähtav, kui kasutaja lehe avab. Brauseri sisseehitatud laisk laadimine on saadaval piltide ja iframe'ide jaoks.

LCP-pilt

Suurim pilt lehe ülaosas, sageli päisepilt või toote põhifoto, on lehe kõige olulisem fail. web.dev juhend LCP kohta ütleb: ära kunagi laadi oma LCP-pilti laisalt. fetchpriority="high" on brauserile vihje see varakult laadida. Juhendi järgi ei aita kõrge prioriteet enam, kui see on rohkem kui ühel või kahel pildil. Pildid, mille aadressi skriptiteek peidab data-src atribuuti või mis on ainult CSS-taust, leiab brauser hilja. Taustapildi jaoks nimetab juhend eellaadimist HTML-is link rel="preload" abil. AVIF või WebP ja väiksem fail lühendavad samuti laadimisaega.

Et näha, kuidas sinu lehed toimivad, viitab Google Search Console'i Core Web Vitalsi aruandele. Üksiku lehe puhul näitavad brauseri jõudlustööriistad, milline element on LCP-element ja millised elemendid paigutust nihutavad. Mõõda enne ja pärast muudatust, et teaksid, kas see aitas.

Lühike kontrollnimekiri

• Kas suurim pilt lehe ülaosas laaditakse tavapäraselt, mitte laisalt?
• Kas igal img-elemendil on width ja height või on ruum reserveeritud aspect-ratio abil?
• Kas iga fail on umbes nii lai, nagu seda näidatakse, ja tihendatud?
• Kas suured fotod on srcset ja sizes abil mitmes laiuses?
• Kas on JPEG- või PNG-faile, mis võiksid olla WebP või AVIF?

Töö Do4U-ga

Piltide kontroll loeb ühe lehe ja iga sellel oleva pildi. Iga faili kohta näitab see vormingut, failimahtu ja piksleid ning HTML-ist width ja height, loading, fetchpriority, srcset ja sizes väärtusi, picture-allikaid ja style-atribuutides olevaid taustapilte. Do4U arvab HTML-i põhjal ära tõenäolise LCP-pildi. See ei mõõda seda, sest tegeliku LCP-elemendi otsustab brauser. Saad piltide tabeli koos leidudega, kogumahu ja lühikokkuvõtte. JavaScriptiga lisatud pilte ja väliste CSS-failide taustapilte ei arvestata. TI-d ei kasutata ja kontroll on tasuta, päevase limiidiga.

Do4U leiab vihjeid, sina kontrollid ja otsustad. Kinnita LCP-element oma brauseri jõudlustööriistadega, enne kui lehte muudad.