Bij het hosten van de website hebben we het al gehad over het verbeteren van de prestaties van de website. Een van de problemen is het verwijderen van weergave-blokkerende bronnen.

Optimalisatie van blokkerende bronnen via plugins

Dit zijn scripts of stijlbestanden die volledig geladen moeten worden voordat de browser met de volgende stap in het ‘parsen’ van de pagina-code verder kan gaan. In het kort gezegd komt het erop neer dat de webbrowser de code van de site begint te interpreteren zodra de bezoeker met zijn browser op de site terechtkomt. De browser gaat van boven naar beneden door de code heen. Wanneer een stijlbestand (CSS) of javascriptbestand (JS) in de code staat, moet het bestand eerst geopend worden zodat de browser dit bestand kan inlezen. De browser moet dus even pauzeren. Dat belemmert de snelheid bij het laden van de pagina. Een deel van de code is nodig om het scherm te vullen dat de bezoeker beziet voordat hij gaat scrollen. In de onderstaande pagespeed schermafdruk zijn er op deze site twee bronnen die de weergave met een ruime halve seconde vertragen.

schermafdruk pagespeed blokkerende bronnen die de weergave in de weg staan

Zelf aan de slag met blokkerende bronnen

Open daartoe de ontwikkelaarsconsole (functietoets F12) in Chrome en laad het coverage paneel. Deze geeft bij het herladen van de pagina weer welk deel van de code niet gebruikt wordt (rood balkje) en welk deel wel: het kritieke deel dat met een groen balkje is gemarkeerd. Het bestand style.min.css staat bovenaan de lijst. Het is een groot stijlbestand dat ruimte biedt voor optimalisatie: ongeveer 87% van de code wordt in de (betreffende) webpagina niet geladen. Ruimte voor verbetering dus!

ontwikkelaarsconsole Chrome netwerkbronnen en coverage css

Welke bronnen zijn kritisch (groen gemarkeerd) voor het weergeven van de pagina?

 

Splitsen van de code

Chrome geeft de mogelijkheid om de coverage-informatie te exporteren naar een bestand (json formaat). Dit bevat de informatie welke code kritiek is en welke niet. Een voorbeeld van een coverage bestand van deze site is hier te downloaden. Om te weten welke code kritiek (groen) en niet-kritiek (rood) is, hebben we een programma in python geschreven dat de code van het css stijlbestand in tweeën splitst (zie toelichting hieronder).

De kritieke code kan vervolgens inline in de php code (header.php) van wordpress kan worden ingevoegd. Hoe? Dat staat uitgelegd op het elimineren van weergave-blokkerende hulpbronnen. Voeg een stijl tag in het bestand header.php.

<style type="text/css">in te voegen kritieke css code</style>

De resterende code die voor het laden van de pagina dus niet nodig is, wordt wel geladen maar voorwaardelijk: pas wanneer de code gebruikt wordt, bijvoorbeeld onderaan de pagina of wanneer de code wordt ingelezen op een ander medium (mobiele telefoon, ipad, etc.). Deze niet-kritieke code dient beschikbaar te zijn wanneer nodig. Sla deze code op onder de naam van het stijlbestand zelf. Deze wordt vervolgens door het thema geladen zoals normaal ook het geval zou zijn. Er zijn met deze actie dus twee plekken waar de volledige code geladen wordt:

  1. de kritieke stijlcode die inline in de header geplaatst is;
  2. de niet-kritieke stijlcode die in de plaats gekomen is van het oorspronkelijke stijlbestand.

Bewaar het stijlbestand; mocht het fout gaan, dan kun je het bestand weer terugzetten.

Toelichting bij het algoritme om de code te splitsen

Het algoritme is geschreven in python. We geven geen garantie dat het werkt! Test het goed, bekijk alle pagina’s van de website, op de telefoon, PC of ipad. En test ook in de besturingsystemen van Windows, macOS en Linux.

Inlezen van het json bestand met de coverage-informatie

Importeer de pandas library, lees het bestand in en check de informatie uit het bestand. De tussentijdse gegenereerde print-output van het programma is cursief weergegeven.

Het oorspronkelijke css stijlbestand is nu gesplitst in twee bestanden. Voeg de kritieke code in tussen style tags in de header en sla het niet-kritieke stijlbestand op onder de oorspronkelijke naam. Zie verdere beschrijving hiervoor.


0 reacties

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.