Nettstedet ditt bruker 4 sekunder på å laste, og den besøkende forlater det. Høres det kjent ut?

Ifølge Google Research fra 2023 øker sannsynligheten for sprett med 32% når lastetiden går fra 1 til 3 sekunder. En av hovedårsakene til treghet som ofte blir oversett, er overdrevent mange HTTP-forespørsler. De skiller seg ikke ut slik tunge bilder eller dårlig webhotell gjør, men de hoper seg opp i dusinvis og spiser til sammen opp sekunder.

La oss se nærmere på hva disse forespørslene er, hvordan du finner dem gjennom fossefallsanalyse i GTmetrix, og ikke minst, hvordan du reduserer antallet uten å skade funksjonaliteten på nettstedet ditt.

💡 Rask oversikt:

• Åpne GTmetrix, lim inn URL-en til nettstedet ditt og gå til Waterfall-fanen for å se hver forespørsel med størrelse og lastetid
• Filtrer forespørsler etter mappene plugins og themes for å finne utvidelser som laster skript på alle sider unødvendig
• Gå gjennom 5 sjekkpunkter: unødvendige bilder, ukombinert CSS/JS, utvidelser med global lasting, tunge utvidelser og manglende «lazy loading»
• Etter at du har gjort endringer, kjør testen på nytt og sammenlign antall forespørsler før og etter

Hva HTTP-forespørsler er og hvorfor de gjør nettstedet ditt tregt

Når en nettleser åpner en side, mottar den ikke et ferdig bilde med én gang. Den trenger HTML-skjelettet, stilarkfiler, hvert skript, fonter, bilder, og for hvert element sender nettleseren en separat HTTP-forespørsel til serveren.

Noen forespørsler går til din server (interne: bilder fra mediebiblioteket, tema, utvidelser). Andre går til eksterne tjenester (Google Analytics, YouTube-innbygginger, annonseskript). Nettleseren setter dem i kø og laster dem.

Sammenhengen er enkel: flere forespørsler betyr lengre lastetider. Men ikke alle forespørsler er like. Et lite sporingsskript laster på 20 ms, mens et uoptimalisert bilde på 500 KB kan henge i et halvt sekund. Så målet er ikke bare å «redusere antallet», men å fjerne unødvendige og lette de gjenværende.

I praksis er forskjellen merkbar: en porteføljeside på et rent tema gjør 18 forespørsler og åpnes umiddelbart. En stor nyhetsportal som New York Times gjør over 200 forespørsler, hvorav halvparten er annonse- og sporingsskript. Ditt nettsted ligger et sted imellom, og det tallet kan reduseres.

Hvordan analysere HTTP-forespørsler: fossefall i GTmetrix

Den tydeligste måten å se HTTP-forespørsler på er et fossefallsdiagram (kaskade). Det viser hver forespørsel som en egen rad: hvor den kommer fra, hvor mye den veier, når den begynte å laste, og hvor lang tid det tok.

Verktøy som kan vise fossefall:

• Innebygd Chrome DevTools (Network-fanen), gratis, men bare for din nettleser
• GTmetrix, gratisversjon, testing fra ulike lokasjoner, tydelig grensesnitt
• Pingdom Tools, ligner på GTmetrix, andre testpunkter
• WebPageTest, maksimal detaljrikdom, men mer kompleks å begynne med

La oss se på GTmetrix som et eksempel. Lim inn URL-en, kjør testen. I resultatene finner du fanen Waterfall, som er fossefallet:

Selve diagrammet ser slik ut:

Hva kolonnene betyr:

• URL, filbanen. Denne viser hvilken plugin eller tema som la til forespørselen
• Domene, din server eller ekstern. Du ser umiddelbart hvor mye som lastes utenfra
• Størrelse, filvekt. Tunge forespørsler påvirker hastigheten mer
• Tidslinje, når forespørselen startet og hvor lenge den varte. Størrelse er ikke det eneste som betyr noe: en fil i begynnelsen av kjeden blokkerer alt som kommer etter den

