Dutch Design Week 2017
Dutch Design Week 2017

Wat maakt een webpagina sneller?

Op linkedIn gepubliceerd op 4 december 2017

1. In de eerste plaats is het noodzakelijk om de juiste HTML <!DOCTYPE> Declaration toe te passen en vervolgens in conforme gevalideerde HTML-code te schrijven. De doctype in combinatie met gevalideerde HTML-code zorgt ervoor dat de webpagina zonder oponthoud door de browser kan worden ingelezen.

Een probleem bij HTML is de extreme tolerantie bij het inlezen van de broncode zodat 'foute' of afgekeurde codering moeiteloos kan passeren tijdens de rendering van de pagina. De brei van correcte HTML-code gecombineerd met 'foute' en afgekeurde code zorgt voor vertraging bij het laden van de pagina.

In verwante talen als XHTML en XML daarentegen wordt onjuiste code direct afgestraft met een foutmelding en wordt het weergeven van de content geblokkeerd. AMP is in dit verband een mooi voorbeeld hoe een gevalideerde HTML-pagina razendsnel laadt. Zie AMP = Accelerated Mobile Pages - HTML5 met een specifieke configuratie. Dit komt onder meer door de strikt toegepaste en compacte opmaakregels zoals de verplicht toegepaste inline CSS-code. AMP verschilt overigens van XML en XHTML in die zin dat een 'foute' AMP-pagina op een gewone website weliswaar wordt gerendered maar op de Google-server niet werkt.

Ik heb vaker gezien dat mensen een tekst uit Word integraal kopieren naar een webpagina van een CMS zoals WordPress of Joomla. Daardoor wordt de opmaakcode uit Word meegenomen naar de webpagina. De meer dan overvloedige Word-(opmaak)code binnen de HTML-code maakt het laden van de webpagina loodzwaar hetgeen tot vertragingen in het renderingsproces leidt. De oplossing in deze is om de Word-tekst eerst in een teksteditor zoals Kladblok van Windows te plaatsen. Daardoor verdwijnt de opmaakcode van Word en blijft alleen de ASCII-tekst over die je dan plaatst in de webpagina.

2. Door de opmaakcode in de CSS3-stylesheet te comprimeren wordt het bestand kleiner gemaakt. Dat kan oplopen tot 30%. Hierdoor wordt het laden van de webpagina een stukje versneld. In navolging van AMP is het te overwegen om de stylesheet-code inline te plaatsen. Dat wil zeggen dat de opmaak-codes niet vanuit een extern CSS-bestand worden geladen, maar in de webpagina binnen het style-element genoteerd staan. De inline-strategie die het laden zou versnellen, zou ik alleen toepassen bij een kleine(re) hoeveelheid opmaakcode.

3. Voor het snel laden van een webpagina met afbeeldingen is het te overwegen om gebruik te maken van een alternatief voor JPEG, de nieuwe en kleinere beeldformaten zoals BPG, FLIF, WebM en WebP (zie WebP: een open bestandsformaat voor afbeeldingen). Er is een nadeel door het noodzakelijke gebruik van een polyfill bij BPG, FLIF en WebP. Dat zou de rendering misschien iets kunnen ophouden. Wat er tegen opweegt is de (veel) kleinere omvang van deze nieuwe beeldformaten. Hoe minder data geladen hoeven te worden, des te sneller zul je de webpagina op je beeldscherm zien verschijnen.

4. Mijn ervaring is dat een website onder WordPress gemiddeld vrij traag laadt, zeker als er allerlei Plugins in het systeem op de achtergrond meedraaien. Mijn eigen website zal nooit onder een CMS zoals WordPress draaien, niet alleen door het trage laden van de pagina's, maar ook omdat WordPress een geliefd doel is voor hackers. De inlogpagina naar het systeem is namelijk standaard. Er is wel een Maar. Iemand die zonder kennis van webtechniek een website wil bouwen en onderhouden is aangewezen op een CMS. WordPress is dan een goede keuze. Het tragere laden van de webpagina moet je dan maar voor lief nemen.

Ten slotte. Een snellere webpagina zorgt er onder meer voor dat bezoekers een pagina snel kunnen bekijken en vlot door een website kunnen bladeren. Het trage laden van pagina's kan ertoe leiden dat bezoekers afhaken.

(Gevalideerde) Voorbeelden: HTML5 void elements, XHTML5 = HTML5 in XML serialization mode, XML 1.0 Markup Languages database with CSS stylesheet, Accelerated Mobile Pages | Images in amp-carousel.

Bronnen: Tips om je website gemakkelijk sneller te maken, 5 tips om je website sneller te maken.

De geplaatste artikelen op LinkedIn zijn te vinden op mijn account: Joost van Meeteren | Developer & Designer bij ....

Voor een overzicht van de geplaatste artikelen op LinkedIn kun je ook terecht op de volgende pagina: LINKEDIN | Web Development and Web Design.

Joost van Meeteren, 4 december 2017