Varför din webbplats laddar långsamt (och hur du åtgärdar den): 22 steg jag gjorde för att få 100% GTmetrix-sidhastighetsresultat och omedelbara belastningstider

Slow Loading Webbplats


Ha en långsam laddning webbplats?

Vad händer om jag sa att min webbplats laddas in <1s med 100% GTmetrix-poäng? Och att jag redan har skrivit en av de populäraste WordPress-snabbguiderna online med över 400 kommentarer?

Vissa optimeringar är specifika för WordPress, andra är universella. Men de är alla bästa praxis även om du använder Squarespace, Shopify, Wix och andra webbplatsbyggnadsplattformar.

Om du har frågor eller behöver hjälp, släpp din GTmetrix-rapport i kommentarerna så ska jag ge dig några tips. Du kan också anställa min webbplats hastighetsoptimerare om du använder WordPress.

1. Testa din webbplats i GTmetrix

GTmetrix visar dig:

  • Laddningstid (grundvärde)
  • Som bilder måste optimeras
  • Som plugins laddar långsamt (kolla fliken Vattenfall)
  • Din tid till första byte (anger hastigheten på din värd)
  • Oavsett om din cache-plugin gör det är sitt jobb (jag rekommenderar WP Rocket)
  • Oavsett om du använder en nätverk för leverans av innehåll (Jag rekommenderar Cloudflare)
  • Långsam lastning externa resurser (AdSense, Maps, YouTube / Facebook-inbäddningar)

Snabba korrigeringar?
Hosting är faktor 1 i officiell WordPress-optimeringsguide (överlägset). Det kan inte förbättra GTmetrix-poäng, men det kan förbättra belastningstiderna med flera sekunder, särskilt om du går från en långsam värd (Bluehost, HostGator, GoDaddy) till en snabb värd (Siteground, Cloudways). Dessa två värdar rankades högst i 40+ Facebook-omröstningar som jag samlade in från Facebook-grupper.

Cache-plugins har den största effekten på poängen och förbättrar också belastningstiderna. WP-raket är bättre än W3 Total Cache eller WP Fastest Cache eftersom den har fler funktioner (som lat laddning, databasrensning och Google Font + Analytics-optimering) medan andra cache-plugins inte.

WordPress Speed ​​Video Tutorial
Om du använder WordPress tillbringade jag många timmar på att skapa den här 42 minuter långa videon på snabbare WordPress-webbplatser. Du kan använda tidsstämplar i videobeskrivningen för att hoppa till specifika avsnitt.

Beviset finns i puddingen:

2019-GTmetrix-Report

2. Ändra storlek på stora bilder

Det här är vad servera skalade bilder betyder i GTmetrix.

Det betyder att du laddar upp stora bilder med felaktiga dimensioner. Varje avsnitt på din webbplats har specifika dimensioner (reglage, miniatyrbilder, karusell, fullbredd och sidofält).

Till exempel vet jag att min bloggs innehållsstorlek är 680 pixlar i bredd. Alla bilder med full bredd som jag använder för min blogg ska alltid ändras till dessa dimensioner.

GTmetrix visar alla ooptimerade bilder (och rätt dimensioner de borde ändras till) men bara för den enda sida du testar. Allt du behöver göra är att ändra storleken på dessa bilder och ersätta den gamla versionen med den nya.

Servera skalade bilder

Bonus: skapa ett fuskark – skriv ner alla olika bildstorlekar på din webbplats.

  • Logotyp: 200 x 58 pixlar
  • Favicon: 16 x 16 px
  • Skjutreglage: 1903 x 400 px
  • Karusellbilder: 115px
  • Widgetbilder: 420 x 250px
  • Utvalda bilder: 250 x 250 px
  • Helbredd på blogginlägg: 680px
  • Yoast Twitter OG Bild: 1024 x 512px
  • Yoast Facebook OG Bild: 1200 x 630px

Squarespace, Wix, och WordPress-teman bör innehålla instruktioner för hur du ändrar storlek på bilder.

3. Komprimera bilder

Det här är vad optimera bilder betyder i GTmetrix.

Det finns många verktyg för att göra detta (jag använder ShortPixel WordPress-plugin). Var säker på att avlägsna EXIF-data för att få bilder att ladda ännu snabbare, vilket också kan göras i några av verktygen nedan.

bildoptimerings

Bildkomprimeringsverktyg

