Snabba upp din hemsida

Jon Täng
Av Jon Täng  |  31 juli, 2014

Jag har i dagarna laborerat lite med att trimma hastigheten på hemsidan genom bland annat ange några kommandon i .htaccess-filen. Det finns även plugin till WordPress som man kan använda för att få samma funktion utan att behöva utan själv redigera i .htaccess-filen. Men med fler plugin i WordPress-installationen blir hemsidan långsammare att ladda.

OBS! Se till att du har en fungerande kopia av din .htaccess-fil, för många av dessa inställningar kan göra att din hemsida slutar fungera om din server inte har stöd för vissa kommandon.

Komprimering med GZIP

Det första man kan göra är att se till att ens webbhotell/webbserver stödjer komprimering med Gzip. Detta kommer reducera laddningstider betydligt. Infoga följande stycke kommandon i din .htaccess-fil. Testa sen om din hemsida komprimeras med verktyget Check GZIP Compression och med hur mycket bandbredd som sparas. Min egen startsida komprimerades med 79,5%.

# MOD_DEFLATE
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

Använd cache-minnet

Nästa steg är att se till att besökarens webbläsare använder sig av cache-minnet. Ofta gör webbläsaren det automatiskt, om man inte har inaktiverat historik, men man kan hjälpa den genom att tala om för den vad och när saker ska hämtas. På så vis kommer hemsidan laddas fortare.

I stycket nedan finns några kommandon för .htaccess-filen för att styra cachelagringen. Google rekommenderar en tidperiod på minst en vecka (604800 sekunder) för text-sidor. Övriga filtyper har jag satt till 30 dagar (2592000 sekunder). Enligt Google ska man också använda sig av Etag eller Last Modified

Jag har även lagt till keep alive-kommando. Detta kommando gör att vid laddning av hemsidan kommer webbläsaren ladda hem filer från webbservern utan att göra en förfrågan till servern först.

<IfModule mod_headers.c>
Header set Cache-Control "max-age=2692000, public"
Header set Cache-Control "max-age=600, private, must-revalidate"
Header unset ETag
#Header unset Last-Modified
Header set Connection keep-alive
</IfModule>

<IfModule mod_expires.c>
## associate .js with “text/javascript” type (if not present inmime.conf)
AddType text/javascript .js 

ExpiresActive On
ExpiresDefault A2592000
ExpiresByType image/x-icon A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
ExpiresByType image/gif A2592000
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/html A604800
ExpiresByType application/xhtml+xml A604800
</IfModule>

I din WordPress-installation kan du använda dig av plugin som t.ex. W3 Total Cache eller WP Super Cache för att hantera både Gzip och cachelagring.

Komprimera bilder

Ofta så används allt för stora bilder på hemsidor. Bilderna kommer oredigerade direkt från kameran, eller är egentligen inte avsedda för att visas på en hemsida.

Innan uppladdning bör man i alla fall anpassa bilden i höjd och bredd, så den inte överstiger skärmens upplösning. 1920 x 1200 är idag ett ganska vanligt mått på skärmupplösning. Har man tillgång till Photoshop så finns verktyget Spara för webben som man bör använda. Spara också bilden i rätt filformat (se bild).

Google: hur man väljer rätt filformat för bild

Nästa steg är att använda ett smush-verktyg (även om man har använt Photoshops Spara för webben). Ett exempel på sådant verktyg är Smush.it, som finns både som webbtjänst och plugin till WordPress. Verktyget komprimerar och optimerar bilder förlustfritt, d.v.s. att komprimeringen inte ska påverka kvalitén på bilden.

Trimma din WordPress-hemsida

Optimera databasen
I WordPress autosparas det mesta som standard. Detta innebär att databasen blir full av poster som inte är direkt viktiga för hemsidan. Med pluginet WP Optimize kan du rensa upp databasen. Glöm inte att göra backup först.

För att frigöra ytterligare några resurser, för snabbare sidladdning, bör man stänga av pingbacks, trackbacks och revisions i sin WordPress-installation.

Diagnostisera resurser
Om du använder många plugins kan din WordPress-hemsida bli slö. Med pluginet P3 kan man göra diagnos över hur mycket resurser alla olika delar i din WordPress-installation använder.

Minifiera CSS- och JS-filer
Det tema och alla plugin som används på hemsidan inkluderar ofta en mängd CSS- och JS-filer, och ofta inte på rätt ställe. När många filer ska laddas blir hemsidan slö. Och ligger filerna i fel ordning kan vissa saker hindras att börja laddas, vilket gör sidan ännu mer slö. Med pluginet Better WordPress Minify kan man paketera/minifiera CSS- och JS-filer till ett färre antal laddningar och att de laddas på rätt ställe, vilket kommer snabba upp hemsidan.

Kom ihåg!
När du inte längre använder ett plugin, eller om det är ett plugin som inte har direkt nödvändig funktionalitet för hemsidan eller besökaren, avaktivera det (och helst avinstallera det) så det inte längre drar resurser från din hemsida.

Verktyg

Pagespeed insights

Check Gzip Compression

Smush.it

Läs mer...

Apache: mod_headersmod_deflatemod_expires

Google: Enable compression, Leverage browser caching, Optimize images

Jon Täng: digital marknadsförare och webbutvecklare

Jon Täng

Digital Marketing Specialist / Webbutvecklare

Jag är Marketing Specialist / Webbutvecklare på Bozzanova Reklambyrå i Vänersborg. Digital Marknadsföring, Sökmotoroptimering, Google Ads, Social Ads, WordPress och Webbutveckling är min vardag.

Copyright 2024 Jon Täng
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram