Etikettarkiv: optimering

Optimera WordPress

WordPress är ett publiceringsverktyg för bloggar och webbsidor. Fördelen med WordPress är att det är lätt att komma igång även om man inte inte har kunskaper inom programmering. Om man bara vill skapa en enkel blogg eller webbsida så finns det färdiga mallar/teman att använda som ger en bra grund. Det finns även mängder med plugins/verktyg som lägger till mer funktionalitet och löser många problem som annars är svåra att komma åt utan att kunna programmera PHP.

I grundutförande så är WordPress ett väldigt kompetent system men om man vill så finns det saker som man själv kan göra för att optimera prestanda. Kom ihåg att ta en backup av din WordPressinstallation innan du börjar ändra och installera plugins.

Mät hur snabbt sidan laddas

Hur snabbt laddas din sida? (Obs. bilden är ett montage. Fordonet stod stilla när bilden togs.)
Hur snabbt laddas din sida? (Obs. bilden är ett montage. Fordonet stod stilla när bilden togs.)

Ett bra verktyg att använda när man vill skruva på prestanda i WordPress är Googles Pagespeed Insights. Verktyget mäter hur lång tid det tar att ladda en webbsida och ger förslag på vad man kan förändra för att snabba upp det hela. Google beräknar ett resultat utifrån olika parametrar och det högsta resultatet som går att få är 100/100. Det kostar dock mycket att nå detta resultat och det betyder inte att sidan kommar att upplevas som snabbare men rekommendationerna som ges är generellt bra och kan tillämpas i den omfattning som är lämpligt och möjligt.

Resultaten delas upp i två kategorier som är mobilt och desktop. I resultatet för mobilt får man även en fingervisning om användarupplevelsen. Det kan exempelvis varna för tryckytor som sitter för tätt så att de bli svåra att trycka på en touch-screen.

Det finns även andra verktyg för att mäta hur snabbt en sida laddas.

Caching

Som standard cachar inte WordPress sidor som hämtats. Varje anrop till servern hämtar om sidan från början. Genom att låta WordPress spara sidor som har hämtats i en cache så går det snabbare hämta sidorna vid efterkommande anrop. Det finns flera olika plugins som möjliggör ”caching”. WP Fastest Cache och W3 Total Cache är två exempel.

Det är också bra att cacha innehåll i besökarnas webbläsare. De behöver då inte ladda om sidan varje gång vilket kommer bidra till att de upplever webbplatsen som snabb.

Minifiering av Javascript, HTML och CSS

När en webbsida laddas så hämtas HTML-koden som utgör själva innehållet på sidan, CSS som beskriver hur sidan ska presenteras, samt Javascript som styr beteende på webbsidan. När man utvecklar en webbsida så är läsbarheten viktig. Man brukar strukturera upp alla dessa dokument så att de är lätta att läsa och arbeta med. Nackdelen med strukturerade och lättlästa dokument är att de ofta tar större utrymme att lagra. När man laddar en webbsida bör filstorlekarna hållas så små som möjligt vilket gör att sidan kan hämtas snabbare. Minifiering åstadkommer detta genom att ta bort onödiga tecken och formatering som inte behövs.

Det finns gott om plugins som kan hjälpa till med minifiering av dokument.

Ladda Javascript i foten av dokumentet istället för huvudet

Ofta laddar man Javascript i huvudet av HTML-dokumentet (innanför HEAD-elementet). Detta har en fördelen att scripten är laddade innan sidan visas. Nackdelen är dock att sidan inte visas förrän alla script har laddats. Om man har många eller stora script så kan fördröjningen bli avsevärd. Ett alternativ är att flytta Javascript som inte behöver laddas innan sidan visas till foten av HTML-dokumentet (strax innan avslutningstaggen för BODY-elementet). Då renderas sidan först och scripten laddas sedan.

Var försiktig med vilka script som flyttas bort dokumenthuvudet. En del script måste läsas in innan sidan visas. I annat fall kan sidan sluta fungera.

Komprimera resurser i GZIP-arkiv

Genom att samma alla resurser i ett GZIP-arkiv kan du snabba inläsningen av en webbsida. Dels är det mer fördelaktigt att läsa en lite större fil än flera små och dessutom komprimeras arkivet så att filen blir mindre. Det finns flera plugins som kan hjälpa till med att komprimera resurser (WP Fastest Cache stöd för detta).

Optimering av bilder

De flesta webbsidor innehåller bilder av något slag. Det finns många olika format att välja mellan och de har alla sina fördelar och nackdelar. Bilder tenderar att skapa relativt stora filer (ett vanligt fotografi sparat som JPEG kan lätt bli flera Megabytes). Detta innebär att en stor del av tiden för att ladda en webbsida ägnas åt att ladda bilder. Bilder kan komprimeras med olika algoritmer. Komprimering kan göra att kvaliteten på bilden försämras så det är viktigt att göra en bra avvägning mellan kvalitet och filstorlek.

Många bildhanteringsprogram har möjlighet att spara bilder anpassade för webben. Det finns även plugins i WordPress för att hantera optimering av bilder.

Olika bilder för olika klienter

Om du använder ett responsivt tema så är det viktigt att tänka på att det som standard är samma bild som laddas ned både till desktop som till en mobilklient. Bilden skalas sedan för att passa skärmstorleken för den enhet där sidan visas. För en mobilklient som kör via 3G eller 4G så tar det tid att ladda ned stora bilder bara för att skala om dem så att de kan visas korrekt. Ett bättre sätt är att förbereda olika storlekar av bilden direkt och skicka den som passar bäst i varje given situation. Då kan du minska storleken för bilder som ska visas på mindre enheter så att de blir lättare att ladda ned. Tyvärr följer denna funktionalitet inte med som standard i WordPress men det finns en hel del plugin som löser detta (exempelvis RICG Responsive Images).

Sammanfattning

Det finns mycket du kan göra för att snabba upp WordPress utan att skriva någon kod. Genom att välja lämpliga plugins kan man snabbt få upp hastigheten och därmed ge en bättre användarupplevelse. Se bara till att säkerställa att olika plugins kan samexistera utan att ställa till några problem. Som alltid så bör du ta en backup på din WordPress-installation innan du börjar försöka optimera den eller installera diverse plugins.