Tips en tutorials voor beginners en gevorderde bloggers

Eliminate render blocking javascript?

render blockingVrijwel iedereen die zijn of haar blog op snelheid heeft getest met Google’s PageSpeed Insights zal dit zinnetje herkennen:

‘Eliminate render blocking javascript’

Maar wat betekent het eigenlijk?

Eliminate render blocking javascript: Aha, dát bedoelen ze dus!

Render blocking javascript wil zeggen dat een pagina pas laadt nadat éérst de javascripts op je blog zijn geladen. Dit klinkt misschien nog best abstract. Dus laten we het wat aanschouwelijker maken.

  1. Stel je staat in rij voor de Python in de Efteling. Je bent bijna aan de beurt. Maar dan komt er ineens een groepje jongeren aan met een autistenpas. Vanwege hun autistenpas gaan zij voor. Jij moet dus langer wachten.
  2. Nog een voorbeeld: in de bioscoop moet je je altijd eerst door een boel reclamefilmpjes heen worstelen voordat de echte film start.

De jongeren met de autistenpas en de reclamefilmpjes zijn vergelijkbaar met het ‘render blocking javascript’.

Kort gezegd: render blocking javascript zorgt er voor dat jij langer moet wachten op wat je wilt. In dit geval het laden van de inhoud van je blog. Of het blog van iemand anders. Render blocking javascript maakt een blog trager. En aangezien de gemiddelde internetgebruiker zeer ongeduldig is als het gaat om laadtijd is dit slecht voor de populariteit van je blog.

 

Hoe verwijder je eliminate render blocking javascript uit je Blogger blog?

Als je een wordpress.org blog hebt kun je het probleem van de render blocking javascript oplossen met de W3 Total Cache plugin. Maar wat te doen als je een Blogger blog hebt? Ook dan kun je render blocking javascript verwijderen!

Hier onder leg ik uit hoe.

Stap 1: Ga naar je Blogger dashboard en download je template. Gewoon voor de zekerheid. Mocht er iets mis gaan, dan heb je tenminste een back-up.

Stap 2: Kies Template en klik dan op Edit html

Stap 3: Open een nieuw venster en ga naar PageSpeed Insights.

Stap 4: Vul de url van je blog in, en klik op analyseren.

Stap 5: Bovenaan staat ongetwijfeld iets als: Dit moet worden gecorrigeerd: JavaScript en CSS in inhoud boven de vouw die het weergeven blokkeren, verwijderen. Klik op de link hier onder waar staat: Informatie over de oplossing van dit probleem. Je ziet nu de code die de boel blokkeert. Kopieer de bovenste code.

pagespeed

 

Stap 6: Nu ga je terug naar je Blogger template. Schakel de zoekfunctie in met ctrl+F, en plak de code die je zojuist gekopieerd hebt in het zoekvenster. Zo zoek je snel en makkelijk de code in je html op.

Stap 7: Code gevonden? Kopieer de regel dan uit je html, en verwijder de code.

Stap 8: Plak de code helemaal onderin je blog, net voor

</html>

Stap 9: Klik op preview om te kijken of je blog nog goed werkt.

Stap 10: Als alles er goed uit ziet, klik je op save.

Stap 11: Nu gaan we kijken naar de resultaten van PageSpeed Insights om te zien of het geholpen heeft. Als het goed is staat het blocking javascript er nu niet meer in.

In onderstaande afbeelding zie je dat de javascript code niet langer blokkeert:

Screen Shot 2016-03-12 at 11.41.19
Het blokkerende javascript is weg, en er zijn nu nog maar 2 blokkerende CSS-bronnen.

Stap 12: Herhaal de stappen 5 t/m 10 met de blokkerende CSS.

N.B. Het is niet mogelijk om álle blokkerende javascript en CSS-bronnen te verwijderen, want ze zitten niet allemaal in je html-code. Maar je kunt zeker meer dan de helft verbeteren.

PageSpeed Insights: laadsnelheid zelfde gebleven?

Na het corrigeren van de blokkerende javascript en CSS hoop je natuurlijk op een hogere laadsnelheid. Dit is helaas niet altijd het geval. Zie ook bovenstaande afbeelding. Maar dat wil niet zeggen dat het geen zin heeft! In tegendeel: Google waardeert een blog waarbij eerste de inhoud laadt, en daarna pas de rest.

Samenvatting

Render blocking javascript en CSS vertragen de laadsnelheid van je blog, en maken je blog minder aantrekkelijk voor Google. Daarom is het verstandig om deze issues aan te pakken. Bij wordpress.org blogs doe je dat met deW3 Total Cache plugin. Bij een Blogger blog zoek je de betreffende code op in je template en zet je hem helemaal onderin de html.

 

3 Responses to Eliminate render blocking javascript?

  1. Woepppp, dit moet ik later nog eens goed doorlezen want voor nu snap ik het nog niet helemaal.
    Maar bedankt voor de uitleg, ik zal er eens naar kijken binnenkort.
    Ben zo druk met de therapieën nu…dat ik het blog even niet verder verander op dit moment.

Leave a reply