Klikk på søkefeltet over diagrammet og skriv inn wp-content/plugins for å se bare plugin-forespørsler. I eksempelet nedenfor legger Lightweight Social Fonts-pluginen til en skriftforespørsel for fontello.woff på 22,9 KB:

Filtrerer du på themes, ser du temaforespørsler. GeneratePress serverer for eksempel bare 4 forespørsler, noe som er en god indikator på et lettvekts tema:

Gå gjennom listen og spør deg selv: «Må denne pluginen virkelig lastes på hver side?» Ofte er svaret nei. Vi skal se på hva du kan gjøre med det nå.

5 Måter å redusere HTTP-forespørsler i WordPress

Etter vannfallsanalysen har du en liste over forespørsler i hånden. Her er de konkrete stegene for å redusere dem.

1. Fjern unødvendige og uforberedte bilder

Hvert bilde = én HTTP-forespørsel. Hvis en side har 15 bilder og 5 av dem er dekorative eller duplikater, er det 5 forespørsler du kan fjerne uten å miste mening. For nødvendige bilder er regelen annerledes: komprimer og endre størrelse slik at de matcher visningsdimensjonene. Et bilde på 2500 piksler satt inn i en blokk på 700 piksler bredde laster 5 ganger mer data enn nødvendig.

I praksis hjelper en kombinasjon: manuell gjennomgang (fjern det unødvendige) + en komprimeringsplugin. Blant aktuelle alternativer er ShortPixel, Imagify, Smush. De komprimerer bilder ved opplasting til mediebiblioteket og kan rekomprimere eksisterende.

2. Kombiner CSS og JavaScript

Temaet og hver plugin legger til sine egne stil- og skriptfiler. Har du et aktivt tema, 10 plugins og et par eksterne tjenester, kan du lett samle opp 30-40 separate CSS/JS-filer. Hver enkelt krever en separat HTTP-forespørsel.

Teknikken kalles sammenkobling (kombinering) og kommer vanligvis sammen med minifisering (fjerning av mellomrom og kommentarer fra kode). De fleste ytelsesplugins gjør begge deler:

• WP Rocket, premium-plugin, kombinerer og minifiserer CSS/JS med noen få klikk
• Autoptimize, gratis, kun sammenkobling og minifisering

Viktig: etter at du har aktivert kombinering, gå gjennom hovedsidene dine og sjekk at layouten ikke har knekt. Noen ganger oppstår det konflikter når skript slås sammen, og da ekskluderer du den aktuelle filen fra kombineringen.

3. Hindre plugins i å lastes der de ikke trengs

Et kontaktskjema ligger bare på kontaktsiden. Men CSS-en og JS-en laster ofte på hele nettstedet, noe som betyr 2-3 ekstra forespørsler på hver side uten skjema. Contact Form 7 laster for eksempel skript globalt som standard.

Hvis pluginen tillater det, finnes det to veier:

• Bytt det ut med et mer optimalisert alternativ som ikke laster ressurser globalt
• Behold utvidelsen, men styr skriptinnlastingen via Perfmatters, som har en skriptbehandler som lar deg deaktivere en utvidelses CSS/JS på alle sider unntatt der den faktisk brukes

Resultat: de samme 2-3 forespørslene, men bare på kontaktsiden, ikke hele nettstedet.

4. Bytt tunge utvidelser med lettere alternativer

Etter at du har filtrert vannfallsdiagrammet på plugins, kan du se hvilke utvidelser som genererer flest forespørsler. Hvis én utvidelse legger til 8 skript og stilark mens alternativet klarer seg med to, kutter byttet 6 HTTP-forespørsler.

Eksempler på erstatninger fra praksis:

