Pagespeed Insights – Google pagespeed insights test

Det kan være svært når man som normal bruger eller hjemmesideejer skal fortolke det der egentlig står hos Google PageSpeed Insight. Hvad betyder de punkter egentlig og hvilken vej og hvor langt skal man gå for at få det rettet.

alt om google pagespeed insights

Det er nogle af de spørgsmål som jeg vil besvare her i disse artikler omkring dette emne. Og så kan jeg da ikke lade være med at komme med nogle tips.

Hvad er Google PageSpeed Insights?

Pagespeed Insights er et online værktøj udviklet af Google, som vurderer og analyserer hastigheden af ​​en hjemmesides loadtid. Værktøjet giver dig mulighed for at få en vurdering af, hvor hurtig hjemmesiden indlæser, samt forslag til, hvordan du kan optimere hastigheden.

For at bruge Pagespeed Insights skal du blot indtaste URL’en til den hjemmeside, du gerne vil teste. Værktøjet vil derefter analysere hjemmesiden og give dig en score på en skala fra 0 til 100, hvor 100 er den bedst mulige hastighedsscore. Derudover vil du få forslag til, hvordan du kan forbedre hjemmesidens hastighed ved fx at optimere billeder, reducere serverrespons tid osv.

Ved at optimere hastigheden af ​​din hjemmeside kan du forbedre brugeroplevelsen og øge chancen for, at besøgende bliver på din hjemmeside længere. En hurtig indlæsningstid er også vigtig for at forbedre din placering i søgemaskineresultaterne, da Google og andre søgemaskiner vægter hastigheden af ​​hjemmesider højt. Derfor er det en god idé at bruge Pagespeed Insights til at vurdere og optimere hastigheden af ​​din hjemmeside.

Du kan bruge Pagespeed Insights på dansk ved blot at indtaste URL’en til din hjemmeside på PSI. Resultatet og forslagene vil blive præsenteret på dansk, så du nemt kan forstå og implementere dem.

Hvad tester google pagespeed insights?

