Kategori: Hastighetsoptimering

Jag heter Emanuel är medgrundare här på Templ.

Vi brinner för att göra hemsidor så snabba som möjligt, vilket gör dem attraktiva för Google och andra sökmotorer, samtidigt som det ökar chansen att konvertera besökare till affärer.

Under årens gång har vi hjälpt till att snabba upp tusentals WordPress-sajter och har här samlat våra bästa strategier och tips för hur du hanterar en långsam sajt och gör WordPress snabbare. Vi uppdaterar detta inlägg årligen med de allra senaste tipsen, och nu är vi uppe i 2024 års upplaga.

Oavsett vilken nivå av förkunskaper du har så tror vi att du kommer kunna ta med dig flera tips från denna guide och. Nu kör vi!

1. Faktorer som påverkar laddningstid

Innan vi utforskar olika strategier för att optimera din hemsida, är det kritiskt att du har en god förståelse för grunderna och de faktorer som kan leda till en långsam WordPress-sajt.

Det många olika faktorer som påverkar hur snabbt en hemsida laddas, och några av de är:

• Sidans storlek i MB
• Antal “requests” (eller hur många filer som laddas hem)
• Om sidan är cachad eller inte
• Om inte, hur lång tid det tar för servern att generera sidan med hjälp av PHP+MySQL
• Många och avancerade JavasScript på sidan
• Mängden CSS-kod

Med detta i åtanke så finns det alltså olika aspekter man kan jobba med för att snabba upp din hemsida: minska sidans storlek, minska antalet filer som laddas, aktivera cachning samt hålla koden så ren som möjligt (läs: använd så få plugin som möjligt).

2. Håll dig till ett mätverktyg

Det finns många olika verktyg för att mäta hastigheten på en hemsida. Några av de mest populära verktygen är:

• Google PageSpeed Insights
• GTmetrix
• WebPageTest.org
• Pingdom

Alla dessa verktyg erbjuder möjligheten att mäta din hemsidas hastighet under kontrollerade förhållanden. De ger även konkreta förslag på åtgärder som kan vidtas för att både snabba upp din WordPress-sajt och åtgärda eventuella underliggande orsaker till att den är långsam.

Utöver dessa webbaserade verktyg så har även de flesta webbläsarna ett inbyggt verktyg för att mäta hastighet. Vårt favoritverktyg är Google Chromes Developer Tools, främst för att det är så lättillgängligt och ger en mest kontroll. Tänk dock på att när du mäter hastighet på din egen dator så är hastigheten på din internetuppkoppling ytterligare en variabel, medan de webbaserade verktygen mäter oberoende av ens egen uppkoppling.

Alla ovan nämnda verktyg i sig är bra, men vi rekommenderar att du håller dig till ett och samma verktyg för att mätningarna ska vara så konsekventa som möjligt. Alla verktyg mäter nämligen på lite olika sätt och det är lätt hänt att man jämför äpplen och päron om man använder olika verktyg i sina mätningar.

Ifall du vill öka din förståelse för vad alla olika invändningar så kan du även läsa vårt blogginlägg om det här.

3. Några ord om poäng och ”core web vitals”

I tidigare upplagor av denna guide så rekommenderade vi att inte lägga så stor vikt vid godtyckliga ”poäng” på din sidas hastighet som diverse verktyg presenterar, men idag finns det en typ av poäng som inte går att ignorera – nämligen ”core web vitals”.

Core web vitals är ett initiativ från Google och syftar till att försöka sätta siffror på en användares upplevelse av en hemsida. Core web vitals består av tre mått:

• ”Largest Contentful Paint” (LCP) – Mäter hur lång tid det tar innan den största synliga bilden eller blocket har laddats färdigt. Ett mått på hur lång tid laddningen av sidan tar.
• ”First Input Delay” (FID) – Mäter hur lång tid det tar från dess att en användare interagerar med hemsidan tills dess att något händer på sidan.
• ”Cumulative Layout Shift” (CLS) – Mäter hur mycket innehållet på sidan rör på sig utan att användaren interagerar med sidan.

Dessa tre värden är alltså mått tänkta att återspegla en användares upplevelse av ens hemsida generellt sett och har alltså inte bara med hastighet att göra.

Tyvärr så är dessa saker ganska så tekniskt komplexa att försöka åtgärda själva då de till stor del är ett resultat av det tema och andra funktioner man lagt in på sin sida. Några grejer man kan göra själv är:

• Minimera mängden CSS och JavaScript på sidan, genom att vara selektiv med vilka plugins man installerar och olika funktioner man aktiverar, och ha koll på hur varje tillskott påverkar sidans prestanda.
• Konvertera bilder till WebP och/eller optimera bilder på andra sätt.
• Säkerställ så att bilder laddas i anpassade storlekar, så att ex en bild som visas i 200×200 pixlar i själva verket inte är 3000×3000 pixlar stor.
• Specificera storlek på bilder i dess <img>-taggar.

