Jeg bøvlede selv meget med en langsom WordPress hjemmeside. Meget er blevet prøvet, så her er min opsamling på hvordan du kan gøre WordPress hurtigere.

Det er først vigtigt at sige, at en af de største syndere i forhold til en langsomt WordPress hjemmeside, er det brugte tema. Du kan gøre mange ting i forhold til optimering og forskellige plugins, men hvis dit tema generelt er langsomt og/eller er meget afhængigt af javascript for bare at vise de mest simple ting, er der desværre lang vej til en hurtig hjemmeside. Mit tema er ikke det hurtigste, og der er ting som kunne optimeres fra forfatterens side. Men dette skal ikke stoppe os i at gøre det så godt som vi nu engang kan.

De to vigtigste plugins

Med blot 2 plugins kan du komme UTROLIGT langt i forhold til at optimere din hjemmeside. Om ikke andet, så vil jeg på det kraftigste anbefale at du får installeret de to følgende plugins.

W3 Total Cache

Den første her er W3 Total Cahce, det nok vigtigste plugin. Pluginnet kan en masse, men de vigtigste funktioner er for mig at se de følgende:

Page Cache

Denne funktion er den nok vigtigste funktion i dette plugin. Det forsøger at lave alle dine sider om til statiske sider. Dette betyder at i stedet for at skulle spørge databasen om hvilket indhold der skal vises, og derefter begynde at “tegne” den enkelte side, gemmes en forud genereret side på serveren. Når en bruger så skal se en side på din hjemmeside, hentes denne forud-genererede side frem. Markant bedre end at hjemmesiden skal på arbejde for at genere siden forfra. Dette plugin alene kan spare oceaner af tid for dine brugere, og ressourcer på din server. Mindre arbejde til serveren = hurtigere svartider, samt at serveren kan håndtere flere samtidige brugere.

W3 Total Cache - page cache

W3 Total Cache – page cache

Browser Cache

Browser cache sørger for at din hjemmesides ressourcer gemmes lokalt i den enkelte brugers browser. Dette sikrer at dine brugere henter så lidt data fra serveren som muligt, og i stedet hele tiden tjekker browserens cahce for om data allerede er hentet og ligger lokalt.

W3 Total Cache - browser cache

W3 Total Cache – browser cache

Der er mange andre ting man kan sætte op i W3 Total Cache, men disse to funktioner er de to jeg har fundet altid virker, og har en stor indvirkning på hjemmesiden. Et dybere dyk i alle de indstillinger der er for W3 Total Cache, kan findes hos premium.wpmudev.org. Her går de virkeligt i dybden med de enkelte dele.

Autoptimize

Hjemmesider er bygget op af en masse henvisninger. Hvert billede kræver fx. et ny forespørgsel til serveren. En stor del af ventetiden på hjemmesiderne, er de mange forespørgsler til serveren, men det er ikke kun de tunge billeder der er problemet her. Hvis din hjemmeside gør brug af flere forskellige stylesheets og javascript filer, skal disse hentes hver for sig. Det tager tid. Auoptimize hjælper på dette problem. Den gennemløber din hjemmesider og finder henholdsvis alle javascript filerne og alle stylesheet (CSS) filerne. Når disse er fundet, samler den alle javascript filerne i én fil, komprimerer denne fil (minimize), og udstiller denne. Det samme sker for CSS filerne. I stedet for en masse refernecer, er der kun kun 2 små tilbage. Dette hjælper også en del på hastigheden.

W3 Total Cache er i princippet i stand til at komprimere (minimize) javascript og stylesheets. Men jeg har personligt ikke gode erfaringer W3 Total Cache her, og Autoptimize lade til (for mig) at virker bedre og generelt gøre et bedre job.

Generel optimering

Lazy loading

Lazy loading er et udtryk for at alle elementer på hjemmesiden ikke hentes på én gang, men derimod først når de rent faktisk skal bruges.

Her bruger jeg BJ Lazy Load, min erfaring er at det er et nogenlunde letvægts plugin, som jeg endnu ikke har oplevet ikke virker på en hjemmeside. Der findes mange andre plugins derude, som kan løse denne opgave, men min erfaring er at det ikke er alle der virker lige godt, desværre. End ikke den indbyggede i Jetpack (mere om Jetpack senere) synes jeg virker optimalt.

Progessiv Web App – PWA

Super Progressive Web Apps Banner

Et andet plugin jeg har fundet, som jeg synes er en skam flere ikke kender til, er Super Progressive Web Apps. Min erfaring er dette plugin hjælper med at cache de besøgte sider på den enkelte bruger telefon. Sidder brugeren og navigerer rundt, og kommer forbi de samme sider igen, er disse sider allerede gemt lokalt på telefonen. Dét er en stor fordel, og giver en utroligt god brugeroplevelse. Pluginnet kan også komme op med en notifikation om at man kan tilføje hjemmesiden som et bogmærke på startskærmen. Gøres dette bliver der oprettet en Progressiv Web App (PWA), som er endnu bedre til at cache indholdet på telefonen.
Hvis du har en hjemmeside som ofte besøges af de samme brugere igen og igen, og især hvis disse brugere bruger de samme sider igen og igen, er dette plugin et must have i min bog.

Jetpack

Wordpress Jetpack

Jetpack er et stort plugin. Det kan UTROLIGT meget!

