De flesta WordPress-webbplatsägare vet hur frustrerande en långsam webbplats kan vara. Du har gjort det grundläggande – komprimerat bilder, ställt in cachning och följt standardtipsen för hastighet – men dina sidor tar fortfarande för lång tid att ladda.
Vi har upptäckt att problemet ofta är något enkelt: webbplatser laddar ner för mycket onödig data.
Tekniskt sett kallas detta 'nätverksnyttolast'. Det är helt enkelt den totala mängden data som krävs för att ladda en sida. Den totala nedladdningsstorleken inkluderar text, bilder, videor, CSS, JavaScript, teckensnitt och annan kod.
I grund och botten, ju mindre data som behöver laddas ner, desto snabbare laddas sidan.
Så om du vill förbättra din webbplats hastighet har du kommit rätt!
I den här guiden visar vi dig exakt hur du minskar storleken på dessa filer och undviker enorma nätverksöverföringar i WordPress.
Varför är enorma nätverkslaster ett problem i WordPress?
Har du någonsin använt ett verktyg som Google Lighthouse eller PageSpeed Insights för att kontrollera hur snabb din webbplats är?
Ibland kan du se ett meddelande som säger: 'Undvik enorma nätverksinnehåll.'
I grund och botten betyder det att din webbsida är för stor, som en resväska som är för tung att bära. En stor webbsida tar längre tid att ladda, vilket kan vara frustrerande för personer som besöker din webbplats.
Nätverksnyttolasten för en webbsida är den totala storleken på alla delar som utgör den sidan. Detta inkluderar:
- Text: Orden du läser på sidan
- Bilder & Media: Bilder och videor du ser
- Kod: CSS- och JavaScript-filerna som får sidan att se bra ut och fungera korrekt
- Typsnitt: De speciella stilarna för din text
- Plus, alla andra anpassade element
Så ju större alla dessa element är kombinerade, desto längre tid tar det för din webbsida att visas på skärmen.
Hur stor är för stor? Här är en enkel guide:
- Bra: Om alla delar av din webbsida summerar till mindre än 2 MB, är det som att bära en lätt väska. Den är väloptimerad och laddas snabbt. Du behöver inte oroa dig för mycket här.
- Behöver förbättras: Om din webbsida är mellan 2 MB och 4 MB, är det som att bära en ryggsäck som blir lite tung. Det kan finnas saker du kan göra lättare. Google kommer att ge dig några tips om hur du gör den snabbare.
- Enormt: Om din webbsida är mer än 4 eller 5 MB, är det som att försöka bära en enorm, överfull resväska. Detta kommer att göra din webbplats långsam för dina besökare, så du måste prioritera optimering.
Om du ser meddelandet 'Undvik enorma nätverksnyttolaster', kan du klicka på den lilla pilen för att se en lista över alla resurser som utgör din webbsida.
Ser du hur de största filerna ligger överst i listan? Om du fokuserar på att göra dessa filer mindre eller ta bort onödiga filer, kommer du att se den största förbättringen i WordPress-prestanda.
Genom att göra dessa filer mindre kommer du att använda mindre data för att visa webbsidan, och den kommer att laddas snabbare.
Nu när du vet varför stora webbsidor är ett problem, låt oss utforska hur du kan undvika dem i WordPress. Här är de 8 tipsen vi kommer att gå igenom i den här artikeln:
- Gör dina bilder mindre
- Bädda in videor på rätt sätt
- Använd Lazy Loading för bilder och videor
- Minska storleken och antalet JavaScript- och CSS-filer
- Krymp filer med Gzip
- Använd webbläsarcache för att förhindra upprepade nedladdningar
- Använd färre typsnitt eller systemtypsnitt
- Undvik långsamma plugins
- Frequently Asked Questions About Network Payloads in WordPress
Är du redo? Låt oss dyka rakt in!
1. Gör dina bilder mindre
En av de största orsakerna till stora nätverksnyttolaster är stora bilder.
Dagens smartphones och kameror tar bilder av hög kvalitet med mycket stora filstorlekar. Men du behöver inte behålla dem så stora när du visar dem på en webbplats.
Lyckligtvis kan du optimera bilder för att göra dem upp till 80 % mindre utan att förlora bildkvalitet. Detta har en större inverkan på din webbplats nätverksnyttolast än nästan något annat.
På WPBeginner optimerar vi alla våra bilder innan vi laddar upp dem. Vi ändrar storlek på våra bilder till rätt dimensioner och minskar sedan deras filstorlek med olika verktyg.
Vi har satt ihop en hjälpsam guide baserad på exakt hur vi gör detta på vår egen webbplats. Du kan följa vår artikel om hur du optimerar bilder för webbprestanda utan att förlora kvalitet.
2. Bädda in videor på rätt sätt
Om du har videor på din webbplats måste du vara försiktig med hur du visar dem.
Att ladda upp videor direkt till din webbplats kan orsaka stora nätverksöverföringar och avsevärt sakta ner din webbplats, särskilt om de börjar spela automatiskt.
Det bästa sättet att inkludera videor är att bädda in dem från videoplattformar som YouTube eller Vimeo.
☝ Notera: Vi använder YouTube för att hosta och streama våra videor. Du kan utforska våra WordPress-videoguider på WPBeginner YouTube-kanal.
Detta tillvägagångssätt tillåter dig fortfarande att spela upp videor på din webbplats, men eftersom de faktiskt lagras på någon annans server, är de inte en del av din nätverksnyttolast.
Detta hjälper verkligen eftersom din server inte behöver hantera den tunga dataöverföringen. Dessutom är dessa plattformar utformade för att leverera videor effektivt, med optimerad streaming som anpassar sig till din besökares internetanslutning.
Dessutom börjar många videospelare från dessa plattformar bara ladda videon när användaren klickar på play, vilket innebär att mindre data överförs initialt.
Du kan enkelt lägga till videorna på din webbplats med inbäddad kod.
För mer om detta ämne, se vår guide om varför du aldrig ska ladda upp en video till WordPress.
3. Använd Lazy Loading för bilder och videor
Lat laddning är ett annat bra sätt att undvika stora nätverksanrop, särskilt om din webbplats är full av bilder eller videor.
Normalt, när en webbsida laddas, vill webbläsaren omedelbart ladda ner alla bilder och videor, även om de inte kommer att synas direkt.
Tänk om en restaurang serverade alla dina rätter samtidigt istället för en i taget. Det skulle vara överväldigande!
Det här är vad som händer på en webbsida om lazy loading inte är implementerat. Allt måste laddas ner i förväg, även om användaren inte kan se det ännu.
Detta är uppenbarligen inte idealiskt, eftersom det innebär att din webbplats har en stor nyttolast, och du laddar ner mycket data även om användaren inte tittar på innehållet längst ner på sidan.
Lösningen på detta kallas lat laddning.
Lat laddning är som den restaurangen som serverar varje rätt i din måltid allt eftersom du är redo för den.
Med lazy loading laddas bilder och videor inte förrän de är på väg att rullas in i användarens visningsområde på skärmen. På så sätt behöver webbläsaren bara ladda det som behövs när det behövs.
Detta minskar den initiala nätverksbelastningen och mängden data som måste laddas ner.
Här är några hjälpsamma handledningar som visar dig hur du ställer in lat laddning i WordPress:
- Hur man enkelt laddar bilder lat i WordPress
- Hur man enkelt lägger till lazy loading för videor i WordPress
- Hur man lazy-laddar Gravatars i WordPress-kommentarer
4. Minska storleken och antalet Javascript- och CSS-filer
Ett av de bästa sätten att undvika stora nätverkslaster på din webbplats är att minska storleken på dina CSS- och JavaScript-filer.
Din webbplats använder CSS-filer för styling och JavaScript-filer för interaktiva funktioner.
Dessa filer har dock ofta extra blanksteg och kommentarer inuti som inte behövs för kodens funktionalitet. Du kan säkert ta bort dessa element för att minska filstorleken.
Detta innebär att dessa filer fortfarande fungerar på samma sätt, men det blir mindre data för dina användare att ladda ner, vilket gör att din sida laddas snabbare.
Denna process kallas minifiering, och de goda nyheterna är att du kan använda ett WordPress-plugin som WP Rocket för att automatiskt minifiera dina filer.
Se vår guide om hur du minifierar CSS- och JavaScript-filer i WordPress för mer information.
Nu kommer olika delar av din webbplats vanligtvis att ha olika CSS- eller JavaScript-filer. Till exempel en fil för sidhuvudet, en annan för brödtexten och kanske ännu fler för plugins.
Men många mindre filer kan vara mindre effektiva än en större fil. När det finns många filer att ladda måste webbläsaren hämta var och en separat, vilket ökar den totala nedladdningsstorleken. Istället kan du kombinera många av dessa mindre filer till en enda fil.
Populära plugins som WP Rocket (premium) och Autoptimize (gratis) kan automatiskt kombinera och minifiera CSS- och JavaScript-filer.
Du kan lära dig hur du använder dessa plugins i vår guide om hur man fixar render-blockerande JavaScript och CSS i WordPress.
5. Krymp filer med Gzip
Ett annat sätt att göra dina webbplatsfiler mindre är att komprimera dem. Textbaserade filer som HTML, CSS och JavaScript kan reduceras avsevärt med hjälp av Gzip-komprimering.
Faktum är att Gzip-komprimering ofta kan minska storleken på dessa filer med upp till 70 % innan de skickas till användarens webbläsare! Detta är en enorm besparing av mängden data som behöver överföras.
Det minskar filnedladdningstiden och gör att din WordPress-webbplats laddas mycket snabbare. När de komprimerade data anländer till din besökares dator, packar webbläsaren automatiskt upp (dekomprimerar) filerna och visar dem på användarens skärm.
Du behöver inte oroa dig för om dina användares webbläsare stöder Gzip-komprimering eftersom det fungerar i alla populära webbläsare idag.
Många utmärkta cachningsplugins stöder även Gzip-komprimering. Populära alternativ inkluderar WP Rocket, WP Super Cache och W3 Total Cache.
Vi använde tidigare WP Rocket på WPBeginner-webbplatsen och hade en fantastisk upplevelse. För mer information, se vår fullständiga recension av WP Rocket.
Med WP Rocket kommer Gzip-komprimering automatiskt att aktiveras om din webbhotell använder Apache-servern. För andra cache-plugins kan du behöva aktivera det i pluginets inställningar.
För detaljerade instruktioner, se vår guide om hur man aktiverar Gzip-komprimering i WordPress.
6. Använd webbläsarcache för att förhindra upprepade nedladdningar
Ett annat sätt att undvika en enorm nätverksbelastning i WordPress, särskilt om din webbplats har många återkommande besökare, är att prova webbläsarcache.
Föreställ dig om dina besökare var tvungna att ladda ner allt på din webbplats varje gång de besökte den! Det skulle vara otroligt långsamt, och det är precis vad som händer om du inte använder korrekt cachning.
När någon besöker din webbplats för första gången laddar deras webbläsare ner allt de behöver: bilder, CSS, JavaScript och alla andra resurser. Med webbläsarcache sparar deras webbläsare en kopia av dessa filer på sin dator.
Då, nästa gång de besöker din webbplats, är deras webbläsare smart! Den kontrollerar sina lokalt sparade filer innan den frågar din server om allt igen.
Om webbläsaren har en kopia av en fil i sin cache, använder den bara den istället för att ladda ner den igen. Detta gör en stor skillnad för att minska den totala nätverksbelastningen och ger regelbundna besökare en snabbare och smidigare upplevelse.
Självklart, om ditt webbplatsinnehåll ändras ofta, som en nyhetswebbplats eller en blogg som uppdateras regelbundet, då måste du tala om för webbläsarna när de ska ladda ner de senaste versionerna av dina filer. Detta säkerställer att alla får det mest uppdaterade innehållet.
Du kan styra detta genom att lägga till Expires-rubriker i WordPress. Dessa rubriker talar om för webbläsaren när en sparad fil ska anses vara gammal och behöver uppdateras.
7. Använd färre typsnitt eller systemtypsnitt
Typsnitt kan få din webbplats att se bra ut och förbättra läsbarheten. Att använda anpassade typsnitt kan göra din webbplats unik och uppmuntra dina besökare att spendera mer tid på att surfa.
Men tänk om du var tvungen att ladda ner många olika typsnitt varje gång du besökte en webbplats. Det skulle ta ett tag att visa allt på sidan.
Nyckeln är att använda ett litet antal typsnitt på din webbplats. Vi rekommenderar att du håller dig till bara två huvudtypsnitt och använder dem över hela din webbplats. Detta minskar det totala antalet filer som dina besökare behöver ladda ner.
Ännu bättre, du kan använda systemfonter istället för anpassade fonter.
Systemfonter är fonter som redan är installerade på människors datorer. Tänk på det som att använda standardfonterna på din dator, som Arial eller Times New Roman.
Om du väljer systemtypsnitt för din webbplats, behöver dina användare inte ladda ner några extra filer alls! Detta minskar storleken på din nätverksnyttolast avsevärt och gör din webbplats snabbare för besökare.
För mer information, se vår guide om hur du inaktiverar Google-typsnitt på din WordPress-webbplats.
8. Undvik långsamma plugins
Slutligen, låt oss prata om plugins. Ibland kan plugins göra din webbplats långsammare och öka storleken på ditt nätverksdata genom att ladda massor av extra JavaScript- och CSS-filer.
Du bör tänka på plugins som extra verktyg du lägger till på din webbplats. Vissa är bra och lätta, medan andra kan vara ganska tunga. Att använda för många tunga plugins kan öka din webbplats nedladdningsstorlek.
Det är svårt att veta vilka plugins som är långsamma vid en snabb anblick, så du måste göra lite research. För mer information kan du se vår guide om vilka WordPress-plugins som saktar ner din webbplats.
När du har hittat de plugins som ökar din webbsides nedladdningsstorlek har du några alternativ.
Först kan du kontakta plugin-utvecklaren och se om det finns något du kan göra för att göra pluginet mer effektivt. Eller så kan du också leta efter ett snabbare plugin som gör samma sak.
För rekommendationer, se vår guide om hur du väljer de bästa WordPress-pluginsen.
👉 Relaterat inlägg: Är du lite nervös för att kontakta en plugin-utvecklare? Läs vår guide om hur man korrekt ber om WordPress-support (och får den).
Ibland kommer du att upptäcka att vissa av de tunga plugins är nödvändiga för din webbplats. I så fall kan du fortfarande göra din webbplats snabbare genom att bara ladda den plugin på de sidor som behöver den istället för att ladda den överallt.
Du kan använda ett gratis plugin som heter Plugin Organizer för att inaktivera plugins på sidor där de inte behövs. Detta minskar nätverksnyttolasten på dessa sidor.
Vanliga frågor om nätverksnyttolaster i WordPress
Här är några av de vanligaste frågorna folk ställer om att minska nätverksanrop i WordPress. Dessa svar hjälper dig att bättre förstå de tekniska aspekterna och implementeringsdetaljerna.
1. Vad exakt är en nätverksnyttolast och varför är den viktig för min WordPress-webbplats?
En nätverksnyttolast är den totala mängden data (bilder, CSS, JavaScript, HTML, etc.) som din webbplats skickar till en besökares webbläsare när de laddar en sida. Stora nyttolaster saktar ner din webbplats eftersom besökare måste ladda ner mer data, vilket är särskilt problematiskt för mobilanvändare eller de med långsammare internetanslutningar. Google tar också hänsyn till nyttolaststorleken vid rangordning av webbplatser, så att optimera den kan förbättra din SEO.
2. Hur kan jag kontrollera min nuvarande nätverksnyttolaststorlek?
Du kan kontrollera din nätverksnyttolast med Google PageSpeed Insights, GTmetrix eller din webbläsares utvecklarverktyg. I Chrome trycker du på F12, går till fliken Nätverk och laddar om din sida. Den totala storleken visas längst ner. Generellt vill du hålla din totala nyttolast under 1-2 MB för optimal prestanda.
3. Kommer minskning av nätverksnyttolaster att påverka min webbplats funktionalitet eller design?
Inte om det görs korrekt. Teknikerna fokuserar på att optimera och komprimera befintligt innehåll snarare än att ta bort funktioner. Du behåller samma funktionalitet och visuella utseende samtidigt som du levererar innehåll mer effektivt. Testa dock alltid ändringar på en staging-webbplats först för att säkerställa att allt fungerar korrekt.
4. Hur ofta bör jag optimera mina nätverksnyttolaster?
Du bör övervaka dina nyttolaster månadsvis och optimera när du lägger till nytt innehåll, plugins eller teman. Ställ in regelbundna granskningar med verktyg som Google Search Console för att spåra dina Core Web Vitals. Större optimeringar kan behövas kvartalsvis, men löpande underhåll bör vara en del av din vanliga WordPress-underhållsrutin.
5. Kan jag minska nätverksanrop utan teknisk kunskap?
Ja, många optimeringstekniker kan implementeras med hjälp av användarvänliga plugins som WP Rocket, Smush eller Autoptimize. Dessa verktyg hanterar bildkomprimering, filminifiering och cachning automatiskt. För avancerade optimeringar kan du dock behöva hjälp av en utvecklare eller WordPress-expert.
Bonus: Experthandledningar relaterade till WordPress-prestanda
Vi hoppas att den här handledningen hjälpte dig att lära dig hur du undviker enorma nätverkslaster i WordPress. Du kanske också vill se några guider om andra sätt att förbättra WordPress-prestanda:
- Den ultimata guiden för att öka WordPress-hastighet & prestanda
- Varför är WordPress långsamt? Lär dig hur du fixar det
- Hur du snabbar upp din e-handelswebbplats
- Hur vi ökar sidladdningshastigheten på WPBeginner
- Hur man korrekt kör ett hastighetstest av en webbplats
- Bästa WordPress-cache-plugins för att snabba upp din webbplats
- Varför behöver du ett CDN för din WordPress-blogg?
- Hur man minskar HTTP-förfrågningar i WordPress
- Hur du avlastar WordPress-media för att förbättra webbplatsens hastighet
- WordPress databasunderhåll: Hur du optimerar din databas
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Har du en fråga eller ett förslag? Lämna gärna en kommentar för att starta diskussionen.