Kommer jag att förlora kvalitet?
Även om du väljer förlustfri komprimering kanske du märker en liten kvalitetsförlust. Det är därför det är bäst att testa ett par bilder i förväg och ta en säkerhetskopia om du massoroptimerar alla bilder.

4. Lägg till cache

Om du är använder inte WordPress, din plattform bör ta hand om caching, minifiering, kombination av filer och andra optimeringar i GTmetrix som vanligtvis kräver en plugin.

Om du använder WordPress, fråga dig själv:

  • Använder du ett cache-plugin?
  • Vilket cache-plugin använder du?
  • Har du konfigurerat den till de optimala inställningarna?

Dessa tre faktorer kommer att ha störst inverkan på dina poäng i GTmetrix, Google PageSpeed ​​Insights och i stort sett alla hastighetstestverktyg. Caching och värd är oerhört viktigt!

Vilket cache-plugin är bäst?
jag rekomenderar WP-raket vilket är ett premium-cache-plugin. Det levereras med många funktioner som andra cache-plugins inte gör (databasrensning, hjärtslagskontroll, lat laddning, optimering av Google Fonts + Analytics, CDN-integration). Om du ville använda dessa funktioner med andra cache-plugins, måste du installera cirka 6 extra plugins för att ta hand om dessa optimeringar, medan WP Rocket har allt inbyggt. Det närmaste gratis cache-plugin som gör dessa är Swift.

WP Rocket rankades också som nummer 1 i flera Facebook-omröstningar:

2016 bästa cache-plugin-enkät

2019 cache plugin poll

Swift vs WP Rocket

2016 cache plugin poll

Bästa enkät för cache-plugins 2018

wp raket vs w3 totla cache

5. Uppgradera till PHP 7.3

Detta gäller endast om du köpte hosting (t.ex. SiteGround, Bluehost, GoDaddy).

Uppgradering till PHP 7+ är mycket enkelt och bör påverka belastningstiderna betydligt.

WordPress PHP-riktmärken

Steg 1: Logga in på ditt värdkonto och hitta PHP-versionshanteraren (eller liknande).

Steg 2: Uppgradera till den högsta PHP-versionen som finns på ditt värdkonto (t.ex. PHP 7.3).

Steg 3: Testa din webbplats för fel. Om du ser något beror det antagligen på inkompatibla WordPress-plugins, i vilket fall du kan använda PHP Compatible Checker. Det här verktyget visar dig inkompatibla plugins; du bör antingen ta bort dem eller återgå till en tidigare PHP-version.

Steg 4: Håll din PHP-version aktuell. Om din värd släpper en ny stabil PHP-version, använd den.

6. Kontrollera serverns svarstider

Google PageSpeed ​​Insights berättar om du har en långsam server svarstider (Google rekommenderar att det bör vara under 200 ms). Servrar styrs uppenbarligen av din webbhotell.

Minska responstiden för servern

Hur man förbättrar serverns responstid

  • Få bättre värd (t.ex. Cloudways eller SiteGround)
  • Hålla sig borta från EIG-värdar som är otroligt långsamma
  • Se till att cache-funktion har aktiverats på din webbplats
  • Använd ett innehållsleveransnätverk som Cloudflares CDN
  • Eliminera alla tunga och oanvända plugins på din webbplats
  • Använd en premium-DNS-leverantör (få detta via din värd)

7. Välj rätt värd

Hosting är den absolut bästa faktorn för webbplatsens hastighet:

Många tutorials kommer att försöka hänvisa dig till Bluehost, HostGator, GoDaddy och EIG-varumärken.

Dessa är alla värdar av låg kvalitet som sannolikt kommer att ge dig en mängd problem: långsam servertid, drifttider, föråldrade PHP-versioner, säkerhetsproblem och dåligt stöd.

Gör din forskning i Facebook-grupper och titta på några enkäter som gjordes. Du kan också titta på personer som migrerade till och från vissa värdföretag och publicerat sina resultat.

Siteground och Cloudways är vanligtvis nr 1 och # 2 i 40+ Facebook-omröstningar. SiteGround är bra för delad värd och Cloudways för molnhosting. Båda värdarna erbjuder gratis migrering av webbplatser.

Juli 2019 värdrekommendation

Rekommendationer för Elementor Hosting

2017-Wordpress-värd-FB-Poll

Rekommendation för webbhotellrekommendation

Wordpress-Host-Poll-Aug-2018

Delad hosting-Poll-2017

2019-värd-Poll

Go-To-Hosting-Company

Wordpress-värd-Poll-2017

Rekommendationer för värd för 2018

Favorithotell för Elementor

