Ilmainen työkalu: Suorituskyky

Verkkosivun nopeustesti

Lataamme sivusi keskitason puhelimena hitaalla 4G-yhteydellä, mittaamme, kuinka nopeasti pääsisältö tulee näkyviin ja kuinka paljon sivu hyppii, ja näytämme, mikä tekee siitä raskaan. Kun Googlella on sivustostasi todellisten käyttäjien dataa, näet myös sen.

Ilmainen. Valmis yleensä alle minuutissa.

Mitä tämä työkalu tarkistaa

  • Puhelin hitaalla 4G-yhteydellä

    Sivu latautuu Chromiumissa Moto G Power -luokan puhelimena (412 × 823) 150 ms:n viiveellä, noin 1,6 Mbit/s latausnopeudella ja 750 kbit/s lähetysnopeudella sekä 4× hitaammalla suorittimella. Tämä on profiili, jota Lighthouse käyttää mobiilitesteissä.

  • Largest Contentful Paint

    Milloin ensimmäisen näkymän suurin kuva tai tekstilohko oli renderöity valmiiksi ja mikä elementti se oli.

  • Cumulative Layout Shift

    Kuinka paljon näkyvää sisältöä siirtyi odottamatta sivun latautuessa.

  • Total Blocking Time

    Kuinka kauan skriptit pitivät selaimen liian kiireisenä reagoimaan napautukseen: kunkin pitkän tehtävän 50 ms:n ylittävä osa yhteenlaskettuna. Se on laboratoriotestin korvike Interaction to Next Paint -mittarille.

  • Mitä sivu lataa

    Tavujen ja pyyntöjen kokonaismäärä jaoteltuna kuviin, skripteihin, CSS:ään ja fontteihin sekä kolmansilta osapuolilta tuleva osuus.

  • Raskaat kuvat ja renderöinnin estävät tiedostot

    Yli 150 KB:n kuvat tai kuvat, jotka ovat paljon leveämpiä kuin tila, jossa ne näytetään, sekä CSS- ja skriptitiedostot, jotka viivästävät ensimmäistä renderöintiä.

  • Todellisten käyttäjien data Chromesta

    Googlen Chrome UX Report -tiedot alkuperällesi (origin) puhelimilla 75. persentiilissä: LCP, INP ja CLS, kun Googlella on sivustosta riittävästi liikennettä.

Mitä se ei voi tarkistaa

  • Antaa samoja lukuja joka ajolla. Laboratoriotulokset vaihtelevat verkon, palvelimen kuormituksen ja kolmansien osapuolten skriptien mukaan, joten vertaa trendejä yksittäisten ajojen sijaan.
  • Vastata täsmälleen PageSpeed Insightsia. Molemmat käyttävät samankaltaista puhelinprofiilia, mutta ne ajetaan eri koneilla ja verkoissa.
  • Mitata INP:tä laboratoriotestissä. INP vaatii todellisia vuorovaikutuksia, joten laboratoriotesti näyttää TBT:n ja kenttädata INP:n, kun sitä on.
  • Näyttää kenttädataa jokaisesta sivustosta. Chrome UX Report kattaa viimeiset 28 päivää ja vain alkuperät, joilla on riittävästi Chrome-liikennettä.
  • Testata muuta kuin syöttämääsi yhtä sivua. Maksullinen Suorituskykyraportti testaa 3 keskeistä sivua ja asettaa syyt tärkeysjärjestykseen korjausohjeineen.

Miksi sillä on merkitystä

Sivu, joka tuntuu välittömältä toimiston Wi-Fi-yhteydellä ja nopealla kannettavalla, voi viedä useita sekunteja keskitason puhelimessa heikolla signaalilla. Juuri tämän tilanteen testi luo uudelleen, koska siinä raskaat kuvat ja skriptit aiheuttavat eniten haittaa.

Core Web Vitals ovat Googlen mittarit tälle kokemukselle: lataus (LCP), reagointikyky (INP) ja visuaalinen vakaus (CLS). Google käyttää niitä sijoituksissa, mutta sanoo, ettei hyvä sivukokemus ole relevanttia sisältöä painavampi. Suurempi vaikutus niillä on ihmisiin: hidas tai hyppivä sivu menettää kävijöitä ennen kuin he ehtivät lukea mitään.

Syyt ovat yleensä konkreettisia: useiden megatavujen pakkaamaton pääkuva, chat-widget, joka latautuu ennen sisältöä, verkkofontti, joka piilottaa tekstin, tai banneri, joka lisätään sivun yläosaan sen jo tultua näkyviin. Testi nimeää LCP-elementin ja raskaimmat tiedostot, jotta näet, mikä näistä pätee.

Miten tuloksia luetaan

Largest Contentful Paint (LCP)
Hyvä alle 2,5 s, heikko yli 4 s. Jos LCP-elementti on kuva, sen koko ja latausprioriteetti ovat tärkeimpiä; jos se on tekstiä, tarkista verkkofontit ja renderöinnin estävä CSS.
Cumulative Layout Shift (CLS)
Hyvä alle 0,1, heikko yli 0,25. Yksikötön luku, joka yhdistää sen, kuinka suuri osa näytöstä siirtyi ja kuinka pitkälle.
Total Blocking Time (TBT)
Hyvä alle 200 ms, heikko yli 600 ms. Korkea TBT ennakoi, että sivu reagoi todellisten käyttäjien napautuksiin hitaasti.
Tavut ja pyynnöt
Virallista rajaa ei ole; katso, mikä tyyppi hallitsee. Kuvat ovat yleensä suurin osuus, ja suuri kolmansien osapuolten osuus viittaa sovelluksiin, tageihin ja widgeteihin.
Raskaat kuvat
Jokainen yli 150 KB:n kuva tai kuva, joka ladataan paljon leveämpänä kuin se näytetään, tiedostokoon ja mittojen kanssa.
Renderöinnin estävät tiedostot
CSS ja synkroniset skriptit, jotka selaimen on ladattava ennen kuin se voi näyttää mitään.
Kenttädata (75. persentiili)
Todelliset Chrome-käyttäjät puhelimilla viimeisten 28 päivän aikana. 75. persentiili tarkoittaa, että kolme neljästä sivulatauksesta oli vähintään näin nopeita. INP on hyvä alle 200 ms ja heikko yli 500 ms.
Ei kenttädataa
Googlella ei ole riittävästi Chrome-liikennettä alkuperästäsi. Se ei kerro mitään sivusi nopeudesta; luota laboratoriotuloksiin.

Miten yleisimmät ongelmat korjataan

  • Hidas LCP-kuva

    Tarjoa pääkuva siinä koossa, jossa se näytetään, srcset-attribuutin avulla, WebP- tai AVIF-muodossa. Älä lataa sitä laiskasti (lazy-load), lisää fetchpriority="high" ja sijoita se HTML:ään img-elementtinä sen sijaan, että lataisit sen skriptillä tai CSS-taustakuvana.

  • Latautuessa hyppivä sisältö

    Anna kuville, videoille ja upotuksille width- ja height-attribuutit tai CSS:n aspect-ratio. Varaa tilaa bannereille, evästeilmoituksille ja mainoksille tai näytä ne sisällön päälle tulevina kerroksina, jotka eivät työnnä sisältöä alaspäin. Käytä verkkofonteille asetusta font-display: optional tai varafonttia, jonka koko on sovitettu vastaamaan verkkofonttia.

  • Korkea Total Blocking Time

    Poista ensin sovellukset, tagit ja lisäosat, joita et enää käytä; niiden skriptit jäävät usein paikalleen, vaikka lopetat niiden käytön. Lataa chat, arvostelut ja analytiikka defer-attribuutilla tai vasta, kun sivu on interaktiivinen. Shopifyssa tarkista Online Store › Themes › Customize › App embeds.

  • Renderöinnin estävä CSS ja skriptit

    Lisää defer skripteihin, joiden ei tarvitse suoriutua ennen ensimmäistä piirtoa, upota ensimmäisen näkymän tarvitsema pieni määrä CSS:ää suoraan HTML:ään ja poista tyylitiedostot ominaisuuksilta, joita sivu ei käytä.

  • Liian raskaat kuvat

    Pienennä kuvat ennen kuin siirrät ne sivustolle (noin 2000 px:n leveys riittää koko leveyden bannerille) ja pakkaa ne. Shopify ja WordPress voivat tarjota pienempiä versioita automaattisesti, kun teema pyytää niitä, joten tarkista, että teemasi käyttää responsiivisia kuvakokoja.

Kysymyksiä tästä työkalusta

Miksi tulokseni eroavat PageSpeed Insightsista?

Laboratoriotestit riippuvat koneesta, verkosta ja hetkestä. PageSpeed Insights ajaa Lighthousen Googlen palvelimilla ja simuloi hidasta yhteyttä, kun taas me rajoitamme yhteyttä oikeassa selaimessa. Odota samankaltaisia vaihteluvälejä, ei identtisiä lukuja.

Mikä on hyvä LCP?

web.dev-sivuston mukaan 2,5 sekuntia tai vähemmän vähintään 75 %:ssa sivulatauksista. Yli 4 sekuntia on heikko.

Miksi sivustostani ei ole todellisten käyttäjien dataa?

Chrome UX Report sisältää vain alkuperät, jotka ovat julkisesti löydettävissä ja saavat riittävästi käyntejä Chrome-käyttäjiltä, jotka jakavat käyttötilastoja. Monet pienet sivustot eivät yllä tälle tasolle; laboratoriotesti näyttää silti, mitä korjata.

Miksi testata hitaalla puhelimella eikä tietokoneella?

Koska ongelmat näkyvät siellä ensin. Nopea kannettava peittää raskaat kuvat ja skriptit, jotka maksavat sekunteja keskitason puhelimessa, ja Lighthouse käyttää samaa puhelinprofiilia mobiilitesteissään.

Mitä First Input Delaylle tapahtui?

Interaction to Next Paint (INP) korvasi First Input Delayn Core Web Vitals -mittarina maaliskuussa 2024. INP tarkastelee vuorovaikutusten viivettä koko käynnin ajan, ei vain ensimmäisen vuorovaikutuksen.

Lähteet

Aiheeseen liittyvät työkalut

Suorituskykyraportti ($55, kertamaksu) jatkaa täydestä ilmaisesta skannauksesta ja lisää sivuja, jokaisen havainnon vaatiman muutoksen, PDF-tiedoston ja uusintatestit korjaustesi varmistamiseen.

Lue lisää: Suorituskykyraportti