Gör din WordPressida snabbare

En hemsida bör vara snabb. Besökande förväntar sig att inte behöva vänta på nästa sida. I tillägg blir du placerad längre ned i sökresultaten av Google om sidan är långsam. Du kan göra mycket för att sidan ska bli snabbare.

Senast uppdaterad 13 augusti 2021
Sidan innehåller annonslänkar från One.com

Htaccess

Vi börjar med att ta en titt på hur vi gör din hemsida snabbare genom att ändra i htaccess-filen på din server. Vi ska klistra in ett antal kodavsnitt för att snabba upp din sida. I koden jag ger dig har jag med kommentarer som gör det lättare att förstå vad den gör när du ser på filen om några år.

En del webbhotell, bland annat One.com lägger till en del kod för att snabba på din sida. Innan du lägger in koden under bör du se om det redan finns liknande kod i htaccess sedan innan. Se om det står något om cache och kompression.

Kom i håg att ta backup innan du börjar.

Cache

Cache betyder att delar av innehållet som ska laddas flera gånger lagras hos besökaren. Det gör att en bild som visas högst upp på alla sidor inte måste laddas hem varje gång man besöker en ny sida.

Klistra in följande kod:

#Cache
<ifModule mod_headers.c>
ExpiresActive On

# Expires after 1 month
<filesMatch ".(gif|png|jpg|jpeg|ico|pdf|css|js|json|htm|html|txt)$">
Header set Cache-Control "max-age=2592000"
</filesMatch>

# Expires after 1 day
<filesMatch ".(css)$">
Header set Cache-Control "max-age=86400"
</filesMatch>
</ifModule>

# Expire headers Begin
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# Expire headers End

# Cache-Control Headers Begin
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# Cache-Control Headers End

Komprimera text

Även text kan komprimeras så den tar mindre plats när den skickas till besökarens telefon eller dator.

Klistra in följande kod:

# Compress text and codes:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png

Tillägg

Ta bort onödiga tillägg

Tillägg gör din hemsida mer komplicerad. Komplicerade sidor är långsammare.

Många som startar en hemsida läser många tips om hur man ska göra. Den som skrivit tipsen har en bestämd åsikt om vilka tillägg man ska använda. Så installerar man tillägg efter tillägg. Den totala effekten kan vara förödande, även om varje kan vara värt försämringen i prestanda när man ser det isolerat.

Tänk igenom vilka tillägg du faktiskt behöver. Ibland har man en eller några få sidor som behöver en funktion, men tillägget kommer göra alla sidor långsammare. Är det då värt att ha den extra funktionen på några sidor?

Använd tillägget Plugin Performance Profiler (P3) för att se vilka tillägg som har störst effekt på din sida. Speciellt de som har stor effekt ska du tänka igenom igen om de behövs. Kan du hitta ett snabbare med samma funktioner? Jag har testat två olika tillägg med exakt samma funktion, men en krävde tio gånger längre tid för att laddas.

Använder du bara en liten del av tilläggets funktioner? Då kanske du kan hitta en annan som bara har det du behöver.

Glöm inte att ta bort P3 när du gjort ditt test.

Lazy load

Det är onödigt om saker långt ned på en sida laddas innan de behövs. Det kan göra att saker högt upp måste vänta.

Eftersom bilder tar mycket plats är det en sak som bör laddas senare. För att uppnå det kan du söka på ”Lazy load” bland tillägg. Det finns många som har den funktionen.

Om du vill testa hur detta fungerar kan du simulera att du har långsamt internet. Det gör du enklast med hjälp av att besöka din sida med webbutvecklarläge. I Chrome kan du trycka Ctrl + Shift + i. Du får då upp en del information till höger på skärmen.

Tryck på ”Network” och ”Network conditions”. Du kan nu välja hur långsam din uppkoppling ska vara. Välj något långsamt. Gå in på en lång sida med bilder långt ned. Vänta på att sidan laddat färdigt. Gå ned till de nedersta bilderna. Om du ser bilden, men den inte visas skarpt direkt har lazy load fungerat.

Det finns även tillägg som tillåter lazy load för kommentarer.

Google libraries

En del kod finns redan lagrad i besökarens dator. Då bör datorn plocka fram det istället för att ladda hem det från din server.

Sök efter ”google libraries” bland tilläggen så hittar du tillägg som hjälper dig med detta, till exempel ”Use Google libraries”.

Städa din hemsida

Med tiden samlas det en del onödigt i dina databaser och server. Det är bland annat utkast på inlägg, gamla versioner av inlägg, bilder du inte längre använder och rester från tillägg.

Installera tillägget WP Optimize. Det ger dig möjligheten att städa upp på din hemsida snabbt och effektivt. Glöm inte att ta backup först. Du kan bland annat ta bort utkast till sidor, gamla versioner (WordPress sparar gamla versioner så du kan gå tillbaka om det blivit fel), städa dina databaser, ta bort oanvända bilder med mera.

Optimalisera din kod

Koden på din hemsida kan antagligen förbättras. Installera WP Autoptimize som kan effektivisera din kod på många olika sätt.

Blir sidan snabbare när man gör sidan mer komplicerad?

Jag har skrivit tidigare i den här artikeln att man ska vara restriktiv mot vilka funktioner man lägger till. En mer komplicerad sida tar längre tid att ladda. Frågan är då om de tillägg och koder jag föreslagit att du ska lägga till är värt det? Blir sidan snabbare?

För att testa detta tog jag en sida som jag inte hunnit optimalisera och testade den med P3. Jag genomförde ett test innan och la sedan till det jag rekommenderar över. Därefter körde jag ett nytt test.

Testen visade att sidan blev 20 % snabbare efter att jag förbättrat sidan.

Komprimera bilder

Bilder bör komprimeras, även om du använder lazy load. Använd ett program där du kan välja komprimeringen innan du laddar upp filerna. Det gäller speciellt bannerbild och andra bilder som visas direkt när någon går in på sidan. Det finns även tillägg som komprimerar för dig efter att du laddat upp dem.

Använd rätt skrifttyp

En skrifttyp som ska laddas hem till webbläsare kan ta 250 kB. Du kanske har en skrifttyp till menyn, en till överskrifter och en annan i texten. Tillsammans tar det stor plats.

Välj en vanlig skrifttyp som redan är installerad på de flesta webbläsare. Det betyder bland annat:

  • Arial
  • Trebuchet
  • Tahoma
  • Times new roman
  • Impact
  • Verdana
  • Georgia

Ta bort oanvända teman

Ta bort teman du inte använder. Klicka på dem så du får du upp mer information om temat. Längs ned står det ”Radera”. Om du använder child theme måste det tema det är baserat på vara kvar.

 

 

 

Sidan bör nu vara betydligt snabbare. En snabbt sida känns betydligt proffsigare. En annan sak du bör göra för att din sida ska kännas proffsig är att byta favicon.