Skip to content

Allt om WordPress, webbutveckling — och mer därtill

⚡ Hur du minskar HTTP-förfrågningar i WordPress

⚡ Hur du minskar HTTP-förfrågningar i WordPress

Din webbplats är långsam, och GTMetrix visar 130+ HTTP-förfrågningar per sida?

Det här är ingen abstrakt siffra från en rapport. Varje förfrågan är ett anrop från webbläsaren till servern efter en fil: ett skript, en stilmall, en bild eller ett typsnitt. Ju fler förfrågningar, desto längre stirrar besökarna på en tom skärm. Enligt Portent minskar en laddningsfördröjning från 0 till 3 sekunder konverteringen med 2,5%. Och varje extra sekund utöver det kostar ytterligare 4,4%.

Problemet med HTTP-förfrågningar är inte att de finns. Det är att de flesta WordPress-sajter genererar långt fler än nödvändigt. Här nedan följer fem konkreta åtgärder som minskar antalet förfrågningar utan att du behöver bygga om sajten från grunden.

💡 Snabb överblick:

  • Ta bort oanvända tillägg och teman som skapar extra förfrågningar på varje sida
  • Optimera bilder: komprimera filer, ta bort oanvända bilder, slå ihop ikoner till sprites
  • Slå ihop CSS och JavaScript till 1-2 filer och aktivera minifiering
  • Ställ in uppskjuten laddning för skript som blockerar sidrenderingen
  • Aktivera cachning och CDN så att återkommande besökare inte laddar om hela sajten

Steg 1. Rensa bort onödigt material

Varje installerat tillägg drar med sig filer. PHP, CSS, JavaScript: alla dessa skapar en HTTP-förfrågan när sidan laddas. Tjugo tillägg innebär nästan hundra förfrågningar bara vid uppstart, innan något innehåll visas.

Det första du bör göra är en genomgång. Öppna Tillägg → Installerade tillägg och fråga dig själv ärligt: vilka är avgörande för att sajten ska fungera, och vilka ligger bara där "utifall att"? Den där SEO-analysatorn du installerade för ett år sedan och öppnade två gånger är en kandidat för borttagning. Tillägget för sociala ikoner likaså, om du redan har lagt till länkar i sidfoten ändå.

En särskild kategori är tillägg som ansluter till tredjepartsservrar. Livechatt, webbradio, push-notiser. Varje sådant tillägg skapar ytterligare externa HTTP-förfrågningar till tredjepartsservrar. Ta bort allt som sajten kan fungera utan. Behöver du det en gång i månaden? Installera det för en dag och ta sedan bort det.

Samma regel gäller för teman. Under Utseende → Teman, behåll bara ditt aktiva tema och en backup (till exempel standardtemat Twenty Twenty-Five). Ta bort resten.

Om ett tillägg behövs men bara på en specifik sida, ladda det selektivt. Asset CleanUp: Page Speed Booster gör precis detta. Det är ett gratis tillägg med över 100 000 aktiva installationer och betyget 4,7 på WordPress.org.

Asset CleanUp-pluginens gränssnitt för WordPress

Tillägget skannar sidan, visar en lista över inlästa CSS- och JS-filer och låter dig inaktivera specifika filer på särskilda sidor, inläggstyper eller webbplatsövergripande. Behöver du Contact Form 7 bara på kontaktsidan? Avmarkera det överallt annars, så laddas inte dess skript där formuläret inte används.

🔗 Asset CleanUp på WordPress.org

Passa samtidigt på att optimera din databas. Efter att du rensat bland tillägg ligger deras inställningar och poster kvar i tabellerna och bör också tas bort. Kontrollera även trasiga länkar: varje omdirigering är en extra HTTP-förfrågan.

För att tydligt se problemets omfattning före och efter, testa din sajt i GTMetrix:

Prestandatestresultat i GTMetrix

Den första körningen visar utgångsläget: antal förfrågningar, total sidstorlek, laddningstid. Efter varje steg i den här artikeln, kör testet igen. På så sätt ser du vilka förändringar som gav störst effekt.

Steg 2. Optimera bilder

