{"id":36028,"date":"2020-11-04T04:30:27","date_gmt":"2020-11-04T12:30:27","guid":{"rendered":"https:\/\/kinsta.com\/?p=81133"},"modified":"2023-06-15T15:03:05","modified_gmt":"2023-06-15T13:03:05","slug":"zorg-minder-http-verzoeken","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/zorg-minder-http-verzoeken\/","title":{"rendered":"Zo zorg je voor minder HTTP verzoeken in WordPress (maak je website sneller)"},"content":{"rendered":"

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<\/a>.<\/p>\n

In dit artikel leggen we alles uit wat je moet weten om minder HTTP verzoeken op je WordPress website te krijgen.<\/p>\n

We beginnen met de basis over HTTP verzoeken, waarom ze belangrijk zijn, en hoe je de verzoeken van jouw WordPress website kan analyseren.<\/p>\n

Hierna delen we een aantal tips en strategie\u00ebn 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\u00ebn je ook helpen bij de melding “Avoid chaining critical requests” in Google PageSpeed Insights.<\/p>\n

<\/div><\/kinsta-auto-toc>\n\n

Kijk je liever de videoversie<\/a>?<\/h3>\n

<\/kinsta-video><\/p>\n

Wat zijn HTTP verzoeken?<\/h2>\n

Wanneer je een website bouwt<\/a>, bestaat deze uit allerlei onderdelen. Je hebt verschillende afbeeldingen<\/a> die je op een pagina plaatst, de CSS stylesheets<\/a> die bepalen hoe de content eruitziet, de JavaScript bestanden die zorgen voor betere functionaliteit mooie functionaliteit en ga zo maar door.<\/p>\n

Wanneer iemand je website bezoekt<\/a>, 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<\/strong> naar de server, \u00e9\u00e9n voor elke resource.<\/p>\n

Zo vraagt de browser dus bijvoorbeeld “hey server, ik heb het bestand cooleafbeelding.png<\/strong> nodig”, en daarna “hey server, ik heb trouwens ook die CSS stylesheet nodig voor die contactformulierplugin<\/a>“. De server beantwoordt<\/strong> al die verzoeken met de bijbehorende bestanden.<\/p>\n

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.<\/p>\n

HTTP staat voor HyperText Transfer Protocol, en maakt het mogelijk dat deze computers (de browser van de bezoeker en jouw webserver) met elkaar communiceren.<\/p>\n

Het belangrijkste hierbij is dus om te begrijpen dat elk apart element een apart HTTP verzoek oplevert. Heb je bijvoorbeeld vijf afbeeldingsbestanden<\/a> op een webpagina, dan maakt de browser vijf aparte HTTP verzoeken, \u00e9\u00e9n voor elke afbeelding.<\/p>\n

Of heb je bijvoorbeeld vier WordPress plugins<\/a> en elke plugin gebruikt een eigen CSS stylesheet, dan moet de browser van de bezoeker vier aparte HTTP verzoeken versturen, \u00e9\u00e9n voor elke stylesheet.<\/p>\n

Waarom is het belangrijk om minder HTTP verzoeken te hebben?<\/h2>\n

\"Waarom<\/p>\n

Hoe meer HTTP verzoeken je website verstuurt, hoe langzamer je website zal laden<\/a>. Wil je dus dat je website sneller wordt geladen, dan zal je de HTTP verzoeken die je website nodig heeft moeten minimaliseren en optimaliseren.<\/p>\n

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).<\/p>\n

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.<\/p>\n

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.<\/p>\n

Het belangrijkste om van dit alles te onthouden is dus: hoe minder HTTP verzoeken, hoe sneller je website laadt<\/a>.<\/p>\n

Zo bekijk en analyseer je de HTTP verzoeken van je website<\/h2>\n

Je hebt net gelezen dat \u2013 wanneer alle andere variabelen gelijk zijn – je website sneller<\/a> 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.<\/p>\n

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.<\/p>\n

Wat prestaties betreft haal je de grootste winst door met de grote, trage HTTP verzoeken te beginnen.<\/p>\n

Om de HTTP verzoeken van je website te analyseren, kan je iets gebruiken dat een Waterfall analyse<\/a> wordt genoemd.<\/p>\n

De meeste snelheidstesten bieden deze analyse, maar de interfaces van GTMetrix<\/a> en Pingdom<\/a> zijn het handigst. Je kan ook de developertools van je browser hiervoor gebruiken. In onze screenshots zullen we echter GTmetrix gebruiken.<\/p>\n

Zodra je je URL<\/a> 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:<\/p>\n

\"Example<\/p>\n

Om deze individuele verzoeken ook te kunnen analyseren, ga je naar het tabblad Waterfall<\/strong>.<\/p>\n

Hier zie je een lijst met alle individuele HTTP verzoeken van je website, samen met hoe lang elk HTTP verzoek duurde om te downloaden:<\/p>\n

\"watervalgrafiek<\/p>\n

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:<\/p>\n

\"http<\/p>\n

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<\/a> zeven eigen HTTP verzoeken toevoegt.<\/p>\n

\"zoeken<\/p>\n

Op deze manier kan je zien welke plugins veel HTTP verzoeken toevoegen (en vooral welke traag laden).<\/p>\n

Zo optimaliseer en verminder je de HTTP verzoeken bij WordPress<\/h2>\n

Strategisch gezien zijn er grofweg twee manieren om het aantal HTTP verzoeken te verminderen:<\/p>\n