Utför man dessa saker på sin sida så kan man på så sätt se till att förbättra sin sidas core web vitals, och även om det är svårt (läs: närapå omöjligt) att få full poäng på en användbar hemsida så är det helt klart värt att utföra eftersom ens poäng har på verkan på sidans SEO och hur högt upp man placerar sig på Google.

Är du intresserad av vad mer du kan göra på din WordPress-sida för att förbättra dess SEO så kanske du är intresserad av vår WordPress SEO-checklista.

4. Välj ett bra webbhotell

Om man vill undvika en långsam sajt är det avgörande att välja ett bra webbhotell, med tillgänglighet på 99,99% och bra support som kan hjälpa till när problem uppstår.

De flesta känner till att det finns väldigt många webbhotell på marknaden, både svenska och utländska, men vad desto färre kanske känner till är att det många väljer att bara kalla för ”webbhotell” kan faktiskt skilja sig åt väldigt mycket. Därför vill vi gå igenom tre olika typer av webbhotell och klargöra för skillnaden mellan dem så att du förhoppningsvis kan göra ett mer välgrundat val och hitta rätt typ av webbhotell för just dig.

Många webbhotell kan i vissa fall ge sken av att vara snabba om man mäter hastigheten på startsidan som oftast är cachad (vilket vi kommer närmare in på längre ner) men för att alla sidor på en hemsida ska ladda snabbt, inklusive WP Admin och andra dynamiska sidor så som en varukorg och kassa, så finns det inga genvägar utan ett verkligt snabbt webbhotell är ett måste.

4.1 Shared hosting

Shared hosting är den äldsta och vanligaste typen av hosting som webbhotell erbjuder. Vad shared hosting innebär är att webbhotellet tar en fysisk server och sedan placerar hundratals hemsidor på den

Denna typ av hosting har fördelen att priset kan bli ganska lågt, men det innebär också ofta prestanda- och säkerhetsproblem, samt ökad risk att din sajt blir långsam, eftersom många hemsidor delar på samma resurser. Felsäkerheten är också ofta den undermålig då det räcker med att webbhotellet får problem med en enda server för att hundratals kunder eller fler ska drabbas, vilket alltså innebär ökad risk för s.k. ”downtime” (tid då ens hemsida inte går att nå).

Två populära svenska webbhotell som erbjuder shared hosting är Loopia och Oderland, medan GoDaddy och Siteground är två stora internationella alternativ.

4.2 VPS

VPS står för Virtual Private Server och är, som du kanske listat ut, en virtuell server, vilket egentligen är en eller flera fysiska servrar som delats upp med hjälp av mjukvara till många virtuella servrar.

VPS kan ha fördelar vad det gäller prestanda jämfört med shared hosting, men det är upp till en själv som kund att konfigurera hela servern och se till så att allt fungerar. Med VPS får man maximalt med hårdvara per krona men man står också helt ensam och har ingen support när det kommer till mjukvaran på servern, så att placera sin hemsida på en VPS är oftast för svårt och tar alldeles för mycket tid för gemene man.

Är man intresserad av att själv placera sin hemsida på en VPS så kan man kolla in Svenska Glesys, eller de utländska gigaterna Amazon AWS och Google Cloud.

4.3 Managed hosting

Ett relativt nytt alternativ till shared hosting och VPS är managed hosting, vilket är just den typen av hosting som vi här på Templ erbjuder.

Denna typ av webbhotell erbjuder modernare infrastruktur än shared hosting och därmed kortare laddningstider, förbättrad säkerhet och minimal downtime, och eftersom managed hosting fokuserar på enbart WordPress så kan man också förvänta sig bättre support.

Managed hosting ger en mycket bra prestanda samtidigt som man slipper själv hålla på och pilla med optimeringar på servern och sköta saker så som backuper själv.

Medan vi är först på den svenska marknaden att erbjuda managed WordPress hosting så finns det flera utländska alternativ så som WPEngine och Pagely.

4.4 Sökkriterium webbhotell

Oavsett vilken typ av webbhotell du väljer så tycker vi att du bör leta efter dessa funktioner/specifikationer när du väljer webbhotell:

• PHP 7.4: Varje ny version av PHP kommer vanligtvis med hastighetsoptimeringar så ju nyare version du har tillgång till desto bättre. I dagsläget är det PHP 7.4 som är den senaste stabila versionen.
• HTTP/2 (eller ännu bättre: QUIC eller ”HTTP/3”): Många känner inte ens till att det finns olika versioner av HTTP-protokollet, men faktum är att det är en tungt vägande faktor för hur snabb din hemsida är. HTTP/2 klarar av att hantera flera parallella nedladdningar än dess föregångare, och det finns dessutom ett ännu nyare protokoll som heter QUIC och som är ännu snabbare och kandiderar till att senare komma att kallas HTTP/3.
• Nginx eller LiteSpeed över Apache: Alla webbhotell använder sig av någon bakomliggande programvara på deras webbserver. Apache är den äldsta och än idag den mest populära, men idag finns det modernare alternativ som har stora fördelar när det kommer till hastighet och skalbarhet, nämligen Nginx och LiteSpeed.
• Server cache: Det är alltid möjligt att installera olika cache-plugins för att snabba upp WordPress, men ett PHP-baserat cache-plugin kommer aldrig att bli lika snabbt som en cache som körs direkt på servern (mer om detta senare i artikeln), och det finns också andra typer av cache för att snabba upp PHP som måste köras på server-nivå så som Redis och ElasticSearch.
• Stagingmiljö: En funktion för att enkelt kunna sätta upp en kopia av sin hemsida att använda som testmiljö underlättar så att man enkelt kan testa nya inställningar, plugins och optimeringar utan att behöva riskera att man förstår något på sin skarpa hemsida och stör ens besökare.
• Servrar nära dina besökare: För att en hemsida ska ladda så snabbt som möjligt så är det viktigt att du placerar din hemsida på ett webbhotell vars servrar ligger nära dina besökare. Med andra ord är det mycket bättre att du väljer ett webbhotell med servrar i Sverige eller andra närliggande länder, snarare än ett webbhotell med sina servrar i ex. USA.
• CDN: Vi kommer gå mer in på djupet med fördelarna med CDN senare i denna guide, men det kan vara bra att känna till redan nu att vissa webbhotell inkluderar CDN i deras priser medan andra gör det inte, så du gör bäst i att välja ett webbhotell där det ingår istället för att behöva betala extra för det senare.

5. Välj dina plugins noga

En annan förutsättning för att ha en så snabb hemsida som möjligt är att hålla antalet plugins som du installerar på din sida till ett minimum. Visst, alla plugins bidrar inte till att göra WordPress långsamt, men i regel är det så att ju fler plugins man har installerat desto långsammare blir hemsidan.

Medan många WordPress-plugins lägger till funktionalitet som vi inte kan vara utan så bör man också ha de negativa sidorna som många plugins medför, vilka kan vara:

• Tynger ner databasen – Många plugins lägger till nya tabeller i databasen och lägger till många nya värden i wp_options vilket kan göra din databas trögare.
• Lägger till JavaScript och CSS-filer på samtliga sidor – Många plugins lägger inte bara till JS och CSS-filer på sidor där de faktiskt används utan på samtliga sidor på din hemsida.
• Potentiell säkerhetsrisk – Plugins från mindre seriösa utvecklare och som dessutom uppdateras sällan eller aldrig är en potentiell säkerhetsrisk för din sida.

Ytterligare ett problem med att installera plugins som man egentligen inte behöver är att även om man avinstallerar ett plugin i WP Admin så lämnar de typiskt efter sig spår i databasen, vilket förstås gör databasen större och kan även göra din sida slöare, detta trots att du avinstallerat pluginet.

Vi rekommenderar att du går igenom de plugins som du redan har installerat på sida idag och ta bort de som du verkligen inte behöver, och undvik i fortsättningen att installera något som verkligen inte är ett måste.

6. Städa och optimera sidans databas

Med tiden så tenderar en WordPress-databas att växa i storlek, detta eftersom ju mer man arbetat med sidan och ju mer data ens hemsida lagrar desto större växer sig databasen. Därför är det bra att med jämna mellanrum städa och optimera sin sidas databas.

Med en välstädad och optimerad databas så slipper sidan tyngas ner av en massa lagrad information som inte behövs och sidan kan ladda snabbare.

6.1 Städa databas

Viss tillväxt av ens databas är förstås helt normalt och nödvändigt men ofta finns det väldigt mycket information som inte används sparad i ens databas. Genom att rensa sådan data med jämna mellanrum så kan man hålla databasen så liten som möjlig och därmed se till att ens hemsida kan laddas snabbare.

Några exempel på saker som ofta kan tas bort från ens databas är revisioner, automatiska utkast, utgången tillfällig data (transients), inlägg i papperskorgen samt övergiven metadata.

När vi på Templ har optimerat hemsidor och städat databasen så är det inte ovanligt att vi fått ner databaser i 50-90% av dess ursprungliga storlek, vilket förstås kan göra massiv skillnad på hur ens hemsida presterar.

