Din webbplats tar 4 sekunder att ladda, och besökaren lämnar. Låter det bekant?

Enligt Google Research från 2023 ökar sannolikheten för avvisning med 32% när laddtiden går från 1 till 3 sekunder. En av de främsta orsakerna till inbromsningar som ofta förbises är överdrivet många HTTP-förfrågningar. De sticker inte ut som tunga bilder eller dålig webbhotell, men de hopar sig i dussintal och äter tillsammans upp sekunder.

Låt oss bryta ner vad dessa förfrågningar är, hur du hittar dem genom vattenfallsanalys i GTmetrix, och viktigast av allt, hur du minskar antalet utan att skada webbplatsens funktionalitet.

💡 Snabb översikt:

• Öppna GTmetrix, klistra in din webbadress och gå till fliken Waterfall för att se varje förfrågan med dess storlek och laddtid
• Filtrera förfrågningar efter mapparna plugins och themes för att hitta tillägg som laddar skript på alla sidor i onödan
• Gå igenom 5 kontrollpunkter: onödiga bilder, okombinerad CSS/JS, tillägg med global laddning, tunga tillägg och saknad lazy loading
• Efter att du gjort ändringar, kör testet igen och jämför antalet förfrågningar före och efter

Vad HTTP-förfrågningar är och varför de saktar ner din webbplats

När en webbläsare öppnar en sida får den inte en färdig bild på en gång. Den behöver HTML-skelettet, stilmallsfiler, varje skript, typsnitt, bilder, och för varje element skickar webbläsaren en separat HTTP-förfrågan till servern.

Vissa förfrågningar går till din server (interna: bilder från mediebiblioteket, tema, tillägg). Andra går till externa tjänster (Google Analytics, YouTube-inbäddningar, annonsskript). Webbläsaren köar dem och laddar dem.

Sambandet är enkelt: fler förfrågningar innebär längre laddtider. Men alla förfrågningar är inte likvärdiga. Ett litet spårningsskript laddas på 20 ms, medan en ooptimerad bild på 500 KB kan hänga sig i en halv sekund. Så målet är inte bara att "minska antalet" utan att ta bort onödiga och lätta upp de återstående.

I praktiken är skillnaden märkbar: en portföljwebbplats på ett rent tema gör 18 förfrågningar och öppnas direkt. En stor nyhetsportal som New York Times gör över 200 förfrågningar, varav hälften är annons- och spårningsskript. Din webbplats ligger någonstans däremellan, och det antalet kan minskas.

Hur man analyserar HTTP-förfrågningar: vattenfall i GTmetrix

Det tydligaste sättet att se HTTP-förfrågningar är ett vattenfallsdiagram (kaskad). Det visar varje förfrågan som en separat rad: var den kommer ifrån, hur mycket den väger, när den började ladda och hur lång tid det tog.

Verktyg som kan visa vattenfall:

• Inbyggda Chrome DevTools (fliken Nätverk), gratis men bara för din webbläsare
• GTmetrix, gratisnivå, testning från olika platser, tydligt gränssnitt
• Pingdom Tools, liknar GTmetrix, andra testpunkter
• WebPageTest, maximal detaljrikedom men mer komplex att komma igång med

Låt oss titta på GTmetrix som ett exempel. Klistra in webbadressen, kör testet. I resultaten hittar du fliken Waterfall, som är kaskaden:

Själva diagrammet ser ut så här:

Vad kolumnerna betyder:

• URL, sökvägen till filen. Visar vilket plugin eller tema som lade till begäran
• Domän, din server eller extern. Du ser direkt hur mycket som laddas utifrån
• Storlek, filens vikt. Tunga begäranden slår hårdare mot hastigheten
• Tidslinje, när begäran startade och hur länge den varade. Storlek är inte det enda som spelar roll: en fil i början av kedjan blockerar allt som kommer efter den

Klicka i sökfältet ovanför diagrammet och skriv wp-content/plugins för att bara se plugin-begäranden. I exemplet nedan lägger pluginet Lightweight Social Fonts till en teckensnittsbegäran för fontello.woff på 22,9 KB:

Om du filtrerar på themes ser du temabegäranden. GeneratePress skickar till exempel bara 4 begäranden, vilket är en bra indikator på ett lättviktstema:

Gå igenom listan och fråga dig själv: "Behöver det här pluginet verkligen laddas på varje sida?" Ofta är svaret nej. Vi går igenom vad du kan göra åt det härnäst.

5 Sätt att minska HTTP-begäranden i WordPress

Efter vattenfallsanalysen har du en lista med begäranden i handen. Nu till de konkreta stegen för att minska dem.

1. Ta bort onödiga och oförberedda bilder

Varje bild = en HTTP-begäran. Om en sida har 15 bilder och 5 av dem är dekorativa eller dubbletter, är det 5 begäranden du kan ta bort utan att förlora mening. För nödvändiga bilder är regeln annorlunda: komprimera och ändra storlek så att de matchar visningsmåtten. En bild på 2500 px som sätts in i ett block som är 700 px brett laddar 5 gånger mer data än nödvändigt.

I praktiken hjälper en kombination: manuell genomgång (ta bort det onödiga) + ett komprimeringsplugin. Bland aktuella alternativ finns ShortPixel, Imagify, Smush. De komprimerar bilder vid uppladdning till mediebiblioteket och kan komprimera om befintliga.

2. Slå ihop CSS och JavaScript

Temat och varje plugin lägger till sina egna stil- och skriptfiler. Om du har ett aktivt tema, 10 plugins och ett par externa tjänster kan du lätt samla på dig 30-40 separata CSS/JS-filer. Var och en kräver en egen HTTP-begäran.