2016-Wordpress-värd-FB-Poll

WordPress Hosting Poll

WordPress Hosting Poll september 2018.png

Managed-Wordpress-värd-Poll-2017

2019-Hosts-Poll-1

Värd-Poll-For-hastighet

Wordpress-värd-Poll-juni-1

Att migrera till snabbare hosting gör en stor skillnad:

Byt till SiteGround

SiteGround Load Time Migration

Bluehost till SiteGround GTmetrix

HostGator till SiteGround

SiteGround Google PageSpeed ​​Insights

SiteGround GoGeek-laddningstid

Minskade belastningstider med SiteGround

Nya svarstider för SiteGround

Cloudways svarstider

HostGator till SiteGround-migrering

SiteGround-svarstider på Joomla

Bytta till SiteGround Hosting

SiteGround Rocket Imagify Combo

SiteGround PageSpeed ​​Insights

SiteGround-bloggmigrering

Ny SiteGround-responstid

SiteGround-svarstidsförbättring

Ofrälse

8. Lägg till Cloudflares CDN

EN CDN (innehållsleveransnätverk) betyder att din webbplats är värd på flera datacenter runt om i världen. Detta minskar geografiskt avstånd mellan din server och besökare, medan du laddar ner resurser till dessa datacenter (lättare belastningen på din egen server). Du kan till och med använda flera CDN: er StackPath eller KeyCDN vilket lägger till ännu fler datacenter.

CDN-Wordpress-rekommendation

CloudFlare är gratis och har 200+ datacenter vilket är över de flesta premium-CDN: er.

Steg 1: Kontrollera om din värd låter dig aktivera Cloudflare i ditt konto. Om de gör det, aktivera Cloudflare är du klar. Om de inte gör det, måste du ändra namnservrar från och med steg 2.

Steg 2: Registrera dig för Cloudflare, välj gratisplan, lägg till din webbplats och låt Cloudflare köra sin skanning. Cloudflare leder dig genom en uppsättning sidor tills de tilldelar dig två namnservrar.

Steg 3: Logga in på din domänregistrator och hitta möjligheten att ställa in anpassade namnservrar (Google “anpassade namnsvarare på XYZ-värdföretag)”. Ersätt namnservrarna med Cloudflare’s.

9. Inaktivera hotlinking

Om du har högkvalitativa bilder på din webbplats kan folk “låna” dem för att använda på sin egen webbplats. Men istället för att spara och ladda upp bilderna kommer folk att kopiera / klistra in dem från din webbplats till deras. Det betyder att du är värd för bilderna på din server (inte bra).

Du kan aktivera hotlink-skydd i CloudFlare eller ofta gånger, i din värdkonto. Detta hindrar människor från att använda dina värdefulla serverresurser genom att kopiera / klistra in dina bilder.

Cloudflare Hotlink-skydd

10. Förminska filer

GTmetrix ber dig att minifiera HTML-, CSS- och JavaScript-filer.

Din cache-plugin bör ta hand om detta (om inte, se till att deras inställningar är aktiverade).

11. Kombinera filer

Om du har flera CSS- eller JavaScript-filer kan du prova att kombinera dem i en enda fil.

Ju mindre CSS- och JavaScript-filer du har, desto mindre förfrågningar kommer att laddas på din webbplats.

Steg 1: Hitta dina CSS-filer (eller JavaScript-filer).

Steg 2: Kopiera / klistra in innehållet så att de alla finns i en fil.

Eller, de flesta cache-pluginprogram har ett alternativ att kombinera CSS + JavaScript:

Förminska Kombinera JavaScript-filer

12. Undvik tunga plugins

Om du använder WordPress-plugins, Joomla Extensions eller några “tillägg” som lägger till funktionalitet på din webbplats, se till att de inte lägger till dina belastningstider (använd GTmetrix för riktmärken).

De vanligaste långsamma pluginsna är relaterade till portföljer, skjutreglage, social delning, sidbyggare, livechatt, kalendrar, statistik (analys), kontaktformulär eller relaterade postplugins.

Hur man hittar långsamma plugins på din webbplats
Om du ser samma plugin dyka upp flera gånger i din GTmetrix-rapport, och den har höga belastningstider på fliken Vattenfall, kan du överväga att ta bort den och ersätta den med en lättare plugin. För WordPress kan du också använda Fråga Monitor för att se dina långsammaste laddningsprogram.

