Hur man snabbar upp din webbplats

Om du är en nybörjare och ny webbplatsägare kommer du i de flesta fall inte att oroa dig för webbplatsens hastighet. 

När du har bygga din webbplats or starta din blogg, det kan kännas som att allt är på plats. Din sida är vacker, så det måste betyda att folk inte har några problem med att vänta ett par sekunder till för att låta den laddas ordentligt, eller hur?

Nej, så är det inte.

Enligt Google-forskning, ju längre tid det tar för en sida att ladda desto fler människor skulle överge en webbplats.

Dessutom har Google introducerat Web Core Vitals (som räknas som en rankningsfaktor för webbplatser) som går in ännu mer i detalj när det kommer till hastigheten på att ladda webbplatser. Ju snabbare din webbplats, desto bättre är dina chanser att komma till första sidan med Googles sökresultat.

14 steg för att förbättra webbplatsens hastighet

• Steg 1: Kör ett hastighetstest
• Steg 2: Få ett snabbt och pålitligt webbhotell
• Steg 3: Implementera en Content Delivery Network-tjänst (CDN).
• Steg 4: Förminska CSS- och JavaScript-filer
• Steg 5: Aktivera webbläsarcache
• Steg 6: Optimera och rensa WordPress-databasen
• Steg 7: Använd optimerade/premium och enkla teman
• Steg 8: Optimera alla bilder på din webbplats
• Steg 9: Lata ladda bilder och videor
• Steg 10: Förhindra bild hotlinking
• Steg 11: Värd för videor på tredjepartstjänster och ladda ner stora media
• Steg 12: Håll plugins på ett minimum/hitta plugins som saktar ner dig
• Steg 13: Kontrollera omdirigeringar på din webbplats
• Steg 14: Optimera innehåll (använd utdrag, dela upp långa artiklar och kommentarer, etc)

Steg 1: Kör ett hastighetstest

Innan du gör något är det viktigt att du gör ett ordentligt test. Även om du kan göra mycket även utan en, rekommenderar jag starkt att du kör minst ett hastighetstest så att du har ett riktmärke som hjälper dig att förstå hur bra din webbplats presterar och hur bra resultatet är efter att du har slutfört alla förbättringar steg.

Gratis verktyg

Lyckligtvis finns det gratis hastighetstester tillgängliga för alla. Du behöver bara välja en, ange din URL och låta verktyget utföra sin magi.

Googles PageSpeed ​​Insights

Eftersom de flesta människor optimerar sin webbplats för Google är det första verktyget jag kommer att nämna Googles PageSpeed ​​Insights. Det är ganska enkelt, och du kan få resultatet på några sekunder.

1. Öppen Googles PageSpeed ​​Insights.
2. Ange webbadressen till din webbplats.
3. Klicka på knappen "Analysera".

I mitt fall tog det så lite som 10-15 sekunder för testet att slutföras och visa mig resultaten som delas i skärmdumpen nedan.

Efter att ha sett det gröna numret på toppen där du siktar på att få en poäng på 100, kommer det att finnas flera andra segment du vill granska. De är:

• First Contentful Paint (FCP)
• Största innehållsrika färg (LCP)
• Kumulativ layoutförskjutning (CLS)

Alla tre element är en del av Web Vitals som nu ingår i Googles huvudmått som visar hur snabb eller långsam din webbplats är. Du kan lära dig mer om Web Vitals i vår guide om hur du optimerar din mobilsajt.

GTmetrix

Ett av de mest populära webbhastighetstesten är GTmetrix. Det är helt gratis och kan göras på mindre än en minut:

1. Gå till GTmetrix.
2. Skriv in hela webbadressen till din webbplats.
3. Tryck på knappen "Kör test" och vänta i cirka 30 sekunder.

Efter det får du ett betyg som visar hur snabb din webbplats är. Testet kommer också att visa dig detaljer som prestandan för din webbplats, dess struktur, samt webbviktigheter som nu är en central rankningsfaktor för Google. 

Om du inte redan aktivt har arbetat med att optimera din sajt för hastighet, är chansen stor att du inte får ett perfekt resultat. Men oroa dig inte, du kan arbeta mot det om du börjar följa alla stegen.

Steg 2: Få ett snabbt och pålitligt webbhotell

