Hastighedsoptimering af WordPress

Hastighedsoptimering af dit WordPress website, uanset om der er tale om en blog, webshop eller almindelig firmaprofil, er afgørende for ikke blot brugeroplevelsen, men også for SEO. Google kigger efter mange parametre, når et website skal indekseres i søgemaskinen, hvor hastigheden af websitet har en afgørende indflydelse.

En ”før-test” af websitets hastighed bør derfor altid være udgangspunktet for optimering, så effekten senere kan måles med en ”efter-test”.

Der eksisterer mange forskellige testværktøjer, hvoraf de mest udbredte er Pingdom Tools Pingdom Tools og Googles Pagespeed Insights

Google Pagespeed Insigts giver en indikation af ikke blot hastigheden, men også SEO og andre relevante områder for et website. Googles test bedømmer et website med en score fra 0 til 100 og måler på en lang række parametre.

Af testen fremgår det, hvilke områder man kan optimere, og selv om det er stort set umuligt at opnå en perfekt score, så er der trods alt mange områder, hvor den kan forbedres. Hastighedsoptimering er en iterativ proces ligesom SEO. Teknologier, browsere, enheder og selve websitet opdateres løbende, derfor bør hastighedsoptimering være i et mere eller mindre løbende fokus.

I dette indlæg lægges fokus på de mest gængse hastighedsdræbere, der samtidig er lavthængende frugter, som vi nemt kan plukke uden at bruge for mange resurser på det.

Hastighedsdræbere

Der er selvfølgelig en lang række faktorer, der kan have indflydelse på hastigheden af et website: langsom server, stor og datatung database, langsomme plugins, specialtilpasninger, billeder, videoer osv. I dette indlæg går jeg uden om de meget tekniske detaljer og forsøger i stedet at pege på en række løsninger, der er nemme at implementere og som erfaringsmæssigt afhjælper de typiske hastighedsproblemer. Jeg har derfor valgt at belyse følgende optimeringsområder:

• Cache
• Billeder
• JS & CSS
• Lazy load

Cache

Du har sikkert oplevet flere gange at et website opleves hurtigere anden gang, du besøger det i modsætning til dit første besøg. Det skyldes cache. Basalt set er cache noget data fra websitet, som kan være gemt lokalt i din browser, eller på serveren, hvor websitet hostes. Eksempelvis kan billeder blive gemt lokalt i din browser efter første besøg på websitet, så din browser ikke skal hente billedet fra serveren igen, når du næste gang besøger websitet.

WP Fastest Cache

I WordPress eksisterer der heldigvis en lang række moduler, der hjælper med at implementere cache på websitet, og her anbefaler jeg WP Fastest Cache. Det er et af de mest anvendte caching-plugins til WordPress med over en million installationer i skrivende stund, og det er gratis.

Installation af modulet er lige til, og kan installeres fra WordPress’ administration ligesom alle andre moduler. Under modulets indstillinger anbefaler vi følgende indstillinger, som vi selv anvender på de fleste WordPress-websites, vi servicerer. Der kan være afvigelser fra website til website mht., hvordan indstillinger påvirker websitet, så sørg for at teste godt igennem, efter indstillingerne er gemt.

Billedkomprimering i WordPress

En stor hastighedsdræber er billedfiler, der fylder for meget. Hvis et website består af en lang række ukomprimerede billeder, kan det tage lang tid for f.eks. en smartphone på et 3G- eller 4G-netværk at indlæse hele siden.
Jeg anbefaler derfor altid at skalere og komprimere billederne, inden de uploades til websitet. Sørg for at holde størrelsen under 350Kb for store billeder (f.eks. bannere i fuld bredde) og 75kb for mindre billeder f.eks. produktbilleder.

Hvis du allerede har gjort dit forarbejde med billederne, er der fortsat mulighed for yderligere optimering ved hjælp af komprimeringsværktøjer. Jeg anbefaler Smush.

Smush

Der eksisterer en lang række gratis og betalte moduler til billedekomprimering. Vi bruger Smush, der eksisterer som både gratisversion og betalt version. Gratisversionen plejer at være tilstrækkelig for de fleste websites.
Smush komprimerer alle billeder, der uploades til websites og hjælper desuden med at implementere såkaldt lazy loading. Lazy loading sikrer, at billeder på et webside først indlæses i browseren, når de er synlige på brugerens skærm. Det giver en stor hastighedsmæssig fordel for websites med lange sider, der indeholder mange billeder; i stedet for at indlæse billeder, som brugeren slet ikke kan se endnu, indlæses kun de billeder, der skal være synlige.

I nedenstående screenshot af en test foretaget på et website med Google Pagespeed Insights, er der en besparelse at hente på 13 sekunder ved at Lazy Loade billeder, der ikke er på skærmen, og yderligere 5 sekunder ved at kryptere (komprimere) billeder effektivt. Det er en markant besparelse, der hurtigt bærer frugt med installation af Smush.

Javascript og CSS

Javascript og CSS er endnu en af de lavthængende frugter i hastighedsoptimering. Vi ser ofte WordPress-websites, der indeholder en lang række forskellige Javascripts og CSS-filer. Det gør indlæsningen af hele siden langsommere, og disse filer bør i stedet være konsolideret i én og samme fil.

Autooptimize

Med modulet Autooptimize kan man ved et klik på en knap konsolidere de fleste CSS-filer og Javascript- filer, så færre filer skal indlæses, når brugeren browser indlæser en side. Modulet er også i stand til at optimere koden, så den er mere effektiv og dermed hurtigere indlæst. I nedenstående screenshot viser jeg de indstillinger, som vi typisk bruger:

Det er vigtigt, at siden testes godt igennem efter ovenstående ændringer er trådt i kraft, da optimeringen kan forårsage uforudsete komplikationer. Hvis du oplever fejl efter aktivering af modulet, kan du prøve at deaktivere nogle af indstillingerne, indtil du finder den opsætning, der passer til dit website.

Som vist i næste screenshot kan der opnås en hastighedsbesparelse på næsten 4 sekunder ved at optimere JavaScript og CSS.

Afsluttende bemærkning

De områder for hastighedsoptimering, som jeg har afdækket her i indlægget, er blandt de lavest hængende frugter: De er hurtige og billige at foretage med et meget imponerende resultat. Hastighedsoptimering kan gøres på mange flere områder, men man bør vurdere cost/benefit ved at gøre det fremfor ingenting at gøre.
Vi hjælper selvfølgelig gerne med både test og optimering af jeres løsning, kontakt mig direkte på en@radarsofthouse.com, eller igennem vores kontaktformular her på siden.

Home » Blog » Hastighedsoptimering af WordPress