Hastighedsoptimering af dit WordPress website

Du har under 3 sekunder, til at servere dit indhold på din hjemmeside for dine besøgende, før de af utålmodighed smutter videre ud i cyberspace. Sådan er den “dystre” prognose i op til 45% af tilfældene.

Jo hurtigere internet teleudbyderne kan levere, og jo hurtigere devices producenterne laver, jo mere stiger vores utålmodighed også, så hvis ikke du har lavet hastighedsoptimering af dit website, så risikerer du at gå glip af en stor portion potentielle kunder.

Der er gudskelov råd for det, og har du selv nogenlunde styr på WordPress, så kan du komme et godt stykke uden ekstern hjælp.

Hvis ikke du er teknisk funderet indenfor webdesign, så må du ud og hente hjælp hos WordPress-kyndige folk, og selvom det naturligvis vil koste lidt på bundlinjen, så er det godt givet ud. Google fokuserer nemlig en del på hastighedsoptimering af dit website – og det bliver kun et større fokusområde med tiden.

Den ultimative guide til hastighedsoptimering af dit WordPress website

I denne guide får du en gennemgribende indsigt i muligheden for at arbejde med hastighedsoptimering på dit WordPress website, og jeg har forsøgt at holde det så enkelt som muligt (det er nok mildt sagt). I guiden kan du blive klogere på følgende:

1. Test din hastighed – og analysér resultatet
   1.1. GTmetrix
   1.2. Waterfall funktion
2. Værdien af god hosting (webhotel)
3. Skær ned på effekterne på dit website
4. Hold WordPress plugins på et minimum
5. Caching plugin til WordPress
   5.1. WP Rocket
6. Komprimering af billeder
   6.1. Valg af billeder
   6.2 Brug SVG hvor muligt
7. Skrifttyper på din hjemmeside
8. Cloudflare CDN
9. Hold WordPress og plugins opdaterede
10. Øvrige forbedringer

1. Test din hastighed – og analysér resultatet

I mit arbejde med WordPress webdesign bruger jeg 3 værktøjer til at måle hastigheden – GTmetrix, Pingdom Tools og PageSpeed Insights.

Hvis du har lidt forstand på det, så vil du også vide at PageSpeed Insights er et kontroversielt valg. Det er Googles eget måleværktøj, og det har i mange år været stemplet som noget man ikke bruger, og nogle siger endda at Google ikke engang selv bruger det. Jeg bruger det dog stadig – men kun for at holde op mod dataene fra de andre værktøjer.

GTmetrix er mit klart foretrukne, og vil du kun vælge ét, så er vores holdning at GTmetrix er bedst, for det giver dig mest data, og det er det jeg fokuserer på her.

1.1. GTmetrix

Du finder GTmetrix lige her. Det mest fornuftige er at starte med at oprette en bruger. Det er gratis, og det giver dig blandt andet den fordel, at du kan vælge GTmetrix’s test server lokationer. Som standard vil GTmetrix nemlig altid stå til Vancouver i Canada, og det er trods alt langt fra de danske breddegrader, og hastighedsresultatet vil derfor også være noget langsommere. Når du har oprettet dig som bruger, kan du logge ind og vælge en test server nærmere på vores lille andedam (vælg f.eks. London).

1.2. Waterfall funktion

Mange hastighedsmålingsværktøjer har en waterfall funktion – og det er også gældende for GTmetrix. Det er lige præcis den funktion, der giver dig mest information om hvad der sløver dit website.

På nedenstående ser du et skærmbillede (klik for større) med en test af mit eget website. Når testen er gennemført, lander man i første omgang på fanen “Summary”. Her får man primært indsigt i hvor hurtigt (eller langsomt) ens website loader. Men – det vigtigste er som sagt waterfall funktionen, og derfor er vi på nedenstående billede, gået videre til “Waterfall” fanen.

Det er lige her man i et “vandfald” kan se, hvilke plugins, skrifttyper, billeder og øvrige elementer, som er skyld i dårlig performance, og det er ud fra det at man kan handle. Hvis du læser videre i dette blogindlæg, så får du indsigt og hjælp til at gøre noget ved de ting, som oftest sløver dit website.

I mange tilfælde vil man få nogle aha-oplevelser, for der kan være plugins som sløver mere end man havde regnet med, billeder som sløver fordi man har glemt at komprimere dem og meget mere. Det er et super godt værktøj, når man skal arbejde med hastighedsoptimering.

