Har tidligere vært inne på hvor viktig det er å optimalisere ytelse for nettsiden, og det sies at tre sekunder er alt som skal til for at eventuelle lesere forsvinner uten å engang begynne å lese siden.

Da jeg begynner å få endel innhold på siden min begynner dette nå å merkes med hensyn på ytelsen, og basert på at jeg fikk følgende advarsel i Google Search Console har jeg sett litt nærmere på dette. Så denne artikkelen vil dermed handle om hvordan optimalisere ytelse for nettsiden, iallefall slik jag har gjort det hittil.

Vet forsåvidt at det abonnementet jeg har på webhotellet mitt ikke er top noch, men prøver likevel å se om noe kan gjøres uavhengig av dette. Må bare si med en gang at dette er ikke lett, og jeg har hatt, og har fortsatt store utfordringer med å få dette til å fungere når jeg setter opp parameteren i det programtillegget jeg benytter for formålet (W3 Total Cache).

Dette gjorde at jeg til slutt la inn noe kode i functions.php, og i det følgende vil jeg beskrive hvordan jeg jobber for å få til dette via W3 Total Cache. Dette har jeg beskrevet i artikkelen som handler om å optimaliserer nøkkelkriterier på nettstedet mitt her, men etter den tid har jeg jobbet videre med dette.

Installere programtillegget

Dersom du ikke allerede har gjort det, er det første du må gjøre å installere et programtillegg for ytelse på nettstedet ditt, selv valgte jeg som sagt W3 Total Cache og dette installerer du enkelt på vanlig måte via utvidelser og «Legg til utvidelse». Men når det er gjort begynner den utfordrende jobben, nemlig å sette opp dette riktig.

Hvordan måle ytelse på et nettsted?

For å måle ytelse på nettstedet mitt, benytter jeg et verktøy som hetet GTMetrix, dette kan du bruke enten fra deres hjemmeside, eller du kan laste ned dette som et eget programtillegg på vanlig måte. Dersom dere legger inn nettadressen til nettstedet mitt som URL, har jeg som dere ser oppnådd en ok PageSpeed score, mens YSlow fortsatt kan jobbes med. Det disse to rapporterer som forbedringsområder er blant annet:

• Defer parsing of JavaScript
  • Med dette menes å utsette kjøring av Java scripts til de er helt nødvendig for innholdet. Les mer om dette her.
• Add Expires headers
  • Med dette menes at du bør etablere regler for når nettstedet skal benytte en arkivert kopi av siden (cache) fremfor å laste siden fra serveren på nytt. Les mer om dette her.
• Use a Content Delivery Network (CDN)
  • Dette gjelder nok i hovedsak nettsteder med mye multimediagrafisk innhold som bilder, videoer, live-streams og lignende. Content Delivery Networks (CDN) er i prinsippet et system for effektiv overføring av innhold og tjenester. Det består av et stort antall geografisk distribuerte servere og annet utstyr som kommuniserer over et omfattende transportsystem. Enkelte CDN-tilbydere baserer seg på egne linjer eller leid sambands-kapasitet, mens andre helt eller delvis benytter Internett som transportvei.

I tillegg til parametersetting i programtillegget, så har jeg komprimert bildene på nettstedet mest mulig, og valgt å presentere videoen jeg har lagt inn via Youtube istedet for å lagre den på nettstedet.

W3 Total Cache

Selv om enkelte er veldig negative til om W3 Total Cache i det hele tatt har noen hensikt i Norge. Ankepunktet er at vi ikke har noen CDN leverandører her i landet, og dette er vist nok den viktigste faktoren i dette programtillegget.

Jeg valgte likevel å prøve, så det første jeg gjorde var derfor å installere programtillegget W3 Total Cache, og basert på de «enkleste» forslagene økte jeg ytelsen noe. For å øke den enda mer må jeg likevel dypere ned i materien, og dette krever endel jobb. Både med hensyn på parametersetting, kode endringer og ikke minst optimalisering av bilder.

Det neste jeg så på var hvordan jeg kunne utsette kjøring av JavaScripts på siden til etter at det lesbare innholdet hadde kommet opp. I W3 Total Cache skal dette kunne løses i Minify oppsettet, og jeg prøvde å sette opp denne både automatisk og manuelt, men det ga meg ikke de så mye høyere score uansett hva jeg gjorde. Jeg fikk faktisk en lang liste med minify scripts opp som feil i GTmetrix. Dermed var det bare å få hjelp av google, og dette ledet meg til en artikkel skrevet av Keyur Amin som foreslo å endre functions.php, noe jeg gjorde og som er beskrevet her.

Selv om det står detaljert beskrevet hvordan man setter opp W3 Total Cache i Customizr i artikklen jeg har linket til derfra, vil jeg nevne noen utfordringer jeg kom borti.

• Når man endrer verdier i Minify må man være veldig oppmerksom på endringer i hvordan siden blir presentert. Eksempelvis må nevnes;
  • Dersom man setter Minify Mode til Auto virker denne rimelig aggressiv, eksempelvisl endret antall kolonner seg fra fire til tre i webshopen min.
  • Valg av Embed Location er også meget viktig, eksempelvis Tradedoubler linken på toppen av siden min forsvant helt når jeg satte opp denne i JS file management.
  • I etterkant har jeg også fått noen feilmeldinger på siden min som sier at CSS filer ikke blir funnet, og det er ikke så, rart siden de faktisk er slettet. Denne forumtråden sier forsåvidt at dette er greit, men det er irriterende. (Recently an error occurred while creating the CSS / JS minify cache: File «/customers/b/5/2/hfnet.no/httpd.www/wp-content/cache/minify/000000/927b3/default.include.66c170.js» doesn’t exist.)

Kommer til å fortsette å fintune på dette fremover, så får vi se hvordan resultatet blir til slutt, men som dere ser over så har jeg Pagespeed score på 92 og YSlow score på 75 som iallefall er betraktelig bedre enn når jeg startet. Det andre positive er at advarselen jeg viste til fra Google Search Console iallefall har forsvunnet. Uansett kommer jeg garantert til å komme tilbake med mer om dette temaet etterhvert.

Ønsker du å forske mer på dette selv, finnes det veldig mye god litteratur der ute som kan være interessant å lese. For å gjøre det enklere for deg har jeg allerede forsket litt rundt dette, og en forfatter som har skrevet mye bra om dette emne er Steve Souders. Om du ønsker mer informasjon om mannen  besøk gjerne hjemmesiden hans her.

Flere av bøkene hans kan også kjøpes som e-bok fra ark.no, og for å gjøre det enkelt for deg har jeg laget søket ferdig for deg her. (dette er via Tradedoubler affiliate linken min selvsagt)