Här följer en sammanställning av tekniker som hjälper dig att öka din webbplats hastighet, vilket är något du absolut bör utforska.
Om din webbplats tar längre tid än tre sekunder att ladda kan det leda till förlorade intäkter och en lägre position i sökmotorernas resultat. Om den dessutom inte är tillräckligt säker, skapar du en öppning för hackare att angripa din webbplats, vilket kan skada både ditt rykte och din affärsverksamhet.
Säkerhets- och prestandaförbättringar är därför avgörande för att ge besökarna en bra och trygg användarupplevelse.
När man talar om prestandaoptimering nämns ofta åtgärder som att aktivera komprimering, förminska filstorlekar, utnyttja cachning, välja lättviktsteman samt att hålla antalet plugins till ett minimum.
Dessa metoder är bra, men det finns mycket mer du kan göra. Vi har i denna artikel listat fler tips som du kan använda oavsett vilken plattform du använder, exempelvis WordPress, Joomla, Magento, Drupal eller Node.js.
Låt oss undersöka vad du kanske redan har gjort och vad som eventuellt saknas.
Välj ett bra webbhotell
Ett vanligt misstag är att välja ett dåligt webbhotell eller en delad värdtjänst.
Personligen anser jag att det sällan är fråga om dåliga värdar i sig, utan snarare om extremt billiga abonnemang.
Det är något som inte stämmer när dina månatliga kostnader för webbhotell är lägre än vad en kopp kaffe kostar.
Man kan likna delad hosting med en fullsatt buss som ingen egentligen vill kliva in i, men som ändå fylls på grund av det ”lockande” priset.
Det som är mest attraktivt med delad hosting är de initiala rabatterna och den bristande transparensen kring hur många webbplatser som delar en och samma server.
I normala fall handlar det om hundratals webbplatser.
Detta leder ofta till prestandaproblem på grund av ”stökiga grannar” och många av dessa webbplatser får aldrig chansen att nå Googles första sida.
Därför bör du byta till VPS eller dedikerade servrar för projekt som är av större vikt.
Använd ett CDN
Ett CDN, eller Content Delivery Network, är det näst viktigaste steget efter att du valt ett bra webbhotell.
Det är nödvändigt för alla som har en global publik. En webbplats kan inte vara fysiskt placerad överallt samtidigt, den är bunden till en specifik plats. Avståndet spelar därför en stor roll när en besökare från Japan försöker nå din webbplats som finns i New York, USA.
Att ansluta sig till ett CDN som exempelvis Cloudflare löser problemet med lokalisering. Ett CDN lagrar kopior av din webbplats på sitt servernätverk och levererar innehållet från den närmaste servern. Detta minskar belastningen på den centrala servern som kan befinna sig långt bort.
Dessutom kan ett CDN erbjuda högre säkerhet än vad ett vanligt webbhotell kan tillhandahålla.
Aktivera IPv6
IPv6 är snabbare än IPv4. LinkedIn har noterat en förbättring på 40% i Europa och Facebook har uppmätt cirka 10-15% genom att övergå till IPv6.
Kolla in Googles graf över hur IPv6 används globalt.
Ungefär 42% av användarna ansluter till Google via IPv6, men endast 21,2% av webbplatserna är IPv6-aktiverade.
Cloudflare har upptäckt att webbplatser med IPv6 laddar 27% snabbare än de med IPv4.
Så, har din webbplats IPv6 aktiverat? Om du är osäker, finns det onlineverktyg som kan testa det.
Om inte, så här aktiverar du det.
De flesta CDN-leverantörer, som Cloudflare, Incapsula, CacheFly och AKAMAI, erbjuder IPv6. Du kan aktivera det via din kontrollpanel.
Om du inte använder CDN och har webbhotell på VPS som Linode eller DigitalOcean, kan du se här hur du aktiverar IPv6 i webbservrar som Nginx och Apache.
Att aktivera IPv6 skadar inte och ger en snabb förbättring på cirka 10% i minskad laddningstid.
Välj HTTP/3 eller HTTP/2
HTTP är den teknik som används för att ladda webbsidor när vi besöker en webbadress i en webbläsare.
Det började med HTTP/0.9 år 1991 och har därefter utvecklats till HTTP/2 och nu senast HTTP/3.
HTTP/2 erbjuder många fördelar jämfört med HTTP/1.1, som:
- Server push
- Multiplexing
- Resursprioritering
- Header-komprimering
- Låg latens
I dagsläget används det av 39,3% av webbplatserna och är sju gånger snabbare än HTTP/1.1. Genom att byta till HTTP/2 kan du förvänta dig att minska laddningstiden med 30 till 40%.
Kontrollera om din webbplats har stöd för HTTP/2.
HTTP/2 har dock sina nackdelar.
Till exempel lider det av ”head-of-the-line blocking”. Det innebär att problem med en TCP-anslutning kan blockera alla strömmar. Med UDP-baserade HTTP/3 påverkar däremot inte ett enda paketförlust övriga strömmar.
Dessutom möjliggör HTTP/3 lägre latens genom att undvika TLS-handskakning vid återanslutningar. Sammanfattningsvis ger HTTP/3 alla fördelar som HTTP/2 har, men utan dess nackdelar.
Kontrollera om din webbplats är kompatibel med HTTP/3.
Du kan söka efter HTTP/3- eller HTTP/2-stöd hos din webbhotellsleverantör. Alternativt kan din CDN-leverantör ha en enkel inställning för att växla till önskad HTTP-version.
Bildoptimering
Ingen vill mötas av en massiv textvägg, vilket gör bilder till en viktig del av varje webbsida. Å andra sidan kan bilder göra en webbsida tung och förlänga laddningstiden.
Lösningen är att använda lättare format som WebP eller AVIF. Det minskar inte bara storleken avsevärt (mer än 80% i vissa fall) utan bibehåller även bildkvaliteten.
Du kan antingen konvertera och ladda upp direkt i dessa moderna format eller använda en konverteringstjänst från tredje part som Optimole.
Minska antalet HTTP-förfrågningar
En webbsida laddas inte som en helhet, utan varje element, som text, bilder, CSS och JavaScript, laddas separat som HTTP-förfrågningar.
I övrigt lika fall laddas en webbsida med färre HTTP-förfrågningar snabbare än en med fler.
Därför bör man sträva efter att hålla antalet HTTP-förfrågningar så lågt som möjligt.
Min personliga erfarenhet med WordPress är att det hjälper att välja ett lättviktstema som GeneratePress. Dessutom bidrar det till en snabbare och säkrare webbplats att minimera antalet plugins.
Detta är dock ett ämne som kräver enskild genomgång.
Speciellt om du använder WordPress, bör du se över hur du kan minska antalet HTTP-förfrågningar.
Använd webbsäkra typsnitt
Vi vill alla att våra webbplatser ska vara unika och användarvänliga, och många väljer därför att byta till ett annat typsnitt.
Det finns många gratisalternativ, inklusive Google Fonts. Att använda dessa lägger dock till fler HTTP-förfrågningar, och om tredjepartsservern som tillhandahåller typsnittet går ner kommer din webbplats att återgå till standardtypsnitten.
För att undvika det hostar vissa webbplatsägare sina typsnitt direkt på sin server, vilket ger större kontroll. Men det innebär fortfarande att en fil måste laddas från din server till besökarens enhet. Det leder alltså till fler HTTP-förfrågningar, vilket påverkar prestandan, om än marginellt.
Det finns därför vissa webbsäkra typsnitt som du kan använda för att få en snabbare upplevelse utan att riskera att typsnittet ändras på grund av serverproblem. Dessa typsnitt är så kallade systemtypsnitt och finns tillgängliga på Windows, Mac, Linux, iOS och Android.
Här är några webbsäkra typsnitt:
- Arial
- Verdana
- Trebuchet MS
- Tahoma
- Times New Roman
- Georgia
- Impact m.fl.
Utnyttja cachning
Cachning innebär att data lagras lokalt. Det säkerställer att webbplatsen laddas så snabbt som möjligt vid återbesök. Experter rekommenderar ofta att man använder cachning för att minska laddningstiderna.
WordPress har till exempel många cache-plugins, som WP Fastest Cache. Det går även att använda webbläsarcache genom att redigera filen .htaccess.
Det är plattformsberoende, och det kan finnas olika sätt att implementera cachning.
Använd asynkron laddning
Jag har själv erfarenhet av detta från WordPress. Google Search Console varnade mig om att mina över 40 blogginlägg misslyckades med testet för grundläggande webbvärden.
Grundläggande webbvärden är Googles sätt att utvärdera en webbsida och är viktigt för alla som vill ranka högt i deras sökmotor.
För att förstå mer, se den här analysen av sidans laddningshastighet från en av adminvista.coms artiklar:
Tack vare våra WordPress-utvecklare klarade sidan dessa tester med god marginal.
I mitt personliga projekt misslyckades jag med Largest Contentful Paint (LCP) och First Contentful Paint (FCP). LCP var 3,3 sekunder och FCP låg runt 2,4 sekunder.
Som bloggare utan IT-bakgrund hade jag svårt att optimera det ytterligare. Jag hade vidtagit alla nödvändiga åtgärder: premiumtema, inga extra plugins, systemtypsnitt, WebP-bilder och molnvärd.
Det som hjälpte var en enda inställning i WordPress-pluginet Jetpack Boost:
Enkelt sagt laddas Javascript från tredje part asynkront genom att lägga till attributet async eller defer på taggen <script>. Det gör att skripten laddas separat i bakgrunden utan att blockera konstruktionen av sidan.
Detta enkla steg minskade mina LCP- och FCP-värden till 1,7 respektive 1,2 sekunder.
Jag tog även bort den utvalda bilden från inläggen och aktiverade ”Defer Non-Essential JavaScript” innan jag fick de angivna LCP- och FCP-värdena.
Minimera omdirigeringar
Helst ska det inte finnas några omdirigeringar för bästa möjliga webbplatsprestanda, men vi använder alla länk-omdirigeringar ibland.
Regeln är enkel: varje omdirigering lägger till lite laddningstid. För många omdirigeringar kan få besökaren att lämna webbplatsen, om du inte är Apples internetbutik där folk står i kö för att få den nya versionen.
Var försiktig med videor
Videor kan öka tiden som besökarna spenderar på din sida och bidra till att undvika monotona textmassor. De är en stor förbättring jämfört med bilder och är i många fall nödvändiga.
Det vanligaste sättet att använda videor är att bädda in YouTube-videor. Du kan jämföra två webbsidor med och utan YouTube-videor med Google PageSpeed för att se hur mycket dessa inbäddningar påverkar webbplatsens prestanda.
För att demonstrera har jag publicerat två inlägg på vår testwebbplats. Ett inlägg har en YouTube-video (utan annan text eller bilder) och det andra inlägget är tomt. Sedan jämförde jag dem med Google PageSpeed.
Ser du skillnaden i total blockeringstid, hastighetsindex, FCP och LCP? Det ökade den totala blockeringstiden med en hel sekund, vilket kan få besökarna att välja en konkurrent.
Jag körde även dessa två webbadresser i verktyget Pingdom Website Speed Test för att bekräfta resultaten och få mer detaljer.
En enda YouTube-video har alltså lagt till 23 extra HTTP-förfrågningar, ökat sidstorleken, laddningstiden och försämrat det totala prestandabetyget.
Det finns dock sätt att förbättra prestandan. För det första kan du använda asynkron laddning för videor, vilket minskar den totala blockeringstiden.
Du kan även använda lat laddning. Många WordPress-plugins för YouTube-inbäddningar kan hjälpa dig med det.
Slutligen är det bättre att bädda in videominiatyrer som endast laddar videon när den klickas på.
Förminska HTML, JavaScript och CSS
Även om det kan kännas som en liten detalj, kan förminskning göra stor skillnad.
Förminskning tar bort onödiga element från källkoden, som extra blanksteg, semikolon, kommentarer och radbrytningar, och gör allt mer kompakt.
Beroende på plattformen kan du behöva göra detta manuellt eller med ett verktyg. Det är dock bra att ha säkerhetskopior av standardversionerna eftersom det är svårt att arbeta med förminskad kod.
En dator kan läsa den kompakta koden utan problem och du kommer att se en liten förbättring i prestanda.
Använd webbkomprimering
Webbkomprimering fungerar ungefär som zip, men används för webbfiler för att minska laddningstider. Det stöds av moderna webbläsare.
En webbplats med aktiverad komprimering kommer att visa innehållet snabbare än en webbplats utan. Komprimeringen kan användas på HTML, JavaScript, CSS, bilder och kan i vissa fall minska sidstorleken med över 70%.
Det finns två alternativ: Gzip och Brotli. Ditt webbhotell har förmodligen redan implementerat ett av dessa.
Du kan testa komprimeringen för att se vilken som är aktiverad på din webbplats. Om det inte finns någon komprimering kan du be ditt webbhotell eller en webbutvecklare att implementera det.
Externa element
Man kan se detta som en utvidgning av avsnittet om HTTP-förfrågningar, men det behöver nämnas separat.
Externa element på en webbplats inkluderar allt som inte är en integrerad del av webbplatsen, som annonser, analysverktyg, plugins och forum.
Dessa element lägger till extra kod som skapar fler HTTP-förfrågningar och gör din webbplats tyngre och mindre användarvänlig.
Vissa element är nödvändiga och går inte att undvika. Men var minimalistisk och experimentera med olika tjänster för att välja de som påverkar prestandan minst.
En snabbare hemsida!
Webbplatsens prestanda är inte något som du fixar en gång och sedan glömmer. Internet utvecklas ständigt och det är viktigt att hålla sig uppdaterad och anpassa sig för att bibehålla hög hastighet och säkerhet.
Säkerhet är lika viktigt som hastighet.
Som WordPress-experter vill vi även lyfta några av de bästa säkerhetsmetoderna för WordPress.