Täydelliset Chrome Network -paneelin asetukset Core Web Vitals -optimointiin
Määritä Chrome DevTools Network -paneelin asetukset maksimaalista tehokkuutta varten
Täydelliset Chrome Network -paneelin asetukset Core Web Vitals -optimointiin
Chrome DevTools Network -paneeli on korvaamaton työkalu web-kehittäjille, jotka pyrkivät optimoimaan Core Web Vitals -tuloksia. Valitettavasti oletusasetukset eivät ole parhaat nopeuden optimointiin. Määrittämällä oikeat asetukset voit simuloida todellisia olosuhteita tarkasti ja saada paremman käsityksen verkkosivustosi suorituskyvystä. Tämä opas käy läpi ihanteelliset Chrome DevTools Network -paneelin asetukset Core Web Vitals -tulosten analysointiin ja parantamiseen.
Table of Contents!
Network-paneelin määrittäminen
Avaa Network-paneeli avaamalla Chrome DevTools (F12 tai Ctrl+Shift+I) ja klikkaamalla "Network"-välilehteä.
Throttling
Yksi tärkeimmistä asetuksista Core Web Vitals -optimoinnissa on verkon rajoittaminen (throttling). Tämä mahdollistaa erilaisten verkko-olosuhteiden simuloinnin, joita käyttäjäsi saattavat kokea.
Klikkaa "No throttling" -pudotusvalikkoa Network-paneelissa. Valitse "Fast 4g", "Slow 4g" tai "3G" simuloidaksesi mobiiliverkon olosuhteita. Paras vaihtoehto riippuu yleisöstäsi. Jos yleisösi käyttää tyypillisesti huippuluokan mobiililaitteita nopeissa verkko-olosuhteissa, valitse "Fast 4G". Jos tyypilliset verkko-olosuhteet ovat hieman heikommat, valitse "Slow 4G" ja muussa tapauksessa pelaa varman päälle ja valitse "3G"
Poista välimuisti käytöstä
Varmistaaksesi, että testaat sivustoasi kuten ensimmäistä kertaa vieraileva käyttäjä kokisi sen: Rastita "Disable cache" -valintaruutu Network-paneelissa.
Ota käyttöön suuret pyyntörivit
Suuret pyyntörivit tarjoavat kattavamman näkymän jokaisesta pyynnöstä. Tärkeimmät uudet tiedot, jotka saat, ovat:
- Size-sarake näyttää nyt pyynnön pakkaamattoman ja pakatun koon.
- Name-sarake antaa tietoa polusta.
- Priority-sarake näyttää alkuperäisen ja lopullisen hakuprioriteetin.
Ota kuvakaappaukset käyttöön
Kun otat kuvakaappaukset käyttöön, Chrome ottaa kuvakaappauksia sivun latauksen aikana. Jokainen kuvakaappaus edustaa visuaalista muutosta sivulla ja sitä voidaan käyttää sivun latauksen eri vaiheiden ymmärtämiseen sekä Cumulative Layout Shift -ongelmien tunnistamiseen.
- Network-välilehden ollessa aktiivisena paina Ctrl+F5 (Cmd+R Macilla) päivittääksesi sivun.
- Chrome ottaa kuvakaappauksia sivun latauksen aikana.
- Näiden kuvakaappausten pikkukuvat ilmestyvät valintaruuturivin alapuolelle Network-paneeliin.
Kuvakaappausnäkymässä on joitakin käteviä pieniä ominaisuuksia, joista et ehkä vielä tiedä:
- Vie hiiri kuvakaappauksen päälle nähdäksesi, milloin se otettiin. Tämä näkyy keltaisena pystyviivana yleiskatsauskaaviossa.
- Klikkaa kuvakaappauksen pikkukuvaa suodattaaksesi pois pyynnöt, jotka tapahtuivat kyseisen kuvakaappauksen jälkeen.
- Kaksoisklikkaa pikkukuvaa lähentääksesi ja nähdäksesi kuvakaappauksen tarkemmin.
Ota käyttöön parhaat verkkosarakkeet
Core Web Vitals -ongelmien löytämiseksi seuraavat paneelit antavat hyödyllistä tietoa. Klikkaa hiiren oikealla painikkeella mitä tahansa sarakkeen nimeä ja valitse haluamasi sarakkeet
Ota sitten käyttöön seuraavat sarakkeet, joilla on merkitystä Core Web Vitals -mittareille:
| Sarakkeen nimi | Kuvaus | Merkitys Core Web Vitals -mittareille |
|---|---|---|
| Name | Pyynnön nimi | Resurssien tunnistaminen |
| Status | HTTP-tilakoodit | Ei-200-koodien seuranta (301 ja 302 uudelleenohjausten löytämiseen ja 404 / 410 resursseille, joita ei ole olemassa) |
| Protocol | Käytetty verkkoprotokolla | HTTP/3:n priorisointi suorituskyvyn parantamiseksi |
| Domain | Resurssin verkkotunnus | Kolmannen osapuolen resurssien tunnistaminen |
| Type | Resurssin tyyppi | Pyyntöjen luokittelu |
| Initiator | Pyynnön laukaisija | Pyyntöjen alkuperän ymmärtäminen |
| Size | Siirto- ja todellinen koko | Suurten pyyntöjen tunnistaminen |
| Priority | Resurssin latausprioriteetti | Oikean priorisoinnin varmistaminen |
| Waterfall | Pyyntöjen visuaalinen aikajana | Latausjärjestyksen analysointi |
Ota käyttöön nämä mukautetut vastausotsikot:
Ota käyttöön nämä mukautetut vastausotsikot:
| Sarakkeen nimi | Kuvaus | Merkitys Core Web Vitals -mittareille |
|---|---|---|
| Cache-Control | Resurssin välimuistikäyttäytyminen | Resurssien tunnistaminen |
| Link | Link-vastausotsikko | Esilataus- tai prefetch-otsikoiden tarkistaminen |
| Content-Encoding | Käytetty koodaus | Resurssien pakkauksen vahvistaminen |
Lopputulos:
Nyt on aika ladata sivu uudelleen ja nähdä uusi ja parannettu verkkovastaus Chromen Network-välilehdessä. Se näyttää suunnilleen tältä ja näyttää kaikki tiedot, joita tarvitset Core Web Vitals -virheiden korjaamisen aloittamiseen!
CrUX data is 28 days late.
Google provides data 28 days late. CoreDash provides data in real-time. Debug faster.
- Real-Time Insights
- Faster Debugging
- Instant Feedback