För att enkelt kunna städa sin databas så har vi skapat pluginet Templ Optimizer. Pluginet är helt kostnadsfritt och gör det enkelt att uföra många av de knep som vi länge använt för att optimera hemsidor.

Templ Optimizer kan ta bort innehåll i databasen som inte används och kan göra underverk på dess storlek.

Kom ihåg att innan man gör några ändringar på sin databas så är det att rekommendera att ta en backup först.

6.2 Optimera databas

Utöver att städa databasen på onödigt innehåll så finns det även andra optimeringar man kan utföra på sin databas.

En sak man kan optimera är att konvertera databastabeller av typen MyISAM till InnoDB istället. InnoDB är en nyare typ av tabeller och som presterar bättre, i synnerhet när det kommer till multitasking och att klara av att göra fler saker samtidigt.

Med hjälp Templ Optimizer så kan man konvertera MyISAM till InnoDB med ett klick. Även här är det viktigt att ta en backup först.

I vårt plugin finns också en annan knapp för att optimera sidans databas (som heter ”Optimize tables”) och den omorganiserar den fysiska lagringen av databasens innehåll, vilket kan reducera dess storlek och också snabba upp den ytterligare.

7. Optimera WordPress-inställningar

Om man kollar under Network-fliken i Chromes Developer Tools och filtrerar efter JS-filer så kan man där ofta se en hel del saker som man inte känner igen och som verkar onödiga.

På en testsida som vi satte upp så kunde vi identifiera flera JS-filer som vi vet att vi inte använder:

wp-embed.min.js
Ett arkiv som är jättebra för bloggar som behöver kunna baka in YouTube-videos i sina inlägg, men något som vi inte behöver på vår sida.

wp-emoji-release.min.js
Detta är ett JavaScript som konverterar textsmileys så som :-) till bildfiler istället, något som idag känns ganska onödigt när våra datorer och mobiler har inbyggt stöd för emojis.

För att ta bort dessa så lade vi till lite kod i vårt temas functions.php:

// disable wp-emoji
remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); 
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); 
remove_action( 'wp_print_styles', 'print_emoji_styles' ); 
remove_action( 'admin_print_styles', 'print_emoji_styles' );

// disable wp-embed
function my_deregister_scripts(){
  wp_dequeue_script( 'wp-embed' );
}
add_action( 'wp_footer', 'my_deregister_scripts' );

Efter att ha inaktiverat de WordPress-funktioner som vi ansåg som onödiga på vår testsida så såg resultatet ut så här:

Vi lyckades alltså spara in hela 7 requests och 404KB data bara genom att inaktivera ett par funktioner som vi ansåg som onödiga.

Vilka JavaScript som laddas på din sida beror på vilka plugins du har installerat och att veta vilka som inte används är inte alltid helt enkelt, så detta är något man ibland måste testa noga eller ta hjälp av en expert för att åtgärda.

8. WP Cron

Det finns en funktion i WordPress som utföra olika saker med bestämda intervaller som heter WP Cron. Den är exempelvis ansvarig för att kolla efter uppdateringar eller köra synkroniseringar med olika externa tjänster.

Ett ”problem” med denna funktion är att den från början körs slumpartat vid varje besök på ens hemsida.

Hos Templ gör vi istället så att vi ändrar detta beteende så att istället för att köras vid varje besök så är det istället servern som triggar WP Cron med jämna mellanrum. Det gör så att ens sida alltid kan ladda snabbare.

Fråga ditt webbhotell om de kan hjälpa till med detta, eller om du vill prova att sätta upp det själv så lägg in define('DISABLE_WP_CRON', true); i din sidas wp-config.php och sätt upp ett cronjob på servern som anropar wp-cron.php med jämna mellanrum, exempelvis så här:

wget -q -O - http://yourwebsite.com/wp-cron.php?doing_wp_cron >/dev/null 2>&1

9. Cache

Om du tidigare har hört något om hur du snabbar upp WordPress så är sannolikheten hög att du hört folk prata om cache.

Men, även om de flesta har hört talas om cachning så råder det stor förvirring kring vad en cache egentligen är för något och de olika typer av cache som kan användas för att minska din hemsidas resursanvändning, skala upp den för att klara av fler besökare och korta ner laddningstider avsevärt.

9.1 Page cache

Vad som gör WordPress och andra publiceringsverktyg så populära är just att de levererar dynamiskt innehåll som är enkelt att ändra och som dessutom kan anpassas efter besökaren.

Medan det förstås på många sätt är suveränt att innehållet på en WordPress-sida inte är statiskt så är det så att det tar längre tid och mer resurser att generera dynamiska sidor för varje besökare än vad det tar att servera statiska HTML-sidor.