En snabb hemsida börjar med ett bra värdskap. Oavsett hur mycket du försöker leverera den bästa användarupplevelsen, om ditt webbhotell suger, kommer hastigheten på din webbplats att bli lidande.

Smakämnen bästa värdföretagen ta hand om allt, och det är inte nödvändigt att du förstår vad som händer bakom stängda dörrar. Från kvalitet och välskött hårdvara till regelbundet uppdaterade programvarukomponenter, det finns mycket som en värdtjänst kan göra för att förbättra hastigheten på din webbplats.

För att börja på rätt sätt, skaffa din webbplats värd Bluehost, ett av de sällsynta värdföretagen som officiellt rekommenderas av WordPress.org. År av erfarenhet och miljontals värdwebbplatser gör detta webbhotell till ett av de bästa inom sitt område – något som lätt kan översättas till att ha en robust webbplats.

Steg 3: Implementera en Content Delivery Network-tjänst (CDN).

Vår värld är en stor plats. Även om internethastigheterna har förbättrats drastiskt under åren, spelar det fysiska avståndet mellan datorer och servrar fortfarande en betydande roll för onlinehastigheten. Detta innebär att det i allmänhet går snabbare att ladda information från en server från ditt land än att ladda data från hela världen, precis som det är lättare för dig att köpa ett soffbord från IKEA i din hemstad istället för att behöva köra för att få ett i ett annat land .

Det är här Content Delivery Networks kommer in. De låter dig ha din webbplats på flera servrar över hela världen. CDN kan känna igen den närmaste platsen för varje individ som laddar din webbplats och laddar innehållet från närmaste server. Så, om en besökare försöker ladda din sida från USA, kommer de att få innehållet från en av USA:s servrar, medan någon som kommer från Europa kommer att ladda din sida via en server i närheten av dem, till exempel i London.

Om du är värd för webbplatsen på Bluehost, kan du hitta deras TrueSpeed ​​CDN inuti kontrollpanelen. Bara genom att konfigurera den kommer din webbplats att bli global och laddas snabbare för människor från hela världen.

Du kan också få CDN-tjänster från tredje part. De mest populära CDN är:

• CloudFlare
• KeyCDN
• StackPath
• Google Cloud CDN
• Rackspace
• CacheFly
• Amazon CloudFront

Steg 4: Förminska CSS- och JavaScript-filer

Moderna webbplatser är fyllda med CSS- och JavaScript-filer som arbetar tillsammans för att hålla webbsidorna snygga och fungera till användarnas fördel. Rad efter kodrad gör dessa filer onödigt stora, vilket snabbt kan sakta ner din webbplats.

Webbdesigners (samma personer som bygger mallarna som du till slut köper) gillar att hålla sin kod snygg. Det betyder att de håller koden snygg och lättförståelig. Men att ha dessa vita mellanslag, extra rader och tecken ökar bara filvikten, vilket enkelt kan minskas genom att förminska.

Här är ett exempel på enkel CSS-kod:

Det kan minimeras till detta:

Även om den här enkla skillnaden inte kommer att ha någon betydande inverkan på din webbplats, föreställ dig vad som händer när du har tusentals och åter tusentals onödiga blanksteg och linjer.

Lyckligtvis, för att förminska dina CSS- och JavaScript-filer behöver du inte gå igenom koden och göra ändringarna själv. Det finns plugins som gör detta automatiskt åt dig och ser till att allt fungerar korrekt:

Steg 5: Aktivera webbläsarcache

Genom att aktivera webbläsarcache tillåter du att innehållet lagras i människors webbläsare. Det betyder att om en besökare bestämmer sig för att komma tillbaka till din webbplats behöver de inte ladda ner alla filer från servern igen eftersom de redan har dem lagrade i sin webbläsare.

Webbläsarcache kan avsevärt förbättra hastigheten på din webbplats för återkommande användare.

För att aktivera detta på din webbplats behöver du bara ett gratis WordPress-plugin som:

• W3 Total Cache
• WP Snabbaste Cache
• WP Super Cache

Om du till exempel använder W3 Total Cache, är allt du behöver göra att installera plugin:

Insticksprogrammet kommer automatiskt att ställa in dina cachningsinställningar och de kommer omedelbart att börja fungera till din fördel. Om du bestämmer dig för att gå in på mer detaljer kan du öppna fliken Prestanda som nu är synlig på vänster sida av WordPress-menyn där alla plugininställningar är synliga. Här kan du ändra andra alternativ om det behövs.