Bonus: Inaktivera plugins selektivt
Använd en plugin som Kapitalförvaltare för att selektivt inaktivera plugins från att köras på vissa sidor. Om du till exempel bara använder ditt kontaktformulär på kontaktsidan kan du inaktivera det någon annanstans.

13. Rengör din databas

När du uppdaterar inlägg, installerar och tar bort plugins eller utför andra uppgifter på din webbplats kommer detta att börja samlas upp i din databas. Det är bäst att rengöra det en gång varannan vecka.

Du kan rengöra din databas med gratis WP-optimera plugin, eller använd WP Rocket:

WP-optimera ren databas

14. Optimera externa resurser

Externa resurser är allt från inbäddade YouTube-videor till Google-teckensnitt, Google Analytics, Gravatars och allt som kräver att information dras från en extern webbplats. Dessa kan förstöra din GTmetrix-rapport, särskilt Google AdSense eftersom den körs på varje sida.

Tips för att optimera externa resurser

15. Kombinera Google-teckensnitt

Använder du Google-teckensnitt, Font Awesome eller andra externa teckensnitt?

Dessa kommer förmodligen att orsaka extra förfrågningar i GTmetrix eftersom de är en extern resurs.

Google-fonts-GTmetrix

Tips för att optimera Google-teckensnitt

  • Värd Google typsnitt lokalt
  • Välj bara teckensnitt / vikter du behöver
  • Kombinera flera teckensnittfiler i en fil (manuellt eller via WP Rocket eller Autoptimize)

16. Lazy Load Images + Videos

Lat laddning betyder att bilder, videor och iframes bara laddas när användare rullar ner på sidan och faktiskt ser dem. Detta kan förbättra de initiala belastningstiderna för dina sidor betydligt.

Inbäddade videor kan vara ett av de tyngsta elementen på en sida – lat laddar 2 videoklipp (och ersätter iframe med en förhandsvisningsbild) rakade 4 timmar av ett av mina inlägg.

För WordPress kan du använda WP Rocket, WP YouTube Lyte eller plugin Lazy Load.

För Squarespace, prova detta Lazy Load-funktion.

WP-raket-Lazy-Load

17. Undvik annonser

Google AdSense är beryktad för att få webbplatser att ladda långsamt och det är inte ens lönsamt. Du kan försöka Ad Balancer och Rocket Loader, men du kommer att ha många fel i din GTmetrix-rapport oavsett och är bättre att tjäna pengar på affiliate-marknadsföring. Glöm AdSense – de mest framgångsrika personerna som tjänar $ 50 000 000 använder affiliate-länkar som inte saktar ner din webbplats.

GTmetrix-Annonser

18. Överväg AMP

AMP (accelererade mobilsidor) får dina mobilsidor att ladda snabbare medan du ger dig en AMP-stämpel i mobilsökresultaten. Problemet är att detta ändrar designen på dina mobilsidor. Du kan använda AMP för WP-plugin för att anpassa dem, men det är bara inte detsamma. Kinstas omvandlingar minskade med 58% när jag lägger till AMP så beslutade jag faktiskt att inaktivera dem på min egen webbplats. Men det är värt att överväga. Här är en AMP-handledning för Squarespace om du använder det.

19. Hitta långsamma sidor i Google Analytics

Du hittar dina långsammaste laddningssidor i Google Analytics under Beteende → Site Speed ​​→ Speed ​​Suggestions.

Oftast laddas dessa sidor långsamt eftersom de har massor av bilder, videor eller externa resurser. Det beror på att de flesta hastighetsfaktorer gäller hela din webbplats, inte bara en sida.

Speed-Förslag från Google-Analytics

20. WordPress-specifika optimeringar

Jag har redan täckt en hel del WordPress-specifika optimeringar, men här är några fler.

  • Använd en högst rankad cache-plugin som WP Rocket
  • Använd ett bra plugin för bildoptimering som ShortPixel
  • Använd Heartbeat Control plugin för att inaktivera Heartbeat API
  • Ta bort alla plugins som du inte använder och använd lätta plugins
  • Rengör din databas ofta med WP-Optimize eller WP Rocket
  • Cache Gravatars med hjälp av ett plugin som Harrys Gravatar Cache, FV eller Optimum
  • Använd Asset Manager för att selektivt inaktivera plugins från att ladda på vissa sidor
  • Host Google Analytics lokalt med ett plugin som WP Rocket eller CAOS Analytics
  • Värd Google-typsnitt lokalt med ett plugin som OMGF eller Google-typsnitt med egen värd

21. WooCommerce-optimeringar

