Som freelance webdesigner støder jeg på rigtig mange hjemmesider i det daglige hvor der ingen fokus er på hastighedsoptimering. Det fik mig til at sætte mig ned og skrive denne guide med tips til ejeren af en WordPress hjemmeside. Den er målrettet WordPress, men mange af tingene gør sig også gældende generelt for hjemmesider om de er kodet i hånden, eller om man bruger et CMS som WordPress, Drupal eller Joomla.
Opslaget vil hjælpe dig som indehaver af en hjemmeside med en bedre brugeroplevelse og kan i bedste fald give en konkurrencefordel i forhold til dine konkurrenter. What’s not to like.
Læn dig godt tilbage, læs indlægget og smid en kommentar hvis det har givet dig værdi eller du har spørgsmål.
Hov – glemte næsten – denne artikel indeholder enkelte Affiliate links – Det vil sige – hvis du skulle vælge at købe noget via et af linkene får jeg en lille bid af kagen fra leverandøren, uden at det koster dig ekstra.
Hvorfor hastighedsoptimering er vigtigt i forhold til søgemaskine rangering.
Før vi går i dybden med at forklare, hvordan man optimerer hastigheden på din WordPress-hjemmeside, er det vigtigt at forstå, hvad hastighedsoptimering handler om.
Hastighedsoptimering handler om at forbedre den tid, det tager for din hjemmeside at indlæse og reagere på forespørgsler fra dine besøgende. En hurtigere hjemmeside betyder, at dine besøgende vil have en bedre brugeroplevelse og vil sandsynligvis blive på din hjemmeside i længere tid. Hastighedsoptimering kan også hjælpe med at forbedre din hjemmesides søgemaskineoptimering, da søgemaskiner prioriterer hurtigere hjemmesider over langsomme.
Hvad er et godt resultat?
Før du begynder at optimere hastigheden på din WordPress-hjemmeside, er det vigtigt at måle din nuværende hastighed så du har noget at måle op imod. Der er mange værktøjer til rådighed, som kan hjælpe dig med at måle din hjemmesides hastighed, herunder Google PageSpeed Insights og GTmetrix.
Fælles for begge tools er de måler hvor lang tid der går fra man indtaster adressen, til hjemmesiden vises for brugeren. Derudover viser den hvilket indhold man kan hastighedsoptimere for at få bedre load time. Google PageSpeed Insight og GTmetrix bruger begge en skala fra 0-100 hvor 100 er bedst. En godt optimeret hjemmeside ligger på 90+ og gerne over 95 for mobilvisning og 98 for desktop visning.
Den første faktore man kigger på er Time to first byte (TTFB) som er en måling af hvor lang tid der går fra brugeren trykker sig ind på din side til at den begynder at loade det første indhold. Det er en faktorer du ikke selv kan optimere på, med mindre du hoster din side selv. Har man valgt en billig host, er det ofte her, man ser hvorfor den er billig da TTFB ofte er alt alt for høj.
En anden faktor der måles på er First contentful paint (FCP) – Denne måling viser hvor lang tid der går fra brugeren trykker sig ind på din side, til indholdet begynder at vise sig. Altså inklusiv TTFB.
Næste faktor vi kigger på er Largest contentful Paint (LCP) – hvor FCP var når det første begyndte at vise sig, er LCP når alt i det viste er loadet færdigt – Dermed ikke sagt at siden er helt loadet, da elementer som ikke er i ”viewpoint” kan være lazy loades og først loade når man scroller ned til elementet. LCP kan frit oversat til hvornår er siden klar til at interagere. Altså hvornår man kan trykke på knapper og se tekst og billeder uden at scroll.
Hvornår er mit site hurtigt nok til Google?
Der er ikke et præcist nedskrevet krav til hvornår søgemaskiner vurderer ens hjemmeside til at være hurtig nok. Men vi ved at hastighed er en af mange faktorer når hjemmesiden skal rangeres.
Google anbefaler at en hjemmeside indlæses på under 2 sekunder og at brugeren kan interagere inden for de første sekund – Altså en LCP på max 1 sekund på desktop.
Hvordan måler jeg om min side er optimeret?
Gt Metrix er et af de bedste værktøjer på markedet til at undersøge om din hjemmeside performer som den skal. Bemærk dog at den som standard tester din hjemmeside fra en server i Canada og det kan være misvisende hvis din side henvender sig primært til danskere. Hvis man opretter en gratis bruger kan man vælge London som udgangspunkt, og få en test der er meget mere retvisende.
Det er ikke vigtigt at ramme 100% – Det er meget svært at komme der op uden at gå på kompromis med kvaliteten af din hjemmeside. Det er ikke umuligt, men tiden der bruges på det er bedre brugt andre steder.
Jeg sigter altid efter at ramme Grade A og over 95%, og som minimum 90% med mine kunders sider, men som minimum anbefaling er B og 80%.
Google PageSpeed Insight er også et rigtig godt – her anbefales det at ramme over 80 på mobil, og over 90 på desktop – Grunden til mobilen er lavere er at mobiltests kører via en neddroslet (throttled) forbindelse og kun kører 3g. I Danmark og større byer i Europa er 4g og 5g så udbredt at den reelt har samme hastighed som en desktop.
Jeg sigter altid efter at ramme 90+ på mobil og 95 på desktop for mine kunder – og ofte ligger de på 95/98 både på mobil og desktop
Der findes flere tools men disse er de 2 mest brugte og scanner hver dag flere millioner hjemmesider
Hvad kan du selv gøre for at hastighedsoptimere din WordPress side?
Den største gave du kan give din hjemmeside, er et caching plugin såsom Litespeed Cache, W3 Total Cache, WP Rocket og PerfMatters til at hastighedsoptimere din WordPress side.
Min personlige favorit er Litespeed Cache den bruger jeg selv på alle mine sider og hos mine kunder (se referencer) – den er gratis, men forudsætter din host bruger litespeed som httpd. Hvis ikke din webudbyder bruger Litespeed ligger min anbefaling på PerfMatters (ca 170kr om året) eller WP Rocket (ca 400kr om året)
En anden af de store Cache plugins er W3 Total Cache (ca 670kr om året). Der findes mange andre både gratis eller billige men man får ofte hvad man betaler for. På sider som AppSumo.com og WPLtd.store kan man nogengange finde en lifetime deal (LTD) på nogle af disse plugins. Med en lifetime betaler man et engangsbeløb og har den så i hele pluginets levetid.
Optimering af billeder
En anden og meget vigtig faktor når det kommer til hastighedsoptimering af hjemmesiden er størrelsen af dine billeder. Er dine billeder for store, vil det give udslag på indlæsningstiden for dit website. Det er derfor en god ide at komprimere dine billeder og reducere filstørrelsen inden de uploades til dit website.
Denne process kan automatiseres med de fleste caching plugins, men der findes også dedikerede plugins til billedoptimering.
En af de bedst anmeldte plugins til billedoptimering er ShortPixels Image Optimizer – nogle af grundende til at shortpixels er blevet så populær er at den er nem at bruge og installere, uden at gå på kompromis med kvaliteten. Det kan reducere filstørrelsen med op til 90% uden at det er synligt, og det kan bulk optimere billeder. Den gratis version har begrænsninger i antal billeder den kan optimere af gangen, men fungerer ganske udmærket i pro udgaven.
Af andre muligheder kan nævnes:
EWWW Image optimizer
Smush image compression optimization
Installer et minimum af plugins
Hvert plugin du installerer på din hjemmeside, kan forlænge indlæsningstiden på din hjemmeside. Det er derfor en god ide at holde antallet af plugins til et absolut minimum. Det er ofte også et plugin der ligger til grund for hacker angreb hvis ikke de holdes opdateret. Så gør dig selv en tjeneste og tænk over om det er strengt nødvendigt med et plugin til den feature du ønsker, eller om det kan laves med f.eks et snippet.
Jeg ser desværre alt for ofte sider med +50 plugins og manglende opdateringer. Det udgør en kæmpe sikkerhedsrisiko, og samtidig sløber det siden og gør overblikket ofte forsvinder.
Brug et Content delivery system (CDN)
Med et CDN kan være en god metode til at at reducere load tiden på din hjemmeside. En CDN flytter statiske filer som css, javascript og billeder ud på flere eksterne kilder tættere på brugeren. På denne måde kan filer loades hurtigere og er der mange besøgende fordeles det ud på flere kilder i stedet for det hele på din server.
En af de største CDN leverandører er CloudFlare – den findes både i en gratis version og en betalingsversion. Nogle webhosts tilbyder også CDN løsninger bundled sammen med din hostingpakke.
Vælg en hosting leverandør der er WordPress kompatibel
WordPress kan installeres hos alle hosting udbydere, men det er ikke alle der har optimeret deres servere til WordPress og det kan give bagslag.
Anbefalede WordPress hosting løsninger:
Hosting4Real. Serverne hos H4R er både optimeret til WordPress, Kører litespeed og har sikkerheden i højsædet. Samtidig bliver serverne ikke overfyldte. Det giver hurtigere indlæsningstider hvilket kan øge brugeroplevelsen og din SEO rangering. Jeg bruger personligt H4R til alle mine sites og mine kunders sites.
WP Engine. Wp Engine er den største udbyder af udelukkende WordPress installationer. Det giver en række fordele at de kun har WordPress da deres service altid er optimeret og up to date.
Brug et hastighedsoptimerede tema og page builder
Man kan let lade sig forblænde af flotte farver, animationer og lækre detaljer – men ofte giver mange af disse ”nice to have feature” ekstra load tid. Det er derfor vigtigt ikke at falde i en fælde og smide penge ud til et tema der i sidste ende gør din side langsom.
Pagebuildere som Divi og Elementor har et ry for at være sløvende, men de er begyndt at komme efter det. Jeg bruger personligt en professionel pagebuilder med fokus på hastighed, korrekt HTML Structure og Accesibility i højsædet. Se dette blogindlæg for at se hvorfor jeg anbefaler BricksBuilder over alle andre builders.
Min anbefaling af pagebuilder:
BricksBuilder – BricksBuilder er en af de få pagebuildere der kører med en ”class first” aproach, laver korrekt html structure og har fokus på hastighedsoptimering
Oxygen – En god pagebuilder der desværre har set et stort fald i brugere og kører på et forældet framework.
Andre pagebuildere værd at nævne:
Jeg har ikke selv brugte nogle af disse i årevis, men de er populære hos andre og derfor nævnes de. Min personlige holdning er at de ”fordummer” dem der bygger siderne, og laver strukturen forkert. Det kan se rigtig godt ud, men kigger man på HTML Strukturen er der graverende fejl ved alle sammen, der gør at siderne rent skematisk er bygget forkert hvilket kan påvirke hastighed og rangering.
Flere tiltag til optimering
- Hold dit tema, dine plugins og WordPress core opdateret.
- Brug altid den nyeste version af PHP
- Lazyload indhold der ikke er synligt ”above the fold”
- Host så vidt muligt videoer ekstern
- Keep it simple – minimer smarte animationer
- Ryd op I din database og revisions løbende
- Undgå alle former for omdirigering – med undtagelse af følgende 2
- http til https
- med www til uden www, eller omvendt
- Begræns eksterne kilder og scripts
- Installer kun lovlige og kvalitetsplugins
Indehaver af Creatiw Design hvor jeg tilbyder freelance grafisk design og hjemmesider. Jeg elsker at bygge nye hjemmesider, webshops og lave andet grafisk arbejde for mine kunder. Derudover deler jeg ud af min viden inden for WordPress, WooCommerce, UX design og UI design her på siden.
