super
super

Del med verden

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email

WordPress optimalisering

Dette er et utdrag

Det er i hovedsak to grunner til at du bør optimalisere nettsidene dine:

  1. Brukeropplevelse. Du vil selvfølgelig at dine besøkende skal ha en best mulig opplevelse når de besøker sidene dine. Ulike studier viser at brukere er utålmodige og vil forlate siden de hvis det tar for lang tid å laste de inn. Et studie viser at sider som bruker mindre enn 5 sekunder å laste gjør det betydelig bedre med flere besøk og lengre besøk.

  2. Google. Viste du at Google rangerer raske sider høyere enn trege sider? Så vil du gjøre et hopp på søkesidene hos Google så er optimalisering et av verktøyene du kan bruke for å oppnå det. 
Det er flere ulike tiltak som kan gjøres for å gjøre nettsidene raskere. Du kan oppgradere servere og infrastruktur, men du kan også gjøre mye i kontrollpanelet i WordPress. Det er disse optimaliseringene jeg skal konsentrere meg om her, mer spesifikt, hvordan en utvidelse(plugin) kalt Hummingbird kan hjelpe deg til å få raske nettsider.
 

Baseline

Det viktigste med optimalisering er å samle inn data og måle hvor rask nettsidene dine er. Dette for å finne ut hvor skoen trykker og for å kunne måle eventuelle forbedringer. Har du en sjef kan det være godt å ha noen tall og slå i bordet med!

Pingdom har et bra gratisverktøy for å måle hurtigheten. Den gir deg en karakter basert på data som hentes ved å besøke siden din og gir deg full oversikt over hvilke filer som forårsaker problemer.

Men verktøyet har en svakhet. Den gir ikke data på hvordan nettsiden din oppleves på mobiltelefoner. Og det er nettopp mobiltelefoner som er viktigst å optimalisere for, fordi stadig høyere andel av dine besøk vil komme fra mobil og det er ofte på mobil at brukerne har en tregere nettforbindelse og en dårligere opplevelse.

Derfor bruker jeg å supplere data fra Pingdom med data fra Lighthouse

Tallet til venstre viser hvordan min nettside https://doya.no skåret i Lighthouse før jeg begynte optimaliseringen. Det ser ikke bra ut, men heldigvis viste Pingdom et mer optimistisk bilde: Min side lastet på under 1 sekund, og siden var raskere enn 89% av de andre testede sidene. Langt fra så mørkt som Lighthouse vil ha det til, men helt klart rom for forbedringer!

 

0
Lighthouse Skåre
  • 0,97 sek
  • 928 kB
  • 73 filer

Velge mal (theme)

Det mange ikke tenker over når de bruker WordPress er at valg av mal/tema kan påvirke ytelsene til sidene i vesentlig grad. Og har man valgt mal er det ofte en omfattende jobb og bytte. Jeg bruker Elementor page builder på alle mine sider. Det er perfekt for å lage flotte og brukervennlige nettsider på et blunk. Har du i tillegg kjøpt lisens på Elementor Pro kan du sette opp header, footer og alle andre maler i Elementor og avanserte themes med flust av funksjoner som du aldri bruker blir fullstendig overflødig!

Siden jeg allerede brukte Elementor til alt kunne jeg bruke en simpel theme uten at det fikk noe som helst konsekvenser for sidene mine, bortsett fra en betraktelig bedre ytelse.  Skåre i Lighthouse gikk fra 42 til 55, og antall filer som ble brukt gikk ned fra 73 til 63. 

42
Lighthouse skåre
  • 0,91 sek
  • 816 kB
  • 63 filer

Optimalisere ressurser

En nettside bruker i hovedsak tre ulike filetyper: .css (stilsett), .js (funksjonalitet) og bilder. Disse er ofte delt opp i små filer og hver eneste widget eller funksjon kommer med et eget sett med filer. Disse hoper seg opp og blir til et stort antall filer til slutt. Det er her Hummingbird kommer inn i bildet.  Dette tillegget kan samle alle filene i større filer slik at sidene dine slipper å laste ned mange små filer. Hummingbird er også ganske smart. Den lager ikke for store filer heller fordi det vil gjøre at sidene oppleves som treige. En annen nyttig funksjon i Hummingbird er at du kan velge hvilke filer som skal lastes helt til slutt. For eksempel har du kanskje en mobilmeny i headeren, da kan du velge at det er viktigere at innholdet vises fort enn at menyen skal virke.

Alt dette kan konfigureres under Hummingbird > Assets Optimization. 

For min nettside betydde det 44% mindre antall filer. Selv om størrelsen ikke ble betraktelig mindre og lastetiden nesten uendret så betyr reduksjonen i filer mye hvis en bruker har en dårlig nettverkforbindelse. Og det er nettopp det hoppet i skåre til 78 gjenspeiler. Mobilopplevelsen ble med dette mye bedre.

55
Lighthouse Skåre
  • 0,85 sek
  • 793 kB
  • 41 filer

Mellomlagre sidene

Hummingbird tilbyr en annen optimalisering som ved et enkel tastetrykk kan bety mye for din nettside. Aktiverer du Hummingbird > Caching vil Hummingbird lage en statisk versjon av sidene dine som vises til dine besøkende. Har du veldig mange tillegg i WordPress og mye dynamisk innhold vil dette kunne ha positiv innvirkning på hastigheten til ditt nettsted.

For min del betydde det ikke mye. 0,2 sekund raskere lastetid.  En mer komplisert side ville ha sett en langt større endring.

Et tips: Slå på tilvalget «Clear full cache when post/page is updated»  under Hummingbird > Caching. Hvis ikke kan det være at Hummingbird viser eldre versjoner av sidene dine fordi den ikke har oppdaget at sidene er blitt endret. Med dette tilvalget vil alle mellomlagrede sider bli slettet ved hver endring du gjør og fremprovoserer oppdatering av alle sider.

 

78
Lighthouse Skåre
  • 0,65 sek
  • 793 kB
  • 41 filer

På litt over en halvtime hadde jeg økt skåre i Lighthouse med 37 (47%) og lastetiden hadde gått ned med 0,32 sekund (33%). Selv på min nettsiden, hvor potensiellet for forbedringer ikke var stort så var det likevel mulig å bedre brukeropplevelsen betraktelig. På mobil gikk tiden for første brukbare visning av siden ned fra 4,9 sekund til 2,6 sekund. Nesten en halvering.

Bare tenk på hvor mye din side kan forbedres ved å installere en plugin og slå på noen innstillinger 🙂

Baseline
Optimalisert