Google PageSpeed Insights test – Alt om 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.

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.