Så här får du snabbare webbplats med LiteSpeed Cache för WordPress

Här på Oderland kör alla våra delade servrar på LiteSpeed. Det är en servermjukvara som är anpassad för extra prestanda. När du installerar WordPress hos oss kommer det med andra ord gå snabbt.

Det finns en mängd olika tekniker för att få webbplatsen att ladda ännu snabbare. Du har säkert hört talas om en del. Cache, CDN, optimering och mer. I vår stora guide till att prestandaoptimera din webbplats får du lära dig mer om vad de olika teknikerna är och vad de är bra för.

För att få ut maximal prestanda rekommenderar vi tillägget LiteSpeed Cache för WordPress. I den här guiden visar vi hur du ställer in för maximal prestanda, och berättar varför.

Vill du bara ha alla inställningarna? Då kan du ladda ner vår inställningsfil och importera direkt i tillägget. Du hittar den i slutet av den här guiden.

Den här guiden är anpassad för en single-site WordPress. Använder du multisite kommer några av inställningarna att finnas i nätverksadmin istället för på respektive webbplats.

Genom hela guiden kommenterar vi främst ändringar som avviker från de förvalda.

I slutet av juni kommer version 4.1 av LiteSpeed Cache för WordPress. Vi har anpassat den här guiden för de nya funktioner som finns där. Därför kommer enstaka funktioner kanske inte finnas i tidigare versioner. Du kan prova 4.0 redan nu genom att manuellt uppgradera till 4.0.

1. Varför LiteSpeed Cache för WordPress?
2. Generera en domännyckel
3. Cache
4. Optimera bilder
5. Optimera sidan
6. Optimera databasen
7. Crawler
8. Importera inställningsfil

Varför LiteSpeed Cache för WordPress?

Det finns massor av cache-tillägg för WordPress på marknaden. Så varför just LiteSpeed Cache för WordPress?

Jo, det är nämligen så att LiteSpeed Cache för WordPress är särskilt byggt för att samspela med LiteSpeed servern. När WordPress och servern kan jobba extra nära kan du också få ut extra bra prestanda.

Generera en domännyckel

En del av tilläggets funktionerna, exempelvis automatisk bildoptimering, kräver en aktiv domännyckel (domain key). Nyckeln är helt gratis.

Du genererar en nyckel genom att gå till LiteSpeed Cache > General och klicka på Request Domain Key.

När du gjort det kommer det ta några minuter innan du får en godkänd nyckel tillbaka från LiteSpeed. Normalt tar detta inte mer än 10-15 minuter. Ofta kortare än så.

Cache

Du hittar cache-inställningarna under LiteSpeed Cache > Cache. De är indelade i flera grupper.

Läs mer om vad cache är och vad det är bra för i vår stora guide att prestandaoptimera din webbplats.

1. Cache Control Settings

De globala inställningarna för cache styr om cachen är aktiverad samt vad som ska cachas. Standardinställningarna är bra och aktiverar alla de cache-komponenter som du typiskt sett vill ha.

Det vill säga:

1. Aktivera Cache.
2. Har du användare som kan logga in utanför adminpanelen? I så fall vill du aktivera ”Cache Logged-in Users”.
3. Aktivera cache för REST API
4. Aktivera cache för Login Page
5. Aktivera cache för favicon.ico
6. Aktivera cache för PHP-resurser
7. Inaktivera cache för mobilt så länge du har en vanlig responsiv webbplats. Om du har en helt separat mobilwebbplats kan du behöva slå på mobilcache. Hur vet du? Om du behöver fråga kan du lämna det här avstängt.

2. TTL

Inställningarna i TTL (Time To Live) sektionen bestämmer hur lång tid det ska ta innan cachen rensas och en ny aktuell version sparas ned.

Vi rekommenderar att du använder de rekommenderade värden som visas under respektive fält om du inte har några särskilda egna behov.

3. Purge

När du uppdaterar innehåll på din webbplats vill du såklart att cachen ska rensas. Annars kommer det gamla innehållet fortsätta synas för dina besökare. Det är ett vanligt cacheproblem.