Steg 6: Optimera och rensa WordPress-databasen

Din WordPress-webbplats kan inte fungera utan en databas. Allt du gör och har på sidan lagras där. Som du kan föreställa dig håller teman och plugins det inte alltid rent, så även om du avinstallerar ett specifikt plugin kommer det att lämna en del data i din databas. Med tiden kommer databasen att bli rörig och ineffektiv vilket kommer att resultera i en långsam webbplats.

Även om det är möjligt att rensa upp databasen manuellt, skulle det innebära att du måste förstå hur det fungerar. Och även om du gör det, är chansen stor att du fortfarande kan förstöra det.

Lyckligtvis finns det gratis WordPress-plugins tillgängliga som kommer att optimera och rengöra databasen åt dig. Men innan du gör något, se till att göra det skapa en fullständig säkerhetskopia av din webbplats eller har ett sätt att ångra ändringar. Även om WP Optimize är ett välkänt och säkert plugin, direkt redigering av en databas kan ibland gå fel. 

Så om något skulle gå fel, föreslår jag WP Återställ. Detta plugin kommer att skapa en ögonblicksbild av din webbplats och låter dig snabbt återställa alla gjorda ändringar. Så om något går fel kan du återställa din databas på ett par minuter, i motsats till att återställa en fullständig säkerhetskopia som kan ta längre tid.

Steg 7: Använd optimerade/premium och enkla teman

Mallar och teman är inte bara visuella. För att skapa dem måste webbdesigners koda in funktioner, alternativ och infoga bilder som alla kommer att kombineras till ett enda arbetstema.

Som du kan föreställa dig kommer en mall som laddar till exempel fem filer och tre bilder att laddas mycket snabbare än den som kommer packad med tio filer och tjugo bilder. Det stora antalet är inte den enda viktiga faktorn, men hur väl allt är optimerat kommer också i beräkningen.

Eftersom det finns så många WordPress-teman och mallar tillgängliga är det svårt att bestämma de bästa. Här är några av populära WordPress -teman som är designade för att se bra ut och laddas snabbt:

• Hej elementor
• Astra
• GeneratePress
• OceanWP
• Sydney

Steg 8: Optimera alla bilder på din webbplats

Bilder kan lätt bli ett av de viktigaste hastighetsproblemen på din webbplats. Ooptimerade bilder förblir onödigt stora och svåra att ladda ner. Om du använder för många av dem kommer användarna att ha svårt att ladda hela sidan på din webbplats, och förmodligen sluta med att lämna innan de ser innehållet.

Lyckligtvis är det inte så svårt att hålla bilderna optimerade. Det är viktigt att du undersöker ditt tema/mall för att lära dig vilka bildstorlekar du behöver. Du kan sedan ta hand om bilden innan du laddar upp den genom att ändra storlek på dess storlek och ändra dess kvalitetsinställningar.

Om du bara behöver optimera ett par bilder kan du använda en tredjepartstjänst som TinyPNG. Detta bildoptimeringsverktyg låter dig ladda upp dina källbilder och kommer sedan att optimeras automatiskt. Dra och släpp bara bilderna och låt Pandan göra sin magi. Du kommer då att få ladda ner de optimerade versionerna av dina bilder som du säkert kan lägga på din webbplats.

Om du redan har en aktiv webbplats och inte har tid att optimera bilder en i taget, finns det ett freemium-plugin som löser alla dina problem. ShortPixel Image Optimizer kommer att ta hand om alla dina bilder som finns tillgängliga i ditt mediebibliotek. Det fungerar också utmärkt med NextGEN, Foo Gallery, såväl som andra galleri- och reglage-plugins.

Gratisversionen låter dig hantera upp till hundra bilder. Några av funktionerna inkluderar:

• Optimera storlek och kvalitet på bilder.
• Konvertera format till ett annat.
• Fungerar med WebP och AVIF.

Allt du behöver göra är att installera plugin och anpassa inställningarna till det sätt du vill. Välj den komprimering du behöver, ställ in storleken på bilderna och tryck på knappen när du är redo för plugin-programmet för att starta optimeringsprocessen.

Steg 9: Lata ladda bilder och videor

Vanligtvis, när en användare öppnar en webbplats, börjar hela innehållet som ska visas att laddas automatiskt. Så även om en användare bara behöver innehållet ovanför mitten, skulle de fortfarande ha allt tillgängligt på den sidan laddat.

Istället kan du genom att ladda bilder och videor låta användarna bara ladda innehåll som är synligt på skärmen. När användaren börjar rulla börjar bilder och videor som flyttas till det synliga området på skärmen att laddas. På så sätt kommer hela webbplatsen att laddas snabbare och ge en bättre användarupplevelse.

Så här aktiverar du lat laddning i WordPress:

Steg 10: Förhindra bild hotlinking

Hotlinking är en åtgärd som involverar kopiering av källan till en bild från en webbplats för att använda den på en annan. Även om bilden kommer att visas utan problem, laddas den faktiskt inte från din server. Istället använder den alla resurser på den ursprungliga webbplatsen, och det anses faktiskt vara olagligt.

Genom att förhindra hotlinking kan du stoppa andra från att stjäla dina bilder. På så sätt sparar du resurser på din egen värdtjänst, vilket innebär att din webbplats kommer att vara den enda som använder dessa resurser, vilket resulterar i en snabbare webbplats för dina besökare.

Det finns flera sätt att förhindra hotlinking:

• Med hjälp av ett CDN: de flesta populära CDN:er som Cloudflare och KeyCDN har redan hotlinking-skydd aktiverat.
• Använder säkerhetsplugins: Allt i ett WP-säkerhet och brandvägg plugin låter dig ha kontroll över hotlinking.
• Inaktivera högerklicka på dina bilder: använd ett plugin som Förhindra innehållsstöld [Inaktivera högerklick].
• Ändra .htaccess-fil: mer avancerade användare kan inaktivera hotlinking direkt genom att ändra koden i .htaccess-filen.

Steg 11: Värd för videor på tredjepartstjänster och ladda ner stora media

När du startar en webbplats är det vettigt att ha alla dina videor och stora mediefiler på din egen server. Det du dock kan sakna är att lagring och reproduktion av stora filer tar upp serverresurser. När det kommer till hastigheten på din webbplats är det mycket bekvämare att ladda ner videor och stora mediefiler på tredjepartstjänster för att spara bandbredd.

En video laddad från YouTube kommer att fungera lika bra (om inte bättre) än laddad från din server. Och om du har högre trafik betyder det mindre påverkan på din bandbredd vilket resulterar i en snabbare webbplats.

När det kommer till videor kan du vara värd för dem på:

• Youtube;
• Vimeo; Eller
• Wistia.

Steg 12: Håll plugins på ett minimum/hitta plugins som saktar ner dig

Varje plugin förbättrar din webbplats. Men varje ny funktion innebär också nya filer som tar upp utrymme och bandbredd. Alla plugins är inte heller lika kodade, så chansen är stor att du har ett plugin som saktar ner din webbplats genom att ladda onödiga element som du kanske inte ens är medveten om.

Innan du börjar inaktivera alla plugins föreslår jag att du gör ett hastighetstest.

Detta plugin kommer att köra några tester på din webbplats och visa dig en graf och detaljer. Det du är intresserad av här är fliken "Runtime by Plugin" som kommer att rita en graf som visar dig alla dina aktiva plugins och deras inverkan på webbplatsen.

Kolla efter de största "bitarna" på din graf som visar de plugins som är långsammast på din webbplats. Observera att detta inte betyder att du måste bli av med det specifika pluginet. 

Detta test låter dig analysera alla dina tillägg, så att du kan väga för- och nackdelar och bestämma vilka långsamma plugins du kan avinstallera eller hitta ett alternativ för.

Steg 13: Kontrollera omdirigeringar på din webbplats

Att ha omdirigeringar förbättrar användarupplevelsen, och kan till och med förbättra din SEO om det görs på rätt sätt. Att ha aktiva omdirigeringar kommer inte att ha en negativ inverkan på din webbplats. Men med varje omdirigering blir din webbplats lite långsammare. Så om du får för många omdirigeringar (skapar en så kallad omdirigeringskedja), kommer millisekunder att läggas ihop och din webbplats blir långsammare.

Ett av de mest populära verktygen för att hantera omdirigeringar är Screaming Frog. Du kan också kolla in:

• Omdirigera Checker
• Sitebulb
• Deepcrawl

