Je bent tegen de foutmelding van Google PageSpeed Insights aangelopen die aangeeft dat het tijd is om 'JavaScript en CSS in content boven de vouw die het weergeven blokkeren, te verwijderen'. Je wilt graag weten wat je concreet moet ondernemen om dit probleem op te lossen. Dan ben je hier aan het juiste adres! :)

Ik leg in dit artikel stap voor stap uit wat je moet doen om in ieder geval het Javascript-deel van het probleem te verhelpen en je PageSpeed-score weer wat op te krikken!

Afbeelding: De bekende error van Google Pagespeed over Javascript: https://developers.google.com/speed/docs/insights/BlockingJS 

Waarom Javascript verwijderen/uitstellen? 

De voornaamste reden dat je hiermee aan de slag moet willen gaan is niet vanwege Google, maar vanwege je bezoekers. Niemand wil namelijk een website waarop je 3 seconden lang tegen een wit scherm aankijkt. Iedereen wil vooruitgang zien. Feedback dat de website niet aan het vastlopen is.

Afbeelding: Bekende filmstrip van langzame websites die Javascript inladen belangrijker vinden dan gebruiksvriendelijkheid 

Dit fenomeen van het witte scherm wordt in veel gevallen veroorzaakt door Javascript. Een browser moet normaliter namelijk wachten totdat alle Javascript gedownload is, voordat deze aan de slag kan met het renderen (opbouwen), van de pagina. Dit doet de browser, omdat Javascript vaak wordt gebruikt om elementen op de pagina te wijzigen. Om veel verschuivingen en problemen met de pagina te voorkomen, wacht de browser dus totdat de scripts er allemaal zijn.

Javascript uitstellen via Wordpress

De meeste Wordpress-gebruikers zullen alles met behulp van plugins oplossen. Dit is goedkoop en eenvoudig, maar brengt ook nadelen met zich mee. De meeste plugins brengen namelijk 'gewicht' met zich mee die zich vertaalt naar een langere laadtijd van jouw website.

Iedere plugin heeft eigen stukjes Javascript nodig om te functioneren, denk hierbij aan sliders (diavoorstellingen), mobiele menu's en alle andere interactieve elementen op een pagina. 

Als algemene verbetering hiervoor is er nog een plugin! :) Dit is 'WP Deferred Javascript', een plugin die als enige taak heeft om alle te laden Javascript binnen jouw website uit te stellen totdat de belangrijkste kern van de pagina (teksten/linkjes), geladen is. Hierdoor is de website gevoelsmatig een stuk sneller, al duurt het misschien nog even voordat deze helemaal 'interactief' is.

WP Deferred Javascript installeren

[Let op: Meerdere lezers hebben hier wel een problemen mee ondervonden, dus maak vantevoren een backup van je Wordpress-installatie. Dan kun je altijd eenvoudig weer terug.]

Stap 1: Zoek het plugins-menu en klik op 'Nieuwe plugin toevoegen'

Stap 2: De plugin opzoeken & installeren door op de naam te zoeken

Stap 3: Klik op 'Plugin activeren' en je bent klaar!

[LET OP: Controleer of je website nog goed werkt, want het kan heel goed zijn dat je website/thema zo afhankelijk is van Javascript dat het niet zo makkelijk gaat als hier beschreven.]

[Optioneel: Is je website nou inderdaad stuk gegaan? Dan kun je via een extra technische stap en deze plugin de website wellicht weer laten werken en toch nog profiteren. Je kan namelijk bepaalde scripts 'normaal' en blokkerend in laten laden, als dit nodig is voor de werking van je website. Hierdoor krijg je net wat minder punten van Google misschien, maar werkt je website wel.

Gebruik hiervoor het onderstaande plaatje:

Afbeelding: Via dit menuutje en het witte tekstvak kun je scripts toevoegen die je wel normaal wilt laten inladen, zodat de website niet stuk gaat.

Om dit voor elkaar te krijgen zul je als je non-technisch bent, stap voor stap de links naar de scripts in dit tekstvak moeten zetten en dan testen of de website wel goed werkt. Geen leuk klusje, maar dat is de prijs die je betaalt als je je eigen website niet hebt gebouwd :).

Een lijstje met links van scripts vind je eenvoudig door de plugin even uit te zetten (deactiveren) en je website opnieuw in Google PageSpeed Insights te gooien. Google geeft je dan een lijst met links naar scripts die het laden blokkeren. 

Javascript uitstellen zonder Wordpress (technisch)

In een landschap zonder plugins zijn we op onszelf aangewezen. Ik ga er hier dan ook vanuit dat je toegang hebt tot de code van je website en zelf aanpassingen kunt doen. 

Stap 1: Zoek de JavaScript-bestanden op die Google noemt bij zijn PageSpeed Insights, in de broncode van de website. Deze zijn vormgegeven in de volgende vorm (altijd zonder code tussen de scripts-tags, alleen met een link naar een Javascript-bestand):

<script src="http://daan.onl/bin/scripts.js"></script>

Stap 2: Verplaats de bestanden tot een regel boven de '' tag in je HTML. 

Stap 3: Pas de code-regels met script aan door de attributen 'async' en 'defer' toe te voegen, dit zorgt ervoor dat de scripts pas worden ingeladen op het moment dat de rest van de code al is ingeladen:

<script src="http://daan.onl/bin/scripts.js" async defer></script>

Stap 4: Test je website, doet alles het nog? Het kan namelijk zijn dat een deel van de code boven je scripts al gebruikmaakt van de scripts die eronder staan, terwijl deze nu worden uitgesteld. Hierdoor kan functionaliteit, zoals een mobiel menu, stuk gaan.

Stap 5: Wanneer alles werkt, gooi je jouw website nog eens door Google PageSpeed Insights heen en heb je hopelijk meer punten gekregen en betere gebruiksvriendelijkheid!

[Optioneel: Is je website wel stuk gegaan? Dan zitten er stukjes 'inline' code (dus niet via een extern Javascript-bestand) in de HTML die de scripts al aanroepen voordat ze zijn ingeladen. Een oplossing om dit te voorkomen is door te wachten met het uitvoeren van deze inline-scripts totdat de hele website geladen is (ook de scripts).

Doordat Javascript een taal is dat goed is met 'event', gebeurtenissen in de browser, kun je hier bepaalde triggers voor inbouwen. Zo ook voor wanneer de hele pagina is ingeladen. Hiervoor hebben we het zogenaamde 'load'-event. 

De trigger voor deze gebeurtenis implementeer je op de volgende manier:

window.addEventListener("load", function() {
  jQuery('#mobileNavIcon').click(function () {
    jQuery('#menu').slideToggle(); // voorbeeld-code
    return false;
  });
}

Je kunt dit stukje code kopiëren en deze voorbeeld-code aanpassen door de code van 'jQuery..' tot en met '});' te vervangen met je eigen inline-script.]

Aan de slag

Ik hoop dat je aan de hand van de bovenstaande aanwijzingen aan de slag kunt met het versnellen van je website. Mocht je tegen laadproblemen / errors aanlopen, laat het gerust weten, dan help ik je graag verder op weg via daan@daan.onl.

Heb je goede slagen kunnen maken en wil je graag nog meer snelheid? Bekijk dan ook eens de volgende artikelen: