Google PageSpeed optimalisering er en viktig del av enhver blogg- eller nettsiderangering i Googles søkeresultater. Her er min trinnvise guide for å optimalisere sidehastigheten til WordPress-bloggen din og oppnå en perfekt ytelse på 100 på Google PageSpeed Insights.
Lastehastigheten til nettstedet ditt er en viktig del av en brukers opplevelse på bloggen din. Det er derfor det er viktig å ha en rask nettside for å lykkes hvis du vil opprette en blogg.
Google rangerer også nettsteder basert på deres hastighet ved å bruke deres PageSpeed-score. Å få en perfekt poengsum på 100 på Googles PageSpeed test er ikke lett. Men jeg er her for å hjelpe deg! Det spiller ingen rolle om du har en blogg eller en e-handelsside, vi forklarer trinn for trinn hvordan du kan øke Google PageSpeed-score til 100.
Google PageSpeed Optimization: Slik scorer du 100 i PageSpeed Insights
La oss først gå gjennom det grunnleggende om Google PageSpeed, så skal vi dykke ned i å optimalisere blogghastigheten din.
Hva er Google PageSpeed?
Sidehastighet er tiden det tar før innholdet på nettstedet ditt når en brukers nettleser.
Dette er veldig viktig fordi brukere som besøker nettstedet ditt ikke vil måtte vente på innholdet ditt. Du kjenner følelsen eller du finner svar på spørsmålet ditt på Google, klikker på en lenke og ender opp med å gi opp fordi siden ikke lastes raskt.
Google vet dette også; dette er grunnen til at hastigheten på nettstedet ditt er en viktig rangeringsfaktor. Det mest populære verktøyet for å teste nettstedets hastighet er Google PageSpeed Insights . Dette er den beste måten å finne ut nøyaktig hva Google synes om nettstedet ditt når det gjelder sidehastighet.
Bemerkelsesverdige Google PageSpeed-beregninger:
- Største innholdsrike maling (LCP): måling av sidelastingshastigheten oppfattet av brukere. Hovedsakelig når innholdet over den synlige delen er ferdig lastet.
- Første inngangsforsinkelse (FID) : måle i sekunder av forsinkelsen til en bruker kan samhandle med nettstedet.
- Kumulativ Layout Shift (CLS) : måler i sekunder til sideoppsettet har sluttet å "endre". For eksempel kan lasting av et bilde føre til layoutendringer på nettstedet ditt. Dette er viktig fordi en bruker kanskje vil klikke på noe på nettstedet ditt før det er ferdig lastet, noe som kan føre til at de klikker på noe annet.
- First Contentful Paint (FCP): Et mål på tiden noe gjengis på skjermen.
- Interaksjon til neste maling (INP): Interaction to Next Paint observerer ventetiden til brukerinteraksjoner med en side. For eksempel hvis en bruker klikker på et trekkspill og det oppstår en uventet forsinkelse når den åpnes.
- Tid til første byte (TTFB): måler tiden før nettleseren mottar et svar fra serveren.
Du vil se disse termene brukes ofte i Google Search Console (Core Web Vitals-rapport), PageSpeed Insights og Chrome User Experience Report.
Hvorfor er sidehastighet viktig?
Sidehastighet betyr noe fordi det vil påvirke direkte mengden trafikk et hvor mye penger bloggen din kan tjene .
Studier (på engelsk) har vist at hastigheten på nettstedet direkte påvirker konverteringsfrekvens. Data fra Portent viser at å ha en sideinnlastingshastighet på 1 sekund versus 5 sekunder vil føre til nesten 50 % nedgang i konverteringer. Ikke bare vil lastetiden for nettstedet ditt påvirke Google-rangeringene dine, men det vil også påvirke konverteringsfrekvensen din.
Fra posisjonen din i Googles søkeresultater til kundens tålmodighet, nettstedets sideinnlastingstid påvirker alle aspekter av brukeropplevelsen. Siden brukere hovedsakelig bruker mobile enheter, bør hver kilobyte som lastes av nettstedet ditt være tilsiktet.
Jo lenger en bruker må sitte og vente på at en side skal lastes, jo høyere fluktfrekvens vil også være. Nettstedets hastighet påvirker ikke bare Googles SERP-er, men de fleste søkemotorer tar hensyn til sidehastighet. Det er derfor det er viktig å ha et nettsted som lastes raskt inn i dagens nett.
Heldigvis er det ikke så vanskelig å bygge et raskt nettsted hvis du bruker moderne verktøy og vet hva du skal gjøre.
Slik tester du hastigheten på nettstedet ditt
Hvis du ikke er kjent med Google PageSpeed, er det en serie tester som Google kjører på nettstedet ditt for å finne ut hvor raskt nettstedet ditt lastes. Når en bruker på Google klikker på et søkeresultat, forventer de at det lastes raskt. Dette er grunnen til at Google laget testen Google PageSpeed Insights .
Åpne Google PageSpeed Insights
Dette gir nettstedeiere verktøyene til å vite nøyaktig hva som bremser nettstedet deres og hvordan de kan fikse det. I tillegg gir det Google dataene den trenger for å rangere et nettsted riktig i søkemotoralgoritmen.
Å bruke verktøyet er så enkelt som å skrive inn nettadressen og klikke analysere. Testen vil gå raskt og du vil motta mange nøkkelmålinger. Hvis du vil kjøre en lokal test, kan du også bruke lGoogles flaggskip med åpen kildekode for å produsere lignende resultater direkte i nettleseren din.
Et annet sted å se nettstedets ytelse er å bruke sidesynkroniseringsrapporten av Google Analytics.
Du trenger sannsynligvis ikke dekke alt i denne artikkelen, men jeg vil gå over de vanligste PageSpeed-problemene og hvordan du fikser dem.
PageSpeed-beste praksis: Vanlige Google PageSpeed-problemer og hvordan du fikser dem
De fleste rådene i denne delen forutsetter at du har en WordPress blog. Jeg har også inkludert mer detaljerte instruksjoner for utviklere for å feilsøke manuelt.
Den desidert beste måten jeg har funnet for å forbedre lastehastigheten til WordPress-siden din er å bruke WP-rakett . WP-Rocket er en betalt plugin, men verdt det, siden den bruker mange av de beste ytelsespraksisene rett ut av esken. For å fikse de fleste problemer med sidehastighet, vil jeg fremheve om WP-Rocket kan hjelpe og gi et gratis alternativ hvis tilgjengelig.
WordPress-temaet ditt vil også spille en viktig rolle i de vitale elementene på nettet.
Gjør serverens responstid raskere
Rask serverresponstid er avgjørende for en god Google PageSpeed-score. I utgangspunktet er serverens responstid tiden det tar for nettstedets server å generere nettsiden. Dette er en av de enkleste tingene å fikse hvis du ser denne advarselen i PageSpeed-rapporten din.
Den vanligste måten å eliminere dette problemet på er å bruke sidebufring. Dette betyr at nettstedet ditt vil betjene nettsiden fra cache, så serveren selv må gjøre lite eller ingen arbeid.
- Aktiver sidebufring: når en bruker ber om en side fra nettstedet ditt, må den gjengis og vises. Denne prosessen kan hoppes over helt med sidebufring. I utgangspunktet, når en bruker besøker en side på nettstedet ditt, vil den lagres for neste bruker i hurtigbufferen slik at den kan returneres umiddelbart. Mange WordPress-vertsselskaper har innebygd sidebufring, men hvis du ser høy serverresponstid, er den sannsynligvis ikke aktivert. Noen av de beste WordPress-sidebufringsløsningene inkluderer: WP-rakett , Total Cache W3 et Cache Enabler.
- Bruk en moderne stabel: versjonene av PHP og MySQL som brukes av webverten din spiller en viktig rolle i sidehastigheten. Webhotellselskaper bør ha deg dekket på denne siden. Hvis du er en utvikler, betyr det å holde deg oppdatert med den nyeste versjonen av PHP og databaseløsninger.
Aktiver komprimering
Nettstedet ditt kan komprimere innholdet og sidestørrelsen før det sendes til brukerens nettleser med Brotli (nyere, støttet av Chrome) eller GZIP-komprimering. Disse komprimeringsmetodene har ingen effekt på visningen av nettstedet ditt siden brukernes nettlesere automatisk håndterer komprimert innhold.
De fleste populære WordPress-vertsselskapene vil automatisk bruke komprimeringen for deg. Hvis du vil bekrefte at en komprimeringsmetode er aktivert på nettstedet ditt, kan du bruke en GZIP kompresjonstest online .
WordPress-plugins populær ytelsesprogramvare vil automatisk komprimere GZIP for deg, inkludert WP-rakett , WP Super Cache (må være aktivert i innstillinger) og Total Cache W3 (må være aktivert i innstillingene). WP-Rocket vil automatisk bruke GZIP-komprimering på nettstedet ditt hvis du bruker Apache uten noen konfigurasjon.
For utviklere: For å aktivere Brotli- eller GZIP-komprimering på serveren din, må du vite om du bruker Apache eller Nginx. I stedet for å administrere serverkonfigurasjonen, anbefaler jeg at du velger å bruke CloudFlare. CloudFlare vil bruke GZIP og Brotli-komprimering avhengig av hva brukerens nettleser støtter og hvilket innhold som serveres automatisk.
Reduser CSS, HTML og JavaScript
HTML, CSS og JavaScript påvirker alle lastehastigheten for siden din. Når du skriver koden, vil de fleste utviklere inkludere tabulatorer, mellomrom og annen ikke-essensiell kode for å gjøre den lesbar for mennesker. Alle de ubrukte tegnene legger seg sammen og kan bremse nettstedet ditt litt.
Heldigvis kan alle disse eiendelene enkelt minimeres uten å påvirke brukeropplevelsen. WP-rakett tilbyr en filoptimaliseringsside med minifikasjonsalternativer for CSS og JavaScript. Dessuten, hvis sidebufring er aktivert i WP-Rocket, vil HTML-minifisering bli brukt på sider. Et gratis alternativ er å bruke plugin Autoptimize for å forminske CSS/JS/HTML.
Husk at når du forminsker JavaScript kan det føre til funksjonalitetsproblemer, så sørg for å teste når du aktiverer.
For utviklere: mange utviklingsverktøy lar utviklere komprimere filene sine under arbeidsflyten. Node.js-pakker som f.eks Rengjør CSS kan legges til i en arbeidsflyt for å komprimere minifiserte filer mens du arbeider med dem. For mindre prosjekter er det også mange nettbaserte verktøy som komprimerer CSS , JS og til og med HTML . Hvis du bruker WordPress, må du bare velge å bruke en plugin, da de vil levere de samme resultatene med mye mindre innsats.
Reduser ubrukt CSS
Det kan være vanskelig å fjerne ubrukt CSS. CSS-regler på siden din som ikke brukes til sidestiling, anses som ubrukt CSS. De fleste rammeverk, temaer og plugins vil etterlate nettstedet ditt med ubrukt CSS.
For eksempel kan WordPress-temaet ditt inneholde styling for en kontaktside, men det brukes ikke på alle andre sider på nettstedet ditt, men eksisterer fortsatt i stilarket.
Heldigvis, hvis du bruker WordPress, er det noen få plugins som automatisk trimmer ubrukt CSS. WP-Rocket og Perfmatters vil gjøre en god jobb med å fjerne ubrukt CSS fra bloggen din. Disse pluginene vil laste inn sidene dine og sørge for at de kun har den nødvendige CSS-en for å vise siden din riktig, og etterlater deg med en mindre CSS-fil.
For utviklere: å gjøre denne prosessen manuelt, kan utviklere jobbe med fjerning av blader stilen til et WordPress-nettsted. Dette lar deg velge CSS-en du vil legge til i stilarket til temaet ditt manuelt. Det finnes også nettbaserte verktøy for finn ubrukt css på nettstedet ditt, men de er sannsynligvis ikke gode for store nettsteder.
Dra nytte av hurtigbufring av nettlesere
Når brukere besøker flere sider på nettstedet ditt, bruker de sannsynligvis de samme ressursene. Ofte deles bilder, CSS og JavaScript på hele nettstedet ditt. Det er her nettleserbufring kommer inn, du kan fortelle en brukers nettleser om å lagre eiendeler for senere bruk. Mest av WordPress plugins ytelse vil aktivere nettleserbufringsregler.
For utviklere: Avhengig av om du bruker Apache eller Ngnix, kan du legge til en serverkonfigurasjon for å fortelle brukerens nettlesere å bufre spesifikt innhold. Vanligvis brukes disse nettleserbufringsmetodene på CSS, JS og bilder.
Eliminer gjengivelsesblokkerende ressurser
Når en nettleser leser nettstedets kode, bestemmer den hva som skal lastes ned og vises. Taggens JavaScript- og CSS-filer <head> regnes som gjengivelsesblokkerende ressurser. Når nettleseren prøver å returnere siden til en bruker, bør den stoppe, laste ned filen og totalt sett forsinke visningen av siden.
Hvis nettstedet ditt hadde gjengivelsesblokkerende ressurser, vil Google PageSpeed Insights vise deg de største filene og potensielle besparelser.
Heldigvis vil de fleste WordPress-ytelsesplugins hjelpe deg med å utsette eller integrere JavaScript og CSS. De WordPress plugins vil også hjelpe deg med å flytte ikke-essensielle stilark og JS for å laste til bunnen av siden din. WP-rakett, Autoptimize (gratis) og Perfmatters alle gjør en jobb med å eliminere gjengivelsesblokkerende eiendeler.
For utviklere: utviklere kan dra nytte av flere nettleserfunksjoner for å forbedre ressursinnlastingen. Dette inkluderer bruk av utsett attributt på skript, flytting av CSS/JS til bunnteksten og inkludert kun kritisk CSS i overskriften.
Kod bilder effektivt
Bildekomprimeringsalgoritmer har utrolige resultater for å komprimere bilder uten å miste oppfattet kvalitet.
Vanligvis kan JPG- og PNG-bilder bruke ekstra komprimering når de eksporteres. Imagify, ShortPixel et Smush er alle utmerket WordPress plugins for å komprimere bilder automatisk. I utgangspunktet vil disse pluginene komprimere bildene dine når du laster dem opp, noe som vil øke hastigheten på sidelasting. Du kan også velge komprimeringsnivået som skal brukes på bilder.
Siden det koster prosessorkraft å komprimere bilder, vil mange av disse pluginene ta betalt for en stor mengde bilder. ShortPixel tilbyr også en plugg inn å komprimere bilder på skyen ved hjelp av innholdsleveringsnettverket og API. Hvis nettstedet ditt allerede bruker CloudFlare, kan du registrere deg for deres pro plan for å optimere bilder på farten.
For utviklere: det er mange bildeoptimaliseringsverktøy tilgjengelig, inkludert nettverktøy som f.eks image Compressor og skrivebordsapper slik som Pichi. Du må komprimere bilder i skala, så jeg foretrekker å bruke en CDN som automatisk komprimerer bilder. Min favoritt er CloudFlare Pro-plan ($20/måned) som automatisk vil komprimere og til og med server webp-bilder. Du kan også bytte til å bruke SVG for grafikk som nettstedets logo. En god regel å merke seg er også å bruke JPEG-filer for faktiske bilder og SVG/PNG-filer for grafikk. Bruk av en PNG-fil for et bilde vil resultere i en unødvendig stor fil.
Bilder i riktig størrelse
Et eksempel på bilder med feil størrelse er et stort 2000px x 2000px bilde i en 800px bred div. Siden bare 800 piksler er synlige, må nettleseren ha lastet inn det større bildet uten grunn. Dette fører til lavere sideinnlastingshastighet og dårligere opplevelse for brukerne. Mest av WordPress-temaer godt utformede vil ikke ha dette problemet.
For utviklere: Hvis du utvikler et WordPress-tema, kan du angi standard WordPress-bildestørrelser for å passe til temaets bredde. Du må gjenskape WordPress-miniatyrbilder etter å ha endret bildestørrelser. Husk at hvis du vil streame bilder for en Retina-skjerm, bør du brukesrcset-attributt. WordPress har også innebygde funksjoner for å vise bilder på en skjerm med høy pikseltetthet.
Utsett bilder utenfor skjermen
Når en nettside er lastet, hvis den inneholder bilder, vil alle bli lastet. Det er sløsing med ressurser og nettverksbruk siden bildene er synlige. Heldigvis er det enklere enn noen gang å legge ut bilder utenfor skjermen nå som alle store nettlesere støtter dette lat lasting .
Som standard vil WordPress bruke attributtet loading="lazy" til bilder for å automatisk utsette innlasting av bilder utenfor skjermen, slik at du sannsynligvis ikke vil se denne feilen. WP-Rocket vil også bruke lat lasting på bilder, iFrames og YouTube-innbygginger. Du kan også bruke gratis a3 lazy load plugin å bruke lat lasting på elementer utenfor skjermen. Hvis nettstedet ditt har mange bildefiler og gif-filer, er dette et viktig aspekt for å forbedre sidebelastningen.
For utviklere: den enkleste måten å legge til lazy loading til et bilde er å inkludere attributtet loading="lazy" i beacon <img>. Det er også mange JavaScript-biblioteker å laste lat innhold.
All tekst forblir synlig under nettfontinnlasting
Da nettfonter ble introdusert, var det vanlig å skjule tekst før skriften ble lastet inn. Dette er et stort nei-nei siden brukere vil begynne å lese nettstedet ditt umiddelbart. WP-Rocket vil automatisk optimere visningen av nettfonter når CSS-optimalisering er aktivert. de WordPress Plugin gratis Bytt Google Fonts Display vil også legge til riktig innstilling til Google Fonts for WordPress-nettstedet ditt.
For utviklere: du bruker sannsynligvis Google Fonts, som er ganske enkelt å løse dette problemet. Alt du trenger å gjøre er å legge til søkestrengen "&display=swap" til Google Font URL; flere detaljer fra Google .
Unngå omdirigeringer av flere sider
Hvis nettstedet ditt har mange omdirigeringer, vil disse sakte øke hastigheten for sideinnlasting. For eksempel hvis hjemmesiden din omdirigerer til /home.html, vil dette føre til en forsinkelse i svaret fra brukerne dine. Du kan se denne feilen hvis du har CSS- eller JS-filer som også fører til en omdirigering.
Et annet eksempel er hvis en URL i overskriftsnavigasjonsmenyen går til en URL som omdirigerer. Sjansen er stor for at nettstedet ditt ikke blir flagget for dette hvis du bruker WordPress.
Vanlige spørsmål om Google PageSpeed optimalisering og statistikk
Her er de vanligste spørsmålene om Google PageSpeed. Hvis noe mangler, spør i kommentarene på slutten av denne artikkelen.
Hva er Google PageSpeed test?
Google PageSpeed forhåndsvisningstesten brukes til å bestemme ytelsen til et nettsted. Resultatene av en test gir deg en PageSpeed-score av 100.
Hva er en Google PageSpeed-score?
En Google PageSpeed-score er en test drevet av Google designet for å analysere ytelsen til et nettsted. 100 er en perfekt poengsum mens 90 anses som bra. Mens en poengsum mellom 50 og 90 trenger forbedring og en poengsum under 50 er dårlig.
Påvirker sidehastighet SEO?
Ja. Google PageSpeed Insights-poengsum spiller en viktig faktor i SEO. Google bruker sidehastighet som en nøkkelfaktor for å rangere et nettsted.
Hvordan kan jeg forbedre Google PageSpeed-poengsummen min?
Håper denne artikkelen bidro til å forbedre Google PageSpeed-poengsummen din. Det grunnleggende inkluderer fjerning av gjengivelsesblokkerende ressurser, fjerning av ubrukt CSS, optimalisering av bilder og redusert tid til første byte.
Siste tanker om Google PageSpeed Optimization for bloggen din
Jeg håper disse tipsene for å finne Google PageSpeed-optimalisering vil bidra til å forbedre bloggens ytelse og føre til økt organisk trafikk over tid. Etter hvert som nettet utvikler seg og verktøyene blir enklere å bruke, vil det bli enklere og enklere å få fart på WordPress-nettsteder.
Det er mange ting du kan gjøre for å forbedre en Google PageSpeed-score, men jeg anbefaler å ta en bestått test.
Å ha en bestått test (score over 90) vil spille en viktig rolle i å rangere innholdet ditt på de øverste plassene for Googles organiske søkeresultater. Husk imidlertid at å få en perfekt poengsum på 100 kan bli en uendelig oppgave ettersom nettstandardene endres, så prøv å holde deg innenfor 90+ rekkevidden, så går det bra.