Det är här som en page cache kommer in i bilden. Vad en page cache gör är att den lagrar sidor som genereras som statisk HTML, så att samma sidor slipper att generas på nytt av PHP och MySQL vid varje sidvisning. Därför kan användandet av cache snabba upp din hemsida avsevärt.

Att använda sig av en page cache har framförallt två stora fördelar:

• Minskad resursanvändning
• Sidor kan levereras snabbare till besökare (lägre TTFB eller ”time to first byte”)

Page cache med hjälp av plugin
Om du inte redan använder dig av någon cache idag så är det som tur är enkelt fixat i WordPress med hjälp av ett plugin. Det finns en hel uppsjö av olika cache plugin man kan kan välja mellan, och nedan har vi listat ett par olika alternativ som vi kan rekommendera:

• W3 Total Cache – Gratis
• WP Fastest Cache – Gratis & premiumvariant
• WP Super Cache – Gratis & premiumvariant
• WP Rocket – Premium

Page cache på server-nivå
Medan alla plugins som vi listade ovan gör tricket och låter dig använda dig av en page cache, så är det ännu bättre att använda sig av en cache-lösning som körs direkt på servern istället för som ett WordPress plugin.

En page cache som körs direkt på servern kommer alltid vara ännu snabbare och resurssnålare än en page cache som körs som ett PHP-baserat plugin. Vi på Templ, likt många andra premium webbhotell, erbjuder förstås page cache på servernivå.

Test av page cache:
För att kunna mäta hur stor påverkan varje optimering har så satte vi upp en testsajt och installerade det populära temat Flatsome.

Först så testade vi att ladda startsidan utan någon page cache aktiverad och då laddade startsidan på ca 0,7 sekunder och med en TTFB (eller Time To First Byte) på ca 75 millisekunder:

Sedan så aktiverade vi vår serverbaserade page cache och testade igen och då laddade sidan istället på ca 0,6 sekunder och TTFB på ca 16 millisekunder.

Time To First Byte är ett mått på tiden det tar från det att webbläsaren skickar en request tills dess att servern skickat första byten tillbaka. Denna tid inkluderar alltså tiden det tar för servern att generera sidan med hjälp av PHP och MySQL (så tillvida att man inte använder en page cache).

9.2 Object cache

En annan typ av cache som vi rekommenderar att använda är object cache. En object cache är en annan typ av cache som istället för att spara hela sidor så sparar den istället vanligt förekommande databasanrop till minnet och slipper på så sätt utföra samma databasanrop upprepade gånger.

Till skillnad från en page cache så har en object cache även påverkan på WP Admin och kan snabba upp din WordPress-sajt, speciellt om du har en stor databas innehållandes många blogginlägg, kommentarer, WooCommerce-produkter och ordrar.

Ett exempel på en populär object cache är Redis, vilket många webbhotell i premiumsegmentet erbjuder, och så även vi här på Templ.

Test av Redis object cache
För att lättare kunna illustrera fördelarna med Redis så installerade vi pluginet Query Monitor på vår testsida. Det pluginet låter oss se hur lång tid det tar för servern att generera en sida och även antalet databasanrop som krävdes för att generera en sida.

När vi testade att ladda startsidan på vår testsida utan Redis, och denna gång inloggad som admin så att vi får tillgång till data från Query Monitor så genererades sidan på 0,25 sekunder och 218 databasanrop utfördes:

Efter att vi aktiverade Redis så kunde sidan istället genereras på 0,17 sekunder och med hjälp av 72 databasanrop:

Vi sparade alltså inte mindre än 146 databasanrop på vår startsida och sidan kunde genereras 32% snabbare med hjälp av Redis. Inte illa!

9.3 Browser cache

En annan typ av cache som du bör använda på din hemsida är browser cache.

Vad en browser cache gör är att den sparar statiska filer i besökarens webbläsare och slipper på så sätt att ladda om samma filer om och om igen vid varje sidvisning. Detta kan vara både bilder, CSS-, JavaScript-filer och andra resurser som din hemsida är beroende av för att kunna visas.

Detta snabbar förstås upp din hemsida avsevärt för sådana besökare som klickar sig in på flera sidor på din hemsida, och det sparar också mycket bandbredd och därmed pengar. Vi rekommenderar alla att se till att använda sig utav browser cache.

Precis som med page cache så finns det många plugins till WordPress som fixar detta åt dig, om inte redan ditt webbhotell har skött denna konfigurering åt dig.

Några plugins som kan hjälpa dig med detta är:

• Leverage Browser Caching – Gratis
• W3 Total Cache – Gratis
• WP Rocket – Premium

Hur vet man ifall man använder sig av browser cache eller ej?
Du kan enkelt kolla ifall du använder nyttjar browser cache eller ej genom att kolla ifall s.k. ”expiry headers” är satta eller inte.

För att kolla det så kan du gå in under Network-fliken > klicka på någon av resurserna som hämtats > och se ifall du där kan se ”expires” under Response Headers eller inte. Ifall expires är satt så kan browser cache nyttjas.

Test av browser cache
För att försäkra dig om att du testar en sida utan att använda browser cache så kan du kryssa i ”Disable cache”-rutan under Network-fliken i Chromes Developer Tools och kolla hur stor datamängd som laddas hem vid varje sidvisning.

Vår testsida laddar totalt 1.9MB data om vi inte nyttjar browser cache:

Om vi istället kryssar ur ”Disable Cache” och laddar startsidan igen så ser det ut så här:

Genom nyttjande av browser cache så kan vi se att enbart 163KB läses in istället, vilket alltså är 91% mindre data och sidan laddade dessutom på under 0,5 sekunder istället för över 0,6. Browser cache gör alltså underverk för besökare som går in på mer än en sida.

10. Servera bilder i WebP-format

Det är oftast så att bilder utgör den största delen av den datamängd som hämtas när man besöker din hemsida, därför så är det väldigt viktigt att man jobbar med sina bilder för att ens hemsida ska ladda så snabbt som möjligt.

Här har också tekniken utvecklats ganska fort senaste åren och det finns numera flera olika (och för många även nya) bildformat så som WebP. WebP erbjuder effektivare komprimering jämfört med de traditionella JPG och PNG och kan minska bilders filstorlek med 25-35% helt utan försämrad bildkvalitet.

Genom att konvertera dina bilder till WebP så kan du ofta snabba upp din hemsida rejält genom att sidornas totala vikt minskas.

Här på Templ så kan vi konvertera bilder till WebP direkt på våra servrar utan att behöva installera något plugin till WordPress, och det är något som vi hjälper till med kostnadsfritt.

Har man ett annat webbhotell så finns det istället många plugins till WordPress som låter en konvertera bilder till WebP, och de två mest populära alternativen är i dagsläget:

• WebP Express – Gratis
• WebP Converter for Media – Gratis

Test av WebP-bilder
För att se hur stor del av den totala datamängden av en sida som utgörs av bilder så kan man öppna ens webbläsares Developer Tools och trycka på ”Img” över vattenfallet och se ”resources” på raden längst ner.

Vi lade upp 10st bilder på en testsida och jämförde den kombinerade storleken för alla bilder, före och efter WebP-konvertering:

Vi kunde alltså minska den totala storleken på alla bilder på vår testsida från 3.9MB till 1.9MB, vilket förstås kan ha massiv påverkan på ens sidas totala laddningstid.

Utöver att komprimera bilder så är det även viktigt att du kontrollerar så att bilderna laddar i rimlig storlek. Ibland händer det att man laddar upp bilder direkt från sin kamera till WordPress och att de laddas i sin fulla upplösning och då väger 5-10MB eller ibland mer.

11. Komprimering med gzip eller brotli

Gzip är en teknik som används för att komprimera data innan det skickas från webbservern till besökaren, och på så sätt minskar den totala datamängden så att sidor kan laddas snabbare. Komprimering med gzip har väldigt stor påverkan på storleken av textfiler så som css och js-filer.

De flesta seriösa webbhotellen aktiverar gzip-komprimering åt sina kunder redan, men för att vara på den säkra sidan så kan du bekräfta att resurser på din sida komprimeras med gzip genom att under Network-fliken klicka på en resurs och kolla under Response Headers så att det där ser ut så här:

Ifall ditt webbhotell inte har konfigurerat gzip åt dig redan så kan det vara så att en del cache-plugin löser den saken åt dig, men det beror på vilket webbhotell du använder. Ifall du är osäker så rekommenderar vi att du kontaktar ditt webbhotell.

Jämförelse, med och utan gzip
För att kunna jämföra skillnaden med och utan gzip så inaktiverade vi först gzip-komprimering på vår testsida, och resultat såg då ut så här:

Efter det så aktiverade vi gzip igen och vi kan då se att skillnaden är enorm:

Att använda gzip krympte alltså den totala storleken på sidan med över 50% vilket förstås kan ha stor påverkan på laddningstid på sidan.

För den som vill kunna nyttja ännu bättre komprimering än gzip så finns det en nyare och än mer effektiv komprimeringsteknik – brotli (eller bara br) vilket vi på Templ förstås erbjuder.

12. Använd CDN

CDN är en förkortning av Content Delivery Network och är ett nätverk av servrar placerade på olika platser runt jorden och som serverar statiska filer så som bilder, CSS och JavaScript m.m.

Fördelen med detta märks tydligast för besökare från andra delar av världen än just Sverige, då de kan hämta filer från servrar placerade i närheten av dem istället för att allt måste hämtas från andra sidan jorden.