2. Værdien af god hosting (webhotel)

Når man Googler efter den smarteste og nemmeste måde at oprette en hjemmeside på, så støder man uden tvivl på reklamer for billig hosting. Men billig er sjældent lig med god, og der kan være stor forskel i kvaliteten.

De billige udbydere af webhoteller, stuver så mange hjemmesider sammen på servere som muligt, og det har betydning for hastigheden. Det svarer til at holde i kø på Holbækmotorvejen i myldretiden. Man flytter sig ikke særlig hurtigt.

Hos Vektropol samarbejder jeg med en kvalitetsudbyder af hosting, og det betyder langt bedre servere, mere plads, langt bedre hastighed, bedre service og også højere sikkerhed. Og det behøver ikke være dyrt. Du kan få høj kvalitet, for så lidt som en hundredelap pr. måned.

3. Skær ned på effekter og smarte funktioner

De fleste WordPress temaer, er i dag spækket med smarte effekter og funktioner, men det er vigtigt at bruge dem med omtanke.

Hver gang du laver smarte teksteffekter, får dine knapper til ændre udseende når besøgende holder musen henover, bruger graduerede baggrund, animationer m.v., så genererer det mere kode, og det er alt sammen med til at forringe hastigheden.

Selvfølgelig vil man have et pænt og præsentabelt website, men hvis man gerne vil have flere besøgende – og ikke mindst holde på dem, er det vigtigt at finde en fornuftig balance. Dine potentielle kunder køber ikke af dig, fordi de bliver imponerede over de smarte effekter.

Godt design sælger bedre – naturligvis – i samarbejde med godt indhold og konverteringsoptimering, men det er ikke effekterne der gør arbejdet, og ift. hastighedsoptimering er der en del at hente på, at skære ned for effekterne ;).

4. Hold WordPress plugins på et minimum

Der findes over 50.000 WordPress plugins – hvilket også er med til at gøre WordPress, til det mest populære CMS til at lave en hjemmeside i. Men hvert plugin du installerer forringer hastigheden, og derfor skal der vælges med omhu, for man kan naturligvis ikke helt undvære plugins.

Har du virkelig brug for det plugin som gør dine sociale medie knapper synlige hele tiden? Eller hvad med det plugin der konstant popper op og lover dine besøgende gode rabatter? Om ikke andet kan man måske undvære sådanne plugins på mobilvisninger, for selvom de er med til at få flere følgere, så bliver folk ofte irriterede over at skulle lukke 2-3 pop-ups for at læse din hjemmeside.

Som sagt kan man ikke helt undvære plugins, og jeg har lavet et blogindlæg, hvor jeg gennemgår nogle af de bedste WordPress plugins.

5. Browser caching plugin til WordPress

Hvis der særligt er et plugin der er vigtigt når det handler om hastighedsoptimering, så er det uden tvivl et caching plugin. Det vil du ikke undvære, og det er en af de elementer, der kan sætte mest fut i din hastighed.

Et caching plugin genererer statiske HTML filer af din hjemmeside, og gemmer det på serveren. Når en besøgende så kommer forbi, så får personen serveret disse filer, fremfor hele den tunge backend som din hjemmeside består af.

Et caching plugin kan også pakke/kombinere nogle af filerne – lidt som en komprimeret ZIP-mappe. Det kan optimere en del af CSS-filerne – og nogle af de eksisterende caching plugins, kan endda tilbyde LazyLoad for billeder. Sidsnævnte betyder, at billeder kun bliver loadet når de skal bruges (altså når en bruger scroller nedad siden), i stedet for at alt bliver loadet på én gang.

5.1. WP Rocket

WP Rocket er uden tvivl det bedste caching plugin til WordPress på markedet. Det er ikke gratis, men når man først har bandet færdigt over prisen, så vil man fremover glæde sig over, at det leverer varen til fulde.

Plugin’et indeholder overvældende mange funktioner, og det kan til tider være svært at gennemskue hvilke funktioner man skal aktivere, og hvilke man skal holde fingrene fra, for aktiverer man de forkerte, kan det ende med problemer på websitet.

Hvis man ikke har den store forstand på det, så har WP Rocket 1. klasses service, og de gennemgår gerne ens setup, og kommer med deres anbefalinger til hastighedsoptimering. De sætter endda gerne det hele op for én, hvis man beder pænt om det.

Du kan finde mere info om WP Rocket lige her.

6. Komprimering af billeder

Hold på hat og briller, for i dette afsnit om komprimering af billeder – og ikke mindst valg af billeder, er der virkelig noget at hente ift. hastighedsoptimering. Billeder er i langt de fleste årsager, den største synder ift. sløve websites.

Inden jeg viser dig hvordan jeg får banket størrelsen på billeder ned, så det er passende til brug på en hjemmeside, så starter jeg lige med et eksempel. Her er der et baggrundsbillede med lyspærer, og det bruger jeg som udgangspunkt.

Billedet til venstre: Dette er det originale billede der har en opløsning på 5000 x 3333 pixels. Det fylder 2,3 MB
Billedet til højre: Efter redigering og komprimering, har billedet nu en opløsning på 2500 x 1667 pixels, og nu fylder det kun 47 KB

Fra 2,3 MB til kun 47 KB. Det betyder voldsomt meget for hastigheden, når din potentielle kunde sidder med sin smartphone, og er blevet lokket til at klikke på det link, der fører til din hjemmeside. Men hvordan gør man så…?

Når jeg komprimerer fotos i forbindelse med webdesign og hastighedsoptimering, så starter processen i Photoshop, men har du ikke det program, så findes der også gratis programmer, som kan næsten det samme. I denne guide tager jeg dog udgangspunkt i Adobe Photoshop.

Sådan gør du…

1. Start med at åbne billedet i Photoshop, og inden vi ændrer selve opløsningen, så går du i Filter og vælger Camera Raw Filter. Detaljer i et billede, er det der får det til at “fylde”, og derfor skal vi justere lidt på det.
   

   ---

2. I “Camera Raw Filter” er der især to ting vi skal skrue lidt på. Det er “Texture” under fanen Basic, og “Noise Reduction” under fanen Detail.
   

   ---

3. Vi starter med “Texture”. Som navnet siger, ændrer det teksturen i et billede. Alt efter hvordan man flytter “skyderen”, så kan man intensivere detaljerne eller reducere dem. Start med at sætte den til -20, kig på billedet og vurdér om det er for meget. Hvis det ser fornuftigt ud, går du videre til “Noise Reduction” under fanen Detail.
   

   ---

4. Sæt “Noise Reduction” til 20, og hvis det ser fornuftigt ud, så klikker du på “OK”-knappen i nederste højre hjørne.
   

   ---

5. Nu er vi tilbage i selve Photoshop, og her går du til Filer og under Export vælger du “Save for web (Legacy)”.
   

   ---

6. Du skal gemme som JPEG High, og kontrollér at Quality står til 72, – og at der er flueben i Optimized.
   

   ---

7. Hvis du gemmer et baggrundsbillede som skal fylde hele din baggrund i bredden, så sæt din bredde (W:) til 2500 px under Image Size.
   

   ---

8. Klik på Save… nederst i højre hjørne.
   

   ---

9. Nu har jeg et billede der fylder 217 KB, men der er meget mere at hente, for vi skal konvertere billedet fra JPG til webp-format (bemærk at dette format kun virker til web).
   

   ---

10. Gå ind på hjemmesiden Convertio, upload billedet og vælg formatet webp – og klik på “Convert”. Efter download har jeg nu et billede der fylder 119 KB.
    

    ---

11. Det sidste step; gå ind på hjemmesiden TinyJPG, upload billedet og bum… nu ender vi i dette tilfælde med et billede der kun fylder 47 KB! Download det og overskriv det forrige gemte billede, og nu er du klar til at bruge det på din hjemmeside.

6.1. Valg af billeder til hjemmeside

Jeg bruger forskellige billedbanker, når jeg skal finde billeder til hjemmeside design. Du kan finde en god oversigt til gratis billeder på nettet her.

Der er stor forskel på hvilke billeder, der egner sig godt til hjemmesider. I bund og grund kan man jo bruge alle slags billeder, men hvis man går efter en let og hurtig hjemmeside, så skal man tænke over hvilke billeder man bruger.

Er du klar til et guldkorn? Det kommer her…; jo flere detaljer der er i et billede, jo mere fylder billedet – også når det bliver komprimeret. Hvis du vælger et billede af en skov med fyrretræer, så vil det indeholde MANGE detaljer. De små grannåle, detaljerne i barken på træerne, jordbunden som måske består af græs og blade, himlen m.v.

