Innhold
- Hva gjør disse verktøyene?
- Prestasjonspoeng
- Lab versus feltdata
- Feltdata
- Ytelsesberegninger
- Virkelige feltdata
- Klassifisering raskt, moderat og sakte
- Lab data
- Revisjon
- Optimalisering av ytelse
- API for PageSpeed Insights
- Tredjeparts tjenester
- Kom deg fort, vær fort!
Verktøy som PageSpeed Insights (PSI) og Lighthouse kan være verdifulle for å overvåke ytelsen til nettstedene dine. Men hvorfor trenger du dem? Når du bygger en moderne nettopplevelse, er det viktig å måle, optimalisere og overvåke om du skal komme deg raskt og holde deg rask. Ytelse spiller en viktig rolle i suksessen til ethvert nettsted, siden nettsteder med høy ytelse engasjerer og beholder brukerne bedre enn de som ikke fungerer bra.
I denne artikkelen skal Addy Osmani, som administrerer Web Developer Insights-teamet i Chrome, snakke om det beste siden skivet brød: ytelsesmåling og hvordan disse verktøyene kan hjelpe deg med å forbedre nettstedet ditt.
Trenger du noe nytt sett? Ta en titt på vårt utvalg av webdesignverktøy og topp bærbare datamaskiner for programmering. Eller for å lage et helt nytt nettsted, finn den beste nettstedbyggeren for dine behov.
Hva gjør disse verktøyene?
Lighthouse tilbyr et omfattende sett med ytelsesmuligheter og spart tid ved å implementere hver optimalisering. Du finner den i Chrome DevTools Audits-panelet og i PageSpeed Insights.
PageSpeed Insights rapporterer om ytelsen til en side på mobile og stasjonære enheter og gir forslag til hvordan siden kan forbedres.
PSI gir både 'lab' (Lighthouse) og 'field' data om en side. Lab data
er nyttig for feilsøking av ytelsesproblemer, ettersom det samles i et kontrollert miljø. Imidlertid kan det hende at det ikke fanger opp flaskehalser i den virkelige verden. Feltdata er nyttige for å fange ekte brukeropplevelse i den virkelige verden, men har et mer begrenset sett med beregninger.
Prestasjonspoeng
Øverst i rapporten gir PSI en poengsum som oppsummerer ytelsen til siden. Denne poengsummen bestemmes ved å kjøre Lighthouse for å samle inn og analysere laboratoriedata om siden. En score på 90 eller høyere regnes som rask og 50 til 90 regnes som moderat. Under 50 anses å være treg.
Lab versus feltdata
Lab data
Lab-data er ytelsesdata samlet inn i et kontrollert miljø med forhåndsdefinerte enhets- og nettverksinnstillinger.
Dette gir reproduserbare resultater og feilsøkingsfunksjoner for å identifisere, isolere og fikse ytelsesproblemer.
Styrker:
- Nyttig når det gjelder feilsøking av ytelsesproblemer
- End-to-end og gir dyp synlighet i UX
- Tilbyr reproduserbart test- og feilsøkingsmiljø
Begrensninger:
- Kan ikke fange virkelige flaskehalser
- Kan ikke korrelere med KPI-er fra den virkelige verden
Merk: Verktøy som Lighthouse og WebPageTest samler inn denne typen data.
Feltdata
Feltdata (også kalt ekte brukerovervåking eller RUM) er ytelsesdata samlet inn fra ekte sidelaster brukerne dine opplever i naturen.
Styrker:
- Fanger ekte brukeropplevelse fra den virkelige verden
- Gjør det mulig å korrelere med bedriftsnøkkelindikatorer
Begrensninger:
- Begrenset sett med beregninger
- Begrensede feilsøkingsfunksjoner
Merk: Offentlige datasett som Chrome User Experience Report og ytelsesverktøy som PageSpeed Insights hastighetspoeng rapporterer denne typen data.
Ytelsesberegninger
Tidligere har webytelse blitt målt med laste begivenhet. Imidlertid samsvarer dette øyeblikket ikke nødvendigvis med det brukeren bryr seg om. I løpet av de siste årene har nettleserteamene jobbet med å standardisere et sett med nye beregninger og API-er som mer nøyaktig fanger ytelsen til en webside.
For å sikre at beregningene er relevante for brukerne, rammer vi dem rundt noen få viktige spørsmål:
- Skjer det? Startet navigasjonen vellykket? Har serveren svart?
- Er det nyttig? Har det gitt nok innhold til at brukerne kan engasjere seg i det?
- Er det brukbart? Kan brukere samhandle med siden eller er den opptatt?
- Er det herlig? Er interaksjonene jevne og naturlige, uten forsinkelser?
Det er en rekke viktige beregninger å måle, og Lighthouse og PageSpeed Insights prøver å fange noen få viktige.
- Første tilfredsstillende maling markerer tidspunktet da den første teksten eller bildet males.
- Time to Interactive er hvor lang tid det tar før siden blir fullt interaktiv (f.eks. Kan brukeren klikke og se et svar)
- Hastighetsindeks viser hvor raskt innholdet på en side er synlig befolket.
Og det er noen spennende nye beregninger som kommer til verktøyene våre i år:
- Largest Contentful Paint (LCP): måler tiden fra siden begynner å lastes til den største tekstblokken eller bildeelementet gjengis på skjermen.
- Total blokkeringstid (TBT): måler den totale tiden mellom FCP og TTI der hovedtråden ble blokkert lenge nok til å forhindre innspillrespons
Lær mer om moderne ytelsesberegninger.
Virkelige feltdata
Når PSI får en URL, vil den slå opp i datasettet for Chrome User Experience Report (CrUX). Hvis tilgjengelig, rapporterer PSI metriske data for First Contentful Paint (FCP) og First Input Delay (FID) for opprinnelsen og potensielt den spesifikke nettadressen.
Klassifisering raskt, moderat og sakte
PSI klassifiserer også feltdata i tre bøtter, og beskriver opplevelser som anses som raske, moderate eller sakte. PSI angir følgende terskler for rask / moderat / langsom, basert på CrUX-datasettet:
FCP:
- Rask: 0 - 1000 ms
- Middels: 1000 ms - 3000 ms Langsom: over 3000 ms
FID:
- Rask: 0 - 100ms
- Middels: 100ms - 300ms
- Sakte: over 300 ms
Lab data
PSI bruker Lighthouse til å analysere den gitte URL-en, og generere en ytelsespoeng som estimerer sidens ytelse på forskjellige målinger, inkludert: Første innholdsrike maling, hastighetsindeks, tid til interaktiv og estimert inngangsforsinkelse (og for å forbedre nettstedet ditt, sjekk om du har har den ideelle webhotelltjenesten for deg).
Hver beregning er merket med et ikon:
- En rask beregning er angitt med et grønt avkrysningsmerke
- Moderat er angitt med oransje informasjonssirkel
- Langsom er indikert med en rød advarseltrekant
Revisjon
Lighthouse skiller revisjonene sine i tre forskjellige seksjoner:
- Muligheter gir forslag til hvordan du kan forbedre sidens ytelsesberegninger. Hvert forslag i denne delen estimerer hvor mye raskere siden lastes inn hvis forbedringen implementeres
- Diagnostics gir ytterligere informasjon om hvordan en side følger beste praksis for nettutvikling
- Bestått revisjon indikerer revisjonene som har blitt bestått av siden
Optimalisering av ytelse
Det er flere optimaliseringer du kan bruke for å forbedre Lighthouse / PageSpeed Insights-beregningene.
Slik forbedrer du første tilfredsstillende maling:
- Miniser CSS og fjern ubrukt CSS
- Fjern eventuelle gjengivelsesblokkerende ressurser
- Koble til ønsket opprinnelse
- Reduser serverens responstid
- Unngå flere viderekoblinger
- Unngå overdreven DOM-størrelse
- Sørg for at teksten forblir synlig under innlasting av nettfonter (f.eks. Med fontvisning)
Å sende store JavaScript-nyttelaster påvirker nettets hastighet betydelig, spesielt hvor snart brukere kan samhandle med sidene dine. For å forbedre tiden til interaktiv for et nettsted, kan du:
- Miniser og komprimer JavaScript
- Lever bare JavaScript-brukerne trenger når de trenger det (f.eks. Med kodesplitting) Reduser virkningen av tredjepartskode (f.eks. Lat innlasting av disse ressursene)
- Reduser JavaScript-utføringstiden ved å optimalisere dyre lange oppgaver
- Last inn nøkkelskript på forhånd, spesielt hvis nettstedet ditt er et ensidesapp
Mange av disse optimaliseringene kan også forbedre hastighetsindeksen din. Få flere ytelsestips for Lighthouse / PageSpeed-score her.
API for PageSpeed Insights
I tilknytning til PSI er PageSpeed Insights API, som gir gratis tilgang til ytelsesovervåking for websider og returnerer data med forslag til hvordan du kan forbedre. V5 API inkluderer laboratoriedata fra Lighthouse og virkelige data fra Chrome User Experience Report (CrUX).
`` js const url = ‘https://wordpress.org '; const apiCall = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=$ {url}`; const respons = venter på henting (apiCall); const json = avventer svar.json ();
Lag bruker API for å bygge dashbord, tilpassede rapporter og tilpassede integrasjoner med andre måleverktøy for brukeropplevelse. Svarene fra API-en kan brukes til å overvåke og tegne noen av dataene fra PSI-verktøyet vi dekket tidligere.
Det er mulig å lage høyt tilpassede rapporter ved hjelp av PSI-data. For eksempel viser Vrbo, et nettsted for ferieboliger, diagrammer fra virkelige data fra PSI API for å spore langsiktige ytelsestrender for å sikre at hastigheten forblir konkurransedyktig innen reisebransjen.
Web.dev Measure bruker samme bakside som PSI og bruker disse dataene til historisk måling over tid.
Det er nyttig å bli kjent med strukturen til PSI API-svaret. Det er beregningsinformasjon tilgjengelig for laboratorier og felt / den virkelige verden:
`` js const url = ‘https://wordpress.org '; const apiCall = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=$ {url}`; hente (apiCall) .then (respons => response.json ()) .then (json => {// Real-world metrics const cruxMetrics = {“First Contentful Paint”: json.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.category, “ First Input Delay ”: json.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.category}; // Lab metrics const lighthouse = json.lighthouseResult; const lighthouseMetrics = {'First Contentful Paint': lighthouse.audits ['first-contentful-paint']. displayValue, 'Speed Index': lighthouse.audits ['speed-index']. displayValue, 'Time To Interactive': lighthouse.audits ['interactive']. displayValue,}; // ...});
Svarene fra PSI API er fokusert på ytelsesdata. Når det er sagt, kan du levere ?kategori argument for å spesifisere eventuelle ytterligere Lighthouse-revisjonskategorier du ønsker data for.
`` sh curl -i “https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://web.dev&category=pwa&category=performance&category=accessibility&category=best-practices&category=seo”
Du kan også levere et sted- eller strategiorgument (stasjonær eller mobil - som simulerer en sideinnlasting på en enhet i medianklassen - for eksempel en Moto G4 - på et mobilnett).
Lighthouse begynner å støtte Stack Packs, stack-spesifikke anbefalinger som gir mer detaljert veiledning om hvordan du implementerer optimaliseringer (f.eks. WordPress). PSIs API-svar støtter også dette, så hvis du tester et WordPress-nettsted, er disse strengene inkludert (f.eks. Vil en demo-URL for wordpress.org være https: // www.googleapis.com/pagespeedonline/v5/ runPagespeed? rl = https: //wordpress.org).
PSI-verktøyet støtter også henting av PSI API-data og gjengivelse med den offisielle Lighthouse Viewer. Sende ? psiurl som en parameter for å se dette i aksjon.
Et av verktøyene vi bygget på toppen av PSI er psi Node-modulen, og tilbyr praktisk ytelsesrapportering i din byggeprosess.
`` js const psi = krever (‘psi '); (async () => {// Få PageSpeed Insights-rapporten const {data} = await psi ('https://web.dev'); console.log ('Speed score:', data.lighthouseResult.categories.performance .score); // Send en formatert rapport til terminalen og venter på psi.output ('https://theverge.com'); console.log ('Done');}) ();
Du kan også bruke Google Sheets og en cron-jobb for å automatisere overvåking av flere nettadresser (f.eks. Konkurrenter) ved å pinge PSI API regelmessig. En praktisk guide og et ark du kan kopiere er tilgjengelig her.
Tredjeparts tjenester
Kontinuerlige overvåkingstjenester som SpeedCurve, Caliber eller Treo utnytter verktøy som Lighthouse og PageSpeed Insights under panseret. Hvis du helst vil ha en tjeneste som sørger for å regelmessig sjekke resultatene dine og sende deg rapporter i forhold til å rulle dine egne, bør du vurdere å sjekke dem ut. Til slutt, bruk den løsningen som gir mest mening for nettstedet ditt!
Like viktig er det sikkert å lagre eiendelene dine. Sjekk ut de beste skylagringsalternativene for deg.
Kom deg fort, vær fort!
Når det gjelder brukeropplevelse, betyr hastighet. Det er viktig å forstå de ulike innsiktene som tilbys av ytelsesberegninger, og deretter fastslå de som er viktige for brukeropplevelsen din. Verktøy som Lighthouse og PageSpeed Insights kan måle opplevelsen din og fremheve muligheter for hvor du kan forbedre deg. De kan være en nyttig del av nettstedets verktøykasse for å komme raskt og holde seg raskt.