Bilder är den största "vikten" på en genomsnittlig WordPress-sida. Enligt HTTP Archive står bilder för cirka 44% av den totala sidstorleken på desktop. Och varje bild är en HTTP-förfrågan.

Börja med att ta bort oanvända filer. Under Media → Bibliotek, filtrera på "Ej bifogad". Detta är bilder som inte är kopplade till något inlägg. Om de inte används i temat eller sidfoten, ta bort dem.

Därefter kommer komprimering. Tillägg som WP Compress hanterar detta automatiskt: när du laddar upp en bild körs den genom en molnoptimerare, komprimeras utan synlig kvalitetsförlust och konverteras till WebP eller AVIF. Dessa format är märkbart lättare än JPEG vid samma visuella kvalitet. Enligt Google minskar WebP filstorleken med i genomsnitt 25-35% jämfört med JPEG.

WP Compress-plugins instrumentpanel för bildkomprimering

WP Compress har över 10 000 aktiva installationer, betyget 4,5 av 5 och över 1,1 miljoner nedladdningar på WordPress.org. De första 100 bilderna är gratis, tillräckligt för att se skillnaden.

🔗 WP Compress på WordPress.org

Enbart komprimering minskar inte antalet HTTP-förfrågningar. Men det minskar storleken på varje fil, vilket innebär kortare tid att överföra den. I kombination med de andra stegen ger detta en märkbar hastighetsökning.

CSS-sprites: en fil istället för tio

Om du har ett dussin små ikoner på en sida (sociala nätverk, pilar, betygsstjärnor) laddas var och en som en separat förfrågan. En CSS-sprite löser detta: alla ikoner slås ihop till en fil, och CSS visar den önskade delen av bilden.

Så här fungerar det: fem bilder innebär fem serveranrop. Samma fem bilder sammanslagna till en sprite innebär ett anrop. Onlineverktyg som CSS Sprite Generator kan skapa sprites åt dig. Grundläggande CSS-kunskaper krävs för att ställa in background-position för varje ikon.

Observera: om din server stöder HTTP/2 laddas filer asynkront inom en enda anslutning. I så fall är besparingarna med sprites mindre märkbara. Men i praktiken laddas ett dussin ikoner i en fil fortfarande snabbare än tio separata.

Steg 3. Slå ihop och minifiera CSS och JavaScript

En typisk WordPress-sajt har över 40 JS-filer och över 20 CSS-filer. Var och en är en separat HTTP-förfrågan. Det blir över 60 serveranrop bara för skript och stilmallar, som alla laddas innan något innehåll visas.

Minifiering tar bort allt onödigt från filer: mellanslag, radbrytningar, kommentarer. Filen blir lättare, men antalet HTTP-förfrågningar förblir detsamma.

Sammanslagning slår ihop flera filer till en. Fem CSS-filer blir två (en för innehåll ovanför mitten, en för allt annat). Fem JS-filer, samma sak. Och istället för tio förfrågningar är du nere på två eller tre.

Det mest populära gratisverktyget för detta är Autoptimize. Ett tillägg med en miljon aktiva installationer och betyget 4,7. I inställningarna finns tre kryssrutor: optimera HTML, CSS och JS. Kryssa i alla tre och se omedelbara resultat.

För finare kontroll finns WP Rocket, en premiumlösning som slår ihop filer, minifierar dem och lägger till cachning i ett och samma gränssnitt.

Fil- och minifieringsinställningar i WP Rocket

Efter att du har kombinerat filer, kontrollera alltid din webbplats i inkognitoläge: ibland kan sammanslagning av filer förstöra layouten. Om något ser fel ut, inaktivera kombineringsfunktionen för den problematiska filen och behåll endast minifiering.

🔗 WP Rockets officiella webbplats

En sak till: att kombinera filer är ingen universallösning. Om ett tillägg laddar externa skript från ett CDN (Google Fonts, reCAPTCHA, YouTube-spelare) kan du inte kombinera dem. Du kan bara skjuta upp dem eller ladda dem asynkront, vilket leder oss till nästa steg.

Steg 4. Hantera renderingsblockerande skript

Webbläsaren läser en sida uppifrån och ner. När den stöter på <script src="..."> i <head> slutar den rendera, laddar ner hela skriptet och fortsätter först därefter. Besökarna ser en tom sida under tiden.

