Esiladattu LCP-kuva

Silktide tarkistaa, voisiko sivusi pääkuva – suurin asia, jonka kävijät näkevät sivun latautuessa – ilmestyä nopeammin, jos selainta kehotettaisiin hakemaan se aiemmin. Sivun koetaan latautuneen, kun sen suurin sisältö ilmestyy, joten tämä yksi kuva ratkaisee usein sen, kuinka nopealta koko sivu tuntuu.

Hetkeä, jolloin kuva ilmestyy, mitataan Largest Contentful Paintilla (LCP), joka on yksi Googlen -mittareista.

Miksi tämä on tärkeää

Selaimet lataavat tiedostoja suunnilleen siinä järjestyksessä, jossa ne löytävät ne, ja pääkuva löytyy usein myöhään – tyylitiedostojen ja skriptien takaa, viitattuna tai skriptin lisäämänä. Tuloksena on sivu, joka rakentaa kehyksensä nopeasti mutta jättää aukon siihen, missä tärkeimmän sisällön pitäisi olla.

Koska kävijät arvioivat nopeutta sen perusteella, milloin pääsisältö ilmestyy, ja Google huomioi LCP:n hakusijoituksissa, selaimen ohjeistaminen priorisoimaan tätä yhtä tiedostoa on yksi arvokkaimmista saatavilla olevista nopeusparannuksista.

Näin korjaat ongelman

Esilataa kuva, jotta selain hakee sen heti latauksen alusta alkaen:

<!-- Kohdassa <head>: hae hero-kuva välittömästi -->
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">

Vaihtoehtoisesti, jos kuva on tavallinen <img>-elementti, lisää siihen suoraan fetchpriority="high".
Älä koskaan – pääkuvan loading="lazy" viivästyttää juuri sitä, minkä pitäisi tulla ensin.
Suosi pääkuvassa tavallista <img>-elementtiä CSS-taustakuvan sijaan, jotta selain voi löytää sen itse varhain.

Näin Silktide testaa tämän

Lataa sivu oikeassa selaimessa käyttäen nopeustesteillesi määritettyä laitetyyppiä, yhteysnopeutta ja testisijaintia.
Tunnista suurin sivun latautuessa näkyvä sisältöelementti. Jos se on kuva, tarkista, milloin selain löysi ja latasi sen.
Jos kuvan hakeminen aiemmin saisi sen ilmestymään nopeammin, raportoi se arvioidun aikasäästön kanssa.

Vianmääritys

Pääkuva vaihtuu sivujen tai laitteiden välillä

Esilatausvihjeet ovat sivukohtaisia, ja ”suurin” elementti voi olla eri työpöytä- ja mobiiliasetteluissa. Mallinelogiikka voi luoda oikean esilatauksen kullekin sivulle, ja vihjeen media- ja imagesrcset-attribuutit käsittelevät responsiiviset vaihtoehdot.

Esilatasin kuvan, mutta havainto näkyy edelleen

Esilatauksen URL-osoitteen on vastattava täsmälleen sitä, mitä sivu lopulta renderöi – eri kokovariantti tai uudelleenkirjoittama URL-osoite ei kelpaa. Tarkista myös, että vihje on sivun omassa -head-osiossa eikä skriptin myöhemmin lisäämä, sillä se kumoaa tarkoituksen.