Optimalisere WordPress for ytelse

Sist oppdatert:

WordPress er en fin og elegant måte å publisere på, men av og til kan man oppleve at det ikke er raskt nok når man har installert en avansert mal og utvidelser. I denne artikkelen vil vi vise deg hvordan du kan optimalisere WordPress, og da helst uten å miste design og funksjoner som er lagt til.

Enkle forbedringer
Det første man da bør starte med for å optimalisere WordPress, er å rydde litt opp. Det kan tenkes du har instikk, stylesheets og denslags som du ikke bruker – og de er det bare å fjerne. Instikkene bør du faktisk slette helt og ikke bare deaktivere – dette kan føre til en merkbart raskere nettside.

Det neste du kan gjøre for å optimalisere WordPress er å ta en titt på hva siden faktisk publiserer. Det er foreksempel her viktig å se på størrelsen på bildene og andre media man bruker – disse bør være så små som mulig. Det nytter lite å gjøre resten av nettstedet ditt superraskt hvis du leverer så store filer at det uansett tar en stund å vise dem frem. En liten hjelper her kan være innstikk som WP Smushit (http://wordpress.org/plugins/wp-smushit/) som automatisk modifiserer og optimaliserer alle opplastede bilder.. skjønt, best kontroll får du over dette om du bruker ditt eget bilderedigeringsprogram.

Vurder funksjonaliteten

Hvis du nå fremdeles opplever at det går langsomt, og kanskje spesielt at det går langsomt i backend, så må du optimalisere WordPress ytterligere. Egentlig må du her ta en nøye titt på hvilke templates, themes og instikk du faktisk bruker, og hvor mye data *de* bruker. En fremgangsmåte er å deaktivere ett og ett innstikk, og se hastigheten da endrer seg radikalt. I tilfelle bør du da vurdere om dette er noe du kan erstatte med noe annet, eller droppe helt.

Men før du får gjort det, eller om det ikke går, er det viktig å få frontend til å gå så fort som mulig. Den aller enkleste måten å optimalisere WordPress da, er å få installert en form for caching – altså en mellomlagring av sidene dine som helt statiske filer. Da vil den sørgelig trege backenden din ikke trenge å kjøre, noe som vil bety at leserne får den hastigheten du ønsker deg. Og dette er *nesten* helt uproblematisk.

Optimalisere WordPress med Caching

NB: Dersom du bruker vårt WordPress Webhotell gjelder ikke disse rådene for å optimalisere WordPress, ettersom du allerede har Varnish som cache for ditt nettsted. Ingen av de andre teknikkene for cache er like effektive som Varnish.

Optimalisere WordPress med Varnish Cache

Den aller beste formen for caching er via en egen maskin som bare jobber med dette, en såkalt proxycache. Hos oppdateringsfabrikken er det inkludert for alle kundene våre, og installert som standard. For de fleste leserne vil sidene da fly av gårde som om de var statiske nettsteder uten at du trenger å gjøre noe som helst. For å bruke denne, trenger du også et innstikk som du kan bruke til å tømme cachen når du har gjort større endringer – og som automatisk tømmer cachen for en gitt artikkel når du oppdaterer den.

Hvis du ikke kan bruke Varnish, eller en lignende tjeneste, så finnes det lokale innstikk du kan installere som vil cache sidene for deg, foreksempel Supercache. Disse går veldig mye fortere enn en vanlig WordPress-nettside, men veldig mye langsommere enn en lagret av Varnish. De er ikke nødvendigvis helt trivielle å installere eller konfigurere, men kan være hele forskjellen mellom et akseptabelt og uakseptabelt nettsted.

Men altså, *nesten* uproblematisk. For at caching skal virke, så er det noen skjulte krav til nettstedet ditt; og dette kan være blir brutt av pluginer du har installert. Det kan også tenkes at du på grunn av disse må spesialtilpasse cachen din bare for disse – særlig hvis du bruker noe ala Supercache. Tingene som kan være problematiske:

– Nettsider som bruker cookies til å holde ordren på session-data og bruker disse til å tilpasse nettsiden.

– Nettsider som har egne versjoner for mobiler, internet explorer og andre browser-baserte ting

Dette kan være sider med innlogging foreksempel, med “Velkommen tilbake <navn” og denslags som en del av sidene. Disse kan skrives ‘korrekt’ for caching på en slik måte at de bare sender med slik informasjon til en håndfull sider, slik at mesteparten av nettstedet ditt blir cachet – men dette er da avhengig av pluginene som er i bruk.

– Nettsteder der elementer som figurerer på alle sidene er avhengig av sider som blir hyppig oppdatert

Foreksempel, data av typen “Siste 3 artikler”, “Mest populært nå” og så videre. Problemet her er at hver gang du da oppdaterer en artikkel, må *alle* sidene fjernes fra cache og lagres på nytt. ‘Korrekt’ måte å gjøre dette på vil være å oppdatere disse med javascript (ajax) eller i iframes – men dette vil da igjen være avhengig av pluginen.

Så nettstedet ditt må til en viss grad være skrevet for, eller bli omskrevet for, å være cache-bart for å få full effekt. Hvis du har et slikt nettsted, vil du da enten måtte gå tilbake til tegnebordet; eller så vil du trenge hjelp av utviklere som kjenner til problemstillingen.

Plasser bilder og lignende ressurser på andre steder

Selv om sidene dine nå er cachet, er det mer du kan gjøre for å få opp hastigheten. En viktig ting, særlig hvis du har mange tunge mediafiler, er å sørge for at disse ikke hentes ned fra samme serveren som du kjører WordPress fra. Dermed blir jobben til din server litt lettere, og bildene kan hentes ned samtidig som hovedsiden lastes.

Den enkleste og mest gratis’e måten å gjøre dette på kan være å simpelthen laste opp bildene dine til en tjeneste som Dropbox, gjøre dem tilgjengelig via Web, og så lenke til URL’en deres i artiklene dine. Du kan også bruke mer kompliserte tjenester og koble disse til plugins i WordPress som da kan laste opp media direkte til denne tjenesten – foreksempel Amazons’ S3-skytjeneste er meget bra for dette og har innstikk tilgjengelig – men krever litt mer konfigurasjon.

Hvis du har videoer på nettstedet ditt, er dette spesielt viktig. Det vil da være en veldig god ide å simpelthen laste dem opp til Youtube og embedde dem derfra. Husk å lenke til nettstedet ditt fra Youtube-kanalen for treffenes skyld.

Optimalisere WordPress for sluttbrukeren – Caching i nettleseren

Når cachingen nå er på, så kan det tenkes at du likevel opplever at det likevel oppleves tregt, særlig på en langsommere maskin eller på et tregt nettverk. Selv om selve siden sendes lynkjapt til sluttbruker, så må siden tegnes opp av nettleser, og her kan man gjøre mye som vil få sluttopplevelsen mye bedre – hvis man er komfortabel med å jobbe med litt mer tekniske ting.

Først, skru av cachingen hvis du kan. For Varnish vil det holde å være logget inn, om du bruker en annen cache-mekanisme så er det best å skru den av mens du jobber med denne typen optimalisering.

Dernest kan det være lurt å installere et verktøy som YSlow (http://developer.yahoo.com/yslow/)). Du bør også nå ta en titt på HTML’en som blir generert av siden din.

Det vi nå prøver å få sett på, er hvordan bildene serveres, hvor mange javascript-filer og stylesheets som inkluderes, og hvordan disse blir lastet inn på siden. Målet er at siden skal kunne tegnes opp så fort som mulig, og at så lite tid som mulig brukes til å vente på bilder og javascript. Her vil en hel del avhenge av hvordan themet ditt er skrevet, og det vil være en nokså stor fordel å være komfortabel med å endre i koden her – eller å kjenne noen som kan.

Først, sjekk at alle bilder har Expires-headere i fremtiden. På Oppdateringsfabrikken har alle slike filer expire-dato ett år i fremtiden; siden bilder nesten aldri endrer seg (hvis du faktisk endrer bilder, så bør du skifte navn på dem også). YSlow vil fortelle deg hvilke ressurser du har som mangler slike headere.

Til sist, når nettstedet ditt virker som du vil, vil du også sette slik Expires-data på javascript og stylesheets. Disse vil da bli lagret hos leseren selv, og ikke engang bli sendt over nettet. Men dette vil du absolutt ikke gjøre før du er helt sikker på at nettstedet ditt virker som det skal – det kan være nokså irriterende å finne ut av feil som er forårsaket av for-tidlig cachet javascript.

For å endre Expires-headerne må du redigere .htaccess-filen din. En liten feil i denne kan ta nettstedet ditt ned, så det er her viktig å være forsiktig, eller å få hjelp av noen som vet hvordan.

En liten detalj er at når du legger til slike headere på javascript og css, så bør du alltid laste disse inn med et versjonsnummer lagt til filnavnet, som /eksempel/eksempel.js?versjon=13

– dette bør gjøres av themet og innstikkene når de legger til koden, så du har bare begrenset kontroll over dette hvis du ikke kan eller vil endre koden der. Men dette vil gjøre at du kan gjøre små endringer og bare endre versjonsnummeret for å unngå problemer knyttet til caching.

Minimering av Javascript og CSS

Nå er nettstedet ditt ganske strømlinjeformet, bortsett fra at du fremdeles antagelig bruker en haug javascriptfiler, og en tilsvarende stor mengde stylesheets, lagt til av diverse plugins, fontpakker og hvem vet hva. Hver eneste en av disse må lastes ned fra nettet, ihvertfall første gang du får en besøker, og førsteinntrykket er jo viktig.

Ideelt sett kan du *minimere* disse ved å kjøre dem igjennom et program som fjerner alle mellomrom og unødvendigheter, og så slå dem sammen til kanskje bare to tre filer. Men dette er mye jobb, og du har kanskje ikke full kontroll over hvilke plugins som legger til hva. Dessuten, hvis du selv utvikler på disse, så er det veldig praktisk å *ikke* ha dem minimert, siden de da ikke er veldig enkle å redigere i. Kort sagt, det er for ferdige nettsteder, og for folk som er veldig komfortable med utvikling.

Løsningen for mange vil være å installere en minimaliserings-plugin. Vi har brukt Better WordPress Minify (http://wordpress.org/plugins/bwp-minify) endel, og denne vil samle sammen alle filene dine til en eller en håndfull filer, komprimert til en så liten klump som mulig.

Å gjøre dette, vil imidlertid endre koden noe. Målet er at dette ikke skal endre hvordan koden virker, men en 100% garanti for dette finnes ikke – hvis du er uheldig, så vil ikke nettsiden din virke med denne pluginen, så det er viktig at du tester denne grundig først (og med caching av!). Når du har installert den, konfigurer den så den legger til et versjonsnummer til de ferdige filene. Og så test hver eneste side og funksjon på nettstedet ditt.

Skriv om Theme, CSS og HTML

Hvis du har muligheten til å skrive om theme-koden din, eller har muligheten til å velge et nytt theme med tanke bare på ytelse, så er det endel du kan gjøre her også.

Det viktigste er:

* Sørg for at CSS-koden i stylesheetene er så enkle som mulige, med så få regler som mulig.

* Sørg for at stylesheet kan lastes i header, slik at siden kan begynne å tegnes opp så raskt som mulig

* Sørg for at HTML’en themet produserer er så enkel som mulig. Hvis mulig, plasser inn bildestørrelser direkte på elementene (her eller i stylesheet) slik at nettleseren vet hvor stor plass bildet kommer til å bruke når det er lastet ned.

* Javascript bør lastes ned i footer, eller asynkront via “async” -verdien. Her gjelder også så lite som mulig. Hvis du ikke kan flytte javascriptet, men hvor det ikke trenger å lastes inn før hele siden er lastet, kan du også bruke et “defer”-attributt i skript-taggen.