Kuvien mitat

Sivujen tulisi kertoa selaimelle, kuinka paljon tilaa kukin kuva vie, ennen kuin kuvan lataus valmistuu, jotta teksti ja muu sisältö eivät hypi kuvien ilmestyessä. Silktide raportoi näkyvät kuvat, joille ei ole varattu tilaa etukäteen.

Kuva varaa tilaa, kun sille on määritetty sekä width- että height-attribuutit tai kun kuvalla tai jollakin sen säilöelementillä on -ominaisuus aspect-ratio:

<!-- Tilaa ei varata: alla oleva sisältö hyppää, kun tämä latautuu -->
<img src="hero.jpg" alt="Tiimikuva">

<!-- Tila varataan kuvan omilla mitoilla -->
<img src="hero.jpg" alt="Tiimikuva" width="1200" height="800">

<!-- Tila varataan kuvasuhteen avulla -->
<img src="hero.jpg" alt="Tiimikuva" style="aspect-ratio: 3 / 2; width: 100%; height: auto;">

Miksi tämä on tärkeää

Kun selain ei tiedä kuvan kokoa etukäteen, sen on ladattava tiedosto ennen kuin se voi viimeistellä sivun asettelun. Kuvan alapuolella oleva sisältö siirtyy alaspäin jokaisen kuvan latautuessa. Tämä on kumulatiivinen asettelun muutos (CLS), yksi Googlen -mittareista ja haun sijoitussignaali.

Asettelun siirtyminen on myös aidosti ärsyttävää: lukijat kadottavat kohtansa vierittäessään, ja napit, jotka liikkuvat napautushetkellä, aiheuttavat tahattomia klikkauksia.

Näin korjaat sen

Lisää kuvan luonnollisia mittoja vastaavat width- ja height-attribuutit. Selain käyttää niitä oikeassa suhteessa olevan tilan varaamiseen, vaikka CSS skaalaisi kuvaa responsiivisesti.
Vaihtoehtoisesti määritä CSS:ssä aspect-ratio kuvalle tai sitä ympäröivälle elementille. Responsiiviset asettelut, joissa kuva sijoitetaan absoluuttisesti säilön sisään (kuten monissa kuvakomponenteissa), voivat varata tilan näin:

<!-- Säilö varaa tilan; kuva täyttää sen -->
<div style="position: relative; aspect-ratio: 16 / 9;">
  <img src="hero.jpg" alt="Tiimikuva" style="position: absolute; inset: 0; width: 100%; height: 100%;">
</div>

Useimmat nykyaikaiset kehykset ja sisällönhallintajärjestelmät voivat tulostaa mitat automaattisesti. Tarkista kuvakomponenttisi tai media-asetuksesi.

Miten Silktide testaa tämän

Testaa vain sivut, jotka soveltuvat hakukoneiden indeksoitaviksi.
Etsi sivun kaikki näkyvät <img>-elementit ja ohita piilotetut kuvat (kuten seurantapikselit) sekä elementit, jotka olet jättänyt tarkistuksen ulkopuolelle.
Hyväksy kuva, jos sillä on sekä width- että height-attribuutit.
Muussa tapauksessa etsi CSS-ominaisuus aspect-ratio (muu kuin auto) ensin itse kuvasta ja sitten vuorollaan jokaisesta sen esi-isäelementistä. Tyylit ovat sivun oikeassa selaimessa renderöinnin yhteydessä lasketut arvot, joten luokkien ja tyylitiedostojen kautta käytetyt säännöt huomioidaan.
Merkitse jokainen jäljelle jäävä kuva erikseen, jotta se voidaan korostaa sivulla.

Tämä tarkistus näkyy Nopeus-kohdassa ohjeena eikä muuta Nopeus-pistemäärää, joka perustuu Lighthouse-suorituskykypistemäärään. Lighthouse mittaa asettelun siirtymää testaamiltaan sivuilta; tämä tarkistus löytää sitä aiheuttavat kuvat jokaiselta sivulta.

Vianmääritys

Kuvallani on kiinteä koko CSS:ssä, mutta se merkitään silti

Tyylitiedosto, joka antaa kuvalle kiinteän leveyden ja korkeuden, estää myös sen siirtymisen, mutta Silktide tunnistaa vain width- ja height-attribuutit tai aspect-ratio-ominaisuuden. Siksi tämä on varoitus eikä virhe. Jos kuva ei voi liikkua, löydös.