Som standard lägger WooCommerce till extra skript, stilar och vagnsfragment till din webbplats. De kräver vanligtvis fler plugins. Det är därför du väljer en VPS-, moln- eller halvsäker hosting när du väljer en värdplan för att se till att den kan hantera den extra resursförbrukningen. Annars på delad värd kan du hamna överskrida värdens CPU-gränser.

WooCommerce Cart Fragments

Inaktivera kundvagnsfragment – Vagnsfragment uppdaterar artiklarna och det totala i vagnen, men det kan ta allt från 1 sekund till så länge som 10 sekunder att ladda. Din bästa satsning är att inaktivera vagnsfragment på hemsidan + inlägg, eftersom det är där de inte används. Följ denna handledning.

Inaktivera WooCommerce-skript – WooCommerce kan också ladda cirka 8 olika skript på din webbplats. För att inaktivera dessa, ta tag i detta kod från Github och lägg till den i din features.php-fil.

Inaktivera WooCommerce-stilar – WooCommerce har också stilar som laddas på varje sida. Här är en guide för att inaktivera dem.

Perfmatters – Denna snygga plugin från Kinsta gör det enkelt att inaktivera vagnsfragment, skript och stilar. Om du vill ha ett enkelt sätt att inaktivera dem utan att redigera kod, prova detta premium plugin.

Rensa kundsessioner – Om din WooCommerce-webbplats går långsamt kan du prova att rensa kundöppningar.

Öka minnesgränsen till 256 MB – WooCommerce kräver att du höjer din minnesgräns till 256 MB, men du bör verkligen göra det för de flesta webbplatser. Här är en handledning för att göra det.

22. Anställa någon som vet vad de gör

Behöver du hjälp med att fixa din webbplats med långsam lastning?

Jag arbetar med några utvecklare som är specialiserade på WordPress-hastighetsoptimering. Du kan kolla in deras portfölj på den sidan och jag krediterar dem för att få mina GTmetrix-poäng till 100%. Cole hanterar alla hastighetsoptimeringsprojekt, du kan nå honom på [email protected]

23. Vanliga frågor

&# X1f680; Vilka faktorer har störst inverkan på belastningstider?

Att välja rätt hosting, plugins och cache-plugin kan ha störst inverkan på dina belastningstider. Att optimera bilder och undvika externa resurser som Google AdSense är också mycket viktigt. Att använda ett gratis innehållsleveransnätverk som Cloudflare hjälper också.

&# X1f680; Vilket verktyg är bäst för att testa hastighet?

GTmetrix har de mest robusta rekommendationerna av alla hastighetstestverktyg. Google PageSpeed ​​Insights är främst bra för en sak – mäta serverns svarstider.

&# X1f680; Hur kan jag veta vad som bromsar min webbplats?

GTmetrix berättar vilka bilder som behöver optimeras, oavsett om du använder ett CDN, och plugins som kan visas flera gånger i din rapport eller i ditt GTmetrix Waterfall. Det mäter också tid till första byte vilket är en bra indikator på om din hosting är långsam.

&# X1f680; Vilka är några mindre kända hastighetstips?

Många människor uppgraderar inte sin PHP-version eller optimerar externa resurser som Google-teckensnitt och YouTube-videor. Lata bilder och videoklipp och värd för Google-teckensnitt och Google Analytics lokalt kan fixa många objekt i GTmetrix. Du bör också gå med i Facebook-grupper för att få opartiska åsikter om de bästa värdleverantörerna, för att undvika affiliate-fällor.

&# X1f680; Vilken värd är bäst?

SiteGround och Cloudways är två solida värdleverantörer som rankades högt i Facebook-undersökningar. SiteGround är en av de mest populära delade värdarna och Cloudways för molnhosting. Dessa är vanligtvis topp 2 i sin klass.

&# X1f680; Vilket cache-plugin är bäst?

WP Rocket blev rankad som cache-plugin nr 1 i flera Facebook-omröstningar, eftersom det kommer med många hastighetsoptimeringsfunktioner som de flesta cache-plugins inte gör (lat laddning, databasrensning, värd för Google-teckensnitt och Google Analytics lokalt). Du bör få optimala resultat med WP Rocket, annars är Swift Performance ett bra gratis plugin-alternativ.

Jag hoppas verkligen att denna tutorial var till hjälp. Om du behöver hjälp kan du lämna din GTmetrix-rapport i kommentarerna och jag kommer att få dig med några förslag. Eller överväga att anställa min hastighetsoptimerare.

Skål,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map