Samenvatting
In dit artikel lees je wat het vinkje Scripts asynchroon laden doet. Je leest welke scripts het raakt, en waarom het bij een nieuwe website al aanstaat.
Je vindt er ook wat er niet door verandert en wanneer je het juist uitzet. Verder lees je waar het vinkje staat, en wat de waarschuwing boven dat tabblad betekent.
Wanneer gebruik je dit?
Het vinkje staat bij elke nieuwe website al aan. In de praktijk gaat het dus vaker om uitzetten dan om aanzetten.
Je laat het aan staan om de PageSpeed-score van Google te verbeteren. Google let in die score onder andere op bronnen die het opbouwen van een pagina tegenhouden.
Je zet het uit bij onverklaarbare problemen met externe scripts. Hapert een script op de gepubliceerde website terwijl de code klopt, dan is dit een van de dingen om te proberen.
Hoe werkt dit in Mach3Blocks?
Waar het vinkje staat
Je vindt deze instelling in de pop-in Website-instellingen, op het tabblad Geavanceerd. Het vinkje staat daar bovenaan, boven de andere velden.
Boven die velden staat een oranje meldingsblok. De tekst luidt: "Dit is geavanceerde functionaliteit en dient alleen te worden gewijzigd wanneer je hier kennis van hebt."
Onder het veld staat een veldmelding met de link Klik hier voor meer informatie. Die link opent in een nieuw tabblad de uitleg van Chrome over bronnen die een pagina tegenhouden.
Op hetzelfde tabblad staan nog meer velden. De securityheaders horen bij Security headers, en Webhook-URL hoort bij Publiceren naar webhook.
Wat asynchroon laden betekent
Een script zonder dit kenmerk houdt het opbouwen van de pagina tegen. De browser stopt met de pagina, haalt het script op en gaat daarna pas verder.
Met het kenmerk async gebeurt dat niet. De browser haalt het script erbij terwijl hij de pagina opbouwt, en hij wacht er niet op.
Daar hoort een gevolg bij. De volgorde waarin de scripts worden uitgevoerd ligt niet meer vast, want elk script gaat zodra het binnen is.
Wat je ermee kunt
Wat er met het vinkje aan gebeurt
Staat het vinkje aan, dan krijgen de scriptbestanden die Mach3Blocks zelf plaatst het kenmerk async. Diezelfde scripts verhuizen bovendien naar de bovenkant van de paginacode.
| Onderdeel | Wat er gebeurt |
|---|---|
| De bibliotheken die een blok nodig heeft | Krijgen het kenmerk async |
| De scripts van de blokken | Krijgen het kenmerk async, maar alleen als het een los bestand is |
| Het gebundelde script van de website | Krijgt het kenmerk async |
| De plek van al die scripts | Verhuist van onder in de paginacode naar de bovenkant |
| jQuery | Staat bovenaan en krijgt nooit het kenmerk async |
| Een script dat in de pagina zelf staat | Verandert niet; zonder eigen bestand valt er niets op te zetten |
| Het script voor de statistieken | Verandert niet mee; dat staat vast op het kenmerk defer |
| In de voorvertoning | Werkt precies zo, meteen nadat je hebt opgeslagen |
| Op de live website | Werkt het pas na een nieuwe publicatie |
Het kenmerk is altijd async. Dit vinkje zet nergens het kenmerk defer.
Wat je zelf kunt toevoegen
Aan de code die je zelf plaatst, verandert dit vinkje niets. Wil je zo'n script ook zonder blokkeren laten laden, zet dan zelf het kenmerk async in de scripttag.
Dat geldt voor de drie tabbladen waar je eigen code kwijt kunt:
- Head
- Body
- Trackingcode
Die drie staan in de pop-in Website code-instellingen.
Grenzen en wat niet kan
Dit vinkje raakt alleen de scriptbestanden die Mach3Blocks zelf plaatst. Een chatwidget of een trackingscript dat je zelf hebt geplakt, verandert er niet door.
jQuery blijft altijd blokkerend. Dat script staat bovenaan en krijgt nooit het kenmerk async, ook niet met het vinkje aan.
Ook een script dat in de pagina zelf staat blijft ongewijzigd. Zonder eigen bestand is er niets waarop het kenmerk async kan staan.
Het vinkje belooft verder geen score. Wat een pagina uiteindelijk laadt, hangt ook af van de afbeeldingen, de stylesheets en je eigen code.
Voorwaarden en rechten
Voor dit vinkje is geen recht nodig. Wie de website-instellingen kan openen, kan het aan- en uitzetten.
Om het effect op de live website te zien, heb je het recht Publiceren nodig. In de voorvertoning zie je het ook zonder dat recht.
Bij een website in een presentatiegroep is er geen tabblad Geavanceerd. Het vinkje is daar dus niet te vinden.
Praktijkvoorbeelden
Je hebt de PageSpeed-score van een website laten meten en die valt laag uit. Bij de punten die je terugkrijgt staan bronnen die het opbouwen van de pagina tegenhouden. Je opent de instellingen en controleert of Scripts asynchroon laden aanstaat. Staat het vinkje uit, dan zet je het aan en publiceer je de website opnieuw.
Op de gepubliceerde website hapert een script, terwijl de code klopt en er niets is gewijzigd. Je zet in de instellingen Scripts asynchroon laden uit en publiceert de website opnieuw. Werkt het daarna wel, dan lag het aan de volgorde waarin de scripts werden uitgevoerd.
Je plaatst zelf een script en wilt dat het de pagina niet tegenhoudt. Het vinkje in de instellingen doet daar niets, want het raakt alleen de scripts van Mach3Blocks. Je zet daarom in je eigen scripttag het kenmerk async, en publiceert de website opnieuw.