Den ultimata guiden för snabbare WordPress – steg för steg
Hur får jag bättre hastighet på min WordPress-sida? Studier visar att för varje sekund extra det tar din hemsida att ladda ökar risken att besökaren lämnar sidan med 50% och istället går till en konkurrent. Tålamodet hos besökare är kortare än någonsin, så med snabbare laddningstider får du nöjdare besökare som stannar längre och öka […]
Hur får jag bättre hastighet på min WordPress-sida?
Studier visar att för varje sekund extra det tar din hemsida att ladda ökar risken att besökaren lämnar sidan med 50% och istället går till en konkurrent. Tålamodet hos besökare är kortare än någonsin, så med snabbare laddningstider får du nöjdare besökare som stannar längre och öka konverteringsgraden. Google har sedan en tid tillbaka även börjat ”straffa” långsamma sidor, därav vinner du även sköna SEO-poäng genom att optimera hastigheten. Här är mina bästa tips på hur man bygger en så snabb WordPress-sida som möjligt, både för dig som inte kan koda och för dig som jobbar med webbutveckling i WordPress.
0 =sämsta betyg 5 =bästa betyg
Betyg 5/5 av 9 gilla markeringar från Facebook
Innehållsförteckning
- Riktlinje för ett snabbare WordPress
- Hur mäter jag prestanda (laddningstid) på min WordPress sida
- Varför laddar min WordPress sida långsamt
- Snabba upp din WordPress utan några kodningsegenskaper (för WP-adept)
- WordPress optimering för prestanda – tips och råd (för WP-mästare)
- Finliret som gör skillnad – speed is the soul of every hompage (för WP-orakel)
- Sammanfattning – några sista råd & tips
Riktlinje för ett snabbare WordPress
WordPress är inte långsamt – det är allt du lägger till som gör din WordPress-sida långsammare. Tänk därför på dessa två grundprinciper när du bygger din hemsida:
Undvik onödig kod – All kod som läggs in har vid någon tidpunkt en inverkan på hur snabbt webbplatsen laddar. Om du själv kodar bör du alltid ställa frågan: behövs denna kod, just här och nu?
Plugin – En stor del av alla plugin/tillägg som finns till WordPress är dåligt kodade och innehåller ofta en mängd onödig kod. Ett plugin är många gånger ett enkelt sätt att utöka funktionaliteten i WordPress men ha i åtanke att plugin som inte uppdateras kan innehålla buggar och vara en säkerhetsrisk. Välj därför plugin med omsorg och tänk efter; behöver jag verkligen installera detta plugin?
10 vanliga plugin/tillägg som gör din WordPress-sida långsam
- iThemes Security
- Revolution Slider
- Google Analytics Dashboard for WP
- Contact Form 7
- WP Statistics
- Google XML SiteMaps
- W3 Total Cache
- Jetpack
- WPML
- WordFence
Listan som vi presenterar har en negativ inverkan på antingen hastighet eller säkerhet. Vi vill därför rekommendera andra lösningar istället för att ovannämnda plugin används. Det ska även tilläggas att man inte bör använda sig av så kallade Website Builder tillägg så som:
- Visual Composer
- Beaver Builder
- Divi Builder
- Elementor
- Fusion Page Builder
Dessa tillägg har också en negativ inverkan på din webbplats prestanda. I med lanseringen av WordPress 5 så kan jag tycka att dessa tillägg har spelat ut sin roll eftersom nya WordPress 5 har en inbyggd editor som stödjer att man drar in olika blocktyper för att bygga en flexibel layout.
Hur mäter jag prestanda (laddningstid) på min WordPress-sida
Du kanske tycker din hemsida laddar OK när du själv är inne på sidan. Detta är ofta en felaktig bild eftersom när du besöker din egen webbplats lagrar webbläsaren din webbsida i cacheminnet och hämtar automatiskt den så fort du börjar skriva en adress. Detta gör att det känns som att din webbplats laddas snabbt och omedelbart men så är inte verkligheten. Utgår vi istället från en användare som besöker din webbplats för första gången kommer den personen inte alls ha samma upplevelse. Faktum är att användare från olika geografiska platser eller olika uppkopplingar kommer att ha en helt olika upplevelse av hastigheten.
Det är därför viktigt att du testar din webbplatshastighet med hjälp av ett verktyg som:
Pingdom
PageSpeed Insights
Webpagetest.org
När du kör ditt hastighetstest kanske du undrar vad som är ett bra värde att sikta på? En bra sidladdningstid är under tre (3) sekunder. Det kan ibland kännas fånigt att jaga några millisekunder här och där men tänk då på det gamla talesättet ”många bäckar små gör en stor å”. Optimeringsarbetet handlar just om att göra små förändringar där summan av alla förändringar bidrar till en större effekt.
Varför laddar min WordPress-sida långsamt?
Nu när du har gjort ett hastighetstest har du fått en rapport som sannolikt innehåller flera förbättringsförslag och rekommendationer. Men det mesta i rapporten berörs av teknisk jargong och kan vara svårt att förstå. För att förstå vad som gör WordPress långsamt finns det fem grundläggande orsaker som ofta förekommer och därför är bra att förstå för att kunna analysera och förbättra sin prestanda på webbplatsen. De främsta orsakerna till en långsam WordPress-webbplats är:
- Webbhotell
- Sidstorlek
- Plugin
- Skript
- Externa resurser
Webbhotell – En korrekt uppsatt server ger grundförutsättningar till en snabbladdad webbplats. När ditt webbhotells server inte är korrekt konfigurerad påverkas din webbplatshastighet negativt. Sedan internets begynnelse så har vi använt Hypertext Transfer Protocol 1.1 (HTTP) för kommunicera mellan webserver och webbläsare. Nu finns det ett nyare och bättre protokoll som heter HTTP/2. Den stora skillnaden med HTTP/2 är att servern kan ta emot flera förfrågningar och svara på dessa i en “klump” (multiplexing) istället för en för varje förfrågan. Det är viktigt för prestandan att webbhotellet har stöd för HTTP/2. Om du vill veta mer om detta kan läsa vårt tidigare inlägg: Stöder ditt webbhotell HTTP/2 för bättre prestanda? Se även till att du väljer ett webbhotell som har kunskap om WordPress hosting. En generell regel när man väljer webbhotell är att man får alltid det man betala för (billigast är inte bäst helt enkelt).
Sidstorlek – Huvudsakligen bilder som inte är optimerade för webben. Genom att skala sina bilder korrekt sparar vi in viktiga byte.
Plugin – Som vi benämnde i riktlinje i början så kan ett dåligt kodat plugin sakta ner din webbplats och även vara en säkerhetsrisk.
Skript – Externa skript som annonser, Google font, typsnitt m.m. har stor inverkan på din webbplats prestanda.
Externa resurser – För varje förfrågan servern behandlar krävs det ett “uppslag” som tar tid. Det är av stor vikt att hålla nere anropen till servern: detta kan ske via externa och interna resurser men även undvika anrop mot databasen och hålla databasen städad och fin.
Nu när du vet vad som gör din WordPress-webbplats långsam, låt oss ta en titt på hur du förbättra det istället.
Snabba upp din WordPress utan några kodningsegenskaper (för WP-adept)
Som novis kan det vara skrämmande att göra tekniska förändringar på webbplatsen, speciellt om man inte är en teknik-nörd. Men oroa dig inte, du är inte ensam. Vi tänkte med några enkla tips och trix hjälpa dig att påskynda hastigheten på din hemsida enbart med några få klick helt utan kodning.
Installera ett cache-plugin
WordPress-sidor är dynamiskt uppbyggda. Det innebär att så snart en sida eller ett inlägg visas så behöver WordPress påbörja en process för att hitta den information som krävs (sökning i databasen), sätta samman den och visa den för besökaren. Denna process kan sakta ner din hemsida, speciellt om du har många besökare på en och samma gång. Det är därför en god idé att använda sig av ett cache-plugin. Istället för att WordPress vid varje sökning i databasen sätter ihop och visar rätt information så skapar ditt caching-plugin en kopia av sidan som lagras på servern. När sedan en besökare kommer in på sidan visas den cachade versionen istället för att WordPress återigen ska bygga ihop sida. Kort sagt, funktionen med caching-plugin är att ta en ögonblicksbild över hur sidan ser ut och presentera denna för besökaren istället för att låta WordPress bygga ihop sidan varje gång.
Det finns många bra WordPress-cacheplugin tillgängliga men vi rekommenderar att du använder Wp Fastest Cache. Det är inte svårt att sätta upp. Du behöver bara laddar ner pluginen och aktivera det så kommer dina besökare att märka skillnad.
Välj tillägg » lägg till nytt
Sök upp tilläget WP Fastest Cache
Klicka på installera och sen aktivera.
Kryssa i följande val och tryck spara. KLART!
Bildoptimering
Innan du laddar upp ett foto direkt från din telefon eller kamera rekommenderar vi att du komprimerar bilden. Det vanligaste problemet vi har med laddningstid är att bilder inte är optimerade, tar onödigt mycket plats och anpassas inte till rätt storlek. Tänk därför på följande:
Välj rätt filformat – Det finns olika bildformat och beroende på vilket du väljer blir bilderna olika stora. Välj .png för bilder med frilagd bakgrund, välj .gif för animerade bilder och välj nästan alltid .jpg då det är ett format som komprimerar bilden (60% i bildupplösning, sikta på en storlek runt 30-150kb) och med komprimering får du webbanpassade bilder som laddar snabbare. Det är även möjligt att base64-encoda bilder dock så blir dessa bilder inte sökbara i Google bildsök.
Välj rätt upplösning – En hemsida har oftast en bredd på runt 1200 pixlar, när du laddar in en bild från exempelvis en digitalkamera med 12 megapixel får du en storlek runt 4000 pixlar. Detta är onödigt stort. Välj därför att skala ner bilden till rätt storlek och glöm inte att dra ner upplösningen till 72 ppi och spara bilden med färgrymden sRGB.
Välj rätt skalning när bilden ska visas – Om en bildyta som är 500×200 ska visas på webbplatsen se då till att bilden som läggs in har det angivna måtten och lägg till width och height i bild- taggen. Använd srcset på img-taggar för att ladda in rätt storlek anpassade för varje enhet.
För att komprimera bilder rekommenderar vi följande gratis tjänster Optimizilla – stöd för JPEG eller PNG eller Squoosh – stöd för att skala om dina bilder samt komprimera det vanligaste bildformaten JPG, PNG och WebP. Ett bra riktvärde för storlek på bilden är mellan 30-150 Kb per bild.
Tänk på att ovanstående råd endast hjälper när du laddar upp nya bilder. Om du vill förbygga så att kommande uppladdning av bilder fungera rätt så installera pluginet Imsanity där du kan begränsa vilken storlek som får laddas upp. Eller imagify som komprimera bilden innan den laddas upp i mediebiblioteket. Vet man om att man använder extremt mycket bilder så rekommendera jag att istället kolla på en ”bild-streaming tjänst” exempelvis imgix. Där bilderna processas utanför din server och kan laddas in i valfri storlek via imgix egna API.
WordPress-optimering för prestanda – tips och råd (för WP-mästare)
Efter att ha installerat ett caching-plugin och optimerat dina bilder kommer du märka att din webbplats redan nu börjat ladda mycket snabbare. WordPress är ett open source-projekt som uppdateras regelbundet och vid uppdateringarna åtgärdas ofta säkerhetsproblem men även förbättringar gällande prestanda.
Håll allt uppdaterat
Som ägare av en webbplats byggd i WordPress är det ditt ansvar att hålla din webbplats uppdaterad både när det kommer till plugin och dina tema-filer. Innan du uppdaterar bör du vara noggrann med att det finns en backup av all filer, databaser. För en enkel återställning om något skulle gå fel.
Du kan enkelt se om WordPress behöver uppdateras genom att gå till Panel » uppdateringar. I denna vy samlas allt som behöver uppdateras.
För att får en tydligare bild om vilka plugin som behöver uppdatera, går till Tillägg för att få en översikt.
CDN – Content Delivery Network
Vi har tidigare nämnt att användare från olika geografiska platser kan uppleva olika laddningstider på din webbplats. Det beror på att platsen för dina webbservrar kan påverka din webbplats hastighet. Låt oss till exempel säga att ditt webbhotell har sina servrar i Sverige. En besökare som också är i Sverige kommer självklart att få snabbare laddningstider än en besökare som kommer från Japan.
Att använda en CDN-tjänst eller nätverket för innehållsleverans kan hjälpa till att påskynda laddningstiderna för alla dina besökare oavsett vart i världen de befinner sig. CDN är ett nätverk bestående av servrar över hela världen. Varje server lagrar ”statiska” filer som används för att skapa din webbplats. Med statistik innehåll avses bilder, PDF:er, javascript osv. Ett CDN-nätverk hanterar t.ex. inte PHP (det kan inte behandla dess kod).
Ett CDN nätverk består av massor av servrar över hela världen – för att kunna laddar innehållet närmast besökaren.
När en besökare laddar en hemsida med CDN så hanterar då dels din webbserver sidans utseende, innehåll, funktioner osv. CDN-tjänsten däremot levererar alla bilder, script m.m. Sidan går snabbare att laddar eftersom allt tungt innehåll mellanlagras på CDN-nätverket och kommer laddas från närmaste server besökaren befinner sig hos. Därför kommer din egna server också att bli snabbare eftersom CDN-nätverket gör mycket av arbetet. Det finns flera olika leverantörer på CDN och kostnaden brukar ligga på ett par hundralappar i månaden, några kända CDN leverantörer är:
- Stackpath
- Cloudflare
- Rackfish
- CDN77
Video på en webbplats
Det är allt vanligare idag att erbjuda videos på ens webbplats. Precis som du kan ladda upp bilder har även WordPress stöd för video och att visa dem i en inbyggd HTML5-videospelare. OBS! du bör aldrig ladda upp video till WordPress. Nackdelar med att ladda upp video direkt på webbservern är att det tar mycket plats och tar bandbredd för dig. En bättre lösning är att använda en videotjänst så som YouTube eller Vimeo där rörlig media enkelt kan användas genom WordPress inbyggda videoinbäddningsfunktion. Klistra helt enkelt in aktuell videos webbadress (från ex Youtube) direkt i ditt inläggs textfält och videon bäddas in automatiskt utan att du behöver laddar upp filen i mediabiblioteket. Precis som med bilder är det lika viktigt att komprimera sina videos till ett format anpassat för webben.
Visa sammanfattning och städa bland kommentarer
Som standard visar WordPress hela innehållet för varje artikel på arkivsidorna. Det betyder att din hemsidas kategorier, taggar och andra arkivsidor kommer att laddas långsammare. En annan nackdel med att visa fullständiga artiklar på dessa sidor är att användarna inte känner behovet av att besöka själva artikeln. Detta kan minska dina sidvisningar och den tid dina användare spenderar på din webbplats. För att förbättra laddningstider för arkivsidor kan du ställa in din webbplats för att visa utdrag istället för hela innehållet. Du hittar det under Inställningar »Läs och välj”. Inlägg i flödet visas som ”Sammanfattning” istället för ”Hel text ”.
Ändra under Inställningar » Läs och välj” Inlägg i flödet visas som till Sammanfattning.
Från början utvecklades WordPress som ett rent bloggverktyg där funktionen för kommentarer var självklart en viktig del för att hålla dialog med sina läsare. Det flesta webbplatser har idag inte behov av en kommentarsfunktion och därför bör den stängas av för att undvika att ”data” fylls på i databasen, vilket kan påverka laddningstiden. Går till inställningar » Diskussion, kryssa ur alternativen: ”Försök meddela alla bloggar som länkas från den posten”, ”Tillåt inkommande länknotifikationer från andra webbplatser (pingar and trackbacks) för nya inlägg” och ”Tillåt kommentarer på nya inlägg”. Går sedan till dina sidor och kryssa ur alternativet under diskussion: ”Tillåt kommentarer” och ”Tillåt trackbacks and pingar till den här sidan”.
Går till inställningar » Diskussion och gör följande inställningar som bilden visa.
Säkerställ så att det inte går att kommentera på dina sidor och inlägg.
Komprimera din hemsida med Gzip
GZIP är ett filformat som används för filkomprimering mellan servern och webbläsaren. GZIP-komprimering aktiveras på server-sida och möjliggör komprimering av storleken på din HTML, stylesheets och JavaScript-filer. Det fungerar inte på bilder. Genom att komprimera filer innan de skickas hjälper det hemsidan till bättre prestanda samt besökare med dålig uppkoppling får en bättre upplevelse. Detta är förmodligen en av de enklaste optimeringarna du kan göra när det gäller förbättra prestanda i WordPress.
Dubbekolla först så att din hemsida inte redan komprimeras då dubbel komprimering bara tar extra tid och inte ger någon nyttig effekt, du kan göra det via detta enkla test: ”Kontrollera om Gzip används på sin hemsida”. Om den inte redan komprimeras så kan du aktivera komprimering genom att lägga till nedanstående kodstycke i din hemsidas .htaccess-fil.
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
Finliret som gör skillnad – speed is the soul of every homepage (för WP-orakel)
Nu har vi börjat få fart på hemsidan och du bör ha fått en förbättrad laddningstid. Som vi sagt tidigare så räknas varje bråkdel av en sekund och för att får crème de la crème behöver du göra några fler ändringar. Följande tips är lite mer tekniska, med vissa som kräver att du ändrar dina webbplatsfiler eller har en grundläggande förståelse för PHP. Vi rekommendera därför att alltid göra en backup innan du ändrar i några filer.
Felsök din fellogg samt säkerställ att senaste PHP-version används
Alla webbservar har en fellogg (error_log) och det är ett av dina viktigaste verktyg för en så väl fungerande webbplats som möjligt. Alla PHP-fel registreras i felloggen och om något finns med där så bör du åtgärda det. Detta för att felaktig PHP är resurs-krävande och gör din webbplats långsammare trots att det kanske bara är en varning eller att det inte ger ett synligt fel. Oftast hittar du din fellogg i rooten på din server eller i en katalog med namnet logs. När det kommer till att felsöka sin error_log får man läsa rad för rad noggrant för att förstå vilken fil eller rad som är felaktig.
PHP 7.2+ för bästa prestanda
Nu när vi är inne på PHP så är det även viktigt att säkerställa att senaste versionen av PHP används, vi har tidigare publicerat ett inlägg om detta: ”Hög tid att uppgradera din webbserver” som kan guida dig. Kort summerat så brukar de flesta webbhotell ha en inbyggd funktion i deras kontrollpanel för att växla mellan olika PHP-versioner. Ni bör använda PHP-version 7.2 eller högre för bästa säkerhet och prestanda. Från och med december 2018 har PHP 7.0 slutat uppdaterats och kommer inte längre få säkerhetsuppdateringar desamma gäller för PHP 5.6 som också nått sitt slut på sin livslängd.
Enligt den officiella WordPress Stats, som samlar statistik över PHP-versioner som används i WordPress globalt så är den vanligaste PHP 5.6. Alltså en PHP-versioner som inte längre uppdateras. Om du jämför PHP 7.2 med PHP 5.6, kan den hantera tre (3x ) så många förfrågningar (transaktioner) per sekund, genom att uppdatera PHP-version kommer du påverka både säkerhet och snabbhet för din WordPress-sida.
Viktigt att tänka på innan du uppdatera din PHP-version är att först säkerställa så att ditt tema har stöd för en nyare PHP-version, innan du lansera det på din livemiljö.
cirkeldiagram över php-versioner som används av wordpress, från WordPress Stats 2020.
Undvika onödiga anrop till databasen
Tyvärr finns det många dåligt kodade WordPress-teman där ute. De som har utvecklat teman ignorerar god WordPress-praxis och gör direkta databasanrop eller en onödiga förfrågningar till databasen. Detta har en stor påverkan på servern och man ska därför undvika att köra för många SQL-frågor mot databasen.
exempel:
<html xmlns=
"http://www.w3.org/1999/xhtml"
lang=
"<?php language_attributes(); ?>"
>
<head profile=
"http://gmpg.org/xfn/11"
>
<meta http-equiv=
"Content-Type"
content="<?php bloginfo(
'html_type'
); ?>
charset=<?php bloginfo(
'charset'
); ?>" />
<html xmlns=
"http://www.w3.org/1999/xhtml"
lang=
"sv"
>
<head profile=
"http://gmpg.org/xfn/11"
>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=UTF-8"
/>
En bättre lösning är att ersätta PHP-funktionen med statisk information, för att undgå onödiga anrop.
Efter att ha använt WordPress ett tag kommer din databas att ha mycket information som du förmodligen inte behöver längre. För förbättrad prestanda kan du optimera din databas för att bli av med all den onödiga informationen.
Post-revisioner är en del som tar upp utrymme i databasen. En post-revision är en autosparad version av ett inlägg/sida som sparas i databasen så fort du ändrar eller öppnar ett inlägg/sida. Genom att begränsa antal revisioner som får sparas i databasen så vinner du utrymme och får mindre data att gå igenom. Du kan enkelt begränsa antalet revisioner genom att ändra i wp-config.php
där du kan lägga till följande kod:
define( 'WP_POST_REVISIONS', 4 );
Detta exemplet kommer att begränsa WordPress för att bara spara dina senaste fyra revisioner, vill du har fler ändrar du bara siffran till önskat antal.
Javascript
Javascript används idag flitigt på webben och det finns många javascript bibliotek (library) som inkluderas för att skapa ”häftiga” front-end lösningar. Några kända javascript bibliotek (library) är: jQuery, React och Angular. Tänk på att det ofta är resurskrävande att använda olika bibliotek, så håll dig till ett och inte flera. När en webbläsare ska tolka javascript så krävs det en resurskrävande process för att förstå och rendera ut scriptet, detta kan medföra att sidan upplevs långsam och att inget dyker upp på skärmen (fast i själva verket är det en tung javascript-fil som blockerar renderingen). Därav är det alltid en god idé att ladda in javascript längre ner på sidan, så att HTML-elementen kan prioriteras.
Följande rader kan läggas in i functions.php
för att alla javascripts ska flyttas från <header> till <footer>.
function
js_remove_head_scripts_to_footer() {
remove_action(
'wp_head'
,
'wp_print_scripts'
);
remove_action(
'wp_head'
,
'wp_print_head_scripts'
, 9);
remove_action(
'wp_head'
,
'wp_enqueue_scripts'
, 1);
add_action(
'wp_footer'
,
'wp_print_scripts'
, 5);
add_action(
'wp_footer'
,
'wp_enqueue_scripts'
, 5);
add_action(
'wp_footer'
,
'wp_print_head_scripts'
, 5);
}
add_action(
'wp_enqueue_scripts'
,
'js_remove_head_scripts_to_footer
'
);
CSS-filer
När en webbplats renderas så ska alltid HTML och stilen prioriteras och övriga funktioner kan läggas åt sidan för att laddas längre ner. Detta för att vi vill får något uppritat på skärmen så fort som möjligt. Vi nämnde tidigare att javascript kan laddas in senare, lika viktigt är att det stil-filen (style.css) laddas tidigt så vi kan få något uppritat på skärmen. Stylesheet bör därför ligga tidigt i HTML-dokumentet.
<link rel='stylesheet' href='https://wp-content/themes/mitt-tema/style.css' type='text/css' media='all' />
Tänk på att plugin ofta har egna css- och javascripts-filer som laddas in från externa/interna webbplatser. För att minska belastning och onödiga förfrågningar kan alla dessa filer slås samman till en fil.
DNS Prefetching
Varje gång en resurs hämtas så måste ett DNS-uppslag göras för att koppla samman IP-nummer med ett domännamn. Det går att lagra DNS-uppslag i webbläsaren för spara ytterligare tid. Du deklarerar detta genom att använda följande link-tagg. Exempel på vanliga resurser att lagra är Google Analytics, Google Font m.fl.
<link rel="dns-prefetch" href="//adress-som-ska-lagras">
Leverage Browser Caching
Alla webbläsare lagra information lokalt. Genom att utnyttja webbläsarens cachning du kan ange en tidsgräns på hur länge webbläsaren får lagra bilder, CSS och JS i dess lokala minne. På så sätt kan webbläsaren hämta mindre data när du laddar hemsidan, vilket förbättrar webbplatsens laddningshastighet. För att aktivera leverage browser caching så måste du skicka med HTTP headers för alla filtyper (som används) som ange en utgångstid på hur länge de får lagras i webbläsarens lokala minne.
Följande rader läggas in i din .htaccess
glöm inte att lägga till de filtyper och ange en utgångstid som gäller för din webbplats.
## Leverage Browser Caching ##
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
Några sista och generella tips och råd
Håll nere storleken på .htaccess-filen
.htaccess är en fil med regler för Apache, som bl.a. används för omskrivningar i WordPress. Vid ett besök läser webbservern .htaccess-filen vilket kan orsaka extra väntetid om filen är stor och innehåller många regler. Om man behöver särskilda omskrivningar så är det bäst att göra det via pluginet Redirection.
Google Font
Det är vanligt idag att använda sig av Google Font. Tänk på att endast ladda in den font och vikt (variant av tjocklek) som behövs på sidan. Alla extra typsnitt samt vikter kommer göra att din webbplats laddar långsammare. Google har tagit fram ett javascripts bibliotek (library) ”Web Font Loader” som laddar Google Font asynkront vilket är att föredra.
Ta bort emojis från WordPress
WordPress har stöd för att konvertera dina symboler till emojis. Exempel : -) blir ? . Detta sker automatiskt i bakgrunden genom ett javascript som körs vilket är en onödig resurs. För att stoppa emoji-filerna från att laddas i WordPress kan man lägga till några rader kod som stänger av funktionen.
Följande rader läggas in i functions.php
för stoppa javascriptet som ladda emoji-filerna i WordPress:
add_action( 'init', 'infophilic_disable_wp_emojicons' );
function infophilic_disable_wp_emojicons()
{
// all actions related to emojis
remove_action( 'admin_print_styles', 'print_emoji_styles' );
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_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
}
Säkerställ så att HTML är validerat
Korrekt skriven HTML är viktigt för en snabb rendering av sidan. För att kontrollera detta rekommendera vi att använda W3C Validator. Med rätt formaterad HTML-kod behöver inte webbläsaren arbeta lika hårt, vilket gör att det går snabbare.
Utnyttja de fria CDN nätverk som finns
Idag är det vanligt att ens WordPress-tema bygger på något ramverk exempelvis Bootstrap. Genom att ladda in dess funktion via ett CDN-nätverk sparar du både utrymme och prestanda. Ett annat exempel på fria CDN-nätverken som finns är för jQuery.
BOOTSTRAP
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
jQuery
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
Investera i ett bra webbhotell
I slutändan är det din leverantör av server som spelar en stor roll, var därför noga med att välja en så snabb leverantör som möjligt. Säkerställ att webbhotellet har stöd för HTTP/2 ( se vår tidigare inlägg: Stöder ditt webbhotell HTTP/2 för bättre prestanda? ). Tänk på att hastigheten till databasen är viktig samt att webbhotell gärna får ha en optimerad server miljö för just WordPress.
Sammanfattning
Jag hoppas att denna guide har varit av nytta för dig och jag vill därför göra en kort sammanfattning. Tänk på följande för att får en snabbladdad WordPress-sida:
- Ta bort alla onödiga tillägg/plugin som du inte använder.
- Använd Leverage Browser Caching.
- Bildoptimering är A och O.
- Håll plattformen uppdaterad.
- Använd CDN.
- Använd video korrekt.
- Stäng av kommentarer.
- Ha koll på din fellogg.
- Säkerställ PHP-version.
- Håll ner onödiga anrop till databasen.
- Städa databasen, håll den ren.
- Javascript använd med andakt och ladda in korrekt.
- HTML/CSS ren kod är en fröjd för prestandan glöm inte att validera med W3 Validator
- DNS Prefetching
- Investera i ett bra webbhotell.