Genom att installera programvaran eller köra en onlineskanning (beroende på vilket verktyg du valde) kommer du att kunna skanna din webbplats. Det kommer att visa dig en detaljerad analys av webbplatsen och snabbt visa dig omdirigerade webbadresser. Eftersom det inte är så meningsfullt att bara veta att en URL är omdirigerad, kommer du att älska funktionen som visar källan till en omdirigering. Detta hjälper dig att förstå din webbplats och låter dig agera på omdirigeringar genom att ta bort de som inte är nödvändiga.

Om du hittar en omdirigeringskedja som saktar ner din webbplats är lösningen enkel – istället för att omdirigera från länk A till länk B som går till länk C, bör du bara ändra omdirigeringen till den sista länken i kedjan.

För att hantera omdirigeringar i WordPress kan du använda en gratis WP 301-omdirigeringar plugin som hjälper dig att hantera alla dina omdirigeringar.

Steg 14: Optimera innehåll (använd utdrag, dela upp långa artiklar och kommentarer, etc)

Ibland kan du göra mycket genom att ändra små saker. Om du skriva en blogg kan du få en snabbare webbplats genom att kontrollera innehållet. När du visar de senaste artiklarna från bloggen, använd utdrag istället för att ladda hela artikeln.

Om du använder en klassisk redigerare är det relativt enkelt att visa ett anpassat utdrag:

Att visa utdraget på din hemsida beror nu på ditt tema. Det kanske redan är aktiverat eller så måste du markera alternativet någonstans i ditt tema. Jag föreslår att du kontrollerar dokumentationen eller kontaktar support eftersom varje tema är olika.

Om du brukar skriva långa artiklar kan du snabbt dela upp dem i två eller flera delar. Om du använder en blockredigerare behöver du inga externa plugins. Redigera helt enkelt ett långt inlägg, klicka på "plus"-symbolen och hitta "Sidbrytning"-blocket som delar din artikel på mitten.

Slutligen, för de som har många kommentarer kan du välja att sidnumrera kommentarer istället för att ladda alla på en gång:

Fortsätt testa hastigheten på din webbplats

Även om du gör varje steg från den här handledningen och lyckas snabba upp din webbplats, betyder det inte att du är klar. Saker och ting kan snabbt förändras och du vet aldrig hur väl din webbplats kommer att fungera i morgon eller om en månad. Det är därför det är avgörande att du gör regelbundna hastighetstester och förbättrar din webbplats regelbundet.

Du kan bokmärka den här handledningen om du glömmer var och hur du ska testa din webbplats, samt komma ihåg vilka steg du bör gå igenom för att påskynda den.

Hur en långsam webbplats kan skada dig

Även om du inte har något emot att vänta på att webbplatser ska laddas, har de flesta problem med det. Och om du slarvar med problemet kan det skada dig i längden. Hur?

• Högre avvisningsfrekvens – Även om din besökare bestämmer sig för att vänta på att en sida ska laddas, betyder det inte att de kommer att ha tålamod under hela besöket. Du riskerar högre avvisningsfrekvens som kommer att få människor att lämna din webbplats efter att de besökt den första sidan.
• Förlora pengar - Om du sälja produkter eller tjänster på din webbplats kommer en långsam sida att stöta bort potentiella köpare och framtida kunder.
• Tappar trafik – Vill du ha mer trafik som kommer att driva din webbplats framåt? I så fall har du inte råd att förlora en besökare eftersom din webbplats inte är korrekt optimerad.
• Lägre SERP-rankning – Google och andra sökmotorer tar hänsyn till laddningshastigheten. En långsammare sida kan leda till att den pressas längre ner på sökmotorns resultatsida även om ditt innehåll är bra.

Tycker du fortfarande inte att hastigheten är viktig? Jag hoppas att dessa fyra skäl kommer att övertyga dig om hur hastigheten på en webbplats är avgörande, och att du är redo att göra din bättre.

Slutsats

Alla älskar vackra och väldesignade webbplatser. Men om det innebär att du väntar ett par extra sekunder på att webbplatsen ska laddas är chansen stor att du förlorar en viss procentandel av besökarna.

Så, oavsett vad du gör, offra inte hastigheten för estetik. Det går att ha både och; du behöver bara ha tålamod och arbeta på din webbplats för att förbättra den.