Tekniken kallas konkatenering (sammanslagning) och kommer oftast tillsammans med minifiering (borttagning av mellanslag och kommentarer från kod). De flesta prestandaplugins gör båda:

• WP Rocket, premiumplugin, slår ihop och minifierar CSS/JS med några få klick
• Autoptimize, gratis, enbart konkatenering och minifiering

Viktigt: efter att du aktiverat sammanslagning, gå igenom sajtens huvudsidor och kontrollera att layouten inte har gått sönder. Ibland krockar skript när de slås ihop, och då utesluter du den specifika filen från sammanslagningen.

3. Förhindra att plugins laddas där de inte behövs

Ett kontaktformulär finns bara på kontaktsidan. Men dess CSS och JS laddas ofta över hela sajten, vilket innebär 2-3 extra begäranden på varje sida utan formulär. Contact Form 7 laddar till exempel skript globalt som standard.

Om pluginet tillåter det finns det två vägar:

• Byt ut det mot ett mer optimerat alternativ som inte laddar resurser globalt
• Behåll tillägget men hantera skriptladdning via Perfmatters, som har en skripthanterare som låter dig inaktivera ett tilläggs CSS/JS på alla sidor utom där det faktiskt används

Resultat: samma 2-3 anrop men bara på kontaktsidan, inte på hela sajten.

4. Byt ut tunga tillägg mot lättare alternativ

När du filtrerar vattenfallet på plugins ser du vilka tillägg som genererar flest anrop. Om ett tillägg lägger till 8 skript och stilmallar medan dess alternativ klarar sig med två, så kapar bytet 6 HTTP-anrop.

Exempel på ersättningar från praktiken:

• Revolution Slider (tungt) → ett lättviktigt omslagsblock från temat eller MetaSlider
• Sidbyggare med dussintals skript → det inbyggda Gutenberg-blockredigeringsverktyget
• Socialt tillägg med externa API-anrop → statiska länkikoner

Kontrollera varje tillägg från vattenfallslistan: används det överhuvudtaget? Om ett tillägg inte har uppdaterats på över ett år eller funktionaliteten inte behövs, ta bort det helt.

5. Aktivera lazy loading

Lazy loading skjuter upp laddningen av bilder och iframes som ligger under det synliga skärmområdet. En besökare öppnar sidan, och bara det de ser laddas. Resten hämtas in allteftersom de scrollar.

Sedan WordPress 5.5 läggs attributet loading="lazy" till på bilder automatiskt. Det räcker för grundscenariot. Om du behöver mer aggressiv lazy loading (för iframes, bakgrundsbilder, videor), använd Perfmatters, WP Rocket eller den kostnadsfria LazyLoad by WP Rocket.

Video: WordPress HTTP-anrop på 5 minuter

En kort video om ämnet, från diagnos till att minska anrop utan tillägg:

⁉️🤔 Vanliga frågor

Hur många HTTP-förfrågningar är normalt för WordPress?

Det finns inget universellt tal. En ren sajt med ett lättviktigt tema och 5-7 tillägg hamnar inom 25-40 förfrågningar. En sajt med en sidbyggare, annonsskript och ett dussin tillägg kan göra 80-120. Fokusera inte på det absoluta antalet utan på trenden: om det var 90 och blev 55 är det ett bra resultat.

Påverkar externa förfrågningar (Google Fonts, Analytics) hastigheten?

Det gör de, men på olika sätt. En extern förfrågan till Google Fonts lägger till 1-2 förfrågningar, men de går via Googles CDN och laddar snabbt. Huvudproblemet är renderingsblockering: tills typsnittet laddats kan webbläsaren låta bli att visa text. Lösning: förladda typsnitt via preload eller hosta typsnitten lokalt.

Är det nödvändigt att slå ihop all CSS och JS till en fil?

Inte alltid. Att slå ihop alla skript till en fil ger dig en förfrågan, men en stor fil tar längre tid att ladda. Modern HTTP/2 kan ladda flera filer parallellt, så 3-4 filer på 30 KB vardera kan ladda snabbare än en på 120 KB. Optimalt är att slå ihop kritisk CSS (det som behövs för att rendera första skärmbilden) och lämna icke-kritiska skript separata med attributet defer.

Vad gör jag om layouten går sönder efter att CSS slagits ihop?

Exkludera den problematiska filen från sammanslagningen. WP Rocket och Autoptimize låter dig lägga till en skript- eller stil-URL i exkluderingslistan. Kör testet igen efter det. Att förlora en fil från en pool på 15 förfrågningar märks knappt.

Kan man minska förfrågningar utan tillägg?

Det kan du. Manuell avregistrering av skript via functions.php ger full kontroll men kräver förståelse för WordPress hooks. För de flesta sajtägare är WP Rocket eller Perfmatters enklare och säkrare: de låter dig inte inaktivera ett skript som är kritiskt för driften.

Dags att städa upp dina förfrågningar

HTTP-förfrågningar är inget du fixar en gång. Installera ett nytt tillägg, byt tema, lägg till ett annonsskript, och nya förfrågningar dyker upp. Med ett par månaders mellanrum, gå till GTmetrix, öppna Vattenfall och jämför med vad du hade förra gången.

Om du inte vet just nu hur många förfrågningar din sajt gör, öppna GTmetrix, klistra in URL:en och klicka på "Start Test". Om en minut ser du den verkliga bilden. Följ sedan stegen i den här artikeln. Varje borttagen förfrågan för din sajt närmare att ladda på 1-2 sekunder.