Pagespeed Insights tester og ser på mange forskellige dele som kan have en indflydelse på hastigheden, dags dato tester PSI blandt andet disse områder, de kan dog ændrer sig da testværktøjet også ændre sig konstant:

  • Fjern ressourcer til blokering af gengivelse
    • Resurser til blokering af gengivelse kan være scripts, der indlæses synkront og forhindrer, at siden vises, indtil de er fuldt indlæst. Dette kan medføre dårlig brugeroplevelse, især på langsomme internetforbindelser.
  • Udskyd billeder, der ikke er på skærmen
    • Dette betyder, at billederne først skal indlæses, når brugeren scroller ned til det område på hjemmesiden, hvor billederne vises. Ved at udskyde indlæsningen af disse billeder kan hjemmesiden indlæses hurtigere, da ressourcerne ikke skal bruges på at indlæse unødvendige billeder.
  • Brug korrekte billedstørrelser
    • For store billeder kan resultere i længere indlæsningstider, da de kræver mere båndbredde og hukommelse. Dette kan have en negativ indvirkning på brugeroplevelsen, da besøgende kan opleve øget ventetid og muligvis forlade siden.
  • Formindsk CSS
    • CSS-filer indeholder kodede instruktioner, der bestemmer udseendet og layoutet af et websted. Når CSS-filer er store og komplekse, kan det øge indlæsningstiden på dit websted, hvilket resulterer i en dårlig brugeroplevelse.
  • Formindsk JavaScript
    • Når man formindsker javascript, betyder det at reducere størrelsen af ​​disse filer ved at eliminere unødvendig kode og komprimere dem. Dette kan gøres ved hjælp af værktøjer som minify eller uglify, der fjerner kommentarer, mellemrum og andre overflødige tegn fra kode.
  • Reducer antallet af CSS, som ikke bruges
    • Hvis der er for mange unødvendige CSS-regler på en side, kan det gøre den langsommere at indlæse og betyde unødvendig kode og dataoverførsel. 
  • Reducer antallet af JavaScript, som ikke bruges
    • JavaScript er et programmeringssprog, der bruges til at tilføje interaktivitet og funktionalitet til et websted. Men hvis der er for mange JavaScript-filer, der ikke bruges, kan det resultere i langsommere sideindlæsningstider og dårligere brugeroplevelse.
  • Kryptér billeder effektivt
    • Når billeder uploades til en hjemmeside, kan de være store filer, der tager lang tid at indlæse. Pagespeed Insights anbefaler at kryptere billeder effektivt for at reducere størrelsen og forbedre indlæsningstiden.
  • Vis billeder i formater af næste generation
    • Ved at bruge formaterne af næste generation kan hjemmesideejere opnå hurtigere indlæsningstider og mindre dataforbrug på deres website. Dette er især vigtigt, da billeder ofte udgør en stor del af en hjemmesides samlede filstørrelse.
  • Aktivér tekstkomprimering
    • Den manøvre hvor man komprimere selve html koden der sendes til brugeren. Men andre metoder skal også tænkes ind her
  • Opret forbindelse på forhånd til påkrævede websites
    • Det til at etablere forbindelse til eksterne ressourcer, såsom billeder, scripts eller stilark, før de rent faktisk er nødvendige.
  • Reducer indledende svartid
    • Pagespeed Insights anbefaler en hurtig og effektiv serversvartid for at forbedre brugeroplevelsen. En kort serversvartid betyder, at brugere ikke behøver at vente længe på at få adgang til indholdet på webstedet.
  • Undgå mange omdirigeringer
    • Denne vil næsten aldrig slå ud, men sker det er det typisk fordi du har elementer på siden som omdirigerer til andre ting. Dette er både skadeligt for hastigheden men også for performance.
  • Forudindlæs vigtige anmodninger
    • At forud indlæse vigtige anmodninger betyder at man preloader filer som fx fonte, css, javascript og billeder
  • Fjern identiske moduler i JavaScript-pakker
    • Denne henviser til hvis man bruger javascript biblioteker i forskellige formater fra forskellige steder. I grunden hvis man bruger javascript dobbelt.
  • Undgå at vise forældet JavaScript i moderne browsere
  • Vis statiske aktiver med en effektiv cachepolitik
    • Denne henviser til det der hedder browsercache, denne skal være sat og der skal være regler for hvor lang tid typer af filer og data skal gemmes i brugerens browser. Det reducere at brugeren skal hente filer på ny
  • Forudindlæs billedet med størst udfyldning af indhold
    • Billedet med største udfyldning over folden skal preloades, det er reelt meget nemt, og gør hjemmesiden noget hurtigere, alene fordi billedet hente før det reelt ville hvis ikke det blev preloadet.
  • Undgå kæmpe datapakker på netværk
    • Kæmpe datapakker er filer som er store, og som skal hentes ned før de kan afspilles eller læses. Dette kan være både javascript, css, billeder og video.
  • Undgå en overdreven DOM-størrelse
    • Henviser til antallet af elementer der findes på den pågældende side. For mange elementer og for mange lag af elementer, jo dårligere er det for indlæsning, især rendering bliver sværere for browseren.
  • Reducer udførelsestiden for JavaScript
    • Fortæller om hvor meget tid der bruges på at læse og bruge det javascript som er på siden, jo højere den er jo dårligere er det for sidens loadtid. Javascript bruger nemlig CPU og hukommelse på brugerens enhed.
  • Formindsk primært trådarbejde
  • tekst forbliver synlig under indlæsning af webfont
    • Denne hentyder til at du skal optimere dine fonte, da der sker det at først en font vises, og når den font du har valgt at bruge er hentet ned, så skifter den over. Det er ikke godt for brugeroplevelsen.
  • Minimer brugen af tredjepartkode
  • Den største udfyldning af billedindhold blev ikke indlæst med lazy loading
    • Det er positivt og fortæller at man ikke lazyloader det største billede over folden.
  • Anvender passive hændelsesfunktioner til at forbedre rulning
  • Undgår document.write()
    • document.write er en javascript metode til at skrive til HTML dokumentet, det er en dårlig ide fordi det virkelig kan forsinke renderingen af siden med mange sekunder.
  • Undgå ikke-sammensatte animationer
  • Billedelementerne har eksplicit width og height
    • Mange indsætter billeder uden at de har angivet højde og bredde, det skal der være angivet for at browsere tolker og reserverer pladsen til dem. højde og bredde på billeder mindsker CLS tiden
  • Der er et <meta name=”viewport”>-tag med width eller initial-scale