För att underlätta kan du låta webbplatsen göra det här automatiskt.

Se till att rensning vid uppgraderingar är aktiverat.

För de allra flesta webbplatser fungerar standardinställningarna kring vad som ska rensas när du publicerar/uppdaterar innehåll. Skulle det vara så att du har exempelvis en widget med senaste inlägg som syns på alla sidor vill du istället rensa alla sidor när inlägg uppdateras.

4. Excludes

Inställningarna för excludes låter dig ange särskilda sidor på din webbplats som inte ska cachas av olika anledningar. Det här kan vara bra om du har enstaka sidor med innehåll som varierar specifikt för användaren.

Kör du WooCommerce? Då behöver du inte tänka på exkluderingar av din butik här. LiteSpeed Cache för WordPress kommer nämligen automatiskt ta hänsyn till sidorna i WooCommerce och se till att cachen funkar fint och exkluderas bland annat i varukorgen.

5. ESI – Edge Side Includes

Eftersom cache handlar om att leverera samma förladdade sida till många användare är innehåll som är unikt för en användare ett problem. En lösning på detta är Edge Side Includes.

ESI låter dig sätta enstaka delar av sidan som dynamiska, exempelvis en mini-cart som visar total i kundvagnen och bland annat undanta just den från att cachas.

Att använda ESI är en mer avancerad funktion. Du bör testa i förväg hur det här påverkar just din webbplats, och ha lite kunskap om utveckling för att göra det bra.

6. Object Cache

Varje gång du laddar en sida från din WordPress-webbplats hämtas data ifrån databasen. Allt ditt innehåll och inställningar lagras i databasen. Med hjälp av object cache så cachas förfrågningarna som görs till databasen så att svaren på förfrågningarna kan komma snabbare.

Våra servrar har stöd för både Memcached och Redis. Vi rekommenderar att du använder Object Cache tillsammans med Memcached. I våra tester går det aningen snabbare.

Först måste du aktivera Memcached via cPanel. Det kostar inget extra. Läs mer om hur du gör här ›

Står det disabled? Om det står att memcached och redis är disabled behöver du aktivera det här. Följ den här guiden ›

Du behöver ange följande inställningar för våra servrar:

Host: /tmp/memcached
Port: 0

När du sparar ändringar ser du att ”Connection Test” i rutan för status har värdet Successful. Nu kan du sätta Object Cache till On.

7. Browser

För att dra nytta av webbläsarens inbyggda cache-funktionalitet behöver du signalera till den hur länge olika typer av innehåll ska lagras innan det hämtas igen.

Aktivera browser cache genom att sätta inställningen till On. Standardinställningen med att spara innehåll i 31557600 sekunder (1 år) är lagom.

Optimera bilder

Att aldrig behöva tänka på att optimera bilderna du laddar upp är bekvämt och ett utmärkt jobb för teknik att ”bara fixa” åt dig. Genom att aktivera bildoptimering blir bilderna så små som möjligt (i filstorlek) samtidigt som du inte tappar onödig bildkvalitet.

Läs mer om bildoptimering i vår stora guide till prestandaoptimering.

Bildoptimeringen i LiteSpeed Cache för WordPress jobbar på i bakgrunden. När du laddar upp en bild skickar webbplatsen iväg bilden för att bli optimerad. När det är klart ersätts den ooptimerade med den optimerade. Helt i bakgrunden.

När du aktiverar bildoptimering för första gången på en befintlig webbplats med många bilder kommer det ta en stund att jobba igenom alla. Systemet skickar automatiskt upp små grupper av bilder. Beroende på hur många bilder du har kommer det alltså ta en stund innan du märker av bildoptimeringen på din webbplats. Originalbilderna sparas som backup.

Under sidan LiteSpeed Cache > Image Optimization får du dels en överblick över statusen på optimeringen. Här ser du bland annat hur mycket utrymme du sparat på att optimera.

För att bildoptimering ska funka bäst rekommenderar vi att du ersätter WordPress inbyggda schemalagda händelser (cron) med ett eget i cPanel. Läs mer om hur du gör i vår guide.

För att komma igång med optimering går du till fliken 2. Image Optimization Settings. Vi rekommenderar att du kompletterar standardinställningarna med följande:

• Auto Request Cron ser till att bilderna skickas iväg för optimering automatiskt. Sätt därför denna till On.
• Create WebP Versions skapar automatiskt webp-versioner av bilder. De stödjs i vissa webbplatser och i regel mindre och laddar därför snabbare. Sätt denna till On.
• Image WebP Replacement ser till att automatiskt byta ut bilder mot webp-versionerna där det går. Eftersom du har valt att skapa WebP-versioner vill du även sätta denna till On.

Optimera sidan

Du vinner en hel del på att optimera själva sidan och koden för att vara så liten och smidig som möjligt. Ju mer onödig kod som inte används som du laddar in, desto långsammare går det.

Vill du veta mer om varför optimering av sidan är bra och vad det är? Läs då mer i vår stora guide till prestandaoptimering.

När du går igenom den här avdelningen, tänk på att hela tiden testa din webbplats noggrant. Hur bra det kommer gå att optimera CSS, JavaScript och HTML beror på hur bra kodade det tema och de tillägg som du använder är. Om sidan ”går sönder” rent visuellt när du aktiverar något av alternativen behöver du backa och slå av det.

Optimera CSS

Vi kan dela in optimeringen av CSS i tre huvudsakliga delar:

1. Minifiera koden genom att ta bort onödiga tecken, kommentarer och mellanrum.
2. Slå ihop filerna och ta bort oanvänd kod.
3. Ladda in CSS asynkront, det vill säga först när den behövs.

Du vill i princip alltid slå på minifieringen av CSS (”CSS Minify”) och det ställer i regel inte heller till några problem. Aktivera även CSS HTTP/2 push samt sätt Font Display Optimization till Swap.

Idag är det inte så viktigt med få antal filer som det var förr. Webbläsare laddar in dem parallellt vilket gör att det till och med kan gå fortare med flera mindre filer än en stor. Genom att slå ihop CSS-filerna i LS Cache för WordPress får du däremot möjligheten att ta bort onödig kod.

Tillägget scannar igenom varje sida på din webbplats och jämför HTML-koden med CSS-koden. Genom att leta efter de CSS-klasser som används tar den sedan bort det som inte används. Detta leder till en rejält reducerad mängd CSS som laddas in. Det hjälper laddtiden.

En varning här dock på sin plats. Det här kräver testning. Har du en väldigt dynamisk sida, med modal-fönster, popups eller andra funktioner som dynamiskt ändrar CSS-regler kan LS Cache missa denna kod. För att lösa det kan du själv lägga in dessa CSS-regler i ”UCSS Whitelist” under fliken ”7. Tuning”.

När sidor blir långa finns det mycket innehåll som kanske inte behöver laddas in direkt. Så även stilmallar. Genom att ladda in CSS asynkront försöker LS Cache först bedöma vilken CSS som behövs för att visa första skärmen snyggt, för att sedan ladda in resten i bakgrunden. Det ger snabbare laddtid.

Precis som med unik CSS kräver asynkron CSS att du testar laddningen noga. Även här kan du manuellt ange CSS-regler under fliken ”Tuning” som du alltid vill ska laddas in.

Optimera JavaScript (JS)

Även optimeringen av JavaScript kan vi dela in i tre huvudsakliga delar:

1. Minifiera koden genom att ta bort onödiga tecken, kommentarer och mellanrum.
2. Slå ihop filerna samt eventuellt även inline-kod.
3. Ladda JavaScript-koden fördröjt.

Du vill i princip alltid slå på alternativet att minifiera JavaScript-koden (”JS Minify”). Det brukar sällan ställa till med större problem. Aktivera även JS HTTP/2 Push.