Ifall ditt webbhotell inte har inbyggt stöd för CDN så finns det några populära alternativ från 3e part som du kan överväga:

• Cloudflare – Gratis & premiumvariant
• StackPath (tidigare MaxCDN) – Premium
• KeyCDN – Premium

Alla CDN-lösningar listade ovan är enkla att komma igång med. Det är bara registrera sig (och betala, om nödvändigt) och sedan konfigurera CDN i WordPress antingen med leverantörernas egna plugin eller med pluginet CDN Enabler.

För att testa fördelarna med CDN så använde vi oss av verktyget Pingdom och mätte tiden det tog att ladda vår testsida från San Francisco i USA. Utan CDN aktiverat såg det ut så här:

Och efter att vi aktiverat vår CDN så kunde vi snabba upp sidan med 33% och siffrorna såg istället ut så här:

En CDN har förutom fördelen att man snabbare kan servera resurser över hela världen också fördelen att den hjälper till att avlasta ens huvudserver som man vill ska ha så mycket lediga resurser som det bara går för att WordPress ska kunna nyttja så mycket kraft som möjligt och generera sidor snabbare.

Så oavsett ifall dina besökare enbart befinner sig i Sverige så har en CDN ändå fördelar och är något vi rekommenderar att använda.

Summering

Med hjälp av dessa relativt enkla knep så kan du lyckas förbättra din hemsidas hastighet och användarupplevelse ganska så dramatiskt, och därmed placera din hemsida högre i sökmotorerna.

Ifall du tyckte att denna guide var hjälpsam så uppskattar vi om du kunde dela artikeln med andra som du tror skulle ha användning för den.

Ifall du har fler tips på att snabba upp WordPress så får du jättegärna lämna en kommentar här nedanför.

Tack för att du läste!

Vi har alla hört hur viktigt det är att ens hemsida laddar snabbt och de flesta har nog använt verktyg så som Pingdom, Google PageSpeed Insights, GTmetrix för att mäta hur snabbt ens sida laddar. Men hur många är det egentligen som förstår mätresultaten som dessa verktyg presenterar?

I detta blogginlägg tänkte jag på ett så pedagogiskt vis som möjligt gå igenom vad de vanligaste förbättringspunkterna egentligen betyder på ren svenska samt vad man kan göra åt dem.

Nu kör vi!

Innehållsförteckning:

• Reduce DNS lookups
• Make fewer HTTP requests
• Avoid URL redirects
• Add expire headers / Leverage browser caching
• Enable gzip compression
• Use cookie-free domains
• Eliminate render-blocking resources / Defer parsing of JavaScript
• Serve images in next-gen formats

Reduce DNS lookups

Varningen ”Reduce DNS lookups” beror på att det hämtas resurser från ett ganska stort antal olika domäner när man laddar en sida. Bakom varje domän finns det en IP-adress och första gången en domän anropas så görs en s.k. DNS lookup så att besökarens dator vet vilken IP-adress som ligger bakom varje domän.

Varje domän kräver en DNS lookup vilket tar lite tid att genomföra. Det man kan göra för att förbättra detta är att gå igenom vilka domäner det hämtas resurser ifrån när ens sida laddas och se om det finns något onödigt som man kan ta bort. Kanske har du något plugin som du inte längre använder som hämtar resurser från en CDN?

Make fewer HTTP requests

Varje gång någon besöker din hemsida så laddas det alltid flera olika filer som exempelvis bilder, JavaScript och CSS-filer. Varje gång en fil hämtas så skickas en s.k. HTTP request från din webbläsare till servern där filernas hämtas ifrån, och ju fler filer som hämtas desto längre tid tar en sida att ladda – därav rådet ”make fewer HTTP requests”.

Medan närapå alla hemsidor kräver ett flertal filer för att ens fungera så är det förstås inte bra om det är för många resurser som behöver hämtas hem. Detta trots det faktum att HTTP2, som är standard hos alla seriösa webbhotell idag, är betydligt effektivare på att hantera många requests.

En vanlig åtgärd för att minska antalet requests, förutom att gå igenom exakt vad som laddas och ta bort ev. resurser som man inte verkligen behöver, är att kombinera CSS och JS-filer med varandra hjälp av plugin så som exempelvis Asset CleanUp, WP Fastest Cache m.m.

Avoid URL redirects

Detta är en varning som visas då adressen som man försöker mäta vidarebefordrar besökaren till en annan adress, eller att resurser som hämtas från tredje part har pekats om.

För att försöka få bort denna varning så bör man först kontrollera att adressen man skrivit in är korrekt och att man inte blandat ihop https:// med http:// eller att man glömt ett ”/” på slutet av adressen. Det är också en bra idé att kontrollera så att kopplingar med trejde part så som t.ex. Google Analytics, supportchatt och andra plugins är uppdaterade och följer utvecklarens senaste anvisningar.

Add expire headers / Leverage browser caching

Expire headers är något som sätts utav en webbserver som talar om för alla besökare hur länge filer som hämtas bör sparas i besökares webbläsare. Om expire headers inte är satta rå riskeras varje fil hämtas på nytt vid varje sidvisning, därav uppmaningen ”add expire headers”.

Hur man åtgärdar detta beror på vilket webbhotell man har och hur deras servermiljö ser ut, men oftast görs det genom att modifiera sin .htaccess-fil eller installera ett plugin som gör jobbet åt en.

Tyvärr så är det inte sällan externa resurser från ex. Google och Facebook som inte cache:as i besökarens webbläsare och som sänker ens mätresultat i detta avseende, och externa resurser har man ingen möjlighet att påverka annat än att överväga att ta bort dem.

Enable gzip compression

Gzip är likt det i folkmun mer välkända zip en kompressionsteknik som gör filer mindre och därmed snabbare att ladda. Gzip-komprimering på en hemsida gör så att istället för att varje fil hämtas i klartext så komprimeras de först till gzip-format vilket gör att mängden data som måste hämtas vid varje besök blir mindre.

Då gzip-komprimering är något som görs på servernivå så är det likt expire headers något som hanteras olika beoroende på ens webbhotell, men oftast med hjälp av plugin eller manuellt ändrade av ens .htaccess-fil.

Use cookie-free domains

En cookie ä ren liten fil som hemsidor först skickar till besökarens dator, ofta för att kunna komma ihåg vem besökaren är och för att kunna servera skräddarsytt innehåll för varje besökare. Efter att en cookie har sparats så skickas sedan besökarens alla cookies för den domänen man besöker med vid varje request, något som förstås kräver viss extra bandbredd även om vi cookies vanligen är väldigt små.

Cookies är en nödvändighet för att saker som varukorgar och inloggningar ska kunna fungera, men vad det gäller hämtning av statiska filer så skickas besökarens cookies med helt i onödan och därför kan man snabba upp något genom att servera statiska filer så som bilder, JavaScript och CSS via en CDN med en annan domän som inte sparar några cookies.

Eliminate render-blocking resources / Defer parsing of JavaScript

Varningen “eliminate render-blocking resources” visas när du har JavaScript eller CSS-filer som förhindrar sidan att så snabbt som möjligt bli synlig i besökarens webbläsare. Viss JavaScript och CSS-kod är inte absolut nödvändig för att en hemsida ska kunna visas och därför är det bättre att icke obligatorisk kod laddas på ett sätt som inte blockerar sidan att renderas i en webbläsare.

Man kan göra så att JavaScript laddas på ett sätt som inte är ”render-blocking” genom att använda sig av ”async” eller ”defer”-attribut som talar om för webbläsare att inte vänta på JavaScript-filer innan andra saker kan laddas.

För att få bukt på det här problemet så finns det en mängd plugins till WordPress som kan hjälpa till, men man bör ha i åtanke att det kan krävas en hel del pillande och testande innan man hittat exakt vilka JavaScript man kan mixtra med utan att oväntade problem på hemsidan dyker upp. Så kom ihåg att testa noggrant!

Några plugins som är värda att kolla in är Speed Boster Pack, Autoptimize, Async JavaScript samt Humming Bird.

Serve images in next-gen formats

Sedan en väldigt lång tid tillbaka så har JPG varit det mest populära filformatet för bilder på internet. Det blev snabbt väldigt populärt då det levererade väldigt bra komprimering vilket gjorde bilder mindre i storlek och snabbare att ladda. Men sedan en tid tillbaka så finns det nu en konkurrent till JPG – närmare bestämt WebP.

WebP erbjuder ännu bättre komprimering än JPG och möjlighet att spara 25-35% i storlek med snarlik bildkvalité. Utöver bättre komprimering så har WebP även andra fördelar över JPG så som stöd för animationer och transparens.

Då WordPress (ännu) inte har inbyggt stöd för bilder i WebP-format så kräver det hjälp från plugin och webbserver för att få det att fungera. Vi på Templ.io har hjälpt flera av våra kunder att konfigurera och komma igång med pluginet WebP Express och kan rekommendera det.

Sammanfattning

Med den här artikeln hoppas vi att vi har bringat lite mer klarhet i de mätresultat som de populära verktygen presenterar och gett dig några konkreta lösningar på hur du kan snubba upp din hemsida.

Om ni kommer på flera termer gällande hastighet så tveka inte på att fråga oss i kommentarerna nedan.