Lösningen är att flytta skript som inte behövs för att rendera den första skärmbilden till sidans botten, eller lägga till attributet async/defer. Skillnaden:

  • defer: skriptet laddas i bakgrunden men körs strikt efter att HTML-tolkningen är klar och i den ordning de inkluderas;
  • async: skriptet laddas och körs vid första möjliga tillfälle, utan garanterad ordning.

För WordPress finns ett gratis plugin som heter Async JavaScript. Det lägger till async eller defer på valda skript via ett tydligt gränssnitt. Det fungerar direkt men kräver försiktighet: om ett skript som lagts till med async behöver köras före ett annat kan sidan gå sönder.

Ett säkert tillvägagångssätt är att testa på ett skript, kontrollera sajten i inkognitoläge och sedan gå vidare till nästa.

WP Rocket kan också skjuta upp skript: gå till File Optimization → Load JavaScript deferred. Välj "Deferred" och lägg till jQuery i undantagen, eftersom de flesta WordPress-teman och plugins är beroende av det.

Resultat: sidan börjar renderas tidigare, även om det totala antalet HTTP-förfrågningar inte har förändrats. Besökarna ser innehåll medan resterande skript laddas i bakgrunden.

Steg 5. Aktivera cachning och CDN

Cachning minskar direkt HTTP-förfrågningar vid återkommande besök. Mekaniken är enkel: webbläsaren sparar statiska filer (CSS, JS, bilder, typsnitt) lokalt. Vid nästa sidladdning hämtas filen från cachen istället för att begäras från servern. Noll HTTP-förfrågningar för den filen.

Cachning på serversidan är nästa nivå: servern levererar en redan färdigställd HTML-sida istället för att köra dussintals PHP-frågor mot databasen. Cachningsplugins (WP Rocket, Flying Press, W3 Total Cache) gör detta automatiskt.

CDN (Content Delivery Network) är ett nätverk av servrar över hela världen. Istället för att hämta filer från ditt webbhotell i Nederländerna för en besökare i Brasilien, levererar CDN:t dem från den närmaste noden. Dessutom inkluderar CDN-leverantörer ofta komprimering, minifiering och bildoptimering direkt.

Cloudflare är ett gratisalternativ som täcker grundläggande behov: CDN, DDoS-skydd, gratis SSL.

Cloudflare-plugin för WordPress i adminpanelen

Installera Cloudflare-pluginet för WordPress. Det ansluter din sajt till CDN:t och ger grundläggande inställningar direkt från adminpanelen. För finare kontroll, gå till Cloudflares instrumentpanel: aktivera Auto Minify för CSS/JS/HTML, Brotli-komprimering och Rocket Loader för asynkron skriptladdning.

🔗 Cloudflare på WordPress.org

Med cachning och CDN sjunker antalet HTTP-förfrågningar för återkommande besökare dramatiskt. Första besöket: full inladdning. Andra besöket: de flesta filer kommer från webbläsarens cache och den närmaste CDN-noden utan några anrop till din server.

Bonus: kontrollera om din server stöder HTTP/2

HTTP/2 är ett protokoll som överför flera filer genom en enda TCP-anslutning. Webbläsaren väntar inte på att fil #1 ska laddas klart innan den begär fil #2; de laddas parallellt. Detta minskar effekten av ett högt antal HTTP-förfrågningar: 60 filer över HTTP/2 laddas snabbare än samma 60 över HTTP/1.1.

Kontrollera din server med KeyCDN:s HTTP/2-testverktyg. Ange din domän och klicka på "Test." Ett resultat som visar "HTTP/2 is supported" betyder att multiplexing fungerar.

HTTP/2-supportkontroll med KeyCDN-verktyget

Om testet visar HTTP/1.1, kontakta ditt webbhotell. De flesta moderna webbhotell (SiteGround, Cloudways, Kinsta) aktiverar HTTP/2 som standard. På delade webbhotell från 2010-talet är detta kanske inte fallet. Kontrollera också din PHP-version: uppgradering till en modern PHP-version ger en märkbar prestandaökning, medan föråldrade versioner behandlar förfrågningar betydligt långsammare. Om ditt webbhotell inte uppdaterar vare sig protokollet eller PHP-versionen kan det vara dags att överväga att byta webbhotell.

