Boost Din Hjemmeside: En Dybdegående Guide til Google PageSpeed Insights

I dagens digitale landskab er hastighed altafgørende. Ikke blot for brugeroplevelsen, men også for din placering i søgemaskinerne. Google har gentagne gange understreget vigtigheden af hurtigt indlæsende hjemmesider, og med PageSpeed Insights har de givet os et kraftfuldt værktøj til at måle og forbedre vores siders ydeevne. At opnå en høj score her er ikke længere bare et ønske, men en nødvendighed for enhver, der ønsker at konkurrere online. Mens mange hjemmesider praler af perfekte scores på desktop, er en 100-score på mobil stadig en sjældenhed – en sand 'unicorn'. Lad os dykke ned i, hvad PageSpeed Insights er, hvordan det fungerer, og vigtigst af alt, hvordan du kan optimere din hjemmeside til topresultater.

Uanset om du er en erfaren webudvikler eller en hjemmesideejer uden teknisk baggrund, vil denne guide give dig den viden og de værktøjer, du skal bruge for at forstå din PageSpeed Insights-rapport og implementere de nødvendige forbedringer. Målet er ikke blot at opnå en høj score, men at skabe en fremragende og lynhurtig brugeroplevelse, der holder dine besøgende engagerede og tilfredse.

Hvad er Google PageSpeed Insights?

Google PageSpeed Insights (PSI) er et gratis værktøj, der analyserer en websides indhold og genererer forslag til at gøre siden hurtigere. Det måler den opfattede forsinkelse af din hjemmeside og giver dig en score fra 0 til 100. En god score er afgørende, da Google har annonceret, at disse scores vil blive brugt som et input i deres søgerankingsalgoritme. Værktøjet giver både 'lab data' (indsamlet i et kontrolleret miljø) og 'field data' (data fra virkelige brugere via Chrome User Experience Report, CrUX), hvilket giver et holistisk billede af din sides ydeevne.

Da moderne handel i stigende grad er mobil handel, er det afgørende at opnå en høj score på mobile enheder. Selvom din side måske allerede scorer 100 på desktop, kan mobilscores ofte ligge betydeligt lavere. Dette skyldes en række faktorer, herunder langsommere mobile processorer, netværksbegrænsninger og en større mængde JavaScript og indhold, der skal gengives for mobile browsere. At forstå og løse disse udfordringer er nøglen til at opnå den eftertragtede 100-score på mobil.

Sådan fungerer PageSpeed Insights

PageSpeed Insights analyserer en side for at se, om den følger Googles anbefalinger for at få en side til at gengives på mindre end et sekund på et mobilt netværk. Forskning har vist, at enhver forsinkelse på over et sekund vil få brugeren til at afbryde sin tankegang, hvilket skaber en dårlig oplevelse. Målet er at holde brugeren engageret på siden og give en optimal oplevelse, uanset enhed eller netværkstype.

Det er ikke let at nå et budget på et sekund. Heldigvis behøver ikke hele siden at blive gengivet inden for dette budget. I stedet skal vi levere og gengive indholdet 'above the fold' (ATF) på mindre end et sekund, hvilket giver brugeren mulighed for at begynde at interagere med siden så hurtigt som muligt. Derefter, mens brugeren fortolker den første side af indholdet, kan resten af siden progressivt indlæses i baggrunden.

Tilpasning til mobile netværk med høj latenstid

At opfylde ATF-kriterierne på et sekund på mobile enheder stiller unikke udfordringer, som ikke er til stede på andre netværk. Brugere kan få adgang til dit websted via forskellige netværk som 2G, 3G og 4G. Netværkslatenstider er markant højere end for en kablet forbindelse og forbruger en betydelig del af vores 1.000 ms budget til at behandle ATF-indholdet.

4G-netværket er den fremherskende netværkstype globalt. Vi må antage, at de fleste brugere vil få adgang til din side fra et 4G-netværk. Derfor skal vi antage, at hver netværksanmodning i gennemsnit vil tage 100 millisekunder.

Med dette i tankerne, lad os nu arbejde baglæns. Hvis vi ser på en typisk kommunikationssekvens mellem en browser og en server, har netværkets overhead allerede brugt 300 ms af den tid: et DNS-opslag for at løse værtsnavnet til en IP-adresse, en netværkstur for at udføre TCP-håndtrykket og en valgfri TLS-forbindelse. Dette efterlader os med 700 ms.

Sådan leverer du renderoplevelsen på under et sekund

Efter at have fratrukket netværkslatenstiden har vi kun 700 millisekunder tilbage af budgettet, og der er meget arbejde at gøre: serveren skal behandle svaret, klientapplikationskoden skal udføres, og browseren skal layoutte og gengive indholdet. Med dette i tankerne hjælper følgende kriterier os med at holde os inden for budgettet:

1. Serveren skal behandle svaret (< 200 ms): Serverens svartid er den tid, det tager en server at levere den indledende HTML, udelukket netværkstransporttid. Da tiden er knap, skal tiden være minimal, ideelt set under 200 millisekunder.
2. Minimer antallet af omdirigeringer: Yderligere HTTP-omdirigeringer kan tilføje en eller to ekstra netværksture (to, hvis et yderligere DNS-opslag er påkrævet), hvilket resulterer i hundreder af millisekunder ekstra latenstid på 4G-netværk. Derfor anbefales det at minimere antallet af omdirigeringer og ideelt set fjerne omdirigeringer helt. Dette er især vigtigt for HTML-dokumentet.
3. Antallet af ture til den første gengivelse skal minimeres: På grund af den måde, TCP estimerer kapaciteten af en forbindelse (dvs. TCP slow start), kan en ny TCP-forbindelse ikke straks bruge al den tilgængelige båndbredde mellem klient og server. Af denne grund kan serveren sende op til 10 TCP-pakker (~14 KB) i en ny forbindelse på den første tur og skal derefter vente på, at klienten bekræfter disse data for at øge sit overbelastningsvindue og fortsætte med at levere flere data. Indholdet 'above the fold' bør ideelt set være under 98 KB. Dette giver browseren mulighed for at male siden efter kun tre ture, hvilket giver tilstrækkelig tid til serverens svartid og klientgengivelse.
4. Undgå ekstern blokerende JavaScript og CSS i indholdet 'above the fold': Før en browser kan vise en side til brugeren, skal den parse den. Hvis den støder på et eksternt script, der ikke er asynkront eller blokerer under parsing, skal den stoppe og downloade den ressource. Hver gang den gør det, tilføjes en tur-retur på netværket, hvilket forsinker tiden, indtil siden gengives første gang. Som et resultat skal JavaScript- og CSS-elementer, der er nødvendige for at gengive regionen 'above the fold', indlejres, og JavaScript- eller CSS-elementer, der er nødvendige for at tilføje yderligere funktioner til siden, bør indlæses, efter at ATF-indholdet er leveret.
5. Reserver tid til browserlayout og gengivelse (200 ms): Processen med at parse HTML- og CSS-kode og udføre JavaScript kræver tid og klientressourcer. Afhængigt af den mobile enheds hastighed og sidens kompleksitet kan denne proces tage hundreder af millisekunder. Anbefalingen er at reservere 200 millisekunder til browserens overhead.
6. Optimer JavaScript-udførelse og gengivelsestid: Komplicerede scripts og ineffektiv kode kan tage titusinder og hundreder af millisekunder at udføre. Brug de indbyggede udviklerværktøjer i browseren til at profilere og optimere din kode.

Forstå din PageSpeed Insights-rapport

Når du har indtastet din URL på pagespeed.web.dev og klikket på 'Analyser', vil PSI generere en rapport med flere sektioner. Her er de primære elementer, du skal gennemgå:

Mobil- og desktopydeevne

Da over 55% af de samlede webbesøg foregår via mobil, er det afgørende at overvåge dit websteds ydeevne på både desktop og mobil. I PSI kan du nemt skifte mellem de to for at se specifikke data for hver enhed.

Core Web Vitals Assessment

I 2021 introducerede Google Core Web Vitals (CWV) – et sæt af tre metrikker, der måler din sides indlæsningstid, visuelle stabilitet og sideinteraktivitet. De er i bund og grund Googles måde at vurdere din sides overordnede brugeroplevelse på. De respektive metrikker er:

• Largest Contentful Paint (LCP): Måler, hvor lang tid det tager for det største element 'above the fold' at indlæse på en side.
• First Input Delay (FID): Måler forsinkelsen mellem en brugers første interaktion og det øjeblik, hvor browseren kan svare. (Bemærk: Interaction to Next Paint (INP) er en kommende erstatning for FID og registrerer latenstiden for alle interaktioner i hele sidens livscyklus.)
• Cumulative Layout Shift (CLS): Måler, hvor meget uventede layoutskift påvirker brugeroplevelsen på en side.

CWV-widgeten viser data for de sidste 28 dage, hvilket betyder, at du ikke vil se en øjeblikkelig forbedring i dine Core Web Vitals efter at have anvendt nogle optimeringer. Du kan også skifte mellem 'Denne URL' for den specifikke side, du tester, og 'Oprindelse' for dit websteds overordnede CWV-score. Hvis CWV-data mangler, skyldes det ofte, at dit websted er nyt i Search Console, eller der ikke er tilstrækkelig data tilgængelig i CrUX-rapporten.

Ydeevnescore & Muligheder og Diagnostik

Ydeevnescoren er en vægtet gennemsnitsberegning af seks metrikker: FCP, TTI, Speed Index, TBT, LCP og CLS. En score på 90 eller derover betragtes som god, 50-89 som 'har brug for forbedring', og under 50 som 'dårlig'. PSI bruger et trefarvet scoringssystem (grøn, orange, rød) for nem visuel indikation.

Udover ydeevnescoren ser du også scores for Tilgængelighed, Bedste praksis og SEO. Disse evaluerer henholdsvis dit websteds tilgængelighed for brugere med nedsat syn/hørelse, overholdelse af retningslinjer for tillid og sikkerhed/JavaScript/billeder, og hvor godt din side følger grundlæggende SEO-råd.

Panelene 'Muligheder' og 'Diagnostik' giver dig en liste over optimeringer, der vil forbedre din PSI-score og Core Web Vitals. Hvert forslag kan udvides for at give mere detaljerede data, en forklaring på advarslen, forventede forbedringer og påvirkede metrikker.

Hvorfor din score er forskellig hver gang du tester

Det er normalt, at din PSI-score svinger uden at du foretager ændringer på din hjemmeside. Dette skyldes en række underliggende forhold og variabler, herunder A/B-tests, ændringer i annoncer, internettrafik, test på forskellige enheder, browserudvidelser og antivirussoftware. Kør altid flere tests og undgå at drage konklusioner baseret på en enkelt test.

Hvorfor er min mobilscore lavere end min desktopscore?

Der er tre hovedårsager til, at din mobile PSI-score er lavere end din desktopscore:

• Langsommere mobile processorer: Selvom nutidens mobile enheder er avancerede, har de stadig mindre computerkraft end stationære computere, hvilket fører til langsommere sidegengivelse.
• PSI kører mobiltests på et langsommere netværk: PSI simulerer en langsom 4G-forbindelse for at afspejle virkelige, ustabile mobile netværksforhold. Dette påvirker direkte downloadhastigheden af ressourcer og dermed metrikker som FCP og LCP.
• Mobilenheder har enhedsspecifikke CSS-regler: Mobilenheder ændrer størrelsen på forskellige sideelementer, såsom billeder, hvilket tager tid og bremser din sides ydeevne.

CPU- og netværksbegrænsning i PSI er afgørende for at simulere, hvordan et websted vil præstere for de fleste mobile brugere, især under forhold med begrænset hardware og internetforbindelse. Dette påvirker kritisk metrikker som TTI, TBT, FCP og LCP, da de direkte afhænger af, hvor hurtigt JavaScript kan parses og udføres, og hvor hurtigt ressourcer kan downloades.

Hvor meget betyder Google PSI-scoren?

Din ydeevnescore er baseret på lab data, indsamlet i et kontrolleret miljø af Lighthouse. En 100/100 score betyder derfor ikke nødvendigvis, at dine besøgende har en fremragende oplevelse. Du behøver ikke at over-obsessere med at nå en perfekt score. I stedet bør du fokusere på at implementere alle forslag i panelerne 'Muligheder' og 'Diagnostik'.

Det er Core Web Vitals, der er baseret på 'field data' (virkelig brugerovervågning), som afspejler dine brugeres faktiske oplevelser med hensyn til enheder, netværksforhold og geografiske placeringer. Disse CWV-data fra Chrome User Experience Report (CrUX) er dem, der påvirker din placering i søgemaskinerne. At bestå CWV fører til flere konverteringer og lavere afvisningsprocenter, som eksempler fra Rakuten 24 og The Economic Times har vist.

Brug ydeevnescoren til test- og fejlfindingsformål. Spild ikke din tid på at jagte den perfekte score. Fokuser på at bestå dine Core Web Vitals, og du vil se en mærkbar forbedring i din hjemmesides præstation og placering.

Sådan forbedrer du din PageSpeed Insights-score (Tjekliste)

At forbedre din PageSpeed Insights-score kræver en strategisk tilgang, der fokuserer på de områder, der har størst indflydelse på sidens indlæsningstid og interaktivitet. Her er en tjekliste med de vigtigste optimeringer:

1. Tilføj et cache-lag

Et cache-lag er afgørende for at forbedre din hjemmesides ydeevne og reducere serverens belastning. Ved at gemme ofte tilgåede ressourcer lokalt i brugernes browsere kan du markant reducere indlæsningstiderne for tilbagevendende besøgende. Overvej at bruge et globalt caching-værktøj, der automatisk tilføjer et cache-lag til dit websted.

2. Optimer dine billeder

Billeder udgør ofte en stor del af en sides filstørrelse. Uoptimerede billeder kan alvorligt hindre din sides ydeevne. Sørg for at vælge det rigtige billedformat (f.eks. WebP for moderne browsere), komprimer dem, før du uploader dem, for at reducere filstørrelsen uden at miste kvalitet, og implementer lazy loading, så billeder kun indlæses, når de kommer ind i visningsområdet. Brug af et Content Delivery Network (CDN) er også essentielt for hurtig billedlevering.

3. Komprimer og minimer din kode

Reducer filstørrelsen af dine HTML-, CSS- og JavaScript-filer. Minificering fjerner unødvendige tegn som mellemrum og kommentarer fra kodefilerne, mens komprimering (f.eks. Gzip eller Brotli) anvender algoritmer til at omskrive filernes binære kode ved at bruge færre bits. Dette fører til hurtigere downloads og parsing.

4. Eliminer render-blokerende ressourcer

Visse CSS-stylesheets og JavaScript-kodefiler kan være 'render-blokerende'. Når browseren støder på dem, skal den downloade, parse og udføre dem, før den kan vise noget sideindhold. For at optimere gengivelsesprocessen kan du indlejre kritisk CSS (den CSS, der er nødvendig for at gengive indholdet 'above the fold') og udskyde ikke-essentiel JavaScript ved at bruge async eller defer attributter.

5. Minimer main-thread arbejde

Main Thread er der, hvor browseren udfører det meste af arbejdet, der er nødvendigt for at vise en side. Langvarige JavaScript-opgaver kan blokere Main Thread, hvilket fører til langsomme indlæsningstider, ikke-responsive sider og en dårlig brugeroplevelse. Reducer mængden af unødvendige plugins, minimer ubrugt CSS og udskyd eller fjern tredjeparts JavaScript, der ikke er strengt nødvendigt for den indledende indlæsning.

6. Reducer indvirkningen af tredjepartskode

Mange hjemmesider er afhængige af tredjepartsskripter til funktioner som analyse, chatwidgets og annoncer. Selvom de er værdifulde, kan de have en betydelig negativ indvirkning på ydeevnen. Overvej at lazy loade tredjepartsskripter (indlæs dem kun, når de er nødvendige), forsøg at selv-hoste nogle af dem, eller etabler tidlige forbindelser ved hjælp af preconnect eller dns-prefetch for at fremskynde deres download. Fjern helt dem, der ikke længere tjener et formål.

7. Brug et Content Delivery Network (CDN)

Et CDN består af flere geografisk distribuerede servere (Points of Presence – PoP'er) over hele kloden. Ved at stole på et CDN forkorter du den fysiske afstand mellem dine brugere og dit indhold, hvilket markant kan fremskynde dit websted, især for internationale besøgende. Vælg en CDN-udbyder med et stort netværk af servere, der er fordelt globalt.

Ofte Stillede Spørgsmål (FAQ)

Hvad er Google PageSpeed Insights?

PageSpeed Insights (PSI) er et Google-værktøj, der analyserer en websides indhold og giver forslag til at gøre siden hurtigere. Det leverer både lab- og feltdata om en side. Lab-data er nyttige til fejlfinding af ydeevneproblemer i et kontrolleret miljø, mens feltdata afspejler, hvad dine brugere oplever i den virkelige verden via Chrome User Experience Report (CrUX).

Hvad er Lighthouse?

Lighthouse er et open source, automatiseret værktøj til forbedring af websteders kvalitet. Det kan køre audits for ydeevne, tilgængelighed, progressive web-apps, SEO og mere. Lighthouse indsamler og analyserer lab-data om siden for at give indsigt og en score for hver af de audits, den udfører. Det er integreret i Chrome DevTools og er den motor, der driver PageSpeed Insights' lab-data.

Jeg bruger et JavaScript-bibliotek, som jQuery. Nogle anbefalinger?

Mange JavaScript-biblioteker bruges til at forbedre siden og tilføje interaktivitet, animationer og andre effekter. Mange af disse adfærdsmønstre kan dog tilføjes sikkert, efter at ATF-indholdet er gengivet. Undersøg, hvordan du kan flytte udførelsen og indlæsningen af JavaScript til, efter at siden er indlæst.

Jeg bruger et JavaScript-framework til at bygge siden. Nogle anbefalinger?

Hvis sidens indhold er bygget med klient-side JavaScript, bør du undersøge indlejring af de relevante JavaScript-moduler for at undgå yderligere netværksture. Tilsvarende kan udnyttelse af server-side rendering markant forbedre ydeevnen for den første sideindlæsning: gengiv JS-skabeloner på serveren, indlejre resultaterne i HTML, og derefter bruge klient-skabeloner, når applikationen er indlæst.

Hvordan identificerer jeg den essentielle CSS på min side?

I Chrome Developer Tools skal du åbne panelet 'Audits' og køre en webstedets ydeevnerapport. I den genererede rapport skal du kigge efter 'Fjern ubrugte CSS-regler'. Du kan også bruge andre tredjepartsværktøjer eller scripts til at identificere de CSS-vælgere, der gælder for hver side.

Kan disse bedste praksisser automatiseres?

Absolut! Der findes mange kommercielle og open source web performance optimization (WPO) produkter, der kan hjælpe dig med at opfylde alle eller nogle af de nævnte kriterier. For open source-løsninger kan du undersøge PageSpeed-optimeringsværktøjer.

Hvordan konfigurerer jeg min server til at opfylde disse kriterier?

Først skal du sikre dig, at din server kører en opdateret version af operativsystemet. For at udnytte den øgede indledende TCP-overbelastningsvinduesstørrelse (IW10) skal du bruge Linux-kernel 2.6.39+. For andre operativsystemer skal du se dokumentationen. For at optimere serverens svartid skal du instrumentere din kode eller bruge en applikationsovervågningsløsning til at identificere din flaskehals; f.eks. script-kørselstid, databasekald, RPC-anmodninger, behandling osv. Målet er at behandle HTML-svaret inden for 200 millisekunder.

Hvad med Content Security Policy (CSP)?

Hvis du bruger CSP, skal du muligvis opdatere den standardpolitik. Indlejrede CSS-attributter i HTML-elementer kan føre til unødvendig kodefordobling og blokeres som standard med CSP. Hvis CSP er aktiveret, blokerer det som standard alle indlejrede script-tags. Hvis du har indlejret JavaScript eller stilarter, skal du opdatere CSP-politikken for at bruge hashes eller nonces, eller bruge 'unsafe-inline' for at tillade udførelse/behandling.

Hvor ofte opdaterer Site Kit dataene for PageSpeed Insights?

Site Kit henter nye PageSpeed Insights-data, når du besøger plugin-dashboardet, så dine scores opdateres automatisk.

Påvirker PageSpeed Insights ydeevnen på mit websted?

PageSpeed Insights selv, når det er aktiveret i Site Kit, påvirker ikke direkte dit websteds ydeevne for almindelige besøgende. Det opererer kun på dit websteds WordPress-administratorpanel.

Afsluttende tanker

Regelmæssig test af din hjemmeside giver dig mulighed for altid at vide, hvordan din hjemmeside præsterer. Undgå dog at fokusere udelukkende på din PageSpeed-score. Gå i stedet i gang med at implementere alle forbedringsforslag. Alt andet vil følge. Du vil se et øjeblikkeligt løft i din ydeevnescore, men endnu vigtigere – du vil være på vej mod at bestå dine Core Web Vitals. Med mobil browsing som norm er investering i mobiloptimering ikke kun tilrådeligt; det er essentielt for at opretholde en konkurrencefordel i det digitale rum. Ved at følge denne guide kan du forbedre dine mobile sider, glæde dine brugere og i sidste ende drive mere trafik og konverteringer.

Hvis du vil læse andre artikler, der ligner Boost Din Hjemmeside: En Dybdegående Guide til Google PageSpeed Insights, kan du besøge kategorien Mobil.