Home ⁄ Guider ⁄ Gör din WordPress supersnabb i 10 steg helt gratis (eller väldigt billigt) – Utförlig guide
Gör din WordPress supersnabb i 10 steg helt gratis (eller väldigt billigt) – Utförlig guide
Är din WordPress långsam? Det kan kosta dig mycket. Idag bjuder vi på en guide som hjälper dig att snabba upp din WordPress rejält. Följ dessa tio steg till en supersnabb WordPress-hemsida. Nio av tipsen är helt gratis.
Besökarna vill att din hemsida ska vara snabb. Mycket snabb. En undersökning visar att om det tar mer än 3 sekunder att ladda sajten så kan så många som 40 procent av dina besökare vända tillbaka till Google för att leta efter en konkurrerande sajt som laddas snabbare.
40 procent. Det är många förlorade besökare. Många förlorade relationer. Många förlorade affärer.
För att göra det ännu värre så rankar Google ner din sajt till en lägre position i sökresultatet om din bounce rateBounce RateOm besökare kommit till din sajt via sökresultatet hos en sökmotor, men snabbt går tillbaka till sökmotorns sökresultat, så kan man säga att besökaren studsar (engelska: bounce). Händer detta ofta så har din sajt en hög Bounce Rate. är hög, alltså om många besökare direkt går tillbaka till sökresultatet för att välja en annan länk.
Det betyder att i praktiken så förlorar du många fler besökare än 40 procent om din sajt tar mer än 3 sekunder att ladda. Google säger att du bör hålla laddningstiden under 2-3 sekunder.
Hur snabb är din sajt?
Det går snabbt att kolla och kostar inget. Ett bra verktyg är GTmetrix
Långsammare än 3 sekunder? Okej, då kör vi igång!
10 steg till supersnabb WordPress
Vi har listat de tio åtgärderna i prioriteringsordning. Den första optimeringen kommer att göra störst skillnad jämfört med om du inte gjort motsvarande åtgärd tidigare. Alla steg kan användas var för sig. Så om du redan har en cacheplugin installerad - hoppa bara över steg 1 och gå till nästa optimering.
I den här guiden har vi försökt att så långt det går bara rekommendera lösningar som är gratis. Undantaget är den sista punkten då det inte finns några bra CDN som är gratis.
1 Installera Cache Enabler
Tidsåtgång 5 minuter | Svårighetsgrad Lätt | Skillnad Stor
Vi rekommenderar pluginet Cache Enabler eftersom det är oerhört enkelt att konfigurera och ger väldigt bra resultat, ofta bättre än W3 Cache och Super Cache, som båda är betydligt mer komplicerade att konfigurera.
Cache Enabler
Betyg på WordPress.org: (av 128)
Aktiva installationer: 100,000
Gå till menyn Tillägg > Lägg till nytt och sök efter Cache Enabler
Klicka Installera, vänta till det är klart och klicka Aktivera
Gå till menyn Inställningar > Cache Enabler
Lämpliga inställningar:
Cache Expiry: 0
Cache Behavior: Markera Pre-compression of cached pages
Cache Exclusions: Om du kör WooCommerce så kan du lägga till sid-ID för sidorna Varukorg, Kassa och Mitt konto. Sid-ID hittar du genom att gå till Sidor, klicka på den aktuella sidan, och sedan titta vilken siffra du ser i webbläsarens adressfönster. Exempel: Om adressen till redigeringssidan är dinsajt.se/wp-admin/post.php?post=88&action=edit så är sidans ID = 88. Skriv då in 88 i fältet för Cache Exclusions. Separera flera sidor med komma.
Cache Minification: Välj HTML & Inline JS
Klicka Spara
Testa nu din sajt genom att öppna den i ett Inkognito-fönster. Surfa omkring och se om allt ser bra ut och fungerar som det ska. Kolla menyer och andra rörliga funktioner. Om något inte ser bra ut, gå tillbaka till inställningarna och ändra Cache Minification till läget HTML. Spara och testa sedan igen i Inkognito-fönster. Om du fortfarande har problem, gå tillbaka och ändra Cache Minification till Disabled. Spara och testa igen.
Om allt fungerar bra utom en viss sida som har speciella funktioner, ta reda på sidans ID enligt instruktionen ovan och skriv in den i fältet Cache Exclusions. Spara och sedan ska det fungera bra.
Om du vill testa sajtens snabbhet nu, se först till att ladda sidan i ett inkognitofönster igen, så att sidan garanterat laddas in i cachen. Sedan kan du testa den i GTmetrix igen.
Om det inte funkade bra för dig med HTML & JS Minification så är det inget att oroa sig för. Det kan ordnas i nästa steg.
2 Installera Autoptimize
Tidsåtgång 10 minuter | Svårighetsgrad Medel | Skillnad Stor
Autoptimize är en mycket trevlig plugin som åtgärdar flera av de varningar du ser i GTmetrix.
De flesta WordPress-sajter producerar flera CSS-filer. Just att de är flera gör sajten långsammare, eftersom varje http-anrop tar tid. Autoptimize lägger ihop alla dina stilmallar till en och på så sätt blir det bara ett http-anrop. I admin hanterar du varje css-fil för sig precis som vanligt. Det är bara i cachen som filerna är kombinerade till en. Dessutom komprimerar den din CSS genom att ta bort mellanrum och kommentarer.
Samma sak gör Autoptimize med dina javascript. Dessutom flyttar den inläsningen av javascript från header till footer, och komprimerar även själva html-koden.
En liten superplugin för hastighetsoptimering helt enkelt.
Autoptimize
Betyg på WordPress.org: (av 1408)
Aktiva installationer: 1,000,000
Optimera HTML-kod? Om det fungerade bra för dig att använda inställningen Cache Minification: HTML & JS i Cache Enabler (punkt 2), så ska du inte använda den här funktionen. Gick det däremot inte bra i punkt 2 så aktivera den här istället.
Optimera JavaScript-kod? Samma sak här. Om det fungerade bra att använda inställningen Cache Minification: HTML & JS i Cache Enabler (punkt 2), så ska du inte använda den här funktionen här. Om det inte gick bra i Cache Enabler så använd den här istället. Om du aktiverar den här funktionen, klicka knappen Spara ändringar och töm cacheutan att markera alternativet Optimera CSS-kod? Du vill nämligen inte testa flera saker samtidigt. Testa nu din sajt i ett inkognitofönster och kolla att allt ser bra ut.
Problemlösning
Får du problem på sajten efter att ha aktiverat Optimera JavaScript-kod? Gör så här:
Avaktivera alternativet Optimera JavaScript-kod och klicka Spara.
Gå till sidan där du såg problemet och ladda om sidan.
Högerklicka på sidan välj Visa källkod.
Leta redan på alla rader som laddar in javascript. Det kan du göra genom att trycka F3 och söka efter .js
Gör en lista med alla dessa filnamn.
Gå tillbaka till Autoptimize inställningar, aktivera Optimera JavaScript-kod
I fältet för Exkludera script från Autoptimize, klistra in namnet på ett av javascripten från din lista, och klicka Spara.
Testa sajten. Fungerar det så är du färdig. Fungerar det inte så prova att exkludera nästa javascript på din lista och repetera.
Aktivera nu alternativen Optimera CSS-kod samt Även aggregera inline CSS?
Klicka Spara ändringar och töm cache och testa sajten.
Problemlösning
Får du problem på sajten efter att ha aktiverat Optimera JavaScript-kod? Gör så här:
Avaktivera alternativet Optimera CSS-kod och klicka Spara.
Gå till sidan där du såg problemet och ladda om sidan.
Högerklicka på sidan välj Visa källkod.
Leta redan på alla rader som laddar in CSS. Det kan du göra genom att trycka F3 och söka efter .css
Gör en lista med alla dessa filnamn.
Gå tillbaka till Autoptimize inställningar, aktivera Optimera CSS-kod
I fältet för Exkludera CSS från Autoptimize, klistra in namnet på en av CSS-filerna från din lista, och klicka Spara.
Testa sajten. Fungerar det så är du färdig. Fungerar det inte så prova att exkludera nästa CSS-fil på din lista och repetera.
3 Utnyttja webbläsarens cache med .htaccess
Tidsåtgång 10 minuter | Svårighetsgrad ️ Klurigare | Skillnad Stor
Rubriken är en översättning av uppmaningen "Leverage browser caching" som Google PageSpeed och GTmetrix brukar ge. Det handlar precis som det låter om att utnyttja webbläsarens cachefunktion, och kan snabba upp laddtiden rejält.
För dig som vet hur man redigerar filen .htaccess så är detta enkelt fixat. Kopiera bara den här koden och klistra in i din .htaccess:
# BEGIN Browser Caching by Cloudax.se
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 2 month"
ExpiresByType text/javascript "access plus 2 month"
ExpiresByType text/html "access plus 2 month"
ExpiresByType application/javascript "access plus 2 month"
ExpiresByType application/x-javascript "access plus 2 month"
ExpiresByType application/xhtml-xml "access plus 2 month"
ExpiresByType image/gif "access plus 2 month"
ExpiresByType image/jpeg "access plus 2 month"
ExpiresByType image/jpeg "access 2 month"
ExpiresByType image/png "access plus 2 month"
ExpiresByType image/webp "access plus 2 month"
ExpiresByType image/x-icon "access plus 12 month"
ExpiresByType image/icon "access plus 12 month"
ExpiresByType application/x-ico "access plus 12 month"
ExpiresByType application/ico "access plus 12 month"
</IfModule>
# END Browser Caching by Cloudax.se
För dig som inte känner dig bekväm med att redigera filer så finns det förstås en plugin som gör detta åt dig. Men den koden som läggs in av pluginet är inte lika komplett som ovanstående kod. Pluginet heter Browser Caching with .htaccess och funkar så att det helt enkelt redigerar filen .htacess åt dig. När det är klart har den gjort sitt och kan du avinstallera pluggen.
Browser Caching with .htaccess
Betyg på WordPress.org: (av 7)
Aktiva installationer: 1,000
4 Optimera bilder automatiskt med fantastiska ShortPixel
Tidsåtgång 10 minuter | Svårighetsgrad Medel | Skillnad Stor
Det som tar mest tid att ladda från din hemsida till besökarens webbläsare är dina bilder. Här kan du spara massor av laddningstid genom att optimera dina bilder med ett smart optimeringsverktyg.
Det finns flera bra plugins som kan göra detta automatiskt i din WordPress. Vi rekommenderar ShortPixel eftersom du får flest funktioner gratis med den, och skulle du behöva uppgradera till premium så får du även där mest funktioner för pengarna. Vi tjänar inget på att rekommendera dem. De är bara bäst av de plugins vi testat. Gratisversionen ger dig optimering av 100 bilder per månad. Är du kund hos oss så säg till så ger vi dig 1000 extra image credits om du signar upp genom en länk som du får av oss.
Det är enkelt att komma igång med ShortPixel. Bara installera pluginet som vanligt genom att gå till Tillägg > Lägg till nytt och sök efter shortpixel. Klicka Installera och sedan Aktivera.
När du klickat Aktivera så kommer du direkt till en sida där du ska fylla i en API key. Vill du nyttja vårt erbjudande om 1000 extra image credits så ska du använda länken du får av oss när du skapar konto hos ShortPixel för att få din API-nyckel. Annars kan du bara fylla i din e-postadress i fältet ovanför och klicka Request key. Du kommer då till en sida som visar din API-key. Kopiera den, gå tillbaka och klistra in den i fältet API-key och klicka på Validate. Då kommer du till sidan Settings:
Compression type: Använd lossy compression - du kommer i de flesta fall inte att se någon skillnad mot originalbilden. Men om du är fotograf eller av någon annan anledning är väldigt petig med bildkvalitén på din sajt - använd lossless compression. Med den så blir bildkvalitén identisk med originalet - komprimeringen sker enbart på matematisk väg.
Also include thumbnails: Välj detta. Men om du vill spara optimering av thumbnails till nästa månad för att inte direkt göra av med dina 100 gratis image credits per månad så går det bra.
CMYK to RGB conversion: Ja abosolut.
Remove EXIF: Ta bort EXIF-information från bilden så blir den mindre. EXIF är data i bilden som talar om vilken kamera som använts, tidpunkt när fotot är taget o.s.v. Helt oväsentligt för de flesta webbplatser alltså.
Resize large images: Om du har laddat upp bilder utan att först ändra storleken på dem så är det här ett bra verktyg som du absolut ska använda.
OBS: Låt ShortPixel skapa webp-bilder
WebP (uttalas weppy) är ett nytt bildformat utvecklat av Google som ger väldigt små bildfiler med förlustfri komprimering. Om du har installerat Cache Enabler (se optimering 1) så har du inbyggt stöd för att visa WebP-bilder för de webbläsare som kan visa dem.
Så låt ShortPixel skapa webp-bilder - det äter inga extra image credits.
Klicka på fliken Advanced.
Klicka sedan knappen Save and Go to Bulk Process och låt ShortPixel börja jobba med din bildoptimering.
Observera att du behöver ha fönstret öppet medan ShortPixel optimerar.
Gå sedan till Inställningar > Cache Enabler och aktivera stöd för webp så här:
Klicka Spara ändringar och vips, så visas dina bilder som WebP i Google Chrome. Du har superoptimerat!
5 Fixa "Remove query strings from static resources"
En av de förslag du får när du hastighetstestar din sajt på Google PageSpeed, GTmetrix eller Pingdom, är att ta bort Query Strings From Static Resources. Det är egentligen inget allvarligt problem, men det är heller inte svårt att åtgärda. Och vi vill ju ha en supersnabb sajt, så här är lösningen:
Kopiera och klistra in den här koden i filen functions.php i ditt tema:
Om du inte känner dig bekväm med att ändra i functions.php eller inte vill använda ett barntema, så finns det ett plugin för dig som ordnar detta. Pluggen heter fiffigt nog Remove Query Strings From Static Resources. Du behöver bara installera och aktivera den. Inga inställningar krävs.
Betyg på WordPress.org: (av )
Aktiva installationer: 0
6 Inaktivera länknotifikationer (pingbacks och trackbacks)
Pingbacks och trackbacks gör din sajt långsammare. För att inaktivera denna onödiga funktion, gå till Inställningar > Diskussion och avmarkera rutan Tillåt inkommande länknotifikationer...
I WordPress 4.2 introducerades stöd för emojis. Tyvärr så introduceras också ett javascript för detta i din header som segar ner din sajt. Inte så mycket för sin storlek (bara ca 5 kB) men mer för att det innebär ett extra HTTP-anrop.
Om du vill använda roliga ikoner, satsa hellre på Font Awesome. Vi använder dem i det här inlägget, i raden under varje optimeringsrubrik. Font Awesome-figurer laddar väldigt mycket snabbare än emojis. Under punkt 9 visar vi dig hur du optimerar Font Awesome för ännu bättre prestanda.
Gör så här:
För att inaktivera emojis, gå till Inställningar → Skriva
Dessvärre så tar inte detta bort javascriptet wp-emoji-release.min.js. För att få bort det behöver du antingen installera en pluginet Disable Emojis eller (om du inte vill ha fler plugin) lägga till den hör koden i filen functions.php i ditt tema:
/**
* Disable the emoji's
*/
function disable_emojis() {
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' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );
/**
* Filter function used to remove the tinymce emoji plugin.
*
* @param array $plugins
* @return array Difference betwen the two arrays
*/
function disable_emojis_tinymce( $plugins ) {
if ( is_array( $plugins ) ) {
return array_diff( $plugins, array( 'wpemoji' ) );
} else {
return array();
}
}
8 Installera Lazy Load för bilder och videos
Lazy Load är ett väldigt bra sätt att snabba upp laddningen av dina webbsidor. Lazy Load fungerar så att det bara laddar in de bilder som är synliga above the fold på sidan. Resten av bilderna laddas in allteftersom besökaren scrollar vidare. Laddningen påbörjas innan bilden kommer upp så oftast märks ingen fördröjning. Dessutom så sparar Lazy Load bandbredd både för dig och besökaren, eftersom inte alltid alla bilder behöver laddas in.
Om du inte har Lazy Load inbyggt i ditt tema så finns det en utmärkt plugin som ordnar detta åt dig.
LazyLoad Plugin – Lazy Load Images, Videos, and Iframes
Betyg på WordPress.org: (av 136)
Aktiva installationer: 100,000
Installera, aktivera och gå till Inställningar > Rocket LazyLoad. Markera rutorna Images och Iframes & Videos och klicka Save changes. Radera cachen och kontrollera att bilderna visas som de ska på din sajt.
Rocket LazyLoad lazy-addar även YouTube-videos. Men detta kan du snabba upp ännu mer genom att installera en plugin som ersätter dina videos med en bild (videons förhandsvisningsbild). När besökaren klickar på bilden så laddas videon in.
Pluginet heter Lazy Load for Videos och vi använder det på den här sajten. Videon nedan är en YouTube-url direkt inklistrad i inlägget utan någon annan kod. Pluginet visar automatiskt videons preview-bild istället för videon. När du klickar på den så laddas videon in. Det här gör att sidan laddas betydligt snabbare.
Lazy Load for Videos
Betyg på WordPress.org: (av 105)
Aktiva installationer: 10,000
Installera och aktivera pluginet. Gå sedan till Inställningar > Lazy Load for Videos. Där kan du ställa in hur du vill att Play-knappen ska se ut på bilden med mera. Klicka på fliken YouTube så kan du även ställa in så att relaterade videos inte visas efter din video. Spara, rensa cachen och testa hur det funkar.
Om du använder Font Awesome för att visa trevliga ikoner på din sajt (mycket snabbare och snyggare än emojis), så ska du inte ladda dem med embed-scriptet som Font Awesome föreslår, som ser ut ungefär så här <scriptsrc="https://use.fontawesome.com/658796f008.js"></script>
En mycket snabbare lösning är att ladda in Font Awesome via CSS från OpenSource CDN. Lägg in den här koden i ditt temas header.php mellan taggarna <head> och </head>:
Det räcker. Nu kan du ladda fina ikoner bara genom att använda koden <i class="fa fa-hourglass-half" aria-hidden="true"></i> liksom vi gör på den här sidan (ikonerna under varje optimeringsrubrik). Dubbelkolla källkoden på din sajt så att inte temat eller något plugin laddar in Font Awesomes javascript.
Nu har du snabbat upp din WordPress sajt så mycket det går utan att betala en krona. Nästa steg är att koppla upp dig mot ett CDN. CDN står för Content Delivery Network. Det är en tjänst som ligger utanför ditt webbhotell, som laddar ner delar av din hemsida (bilder, CSS och js-filer) och distribuerar detta via ett globalt nätverk av servrar.
Det är framför allt två saker som gör att ett CDN snabbar upp laddningstiden av din hemsida:
Klicka för större bild. (Bild från KeyCDN)CDN:et känner av var besökaren befinner sig och distribuerar innehållet från den server som finns närmast besökaren. På så sätt minimeras nätverksfördröjningen.
CND:et tar över en stor del av belastningen från den webbserver som renderar din WordPress-sajt. Mindre belastning på din server/webbhotell ger en snabbare WordPress. Det gör också att du klarar dig längre med ett vanligt webbhotellskonto innan du behöver uppgradera till VPS eller dedikerad server.
Väldigt billigt för de flesta
Innan vi går vidare så vill du förstås veta vad det kostar. Hos de flesta leverantörer så betalar man för den mängd data som passerar genom CDN:et i GB räknat. KeyCDN kostar $0.04 /GB . För en normal hemsida utan stora mediafiler så blir kostnaden väldigt låg. De flesta kommer nog inte över minimumavgiften som är 49 dollar per år, även om du kopplar flera webbplatser till kontot.
Som Zone Name, ange ditt domännamn utan tld eller en förkortning om domänen är lång. I vårt fall heter zonen cloudax
Zone Type ska vara Pull
Ange origin URL = din sajts hela adress utan / på slutet.
Klicka Save så sparas zonen och börjar ladda in media från din sajt.
Gå till din sajt och installera pluginet CDN Enabler.
Den här videon visar hur enkelt det är att komma igång med CDN Enabler:
Din CDN URL som du ska ange längst upp i inställningarna, hittar du på sidan https://app.keycdn.com/zones/ i kolumnen Zone URL. Lägg till http:// i början.
Om du har en sajt med SSL som börjar med https i adressen så behöver du även ha https i din CDN-URL. Då behöver du gå till https://app.keycdn.com/zones/, klicka knappen Manage > Edit och aktivera Show Advanced Features. Finn inställningen för SSL och välj Shared.
För att testa, högerklicka på en bild på din sajt och välj Öppna bild i ny flik. Då ska bilden visas från CDN:et, alltså adressen ska börja med din CDN url.
Testa din sajt och låt oss få veta dina resultat!
Har du gått igenom de här tio stegen så bör din sajt vara betydligt snabbare än förut. Testa igen med GTmetrix . Det vore roligt att få veta vilka resultat du får. Posta gärna din före/efter laddningstid i en kommentar. Har du frågor så är de förstås välkomna också.
Uppskattar du inlägget? Dela då, så boostar du vår energi att skapa fler guider!