Hvis du går benhårdt efter et hurtigt website, så vælg i stedet billeder med sløret eller enkle baggrunde.

6.2. Brug SVG filer hvor muligt

En SVG fil er en vektorbaseret grafisk fil, som kan skaleres uden kvalitetstab. SVG kan bruges til grafiske elementer på et website såsom logo, ikoner og så videre i den dur, men det går dog ikke at bruge det til fotos. SVG har den fordel, at det næsten ikke fylder noget.

Måske har du set min side om logo design her på hjemmesiden, og de fleste af de logoer vi udstiller der, er SVG filer. De fylder som regel mellem 3 og 5 KB, og derfor opnår jeg en ret let side, hvor det modsatte kunne have været tilfældet, hvis jeg brugte JPG eller PNG.

En anden fordel ved SVG er – at da det er vektorbaseret, så står det skarpere end eksempelvis en PNG fil, og hvis der er særligt én ting man gerne vil have står skarpt på sin hjemmeside, så er det uden tvivl ens logo.

For at kunne gøre brug af SVG’ernes mange glæder, så kræver det at du har din grafik – som du gerne vil have på hjemmesiden, i vektorgrafik. Du kan altså ikke konvertere en PNG fil til en SVG fil. Så med andre ord, er du nødt til at have et program såsom Adobe Illustrator, for at kunne lave SVG filer.

En tredje fordel ved SVG filer er, at de kan animeres, og det ser man oftere og oftere på hjemmesider. Det er dog en helt anden snak, og ikke noget jeg kommer til at runde i dette indlæg.

OBS: For at kunne bruge SVG-filer på din WordPress hjemmeside, skal du installere et SVG-plugin. Det kunne eksempelvis være Safe SVG.

7. Skrifttyper på din hjemmeside

I stigende grad, bruger folk Google Fonts eller Adobe Fonts i forbindelse med skrifttyper på hjemmesiden. Det foregår ved, at der i bund og grund oprettes et link mellem din hjemmeside og Google eller Adobe. Hver gang en besøgende så kommer ind på din hjemmeside, så henter din hjemmeside information om skrifttypen hos Google eller Adobe.

Du kan måske allerede nu godt regne ud, at det vil sløve dit website, for hvis der først skal hentes informationer fra en tredjepart, så er det lidt som at stå i kø hos bageren lørdag morgen. Bevares… så lang tid tager det naturligvis ikke, men det tager adskillige millisekunder, og mange bække små…

Du kan i stedet vælge at downloade og installere skrifttyperne direkte på dit website, og så er du ikke afhængig af, hvor hurtigt Google eller Adobe reagerer. Alle skrifttyper på Google Fonts kan i dag downloades, og det kan bestemt være en fordel at have skrifttyperne lokalt på dit website ift. hastighedsoptimering.

Inden du bare springer ud i det, og downloader og installerer på livet løs, så hæng lige på, for det er ikke bare lige ud af landevejen. De skrifttyper man typisk downloader, er i OTF eller TTF format, og det er browsere ikke så glade for. Det skal helst være i WOFF2 format – og sekundært WOFF. Men WOFF2 er det man skal sigte efter.

Desuden indeholder de fleste skrifttyper alt for meget data, for de er som regel optimeret til alle sprog, og dermed er de fyldt med alt muligt, som man med stor sikkerhed ikke får brug for. At ændre skrifttypeformatet og reducere mængden af indhold, er gudskelov til at ændre på, og det er ikke så svært.

Sådan gør du…

1. En skrifttype kan bestå af flere forskellige tykkelser (light, regular, bold m.v.). Udvælg dem du vil bruge på din hjemmeside, og kassér resten.
   

   ---

2. Gå til hjemmesiden Glyphr Studio, og vælg “Load”.
   

   ---

3. Du er nødt til at tage én (tykkelse) ad gangen, så udvælg den du vil starte med.
   

   ---

4. Nu ser du nedenstående billede. Alle de tegn som en skrifttype består af, kaldes for glyphs (glyffer). Glyphr Studio fortæller her, at skrifttypen består af 763 glyffer, og så mange kommer man næppe til at bruge.
   

   ---

5. Sæt flueben i “Only import latin glyphs”, og tryk på “Import font”.
   

   ---

6. I næste vindue ser man det importerede, og øverst i venstre hjørne, kan man gennemgå al data. Man kan – hvis man ikke har andet at bruge tiden på, slette løs i alt det man ikke mener man skal bruge, men vi plejer at stoppe her, og sige tak for kaffe.
   

   ---