• Revolution Slider (tung) → en lett cover-blokk fra temaet eller MetaSlider
• Sidebygger med dusinvis av skript → den innebygde Gutenberg-blokkeditoren
• Sosial utvidelse med eksterne API-kall → statiske lenkeikoner

Sjekk hver utvidelse fra vannfallslisten: blir den i det hele tatt brukt? Hvis en utvidelse ikke har vært oppdatert på over ett år eller funksjonaliteten ikke er nødvendig, slett den helt.

5. Aktiver lat lasting

Lat lasting utsetter innlastingen av bilder og iframes som er under det synlige skjermområdet. En besøkende åpner siden, og bare det de ser lastes inn. Resten hentes inn etter hvert som de ruller.

Siden WordPress 5.5 legges attributtet loading="lazy" til bilder automatisk. Dette er tilstrekkelig for grunnscenarioet. Trenger du mer aggressiv lat lasting (for iframes, bakgrunnsbilder, videoer), bruk Perfmatters, WP Rocket eller den gratis LazyLoad by WP Rocket.

Video: WordPress HTTP-forespørsler på 5 minutter

En kort video om temaet, fra diagnose til å redusere forespørsler uten utvidelser:

⁉️🤔 Ofte stilte spørsmål

Hvor mange HTTP-forespørsler er normalt for WordPress?

Det finnes ikke noe universelt tall. Et rent nettsted på et lett tema med 5-7 utvidelser holder seg innenfor 25-40 forespørsler. Et nettsted med et sidebyggerverktøy, annonseskript og et dusin utvidelser kan gjøre 80-120. Fokuser ikke på det absolutte tallet, men på trenden: hvis det var 90 og ble 55, er det et godt resultat.

Påvirker eksterne forespørsler (Google Fonts, Analytics) hastigheten?

De gjør det, men på en annen måte. En ekstern forespørsel til Google Fonts legger til 1-2 forespørsler, men de går gjennom Googles CDN og lastes raskt. Hovedproblemet er render-blokkering: før skriften er lastet, kan nettleseren la være å vise tekst. Løsning: forhåndslast skrifter via preload eller host skriftene lokalt.

Er det nødvendig å kombinere all CSS og JS til én fil?

Ikke alltid. Å kombinere alle skript til én fil gir deg én forespørsel, men en stor fil tar lengre tid å laste. Moderne HTTP/2 kan laste flere filer parallelt, så 3-4 filer på 30 KB hver kan lastes raskere enn én på 120 KB. Optimalt sett kombinerer du kritisk CSS (det som trengs for å rendre første skjermbilde) og lar ikke-kritiske skript være separate med defer-attributtet.

Hva om layouten bryter sammen etter å ha kombinert CSS?

Ekskluder den problematiske filen fra kombinasjonen. WP Rocket og Autoptimize lar deg legge til en skript- eller stil-URL i ekskluderingslisten. Etter det kjører du testen på nytt. Å miste én fil fra en samling på 15 forespørsler er knapt merkbart.

Kan du redusere forespørsler uten utvidelser?

Det kan du. Manuell avregistrering av skript gjennom functions.php gir full kontroll, men krever forståelse av WordPress hooks. For de fleste nettstedseiere er WP Rocket eller Perfmatters enklere og tryggere: de lar deg ikke deaktivere et skript som er kritisk for driften.

Tid for å rydde opp i forespørslene dine

HTTP-forespørsler er ikke noe du fikser én gang. Installer en ny utvidelse, bytt tema, legg til et annonseskript, og nye forespørsler dukker opp. Gå til GTmetrix annenhver måned, åpne Waterfall og sammenlign med det du hadde forrige gang.

Hvis du ikke vet akkurat nå hvor mange forespørsler nettstedet ditt gjør, åpne GTmetrix, lim inn URL-en og klikk «Start Test». I løpet av et minutt ser du det virkelige bildet. Følg deretter trinnene fra denne artikkelen. Hver fjernede forespørsel bringer nettstedet ditt nærmere lasting på 1-2 sekunder.