Hoe meer HTTP verzoeken je website verstuurt, hoe langzamer deze zal laden. Kan je dus het aantal HTTP requests verminderen en het laden ervan optimaliseren, dan kan je de snelheid van je website verhogen.
In dit artikel leggen we alles uit wat je moet weten om minder HTTP verzoeken op je WordPress website te krijgen.
We beginnen met de basis over HTTP verzoeken, waarom ze belangrijk zijn, en hoe je de verzoeken van jouw WordPress website kan analyseren.
Hierna delen we een aantal tips en strategieën die je kan gebruiken om het aantal HTTP verzoeken van je website te verminderen. Naast dat ze je helpen met de melding “Make Fewer HTTP Requests” in GTmetrix, zullen deze strategieën je ook helpen bij de melding “Avoid chaining critical requests” in Google PageSpeed Insights.
Kijk je liever de videoversie?
Wat zijn HTTP verzoeken?
Wanneer je een website bouwt, bestaat deze uit allerlei onderdelen. Je hebt verschillende afbeeldingen die je op een pagina plaatst, de CSS stylesheets die bepalen hoe de content eruitziet, de JavaScript bestanden die zorgen voor betere functionaliteit mooie functionaliteit en ga zo maar door.
Wanneer iemand je website bezoekt, zal hun browser al deze bestanden en resources moeten downloaden van je server om de pagina goed weer te geven. Daarvoor verstuurt de browser HTTP verzoeken naar de server, één voor elke resource.
Zo vraagt de browser dus bijvoorbeeld “hey server, ik heb het bestand cooleafbeelding.png nodig”, en daarna “hey server, ik heb trouwens ook die CSS stylesheet nodig voor die contactformulierplugin“. De server beantwoordt al die verzoeken met de bijbehorende bestanden.
Zodra de webbrowser die bestanden ontvangt, wordt de webpagina samengesteld voor de bezoeker. In de praktijk is het hele proces uiteraard iets complexer, maar in de basis komt het hierop neer.
HTTP staat voor HyperText Transfer Protocol, en maakt het mogelijk dat deze computers (de browser van de bezoeker en jouw webserver) met elkaar communiceren.
Het belangrijkste hierbij is dus om te begrijpen dat elk apart element een apart HTTP verzoek oplevert. Heb je bijvoorbeeld vijf afbeeldingsbestanden op een webpagina, dan maakt de browser vijf aparte HTTP verzoeken, één voor elke afbeelding.
Of heb je bijvoorbeeld vier WordPress plugins en elke plugin gebruikt een eigen CSS stylesheet, dan moet de browser van de bezoeker vier aparte HTTP verzoeken versturen, één voor elke stylesheet.
Waarom is het belangrijk om minder HTTP verzoeken te hebben?
Hoe meer HTTP verzoeken je website verstuurt, hoe langzamer je website zal laden. Wil je dus dat je website sneller wordt geladen, dan zal je de HTTP verzoeken die je website nodig heeft moeten minimaliseren en optimaliseren.
Hoewel dit een beetje kort door de bocht is, komt het erop neer dat een webbrowser je website pas laat zien aan je bezoeker wanneer alle HTTP verzoeken afgehandeld en gedownload zijn (al zijn er ook manieren om de browser te vertellen dat sommige bestanden ook later mogen komen).
Heeft een website dus 70 HTTP verzoeken nodig voordat de pagina kan worden weergegeven, dan duurt dat dus gewoon langer dan wanneer er 40 HTTP verzoeken nodig zijn.
Daarnaast zullen sommige HTTP verzoeken andere HTTP verzoeken “blokkeren”, wat betekent dat de browser bepaalde verzoeken nog niet kan gaan downloaden totdat die blokkerende HTTP verzoeken helemaal afgerond zijn.
Het belangrijkste om van dit alles te onthouden is dus: hoe minder HTTP verzoeken, hoe sneller je website laadt.
Zo bekijk en analyseer je de HTTP verzoeken van je website
Je hebt net gelezen dat – wanneer alle andere variabelen gelijk zijn – je website sneller wordt als je het aantal HTTP verzoeken weet te verkleinen. Maar niet alle HTTP verzoeken zijn hetzelfde. Sommige HTTP verzoeken zijn groter dan andere. Sommige verzoeken zijn langzamer.
Zo zal het afhandelen van een verzoek voor een enorm 3 MB afbeeldingsbestand veel langer duren dan een verzoek voor een klein 20 KB plaatje.
Wat prestaties betreft haal je de grootste winst door met de grote, trage HTTP verzoeken te beginnen.
Om de HTTP verzoeken van je website te analyseren, kan je iets gebruiken dat een Waterfall analyse wordt genoemd.
De meeste snelheidstesten bieden deze analyse, maar de interfaces van GTMetrix en Pingdom zijn het handigst. Je kan ook de developertools van je browser hiervoor gebruiken. In onze screenshots zullen we echter GTmetrix gebruiken.
Zodra je je URL invoert, zal je bovenaan een eenvoudige samenvatting zien. Dit laat zien hoeveel HTTP verzoeken je website nodig heeft, maar splitst niets uit naar individuele verzoeken:
Om deze individuele verzoeken ook te kunnen analyseren, ga je naar het tabblad Waterfall.
Hier zie je een lijst met alle individuele HTTP verzoeken van je website, samen met hoe lang elk HTTP verzoek duurde om te downloaden:
Hier kan je zien dat niet alle HTTP verzoeken gelijk geschapen zijn. Zo duurt het laden van 839,3KB afbeelding bijvoorbeeld 1,12 seconden, terwijl de afbeelding van 57,6 KB slechts 87,5 milliseconden kostte:
Je kan de HTTP verzoeken van WordPress plugins vinden door op de naam van de map van de plugin te zoeken (hoe die op de server heet). Zo zul je bijvoorbeeld zien dat WooCommerce zeven eigen HTTP verzoeken toevoegt.
Op deze manier kan je zien welke plugins veel HTTP verzoeken toevoegen (en vooral welke traag laden).
Zo optimaliseer en verminder je de HTTP verzoeken bij WordPress
Strategisch gezien zijn er grofweg twee manieren om het aantal HTTP verzoeken te verminderen:
- Verwijder HTTP verzoeken. Indien mogelijk, moet je alle onnodige HTTP verzoeken volledig verwijderen. Heb je bijvoorbeeld een plugin die weinig tot geen waarde toevoegt aan je site, maar wel eigen CSS en JavaScript moet laden, verwijder dan gewoon de plugin om alle HTTP verzoeken kwijt te raken.
- Combineer HTTP verzoeken. De HTTP verzoeken die wel per se nodig zijn voor je website, kan je zoveel mogelijk combineren tot een enkel bestand. Zo kan je bijvoorbeeld in plaats van zes kleinere CSS bestanden één groter CSS bestand maken, wat in totaal sneller zal laden doordat de browser minder verzoeken nodig heeft (al geldt dit niet altijd bij HTTP/2, daarover later meer).
We beginnen met manieren die HTTP verzoeken volledig verwijderen, en daarna verder gaan met hoe je de overige HTTP verzoeken kan combineren. Het algemene principe hierbij is dat je verwijdert wat je kan verwijderen, en de rest combineert.
1. Verwijder onnodige WordPress plugins
Om te beginnen kan je de waterfall analysis gebruiken om de verzoeken van je plugins te bekijken. Dit kan je doen door te zoeken op “plugins”, waardoor je alle HTTP verzoeken vanuit de map wp-content/plugins krijgt te zien.
Wanneer je met de muis beweegt boven de bestandsnaam zal je de plugin zien waar het verzoek vandaan komt. Zo zie je hier bijvoorbeeld een verzoek van de sliderplugin die je gebruikt.
Na wat doorklikken zal je nu zien dat de Slider Revolution plugin drie eigen HTTP verzoeken toevoegt, ondanks het feit dat deze testpagina helemaal geen sliders bevat:
Gebruik je Slider Revolution voor een belangrijke slider ergens op je website, dan moet je de plugin misschien houden, maar als je het alleen hebt geïnstalleerd om te testen, en vervolgens de slider weer verwijderd hebt en dus de plugin niet echt gebruik, dan kan je de plugin het beste verwijderen om van de HTTP verzoeken af te komen.
Zo ga je in principe de hele lijst door, waarbij je jezelf constant afvraagt wat de toegevoegde waarde van elke plugin is. Biedt de plugin weinig of geen toegevoegde waarde, maar wel extra HTTP verzoeken, dan kan je de plugin beter verwijderen.
2. Vervang zwaardere plugins door meer lichtgewicht versies
Nadat je alle onnodige plugins weggegooid hebt, is de volgende stap nadenken over het vervangen van plugins door meer lichtgewicht alternatieven.
Stel bijvoorbeeld dat je graag sociale deelknoppen op je website wilt hebben. Dat is natuurlijk handig, maar er zijn social share plugins die een hoop HTTP verzoeken toevoegen.
Zo voegt de populaire AddThis plugin bijvoorbeeld zes afzonderlijke HTTP verzoeken toe (waaronder enkele externe verzoeken, waarover later meer):
Je kan een hoop extra last kwijtraken door een beter geoptimaliseerd alternatief te gebruiken zoals NovaShare of Grow by MediaVine.
3. Stel voorwaarden voor het laden van scripts die niet overal nodig zijn
Als het goed is heb je nu alle overbodige plugins op je website verwijderd. Maar er is nog een soort plugins die problemen veroorzaakt, namelijk plugins die je alleen op specifieke plekken nodig hebt, maar die op elke pagina scripts laden.
Neem bijvoorbeeld de populaire Contact Form 7 plugin. Je gebruikt deze plugin waarschijnlijk maar op een paar pagina’s, zoals je “Contact” pagina. Maar Contact Form 7 laadt de scripts op elke individuele pagina van je site. Zo voegt Contact Form 7 bijvoorbeeld nog HTTP verzoeken toe aan blogartikelen, terwijl die helemaal geen contactformulieren hebben.
Een ander voorbeeld is WooCommerce wanneer je deze alleen als betalingsverwerker gebruikt. Ook als je hem alleen op deze manier gebruikt, zal de software toch nog overal scripts laden, ook al is het eigenlijk alleen maar nodig voor de winkelwagen- en afrekenpagina’s.
Een slimme tactiek is dan het voorwaardelijk laden van plugins, zodat ze alleen laden waar nodig. Zo zou je de Contact Form 7 plugin dus alleen kunnen laten laden op je contactpagina, maar op alle andere pagina’s uitschakelen.
Als je geen developer bent, kan je een plugin zoals Asset CleanUp of Perfmatters gebruiken om dit zonder coderen te regelen. Bij Perfmatters zul je eerst de scriptmanager moeten inschakelen. Daarna open je de scriptmanager om alle scripts te zien die op een pagina laden, waarna je onnodige scripts kan uitschakelen.
Wees hier wel voorzichtig mee, aangezien dit mogelijk problemen kan opleveren wanneer je een script uitschakelt dat wel nodig is. Met andere woorden, het is een erg nuttige tactiek, maar voor beginners wellicht niet het beste idee.
Mocht je je niet prettig voelen om dit zelf te doen, dan kan je deze stap overslaan of een developer inhuren om te helpen.
4. Verwijder overbodige afbeeldingen (en optimaliseer de rest)
Als je afbeeldingen op de juiste manier inzet, kunnen ze je website mooier en gebruiksvriendelijker maken. Ze voegen dan echt iets toe aan je site.
Maar elke afbeelding betekent ook een apart HTTP verzoek. Heb je dus afbeeldingen die niet veel toevoegen aan een pagina, dan kan je die beter verwijderen om zo het aantal HTTP verzoeken te verminderen.
Is bijvoorbeeld dat grappig GIFje een langere laadtijd waard? Misschien wel, misschien ook niet: je moet zelf de kosten en baten afwegen bij het toevoegen van afbeeldingen aan je content.
Zorg er als laatste voor, dat je de overgebleven afbeeldingen resized en comprimeert. Alhoewel dit niet het aantal HTTP verzoeken zal verminderen, maakt het de verzoeken wel kleiner en dus sneller.
5. Gebruik lazy loading voor afbeeldingen en video’s
Bij lazy loading wacht je website met het laden van de afbeeldingen, video’s en iframes die niet meteen hoeven te worden geladen, maar pas als de gebruiker naar beneden scrolt.
Aangezien deze resources niet meteen geladen worden, wordt er ook geen HTTP verzoek bij de eerste weergave gedaan.
Sinds WordPress 5.5 ondersteunt WordPress standaard lazy loading voor afbeeldingen, via de HTML loading attribute. Andere manieren om lazy loading te implementeren (waaronder voor videobestanden) kan je bekijken in onze volledige uitleg voor lazy loading in WordPress.
6. Beperk custom lettertypes en/of gebruik systeemfonts (hetzelfde geldt voor Icon Fonts)
Custom fonts zijn een geweldige tool voor het verbeteren van het design en de gebruikservaring van je site. Maar je moet wel opletten bij het gebruik ervan, aangezien elk custom font ook een extra HTTP verzoek betekent.
Ga je custom lettertypes gebruiken, beperk je dan tot enkele. Immers, heb je echt een verschillend lettertype nodig voor de titel en de hoofdtekst van je artikel? Of kan je ook hetzelfde lettertype gebruiken? En heb je echt alle vijf weights van een lettertype nodig? Of zijn twee ook genoeg?
Hetzelfde geldt voor Icon Fonts zoals Font Awesome en IcoMoon. Deze lettertypen kunnen zeker nuttig zijn, maar je hebt er waarschijnlijk niet meerdere nodig. Je kan beter één icoon lettertype kiezen en het daar bij houden.
Als laatste, wil je nog een stap verder gaan en alle HTTP verzoeken voor lettertypen verwijderen, dan kan je ook een systeemlettertype gebruiken. Dit biedt natuurlijk minder flexibiliteit qua ontwerp, maar betekent wel dat je bezoekers geen lettertype bestanden hoeven te downloaden om je site te bekijken.
(Lees verder: Hoe verander je lettertypen bij WordPress)
7. Schakel WordPress emoji’s uit
Standaard voegt WordPress een eigen HTTP verzoek toe voor emoji’s. Alhoewel dit een verzoek is van slechts 5,1 KB, is dit bestand voor prestatiepuristen natuurlijk een doorn in het oog. Hier bij Kinsta houden we ook van hoge prestaties met WordPress, en daarom hebben we een handleiding geschreven over het uitschakelen van WordPress emoji’s.
De eenvoudigste manier is het installeren en activeren van de gratis Disable Emojis (GDPR friendly) plugin. Maar je kan ook ons artikel lezen voor elke andere opties.
Nadat je dit gedaan hebt zal je weer één HTTP verzoek minder hebben, maar nog steeds emoji’s kunnen gebruiken. 😃
8. Verminder/verwijder externe HTTP verzoeken
We hebben ons tot nu toe vooral gericht op de HTTP verzoeken voor bestanden op de server van je WordPress website. Maar de browsers van je bezoekers doen soms ook verzoeken naar externe servers.
Deze verzoeken zijn vaak zelfs nog problematischer, aangezien je website dan afhankelijk is van de snelheid van die externe servers.
Bijvoorbeeld:
- Google Analytics – het trackingscript wordt gehost op de servers van Google, maar de bezoekende browser moet dat bestand alsnog downloaden.
- Ingelijste YouTube video’s – Je zal een hoop HTTP verzoeken zien naar de servers van YouTube.
- Externe advertenties – Je zal een hoop externe verzoeken zien voor het afleveren van je advertenties.
- Google Fonts (op Google’s CDN) – Je zal externe verzoeken zien naar Google voor het laden van je lettertypen.
Je kan veel van de hierboven beschreven strategieën toepassen voor deze externe HTTP verzoeken.
Als een plugin bijvoorbeeld eigen externe verzoeken toevoegt (zoals de AddThis plugin die we al eerder noemden), dan kan je deze verwijderen en iets beters zoeken.
YouTube video’s kan je het beste lazy loaden en in de eerste weergave vervangen door een thumbnail. Hierdoor zal het HTTP verzoek pas verzonden worden wanneer de bezoeker de video daadwerkelijk wil afspelen.
Voor externe scripts die je niet kan missen op de pagina, zoals Google Analytics of Facebook Pixel, kan je eventueel experimenteren met het lokaal hosten van de scripts.
WP Rocket heeft ingebouwde add-ons voor het lokaal hosten van Google Analytics en Facebook Pixel, of je kan een plugin zoals CAOS (Complete Analytics Optimization Suite) gebruiken.
We hebben ook wat andere handleidingen geschreven die zouden kunnen helpen:
9. Combineer afbeeldingen via CSS Sprites
Inmiddels heb je hopelijk het aantal HTTP verzoeken van je site kunnen verkleinen. Nu gaan we door met het combineren van de overige HTTP verzoeken, te beginnen met de afbeeldingen.
Je kan de afbeeldingen op je website ook optimaliseren door de verschillende afbeeldingen tot één bestand te combineren. Vervolgens gebruik je CSS om alleen het relevante deel van de afbeelding weer te geven. Deze strategie wordt CSS sprites genoemd.
CSS sprites werken vooral goed voor decoratieve afbeeldingen, zoals logovariaties of iconen. Je kan CSS sprites beter niet gebruiken voor informatieve afbeeldingen (zoals de afbeeldingen in je tekst) aangezien er twee grote nadelen aan kleven:
- SEO – doordat je afbeeldingen combineert, zullen de afbeeldingen niet apart gerankt worden in Google Search.
- Toegankelijkheid – doordat je geen individuele alt-tekst voor de afbeeldingen kan toevoegen, zullen mensen met schermlezers de afbeeldingen met CSS sprites niet goed kunnen begrijpen (al zijn er manieren om dit op te lossen).
Vind je dit alles nog een beetje verwarrend, hier zie een voorbeeld van het CSS sprite bestand van Amazon: je ziet dat er allerlei variaties van het logo inzitten, en een aantal iconen. Amazon gebruikt vervolgens CSS om alleen het relevant deel van de afbeelding op elke plek weer te geven:
Helaas is er geen WordPress plugin voor CSS sprites waarin je eenvoudig een toevoegt. Maar er zijn wel handige tools, zoals deze CSS Sprite Tool:
- Upload de afbeeldingen die je wil combineren.
- De tool geeft je een gecombineerde afbeelding, samen met CSS code voor elke afzonderlijke afbeelding.
- Upload de gecombineerde afbeelding naar je WordPress site.
- Gebruik de meegegeven CSS code om de juiste afbeelding weer te geven. De CSS selecteert alleen het relevante deel van de gecombineerde afbeelding.
10. Combineer CSS en JavaScript bestanden
De combinatie van je WordPress thema en je plugins zorgt ervoor dat je website waarschijnlijk verschillende CSS stylesheets en JavaScript bestanden moet laden. Dat betekent dus ook diverse HTTP verzoeken vanaf de browser, puur voor het downloaden van de CSS en JavaScript van de pagina.
Je kan deze verzoeken verminderen door de verschillende bestanden/stylesheets te combineren tot één gecombineerd bestand/stylesheet. Dit combineren van bestanden heet file combination of file concatenation, afhankelijk van de tool die je ervoor gebruikt.
Veel WordPress cachingplugins bieden functies voor het combineren van CSS en JavaScript bestanden. Zo maakt bijvoorbeeld WP Rocket, wat je bij Kinsta kan gebruiken, het mogelijk dit met een paar klikken te regelen.
Ga hiervoor naar het tabblad File Optimization in de instellingen van WP Rocket. Vervolgens schakel je minification in en combineer je de bestanden:
Voor meer details kan je eens onze volledige uitleg over WP Rocket lezen.
Je kan ook Autoptimize gebruiken voor het combineren van CSS en JavaScript. Om de bestanden te combineren ga je naar Instellingen → Autoptimize en kies je de opties voor:
- Aggregate JS-files
- Aggregate CSS-files
Voor meer details kan je eens onze volledige tutorial over Autoptimize lezen.
De voordelen van het samenvoegen van bestanden zijn minder uitgesproken bij HTTP/2, wat je website gebruikt als je host bij Kinsta. HTTP/2 is ontworpen om efficiënter te zijn in het overzetten van diverse kleinere bestanden, waardoor er dus sowieso al minder verschil is tussen één groter CSS/JS bestand of meerdere kleinere bestanden.
Daarom hoef je deze stap dus eigenlijk niet uit te voeren als je gehost wordt door Kinsta, aangezien de verschillen meestal minimaal zijn. Natuurlijk kun je het alsnog testen om te zien wat het voordeel is, maar er is een goede kans dat het niet de moeite van implementatie waard is.
Als je bij Kinsta host, hoef je deze stap misschien niet eens te doen om verbeteringen aan te brengen in de laadtijden van je pagina. Klanten van Kinsta hebben namelijk rechtstreeks toegang tot de codeminificatiefeature vanuit hun MyKinsta dashboard. Deze helpt bij het boosten van de algehele optimalisatie door automatische CSS en JavaScript minificatie die klanten in kunnen schakelen met een simpele klik.
We raden je aan om het nog steeds te testen, omdat het nog steeds nuttig kan zijn voor sommige sites, maar je merkt mogelijk ook geen verschil in de daadwerkelijke laadtijden van de pagina.
Helaas herkennen veel snelheidstesten, zoals GTmetrix, HTTP/2 nog niet, waardoor GTmetrix nog steeds de “Make Fewer HTTP Requests” melding geeft, inclusief een lagere score. Onthoud hierbij dus dat scores lang niet zo belangrijk zijn als de daadwerkelijke laadtijden.
11. Uitstellen van blokkerende JavaScript bestanden
Het uitstellen van JavaScript bestanden die de paginaweergave blokkeren (render-blocking) levert niet per se minder HTTP verzoeken op. Maar hiermee optimaliseer je wel de volgorde waarmee ze laden, waardoor ze alsnog een positief effect hebben op de laadtijd die een gebruiker ervaart.
Het kan ook de melding “avoid chaining critical requests” in Google PageSpeed Insights/Lighthouse oplossen.
Door verzoeken voor bepaalde bestanden uit te stellen, of ze asynchroon te laden, kan je voorkomen dat onbelangrijke resources andere belangrijke elementen “blokkeren”, die je juist nodig hebt om snel het zichtbare deel van je pagina weer te geven.
Om beter te begrijpen waarom dit gebeurt, kan je onze uitleg lezen over het optimaliseren van het zogenaamde critical rendering path van een webpagina.
Vervolgens kan je onze gedetailleerde gids lezen over het verwijderen van render-blocking resources bij WordPress.
De beste WordPress plugins voor het verminderen van de HTTP verzoeken op je site
Ben je op zoek naar een “alles-in-één” WordPress plugin voor het verminderen van je HTTP verzoeken, dan raden we je aan één van de plugins te nemen die hierboven al de revue passeerden:
Alhoewel je hierbij nog altijd zelf moet analyseren of je thema en plugins (te) veel HTTP verzoeken versturen, kunnen beide plugins helpen bij het optimaliseren van alles wat je wél op je website wil houden.
Samenvatting
Elke aparte resource op je website levert een apart HTTP verzoek op. Eén afbeelding is dus één HTTP verzoek, één CSS stylesheet weer één ander verzoek, en ook een lettertypebestand is weer een extra HTTP verzoek, en ga zo maar door.
Als je WordPress gebruikt, zal je thema ook zeker eigen HTTP verzoeken toevoegen, net als veel plugins. Verder heb je HTTP verzoeken van afbeeldingen die je gebruikt en externe scripts die je toevoegt (zoals analysetools).
Meer of grotere HTTP verzoeken betekenen een langzamere website. Daarom zie je veel berichten als “make fewer HTTP requests”. “optimize HTTP requests” of “avoid chaining critical requests” wanneer je een snelheidstest als GTmetrix of PageSpeed Insights gebruikt.
Om het aantal HTTP verzoeken op je website te verkleinen, kan je bovenstaande stappen volgen.
Nog steeds vragen over hoe je nog minder HTTP verzoeken binnen WordPress krijgt? Laat het ons weten in de reacties!
Hoofdredacteur bij Kinsta en content marketing consultant voor WordPress plugin-ontwikkelaars. Verbind met <a href="">Matteo op Twitter.
Laat een reactie achter