När det kommer till att kombinera filer är det inte lika självklart. Om du använder många olika tillägg är risken för problem påtaglig. Samtidigt är det idag inte lika viktigt att minska antalet resurser som det var tidigare. Därför rekommenderar vi att du hoppar över att kombinera JavaScript-filer.

Att ladda JavaScript fördröjt har däremot en större prestandaeffekt. Genom att ladda in fördröjt laddas webbplatsen in fullt först. Sedan laddas skripten in. Det leder till bättre laddtid och en snabbare upplevelse för användaren.

Även detta kan ställa till med kompatibilitetsproblem med olika tillägg och teman. Vi rekommenderar att du provar ”Delayed” först, och i andra hand ”Deferred”.

Optimera HTML

Till skillnad från både optimering av JavaScript och CSS är optimeringen av HTML-koden mycket mindre problematisk. Du vill däremot precis som tidigare testa webbplatsen efter du aktiverat HTML-inställningarna.

1. Välj att minifiera HTML-koden (”HTML Minify”).
2. Aktivera DNS Prefetch Control. Det gör att anslutningar till andra domäner med andra resurser på (exempelvis spårningspixlar) går snabbare.
3. Om du använder google fonts, aktivera att ladda Google Fonts asynkront.
4. Aktivera att ta bort WordPress Emoji. Idag har webbläsarna och alla stora operativsystem bra stöd for emojis inbyggt.

Optimera media

Bilder och video är oftast det som tar längst tid att ladda in på en webbplats. Även om vi har optimerat bildfilerna så de är små i filstorleken. Genom att fördröja laddningen av bilder och video på webbplatsen kan vi få en snabbare laddtid. Först när hela sidan laddats in kommer bilderna att laddas.

Aktivera därför lazy load av bilder. Vi rekommenderar även att kombinera det med att aktivera Responsive Placeholder. Utan det kommer den fördröjda laddningen göra att sidan hoppar i laddningen, vilket påverkar både rankning och användarupplevelse negativt.

Aktivera även ”Add Missing Sizes” för att minska den hoppande effekten ytterligare.

En enfärgad platshållarbild är däremot rätt tråkig. Du har ju bilder på webbplatsen för att liva upp. Inte för att börja med att visa en tråkig ruta.

Här kommer LQIP-platshållare in i bilden. LQIP står för ”Low Quality Image Placeholder” och är en lågupplöst variant av originalbilden. Att ladda den går fort. Besökaren ser en rejält suddig variant medan den fullupplösta laddas in. Ett snyggt sätt att både få fördröjd laddning, men utan den tråkiga upplevelsen av platshållarbilder. Aktivera det genom att slå på LQIP Cloud Generator.

Till sist rekommenderar vi även optimering av iframes på samma vis. Med största sannolikhet använder du främst iframes bakom kulisserna för att bädda in videos från exempelvis YouTube. Deras innehåll behöver inte laddas in förrän de syns på sidan.

Lokala kopior av externa resurser

Det kommer alltid gå fortare att ladda en resurs från din webbserver istället från en extern källa. Resurser som typsnitt, spårningspixlar och liknande går lite snabbare när de ligger lokalt. Det är ingen jättestor effekt i sig, men många bäckar små ger stora resultat.

Du kan däremot inte bara spara ner filen och ladda in den själv. Du behöver löpande kolla efter uppdateringar och ändringar. Det här kan LS Cache för WordPress hantera automatiskt.

Vi rekommenderar därför att du aktiverar ”Localize Resources”.

Exkludera resurser och sidor för att lösa problem

När du aktiverar de olika optimeringsdelarna för sidan kommer du kanske stöta på problem med att en fil inte riktigt klarar av att bli optimerad. Istället för att skippa att optimera allt annat kan du istället välja att undanta den specifika filen.

Under fliken ”Tuning” hittar du en rad särskilda inställningar för att undanta särskilda filer eller sidor för att bli optimerade. Det här är ett bra sätt att lösa mindre kompatibilitetsproblem som uppstår i samband med optimeringen.

