Wat het is
Voordat een browser enig deel van een pagina kan tonen, moet hij eerst het volledige HTML-document van de pagina downloaden (of in elk geval genoeg om ermee aan de slag te gaan) — dit staat los van afbeeldingen, video's of andere media, die daarna laden. Deze check kijkt specifiek naar de omvang van dat initiële HTML-document zelf, en signaleert wanneer het ongewoon groot is geworden.
HTML-documenten worden doorgaans opgeblazen wanneer er veel content rechtstreeks inline wordt ingesloten — grote blokken stijlcode, scripts of herhaalde content die rechtstreeks in de pagina wordt geplakt — in plaats van in aparte, herbruikbare bestanden te worden bewaard die de browser eenmalig kan laden en cachen.
Waarom het belangrijk is
Een groter HTML-document kost meetbaar meer tijd om te downloaden en verwerken voordat de browser met renderen kan beginnen, wat juist het allereerste wat een bezoeker ziet vertraagt, niet alleen secundaire content verderop de pagina. Dit effect is sterker op tragere mobiele verbindingen, waar elk extra stukje data echte, voelbare tijd toevoegt voordat de pagina responsief begint aan te voelen.
Een opgeblazen HTML-bestand is ook vaak een symptoom van een dieper structureel probleem — content of code die in aparte, cachebare bestanden georganiseerd had moeten worden, wordt in plaats daarvan inline op de pagina gedupliceerd, of zelfs op elke pagina van de site.
Hoe je het oplost
- Bepaal wat het grootste deel van het bestand uitmaakt — de ontwikkelaarstools van je browser kunnen de omvangverdeling van de bronnen van een pagina tonen, inclusief het basis-HTML-document zelf.
- Verplaats grote blokken inline CSS (stijlcode) naar een apart
.css-bestand dat de browser eenmalig kan laden en op alle pagina's kan hergebruiken, in plaats van het op elke pagina inline te herhalen. - Verplaats grote inline JavaScript om dezelfde reden naar aparte
.js-bestanden. - Controleer de code van de pagina op per ongeluk gedupliceerde content (hetzelfde blok meer dan één keer herhaald) en verwijder de duplicaten.
- Gebruik je een websitebouwer, dan wordt dit meestal voor je geregeld — een ongewoon grote pagina wordt hier vaker veroorzaakt door een zware aangepaste code-embed dan door het platform zelf, dus controleer eventuele aangepaste codeblokken die je hebt toegevoegd.