om du är nybörjare och ny webbplatsägare kommer du i de flesta fall inte att oroa dig för webbplatsens hastighet.
när du har byggt din webbplats eller startat din blogg kan det kännas som att allt är på plats. Din webbplats är vacker, så det måste innebära att människor inte har några problem att vänta några sekunder mer för att låta den laddas ordentligt, eller hur?
Nej, det är inte fallet.
enligt Google research, ju längre tid det tar för en sida att ladda desto fler människor skulle överge en webbplats.
Google har också introducerat Webbkärnvitaler (som räknas som en rankningsfaktor för webbplatser) som går in i ännu mer detalj när det gäller hastigheten på att ladda webbplatser. Ju snabbare din webbplats desto bättre är dina chanser att komma till den första sidan i Googles sökresultat.
Hej där, jag heter Artem.
jag delar vår erfarenhet, kunskap om vårt utvecklingsteam och tekniker som vi använde för att förbättra laddningshastigheten på vår egen webbplats (FirstSiteGuide.com).
genom att följa denna handledning kommer du att förstå de element som påverkar hastigheten på din webbplats. Med varje element kommer jag att visa dig ett verktyg som hjälper dig att påskynda webbplatsen eller lösa ett visst problem. Om möjligt kommer jag också att nämna tjänster som du säkert kan använda utan att behöva spendera timmar på forskning.
P. S. Vissa steg i den här guiden är specifika för webbplatser byggda med WordPress-programvara eftersom det är vad vi använder för vår webbplats. Om du använder några andra verktyg för webbplatsbyggare kan du använda liknande hastighetsoptimeringstekniker baserat på tillgängliga funktioner.
14 steg för att förbättra webbplatshastigheten
- Steg 1: Kör ett hastighetstest
- steg 2: Få snabb och pålitlig webbhotell
- steg 3: implementera en CDN-tjänst (Content Delivery Network)
- steg 4: Minifiera CSS – och JavaScript-filer
- Steg 5: Aktivera webbläsarens cachning
- steg 6: optimera och rengör WordPress-databasen
- Steg 7: använd optimerade/premium och enkla teman
- steg 8: optimera alla bilder på din webbplats
- steg 9: Lazy load bilder och videor
- steg 10: förhindra bild hotlinking
- steg 11: Host Videor på 3: e parts tjänster och avlasta stora medier
- steg 12: håll plugins på ett minimum/hitta plugins som saktar ner dig
- steg 13: kontroll omdirigeringar på din webbplats
- steg 14: Optimera innehåll (använd utdrag, dela långa artiklar och kommentarer etc)
Steg 1: Kör ett hastighetstest
innan du gör något är det viktigt att du utför ett ordentligt test. Även om du kan göra mycket även utan en, föreslår 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 fungerar och hur bra resultatet är när du är klar med alla förbättringssteg.
gratis verktyg
lyckligtvis finns det gratis hastighetstester tillgängliga för alla. Du måste bara välja en, ange din URL och låta verktyget utföra sin magi.
Googles PageSpeed Insights
eftersom de flesta 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.
- öppna Googles PageSpeed Insights.
- ange webbadressen till din webbplats.
- klicka på knappen ”Analysera”.
i mitt fall tog det så lite som 10-15sec för testet att slutföra 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:
- första nöjd färg (FCP)
- största nöjd färg (LCP)
- kumulativ Layout Shift (CLS)
alla tre elementen är en del av Webbvitaler 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 Webbvitaler i vår guide om hur du optimerar din mobilwebbplats.
GTmetrix
en av de mest populära webbplatshastighetstesterna är GTmetrix. Det är helt gratis och kan göras på mindre än en minut:
- gå till GTmetrix.
- skriv in hela webbadressen till din webbplats.
- tryck på knappen ”Kör Test” och vänta i cirka 30 sekunder.
därefter får du ett betyg som visar hur snabb din webbplats är. Testet visar också detaljer som webbplatsens prestanda, dess struktur samt webbvitaler som nu är en kärnrankningsfaktor för Google.
om du inte redan har arbetat aktivt med att optimera din webbplats för hastighet, är chansen att du inte får en perfekt poäng. Men oroa dig inte, du kan arbeta mot det om du börjar följa alla steg.
steg 2: Få snabb och pålitlig webbhotell
en snabb webbplats börjar med bra hosting. Oavsett hur hårt du försöker leverera den bästa användarupplevelsen, om din värd suger, kommer hastigheten på din webbplats att drabbas.
de bästa webbhotell tar hand om allt, och det är inte nödvändigt att du förstår vad som går bakom stängda dörrar. Från kvalitet och väl underhållen hårdvara till regelbundet uppdaterade programvarukomponenter finns det mycket som en värdtjänst kan göra för att förbättra hastigheten på din webbplats.
för att starta rätt sätt, få din webbplats värd med Bluehost, ett av de sällsynta webbhotell som officiellt rekommenderas av WordPress.org. års erfarenhet och miljontals värdwebbplatser gör detta webbhotell till ett av de bästa inom sitt område – något som enkelt kan översättas till att ha en robust webbplats.
steg 3: Implementera en CDN-tjänst (Content Delivery Network)
vår värld är en stor plats. Även om internethastigheter har förbättrats drastiskt genom åren spelar det fysiska avståndet mellan datorer och servrar fortfarande en viktig roll i onlinehastigheten. Det betyder 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å en i ett annat land.
det är här innehållsleveransnätverk kommer in. De låter dig ha din webbplats värd på flera servrar över hela världen. CDN kan känna igen närmaste plats för varje individ som laddar din webbplats och ladda innehållet från närmaste server. Så om en besökare försöker ladda din webbplats från USA kommer de att få innehållet från en av USA-servrarna, medan någon som kommer från Europa laddar din webbplats via en server som ligger nära 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 ställa in den blir din webbplats global och laddas snabbare för människor från hela världen.
du kan också få 3: e parts CDN-tjänster. De mest populära CDN: erna är:
- Cloudflare
- KeyCDN
- StackPath
- Google Cloud CDN
- Rackrymd
- CacheFly
- Amazon CloudFront
steg 4: Minifiera CSS-och JavaScript-filer
moderna webbplatser är fyllda med CSS-och JavaScript-filer som fungerar tillsammans för att hålla webbsidor snygga och arbeta i användarnas fördel. Linje efter kodrad gör dessa filer onödigt stora, vilket snabbt kan sakta ner din webbplats.
webbdesigners (samma personer som bygger mallarna som du slutar köpa) gillar att hålla sin kod snygg. Det betyder att de håller koden snygg och lättförståelig. Att ha dessa vita mellanslag, extra linjer och tecken ökar dock bara filvikten, vilket lätt kan minskas genom att minifiera.
här är ett exempel på enkel CSS-kod:
kropp {
stoppning: 10px;
färg: # f35123;
bakgrund:# f22f12;
}
det kan minifieras i detta:
kropp{stoppning: 10px; färg: # f35123; bakgrund: # f22f12}
även om denna enkla skillnad inte kommer att få någon betydande inverkan på din webbplats, föreställ dig vad som händer när du har tusentals och tusentals onödiga vita utrymmen och linjer.
lyckligtvis, för att minifiera 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 för dig och ser till att allt fungerar korrekt:
- gå till”Plugins > Lägg till nytt”.
- Sök efter ”Autoptimize”.
- installera och aktivera ”Autoptimize”.
- gå till ”Inställningar -> Autoptimize”.
- Kontrollera ” Optimera JavaScript-Kod?”och” aggregera JS-filer?”.
- kontrollera ” optimera CSS-kod?”och” Aggregate CSS-filer?”.
Steg 5: aktivera webbläsarens cachning
genom att aktivera webbläsarens cachning 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äsarens caching 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 använder W3 Total Cache, till exempel, allt du behöver göra är att installera plugin:
- gå till Plugins -> Lägg till nytt.
- Sök efter ”W3 Total Cache”.
- installera och aktivera plugin.
- gå igenom installationen genom att låta plugin testa din webbplats och serverinställningar.
insticksprogrammet ställer automatiskt in dina cachningsinställningar och de börjar omedelbart arbeta till din fördel. Om du bestämmer dig för att gå in på mer information kan du öppna fliken Prestanda som nu är synlig på vänster sida av WordPress-menyn där alla plugin-inställningar är synliga. Här kan du ändra andra alternativ om det behövs.
steg 6: optimera och rengör WordPress-databasen
din WordPress-webbplats kan inte fungera utan en databas. Allt du gör och har på webbplatsen lagras där. Som du kan föreställa dig håller teman och plugins inte alltid det rent, så även om du avinstallerar ett specifikt plugin kommer det att lämna vissa 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, det skulle innebära att du måste förstå hur det fungerar. Och även om du gör det är chansen att du fortfarande kan röra upp det.
lyckligtvis finns det gratis WordPress-plugins tillgängliga som optimerar och rengör databasen åt dig. Men innan du gör något, se till att skapa en fullständig säkerhetskopia av din webbplats eller ha ett sätt att ångra ändringar. Även om WP-Optimize är ett välkänt och säkert plugin kan direkt redigering av en databas ibland gå fel.
så, om något går fel, föreslår jag WP Reset. Detta plugin skapar en ögonblicksbild av din webbplats och låter dig snabbt rulla tillbaka alla ändringar som gjorts. Så om något går fel kan du återställa din databas på några minuter, i motsats till att återställa en fullständig säkerhetskopia som kan ta mer tid.
- gå till Plugins -> Lägg till nytt.
- hitta WP-optimera, installera och aktivera det.
- Välj de alternativ du vill ha och klicka på knappen för att starta optimeringen.
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 i funktioner, alternativ och infoga bilder som alla kombineras till ett enda arbetstema.
som du kan föreställa dig, en mall som laddar fem filer och tre bilder, till exempel, kommer att ladda mycket snabbare än den som kommer packad med tio filer och tjugo bilder. Det stora antalet är inte den enda viktiga faktorn, men hur bra allt är optimerat beaktas också.
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 de populära WordPress-teman som är utformade för att se bra ut och ladda snabbt:
- Hej Elementor
- Astra
- GeneratePress
- OceanWP
- Sydney
steg 8: optimera alla bilder på din webbplats
bilder kan enkelt bli en av de viktigaste hastighetsproblemen på din webbplats. Ooptimerade bilder kommer att förbli 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 lämna innan de ser innehållet.
lyckligtvis är det inte så svårt att hålla bilder 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å storleken och ändra dess kvalitetsinställningar.
om du bara behöver optimera ett par bilder kan du använda en 3: e parts tjänst som TinyPNG. Detta bildoptimeringsverktyg låter dig ladda upp dina källbilder och optimeras sedan automatiskt. Dra bara & släpp bilderna och låt pandaen arbeta med sin magi. Du får sedan 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 tar hand om alla dina bilder som är tillgängliga i ditt mediebibliotek. Det fungerar också bra med NextGEN, Foo Gallery, liksom andra galleri och slider plugins.
den fria versionen kan du hantera upp till hundra bilder. Några av funktionerna inkluderar:
- optimera storleken och kvaliteten på bilderna.
- 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 ha. 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 för att starta optimeringsprocessen.
steg 9: Lazy load bilder och videor
vanligtvis, när en användare öppnar en webbplats, börjar hela innehållet som ska visas laddas automatiskt. Så även om en användare bara behöver innehållet ovanför vikningen, skulle de fortfarande ha allt tillgängligt på den sidan laddat.
istället, genom att lazy laddar bilder och videor, kan du låta användare bara ladda innehåll som är synligt på skärmen. När användaren börjar rulla börjar bilder och videor som flyttar in i det synliga området på skärmen laddas. På så sätt laddas hela webbplatsen snabbare och möjliggör en bättre användarupplevelse.
så här aktiverar du lazy loading i WordPress:
- gå till Plugins -> Lägg till nytt.
- Sök efter Lazy Load av WP Rocket.
- installera och aktivera plugin.
- kontrollera innehåll som du vill lazy belastning och spara inställningar.
steg 10: förhindra bild hotlinking
Hotlinking är en åtgärd som innebär att kopiera källan till en bild från en webbplats för att använda den på en annan. Medan bilden 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 människor från att stjäla dina bilder. På så sätt sparar du resurser på din egen webbhotell, 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:
- använda en CDN: de flesta populära CDN som Cloudflare och KeyCDN har redan hotlinking-skydd aktiverat.
- använda säkerhets plugins: All In One WP Security & brandvägg plugin kan du ha kontroll över hotlinking.
- inaktivera högerklicka på dina bilder: Använd ett plugin som förhindra Innehållsstöld .
- modifiera .htaccess-fil: mer avancerade användare kan inaktivera hotlinking direkt genom att ändra kod i .htaccess-fil.
steg 11: värd videor på 3: e parts tjänster och avlasta stora medier
när du startar en webbplats är det vettigt att ha alla dina videor och stora mediefiler på din egen server. Men vad du kanske saknar är att lagring och reproduktion av stora filer tar upp serverresurser. När det gäller hastigheten på din webbplats är det mycket bekvämare att ladda ner videor och stora mediefiler på 3: e parts tjänster för att spara bandbredd.
en video laddad från YouTube fungerar 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 gäller 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 betyder också nya filer som tar upp utrymme och bandbredd. Inte alla plugins är kodade på samma sätt, 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.
- gå till Plugins -> Lägg till nytt.
- Sök efter P3 (Plugin prestanda Profiler).
- installera och aktivera plugin.
- gå till Verktyg -> P3 Plugin Profiler.
- börja skanna.
detta plugin kommer att köra några tester på din webbplats och visa dig en graf och detaljer. Vad du är intresserad av här är fliken ”Runtime by Plugin” som ritar en graf som visar alla dina aktiva plugins och deras inverkan på webbplatsen.
leta efter de största ”tårtbitarna” på din graf som visar de plugins som är de långsammaste på din webbplats. Observera att detta inte betyder att du måste bli av med det specifika plugin.
detta test gör att du kan 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 till.
steg 13: kontroll omdirigeringar på din webbplats
med omdirigeringar förbättrar användarupplevelsen, och kan även 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 slutar ha för många omdirigeringar (skapa en så kallad omdirigeringskedja) kommer millisekunder att lägga till och din webbplats blir långsammare.
ett av de mest populära verktygen för hantering av omdirigeringar är Screaming Frog. Du kan också kolla in:
- Omdirigeringskontroll
- Sitebulb
- Deepcrawl
genom att installera programvaran eller köra en online-skanning (beroende på vilket verktyg du valde) kan du skanna din webbplats. Det kommer att visa dig en detaljerad analys av webbplatsen, och snabbt visa dig omdirigerade webbadresser. Eftersom bara veta att en URL omdirigeras inte kommer att göra mycket mening, 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 hantering av 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 långa artiklar och kommentarer, etc)
ibland kan du göra mycket genom att ändra små saker. Om du skriver en blogg kan du uppnå 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:
- gå till WordPress Dashboard – > inlägg -> Lägg till nytt.
- klicka på knappen ’skärmalternativ’.
- aktivera utdrag box alternativ.
- bläddra ner, Hitta utdragsrutan och skriv en anpassad sammanfattning.
att visa utdraget på din hemsida beror nu på ditt tema. Det kan redan vara aktiverat eller så kan du behöva kontrollera alternativet någonstans i ditt tema. Jag föreslår att du kontrollerar dokumentationen eller kontaktar support eftersom varje tema är annorlunda.
om du brukar skriva långa artiklar kan du snabbt dela dem i två eller flera delar. Om du använder en Blockredigerare behöver du inte externa plugins. Redigera bara ett långt inlägg, klicka på” plus ”- symbolen och hitta” Sidbrytning ” – blocket som delar upp din artikel i hälften.
om du använder en klassisk redigerare, lägg bara till <!–- nextpage– > tagg som kommer att göra samma sak.
slutligen, för dem som har många kommentarer, kan du välja att paginera kommentarer istället för att ladda dem alla på en gång:
- gå till WordPress-Inställningar – > diskussion.
- hitta alternativet ”Bryt kommentarer till sidor”.
- ange antalet kommentarer som ska visas på en enda sida.
- Spara inställningar.
fortsätt testa hastigheten på din webbplats
även om du gör varje steg från denna handledning och lyckas påskynda din webbplats betyder det inte att du är klar. Saker kan snabbt förändras, och du vet aldrig hur bra din webbplats kommer att bete sig imorgon eller om en månad. Det är därför det är viktigt att du gör regelbundna hastighetstester och förbättrar din webbplats regelbundet.
du kan bokmärka denna handledning om du glömmer var och hur du testar din webbplats, samt att komma ihåg vilka steg du ska 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 försummar problemet kan det skada dig på lång sikt. Hur?
- högre avvisningsfrekvenser – ä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 vara tålmodiga genom hela sitt besök. Du riskerar högre avvisningsfrekvenser som får folk att lämna din webbplats efter att de besökt första sidan.
- förlora pengar – om du säljer produkter eller tjänster på din webbplats kommer en långsam webbplats att avvisa potentiella köpare och framtida kunder.
- förlora 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 – ranking-Google och andra sökmotorer tar hänsyn till belastningshastigheten. En långsammare sida kan resultera i att skjutas längre ner på sökmotorns resultatsida även om ditt innehåll är bra.
tycker du fortfarande inte att hastighet ä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 vänta på ett par extra sekunder för Webbplatsen att ladda, är chansen att du kommer att förlora en viss andel besökare.
så, oavsett vad du gör, offra inte hastighet för estetik. Det är möjligt att ha båda; du behöver bara ha tålamod och arbeta på din webbplats för att förbättra den.