Optimera databasen

Att underhålla databasen löpande gör den både mindre i storlek och mer effektiv. Det här kan vara saker som att tömma papperskorgen, ta bort tillfällig lagring som gått ut, eller optimera databastabellerna. Efter ett tag kan du även bygga upp en stor versionshistorik med revisioner till inlägg och sidor som kanske kan rensas.

Under LiteSpeed Cache > Database hittar du olika optimeringar att göra kring databasen.

Vi rekommenderar att du optimerar tabellerna (”Optimize Tables”) löpande, samt tar bort spamkommentarer (om du har kommentarer aktiverat).

Du kan även se om några av dina databastabeller är på MyISAM och om de är det, konvertera till InnoDB. Det här är två format på databastabeller i MySQL. Vi rekommenderar InnoDB som lite snabbare och bättre i de allra flesta fall.

Om tabellen ”Databas Table Engine Converter” innehåller rader kan du konvertera dem till InnoDB med ett knapptryck. Tänk på att ta en säkerhetskopia före du konverterar tabellen.

Crawler

Den stora vinsten med optimering och cache är att vi kan ge samma statiska filer till många besökare istället för att ladda hela webbplatsen från grunden vid varje besök.

Någon gång måste den tillfälliga filen skapas. Det sker när en besökare når en sida där ingen tillfällig fil finns, eller när filen har gått ut. För den besökaren kommer laddtiden inte vara snabbare, utan långsammare.

Ett bra sätt att undvika det här är att förladda cachen. Genom att automatiskt gå igenom webbplatsen och skapa de tillfälliga cache-filerna regelbundet får alla besökare en cachad version. Det gör vi genom att slå på spindeln (Crawlern).

Innan du aktiverar crawlern rekommenderar vi att du sätter upp ett riktigt cronjobb istället för WordPress inbyggda.

Du hittar den under LiteSpeed Cache > Crawler och den kräver några enkla inställningar för att komma igång.

1. Under fliken Sitemap Settings anger du URL:en till din webbplats XML-sidkarta. Sedan WordPress 5.5 är det inbyggt i WordPress. Då kan du ange länken: https://mindoman.se/wp-sitemap.xml. Du byter ut mindoman.se mot ditt eget domännamn. Tryck sedan spara.
2. Under fliken Map klickar du på knappen Refresh Crawler Map. Beroende på hur mycket innehåll kan det här ta en liten stund. När sidan laddar klart ser du en lista över allt innehåll på din webbplats.
3. Nu kan du gå till fliken General Settings och välja att aktivera Crawlern. När du sparar inställningarna kommer den börja göra.

Tänk på att det nu kommer ta ett tag för crawlern att ta sig igenom allt ditt innehåll. Första gången kommer summeringssidan visa en stor siffra under de blå ”Miss” rutorna. Från och med andra gången kommer mängden Hits att öka.

Återställning av inställningar

Cacheinställningarna är mycket beroende på just din webbplats, ditt tema och din uppsättning av tillägg. Vissa samspelar bättre än andra, och ibland kan kombinationer skapa problem.

Om du har gått igenom guiden successivt har du löpande testat vad som funkar och inte. Då kan du smidigt backa senaste inställningen när det inte funkar.

Om du skulle behöva återställa inställningarna kan du göra det under LiteSpeed Cache > Toolbox och fliken Import / Export.

Importera inställningsfil

Om du inte orkar ta dig igenom hela guiden har vi tagit fram en inställningsfil med våra rekommenderade inställningar som du kan importera.

För att importera den gå till LiteSpeed Cache > Toolbox och fliken Import / Export. Välj filen från din dator och klicka import.

Tänk på att testa din webbplats mycket noga efter att du importerat inställningarna. Läs gärna särskilt avsnitten kring JavaScript och CSS-minifering i den här guiden. Inställningarna där kan behöva justeras beroende på just din webbplats. Du bör vara vaksam på vanliga fel som kan uppstå.

Ladda ned filen ›