7. Gå til pilen ved siden af diskette-ikonet i venstre side, og vælg “OTF font”.
   

   ---

8. Start forfra med de andre skrifttyper du vil bruge på din hjemmeside, indtil du har det, du tænker at du vil bruge.

Nu troede du nok at vi var færdige, men næ nej… skrifttyperne vi har komprimeret, er jo i OTF format, og det kan ikke bruges på hjemmesiden. Vi skal lige have lavet dem om til WOFF2 format.

1. Klik her og gå til CloudConvert.
   

   ---

2. Tryk på “Select file”.
   

   ---

3. Lad CloudConvert klare arbejdet – og download filerne.
   

   ---

4. Nu skal de bare installeres på din hjemmeside. Start med at gå til “Medier” i WordPress, og upload dem. Hvordan du direkte skal installere skrifttyperne, kan været ret forskelligt fra det ene WordPress tema til det andet, så det vil jeg ikke gennemgå her, men søg på Google og så vil du finde svar.
   

   ---

5. Dette sidste punkt er vigtigt… hvis du har WP Rocket, så kan du få plugin’et til at preloade dine installerede skrifttyper, og det gør en stor forskel ift. hastighedsoptimering.

8. Cloudflare CDN

CDN står for Content Delivery Network, og fungerer på den måde, at en stor gruppe højkvalitets-servere er placeret rundt om i verden, og disse servere samarbejder så om at levere indholdet af din hjemmeside hurtigt og sikkert.

Det er der en vis fordel i – især hvis du har besøgende fra udlandet. Det betyder at en besøgende på din hjemmeside der befinder sig i USA, kan se din hjemmeside næææsten lige så hurtigt, som en besøgende fra Danmark. Der kan desuden også være en øget sikkerhed, ved at bruge CDN.

Cloudflare leverer en af de mest kendte løsninger, og det er også den løsning jeg bruger her hos Vektropol. Der findes naturligvis også andre løsninger, men jeg har valgt at bruge Cloudflare, da det også virker godt i samarbejde med WP Rocket – og så er det gratis langt henad vejen.

9. Hold WordPress og plugins opdateret

At holde selve WordPress, sit WordPress tema og plugins opdateret er for nogen logik for burhøns, men ifølge statistikker er det dog mere almindeligt, at hjemmesideejere alt for sjældent, får opdateret diverse.

Udviklere forbedrer hele tiden software, og i dag er langt de fleste udviklere obs på hastighedsoptimering, og de prøver konstant at tune motoren, så der er ofte lidt at hente, hver gang man opdaterer.

Desuden kan “forglemmelser” med opdateringer i sig selv være en stor sikkerhedsbrist, for hackere har det med at finde bagdøre i forældet software. Bliver din hjemmeside hacket, så er det helt forfra – med mindre du har taget en backup (og det har du da, har du ikk’?).

Hvis ikke man selv orker at holde sin backend opdateret – eller ikke har tid til det, så er der flere webbureauer der tilbyder en WordPress serviceaftale – mig selv inklusiv ;-). Så kan man sove roligt om natten, og lægge ansvaret over på nogle andre – og det er jo altid rart.

10. Øvrige forbedringer til hastighedsoptimering

Et ord: kode! Din kode på din hjemmeside skal være fornuftigt optimeret. Rigtig mange udviklere bag WordPress temaer, gør sig umage med at lave en “ren” og optimeret kode, men mindst lige så mange går knap så højt op i det.

Har du lavet alt ovenstående, og føler du stadig ikke at din hjemmeside performer godt nok, så skal du måske overveje at skifte tema, og finde et, hvor der er større fokus på hastighedsoptimering. Jeg vil til enhver tid anbefale WordPress-temaet Pro fra Themeco.

Hver gang Google kommer forbi din side, skal den igennem en masse kode. Des mindre der er, jo nemmere er den at læse igennem – og samme udgangspunkt er gældende for dine besøgende, for masser af kode sløver og det kan også give for mange unødige fejl på dit site.

Nu er du ekspert i WordPress hastighedsoptimering

Hvis du fik tygget dig igennem det hele og nåede helt herned til bunden, så tager jeg hatten af ;). Du kan nu (u)officielt kalde dig ekspert i WordPress hastighedsoptimering.

Tak fordi du læste med!