Når man køre en test på en hjemmeside vil Google komme forbi hjemmesiden 2 gange, en gang med en mobilenhed og en gang med en stationær enhed. det betyder at der både sker en mobil hastighedstest, og en

Google fortæller at de måler to ting:

  • Tid til siden er loadet over folden
  • Tid til hele siden er loadet

I begge tilfælde, er det tid gået fra brugeren efterspørger siden, til den er renderet i browseren. Hvilket i praksis skulle give et ret godt billede af hvordan siden loader, og hvilke elementer der kan forbedres.

Google PageSpeed Score

En hjemmeside kan få fra 0-100 point, Jo højere en score jo bedre og får man over 85, anses dette som værende ret godt. Man skal dog ikke sætte sig tilbage i stolen og sige, nu har jeg nået 85, og Google giver min side en grøn score. Så må det være fint.

Scoren siger reelt intet om hastigheden på det site man tester, for en side med en lav score kan sagtens være hurtigere end en side med en høj score. Sagt på en anden måde. Google Pagespeed Insights, tester ikke i dybden og ej heller på alle dele af et site som gør hjemmesiden langsom. Så fordi en score bliver grøn og anset som løst af Pagespeed Insight, er det ikke det samme som at det punkt reelt set er løst i dybden og som det anbefales – Det betyder bare at hjemmesiden opfylder de krav og regler som selve testværktøjet har opsat.

Der er 3 kategoriseringer af fejl.

Ikke nogen fejl fundet som er værd at gøre noget ved.
Læg mærke til formuleringen, der er ikke fundet fejl som er værd at gøre noget ved. Dette betyder reelt at der kan være nogle fejl, men ikke noget Google synes du skal gøre noget ved. Det betyder samtidig også at du helst skal sætte dig ind i hvorfor fejl sker, da du så reelt kan se på sitet med dine egne øjne og andre værktøjer. og faktisk fjerne fejlene selvom Google ikke fortæller dig hvor fejlene er.

Overvej at rette disse fejl hvis ikke det tager for lang tid.
Punkter du finder i denne kategori kan være: Reducer JavaScript, Reducer CSS, Reducer HTML, Optimer billeder.

Retter man disse fejl, vil man rette hastighedsfejl som har målbar effekt på hastigheden.
Punkter her kan blandt andet være – Aktiver komprimering, Reducer serverens svartid, udnyt cachelagring i browseren, fjern gengivelsesblokerende javascript og css

Den hurtige læser vil se at selvom Google fortæller ved Rød at det er elementer som har en målbar effekt på hastigheden. Så er det samme altså også tilfældet for de gule punkter. Så Det gule punkt er i mine øjne lige så vigtig som det røde, omend man kan mærke en større forskel, alt efter typen af indhold, på dem i det røde.

Husk også at Google rent faktisk generere nogle filer som man kan hente og bruge på sit site i stedet for dem man bruger. Dette er nok mest relevant for dem som laver sin egen hjemmeside fra bunden, eller som styre hver en fil der bruges på sitet. WordPress, Drupal og andre open source systemer, skal man helst bruge plugins til at gøre det samme.

Det man altid skal huske er at Værktøjer er fine til at se hvor man kan gøre noget bedre. Men man skal aldrig lade et værktøj stå alene, hvilket vil sige at du skal bruge flere værktøjer til at se hvordan en ændring viser sin effekt, men samtidig også bruge dine øjne når du ser på siden og hvordan den loader i flere forskellige browsere.

Værktøjer som jeg vil anbefale at du bruger er:

GTmetrix (https://gtmetrix.com/) – Som er et godt værktøj til at se hvordan siden loader, men også til at se hvordan renderingen af siden fungerer.
Pingdom Tools (https://tools.pingdom.com/) – Et værktøj til hurtigt at se hvordan siden loader.
Google Pagespeed Insights (https://pagespeed.web.dev/) – Værktøjet jeg skriver om. og som er godt til at analyserer hvor man kan gøre noget.

Næste artikel i rækken kommer snart, følg med og lær hvordan Google PageSpeed Insigts skal fortolkes og få råd til hvad du kan gøre i de forskellige situationer.

kim tetzlaff

Om forfatteren

Se mere Kim Tetzlaff

Jeg har siden 1995 arbejdet med og haft stor fokus på Teknisk SEO og hastighed på hjemmesider. Jeg er programmør, nørd og stolt af det. Jeg bygger hjemmesider, hastighedsoptimere, ser på det SEO tekniske og det er mere end 25 års erfaring der ligger bag – Du er i gode hænder når jeg laver noget for dig 🙂

4 kommentarer til “Google PageSpeed Insights test – Alt om PageSpeed Insights”

  1. Hej Kim!

    Tak for god inspiration

    Jeg arbejder med generel kommunikation for en kunde og tjekkede i går hendes website på Google Page Speed. Den viste 65 på mobil (i går; i dag viser den 74 af en eller anden grund).

    Er 65 en ‘dårlig nok’ score til, at man bør bede kundens website freelancer om at kigge efter optimering – in din vurdering?

    Venlige hilsner

    Svar
    • Nu kan man ikke svare sådan generelt for en specifik score. Man skal udelukkende se Google Pagespeed Insights som værktøj der kan fortælle hvordan nogle ting på sitet kan blive forbedret. Den fortæller langt fra alt som kan blive optimeret, og den går IKKE i dybden med selv de ting som den tester på. Det er en fejl når folk tror at det er en indikator for hvor hurtigt ens site loader, derfor kan og skal det aldrig stå alene for en vurdering af hjemmesidens hastighed. Du skal som minimum også bruge GT Metrix til at se på yderligere ting.

      Når det så er sagt. Så indikerer den score at der er noget galt med hastigheden. Det vil sige at ja, jeg vil anbefale at du får optimeret hastigheden. Men stadig set ud fra både Pagespeed insights og GT Metrix, hvor blandt andet TTFB, First Paint, Dom int/loaded og onload gerne skal være så lave som muligt (typisk mellem 0.2-1.5 sekunderalt efter hvilken type site det er).

      Svar
  2. Det er dejligt at følge lidt med når du skriver 🙂 men jeg har stadig en spørgsmål i forhold til Pagespeed Insights. Selvom du forklarer, hvordan man bruger værktøjet, er jeg stadig i tvivl om, hvilke specifikke kriterier der faktisk påvirker hastighedsscoren. Kunne du måske uddybe dette i en del 2 af indlægget? Jeg er virkelig interesseret i at forstå dette bedre.

    Svar
    • Jeg har skam uddybet lidt mere på andre indlæg. Men man kan sige at alle tingene som google tester, reelt har indflydelse, da de alle har indflydelse på selve hastigheden som de emulerer. Det betyder at alle forbedringer har en positiv effekt på scoren. Der er selvfølgelig nogle af forbedringerne som er bedre end andre, som giver mere. Men det kan jeg da godt uddybe i rangorden i et andet indlæg omkring Google Pagespeed Insights

      Svar

Skriv en kommentar

Måske du også vil læse disse indlæg

Ja, jeg har også skrevet andre indlæg som måske kunne have din interesse