Om du föredrar videoformat, här är en visuell guide för att minska HTTP-förfrågningar i WordPress (12 minuter).

⁉️🤔 Vanliga frågor

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

Ett riktmärke är 30 till 60 per sida. Allt över 80-90 kräver optimering. GTMetrix och Pingdom visar specifika siffror i sina rapporter. Efter att ha tillämpat de fem stegen i denna artikel är det realistiskt att gå från 130 till 35-45 förfrågningar.

"Jag har en sajt på Elementor, och den har redan 100+ förfrågningar. Är det normalt?"

Sidbyggare genererar mycket CSS och JS av naturen. Elementor och Divi lägger till 30-50 förfrågningar på egen hand. Detta betyder inte "acceptera det"; det betyder att resten av din sajt bör vara så ren som möjligt. Ta bort allt som inte är relaterat till sidbyggaren: onödiga plugins, externa typsnitt, ooptimerade bilder. Behåll bara det som faktiskt tjänar dina besökare.

Vad är viktigast: antal förfrågningar eller total sidstorlek?

Båda. 20 förfrågningar på 1 MB vardera innebär en sidladdning på 20 sekunder. 100 förfrågningar på 5 KB vardera kan laddas snabbare, men varje förfrågning medför overhead för DNS-uppslag, TCP-anslutning och TLS-handskakning. På HTTP/2 jämnas denna skillnad ut. På HTTP/1.1 är den kritisk. Optimera båda: minska antalet förfrågningar genom filkombinering och sprites, minska storleken genom komprimering och minifiering.

Klarar jag mig utan plugins?

Delvis, ja. CSS/JS-minifiering kan ställas in via Gulp eller Webpack under temautveckling. HTTP/2 aktiveras på servernivå (Nginx/Apache-konfiguration). Cachning kan göras via serverregler. Men för de flesta WordPress-sajtägare är plugins den mest praktiska vägen: installation tar minuter, resultaten är omedelbara och risken att förstöra sajten är lägre.

Hur ofta bör jag kontrollera antalet HTTP-förfrågningar igen?

Efter varje större plugininstallation eller uppdatering. Ett nytt plugin kan lägga till sin CSS/JS på alla sidor, och du märker det inte förrän sajten börjar hacka. En gång i månaden är tillräckligt för rutinkontroller. GTMetrix låter dig ställa in automatisk övervakning med varningar när prestandan sjunker.

Behöver jag ens den här guiden om jag redan har snabb hosting?

Hosting löser en del av problemet på servernivå, men inte på kodnivå. Om ett plugin stoppar in 15 skript i sidans <head> kommer inte ens toppservrar få dem att laddas direkt. Webbläsaren kommer fortfarande att vänta. Snabb hosting ger dig ett försprång, men den verkliga vinnaren är den som städar upp klientsidan också.

Vad minskar faktiskt HTTP-förfrågningar, och vad gör det inte?

Låt oss gå igenom alla steg utan illusioner:

  • Rensa upp bland plugins och teman ger den mest märkbara förbättringen. Varje borttaget plugin eliminerar sin CSS, JS och externa anrop. I praktiken försvinner 10-30 förfrågningar efter en genomgång.
  • Bildkomprimering minskar filstorlekar, men antalet förfrågningar förblir detsamma. Den totala laddningstiden sjunker dock märkbart.
  • Kombinera CSS och JS minskar antalet förfrågningar rejält. Nackdel: det kan förstöra layouten, så kontrollera efter varje ändring.
  • Uppskjuten skriptladdning: samma antal förfrågningar, men sidan blir synlig snabbare.
  • Cachning och CDN: för nya besökare är skillnaden minimal. För återkommande besökare sker upprepade sidladdningar utan en enda förfrågan till servern.

Om vi måste välja exakt tre åtgärder som ger störst effekt på en typisk WordPress-sajt: (1) ta bort onödiga plugins, (2) aktivera CSS/JS-kombinering via Autoptimize, (3) sätt upp Cloudflare. Det är tre steg som tar en kväll snarare än en vecka, och du ser resultaten i GTMetrix-siffrorna redan nästa dag.