I forhold til at gøre WordPress hurtigere, er der dog kun en enkelt funktionalitet jeg bruger; Site accelerator. Site accelerator består af to komponenter, et der håndterer billeder, og et der håndterer de statiske filer så som javascript & CSS som hyppigst bruges i WordPress regi.

Det at Jetpack tilbyder at hente alle dine billeder over til dem, og sørge for at de bliver leveret så hurtigt som muligt til brugeren, betyder at din hjemmesides server ikke skal stå for at finde og sende billederne til brugerne. Min erfaring er at dette gør en kæmpe forskel.

Redirection & håndtering af 404 fejl

Noget der også kan gøre WordPress langsomt, er hvis dine brugere bliver videresendt / redirected fra side til side. Der kan være mange grunde til at dette sker, både tilsigtede og utilsigtede. Endvidere kan brugerne forsøge at tilgå ressourcer som ikke findes, sker dette vil de blive mødt af en 404 fejl. Dette kan være en viderestilling som ikke virker, og det kan være billeder som af den ene eller anden grund, ikke længere findes på hjemmesiden.

Et plugin jeg er blevet rigtigt glad for når jeg skal lede efter og håndtere disse fejl, er pluginnet Redirection. Herunder ser du et eksempel på et billede som jeg stadig linker til et sted, men som ikke længere findes i min uploads mappe på serveren.

Redirects - 404s

Redirects – 404s

Håndtering af disse redirects kan hjælpe med at gøre WordPress hurtigere, da browseren så ikke skal håndtere og vente på ressourcer som ikke findes.

Offsite cache – Cloudflare

Du har fået lavet en lokal cache på din server med W3, dine scripts og stylesheets er komprimeret og er samlet i én fil for hver type. Dine billeder har fået lazy load. Generelt har du gjort hvad du umiddelbart tænker du kan for at optimere din hjemmeside.

Men vent! Der er mere du kan gøre for at gøre WordPress hurtigere. Men nu begynder vi at bevæge os ind på den mere tekniske del af optimeringerne.

Når brugerne besøger din hjemmeside, er det dit webhotel som skal levere disse data. I langt de fleste tilfælde, er denne server langsom, fordi du (ligesom mig) har sparet på serveren til din hjemmeside. Derfor kunne det da være lækkert hvis vi kunne få en super hurtig webserver til at agere cache for vores hjemmeside. Og netop dette kan Cloudflare hjælpe os med. De er blandt andet kendt for at have verdens hurtigste DNS.

At få sat Cloudflare op som caching server er desværre så nemt som bare at downloade et plugin og trykke “aktiver”, her skal der lidt mere til da det er et mere teknisk setup. Vi skal nemlig have fortal dine besøgendes browser at den ikke skal lede efter din hjemmeside på din webserver, men i stedet skal lede efter den hos Cloudflare.

Hvor stor er effekten så af Cloudflare?

Heldigvis har Cloudflare selv lavet en guide til hvordan du får sat Cloudflare op for din hjemmeside, så jeg vil lade dem forklare den tekniske del, og i stedet vil jeg vise jer nogle før og efter billeder for min hjemmesides forside.

Før Cloudflare

Mobil – før Cloudflare

Læg især mærke til billederne under tallene. Her er det tydeligt at vi nu allerede fra starten har menuen, topbaren & overskriften af artiklen klar. Vi får også ret hurtigt vist et billede og den vigtigste tekst så brugeren kan komme igang med at læse indholdet.

Efter Cloudflare

Mobil – Efter Cloudflare

På stationære & bærbare computere er resultatet et helt andet. Her er der snart ikke meget at komme efter længere.

Desktop efter CloudFlare

Desktop / bærbar efter CloudFlare

Såfremt du ønsker at bruge Cloudflare kan det varmt anbefales at bruge Cloudflare pluginnet. Det kan sørge for at din off-location cache bliver purged hver gang du laver ændringer til dit layout. Dertil den har en fin handy knap til at sætte de mest normale indstillinger op for Cloudflare når man bruger WordPress.

Ekstra: Mine egne funktioner

Her rammer vi den tekniske del. Følgende vil kræve at du kan håndtere at navigere rundt på en FTP server, og at du ved hvordan du håndterer at tilføje nye PHP funktioner til dit site.

For store billeder på relaterede opslag

Hvis du bruger Jetpack og dennes “relaterede opslag” funktion, kan billederne godt være lidt for store i forhold til hvordan de vises på din hjemmeside, det var de i mit tilfælde. Jeg har lavet følgende script som kan bruges til at justere dette. Hvis du ved præcis hvor høje og brede du ønsker billederne, brug da med fordel nedenstående til at justere disse billeder til. Så hentes der ikke for store billeder ned til dine brugere.

// change thumbnail size
function jetpackchange_image_size ( $thumbnail_size ) {
    $thumbnail_size['width'] = 240;
    $thumbnail_size['height'] = 137;
    return $thumbnail_size;
}
add_filter( 'jetpack_relatedposts_filter_thumbnail_size', 'jetpackchange_image_size' );

Kommentarer?

Hvad har du erfaringer med? Er der noget jeg har overset? Eller kender du et bedre alternativ til de plugins og løsninger jeg har valgt?
Hold dig endelig ikke tilbage, og fortæl mig om det i kommentarsporet.