WordCamp 2016 - Seven times faster

Er zijn veel technieken, … en wijsheden om de laadsnelheid van een website te verhogen. De spreker van deze presentatie, Peter Wilson, is echter van mening dat het veel beter kan. En vooral, dat we nog veel te weinig doen om websites sneller te laten laden.

De titel van deze presentatie is ‘Seven times faster’. Peter Wilson is van mening dat we de laadtijd tot wel zeven keer moeten verlagen. Uit statistiek blijkt namelijk dat de gemiddelde laadsnelheid van een website 15 seconden is en volgens Peter zou een website binnen twee seconden geladen moeten zijn. Uit een onderzoek van het Amerikaanse Wallmart blijkt dat de conversie rate drastisch daalt naarmate de website langer nodig heeft om te laden. Zo extreem zelfs, dat de conversie na vier seconden laadtijd al bijna op het laagste punt is. Dit voorbeeld werd ook door Peter Wilson gegeven en schetst een duidelijk beeld waarom laadtijd zo belangrijk is.

Het tweede punt wat hij aandraagt, is dat de grootte van wegpagina’s nog steeds aan het groeien is. Hoe groter de pagina, hoe langer de laadtijd. Op dit moment is een webpagina gemiddeld 2,3 MB. Tussen 2011 en 2016 is de totale grootte van pagina’s verdubbeld. Met name het gebruik van lettertypes op webpagina’s heeft er voor gezorgd dat deze groei zo drastisch is.

Wat kunnen we hier aan doen?

Er zijn veel tools beschikbaar die tips geven aan een pagina m.b.t. laadsnelheid en tips geven over verdere optimalisatie. Één van de grootste is de pagespeed tool van Google. Alleen deze geeft slechts een arbitraire score en een aantal tips. Een beter alternatief is Webpagetest. Deze geeft namelijk ook inzicht in de laadmomenten van de browser en wanneer een browser begint met renderen (het weergeven van elementen) totdat de website daadwerkelijk volledig geladen is. Deze informatie is erg belangrijk, omdat het mogelijke bottlenecks in een pagina zichtbaar kan maken.

Een van de meest bekende bottlenecks, is het inladen van Javascript. Bij veel langzaam ladende websites wordt de Javascript tegelijk ingeladen met de CSS doordat deze wordt ingesloten in de header van de pagina. Dit zorgt er voor dat de browser eerst alle CSS én Javascript in gaat laden, voordat de pagina gerenderd (weergegeven) wordt. Een betere aanpak is alle Javascript in de footer van de pagina te plaatsen, net voor de tag.

Deze aanpak is goed mogelijk met Wordpress, op één onderdeel na. Vanwege historische redenen en backwards compatibility wordt jQuery standaard in de header ingeladen, samen met de jQuery migrate extensie. Dit heeft als gevolgd dat deze libraries altijd ingeladen moeten worden, voordat de pagina weergegeven kan worden. Het is gelukkig wel mogelijk om deze twee naar de footer van de pagina te verplaatsen:

function set_jquery_to_footer( &$wp_scripts ) {	
	if ( is_admin() ) {
		return;
	}

	$wp_scripts->add_data( 'jquery', 'group', 1 );
	$wp_scripts->add_data( 'jquery-core', 'group', 1 );
	$wp_scripts->add_data( 'jquery-migrate', 'group', 1 );
}
add_action( 'wp_default_scripts', 'set_jquery_to_footer' );

(bron: https://peterwilson.cc/code-samples/load-jquery-in-the-wordpress-footer/ )

Techniek

Om de webpagina van de server naar je browser te krijgen, wordt er onder andere gebruik gemaakt van HTTP. Om meer specifiek te zijn HTTP/1.1 wat al sinds 1997 de standaard is. Het protocol voldoet goed, maar is onderhand wel verouderd doordat de grootte van pagina’s continue aan het groeien zijn. Om duidelijk te maken waar het probleem zit, is het handig om te kijken naar de tijdlijn waarin de website wordt geladen.

Zoals in de afbeelding te zien is, is er een waterval op de manier hoe informatie wordt geladen. Pas bij de eerste groene streep start de browser met het renderen van de pagina. Terwijl het aan het renderen is, komt de browser er achter dat er nog veel meer bestanden zijn die ingeladen moeten worden. Dit komt doordat de browser wacht met het laden van bestand 2 als bestand 1 nog niet (volledig) geladen is. Gevolg: het duurt langer voordat de pagina volledig gerenderd is. Een oplossing hiervoor is gebruik maken van de nieuwe HTTP standaard, namelijk HTTP/2. HTTP/2 zorgt er voor dat alle bestanden tegelijk ingeladen worden.

Zodra de HTML en CSS volledig ingeladen zijn, kan de browser direct aan de slag met het renderen van de pagina. Het komt ook niet meer voor verassingen te staan zodra het begint met renderen, want het weet van te voren welke onderdelen ingeladen moeten worden. Het gevolg hiervan is dat de website sneller ‘zichtbaar’ is en sneller volledig geladen is. HTTP/2 is een vrij recente techniek, waardoor bepaalde oudere browser dit nog niet ondersteunen. Toch is het erg interessant om deze nieuwe techniek te implementeren, gezien de voordelen dat het oplevert.