Defer vs Async JavaScript en hoe dit de Core Web Vitals beïnvloedt
Leer wanneer u JavaScript async moet maken en wanneer u het moet deferren voor de beste Core Web Vitals resultaten
Defer vs Async JavaScript en hoe dit de Core Web Vitals beïnvloedt
In dit artikel zal ik het verschil laten zien tussen defer vs async JavaScript en waarom dit de Core Web Vitals beïnvloedt
Wanneer ik de Core Web Vitals van een klant audit, merk ik vaak dat er op een pagina weinig onderscheid is tussen parser blocking (sync), asynchrone of deferred JavaScript. Dat is zonde, want verschillende scripts hebben verschillende optimale timings.
Table of Contents!
In het kort:
'Normale' JavaScript in de head van de pagina wordt uitgevoerd voordat het parsen van de html begint, async scripts blokkeren de start van het parsen niet maar worden uitgevoerd zodra ze zijn gedownload. Deferred scripts worden uitgevoerd nadat de pagina is geparsed.
Over het algemeen is het async attribuut een goede keuze voor scripts die niet
hoeven te interageren met de DOM, zoals scripts die afbeeldingen of
video's laden. Het defer attribuut is een goede keuze voor scripts die moeten
interageren met de DOM, zoals scripts die widgets initialiseren of event listeners
toevoegen. Laat beide weg als uw script enorme wijzigingen in de
zichtbare viewport aanbrengt.
1. Synchrone JavaScript (Sync):
Standaard zijn JavaScripts in de head van de pagina synchrone scripts. Wanneer JavaScript-code synchroon wordt uitgevoerd, blokkeert dit onmiddellijk de main thread van de browser totdat het script volledig is uitgevoerd. Dit betekent dat de browser moet wachten tot de JavaScript-code klaar is voordat hij doorgaat met andere taken, zoals het renderen van de DOM. Als gevolg hiervan kan synchrone JavaScript de paginasnelheid en responsiviteit aanzienlijk beïnvloeden, vooral bij grotere en complexe scripts. Wanneer een pagina synchrone JavaScript bevat, kan de browser geen andere bronnen laden of de pagina renderen totdat de JavaScript is uitgevoerd, wat leidt tot mogelijke vertragingen bij het laden van de pagina.
<!DOCTYPE html> <html> <head> <title>Sync JavaScript Voorbeeld</title> <script src="script1.js"></script> <script src="script2.js"></script> </head> <body> <!-- Pagina inhoud hier --> </body> </html>
2. Asynchrone JavaScript (Async):
Asynchrone JavaScript stelt de browser in staat om door te gaan met het uitvoeren van andere taken terwijl het script op de achtergrond wordt gedownload. Door het async attribuut in de <script> tag te gebruiken, geven ontwikkelaars aan dat het script niet afhankelijk is van de DOM en onafhankelijk kan worden uitgevoerd. De browser wacht niet tot het async script klaar is met laden voordat hij doorgaat met het renderen van de pagina. Als resultaat hebben async scripts het potentieel om de paginasnelheid te verbeteren, vooral op tragere verbindingen, omdat ze het critical rendering path niet blokkeren.
<!DOCTYPE html> <html> <head> <title>Async JavaScript Voorbeeld</title> <script src="script1.js" async></script> <script src="script2.js" async></script> </head> <body> <!-- Pagina inhoud hier --> </body> </html>
Het is belangrijk op te merken dat async scripts in een onvoorspelbare volgorde kunnen vuren, aangezien ze worden uitgevoerd zodra ze beschikbaar zijn, ongeacht hun volgorde in het HTML-document. Als scripts van elkaar afhankelijk zijn, kan het gebruik van async afhankelijkheidsfouten veroorzaken.
3. Deferred JavaScript:
Deferred JavaScript, aangegeven door het defer attribuut in de <script> tag, stelt scripts in staat om op de achtergrond te worden gedownload terwijl de browser doorgaat met het parsen van het HTML-document. Net als async, blokkeren deferred scripts het critical rendering path niet, wat leidt tot sneller laden van de pagina. Het belangrijkste verschil is echter dat deferred scripts hun uitvoeringsvolgorde behouden en worden uitgevoerd in de volgorde waarin ze in het HTML-document verschijnen. Deferred scripts worden uitgevoerd nadat de DOM volledig is geparsed en net voordat het DOMContentLoaded event wordt gevuurd.
<!DOCTYPE html> <html> <head> <title>Defer JavaScript Voorbeeld</title> <script src="script1.js" defer></script> <script src="script2.js" defer></script> </head> <body> <!-- Pagina inhoud hier --> </body> </html>
Het gebruik van defer is gunstig voor scripts die afhankelijk zijn van de DOM en in een specifieke volgorde moeten worden uitgevoerd, omdat het ervoor zorgt dat de benodigde DOM- elementen beschikbaar zijn wanneer het script wordt uitgevoerd. Dit kan voordelig zijn voor scripts die DOM-manipulatie uitvoeren of afhankelijkheden hebben van andere scripts.
| Attribuut | Wanneer het script wordt geladen | Wanneer het script wordt uitgevoerd |
|---|---|---|
geen |
Op de achtergrond | Voordat de DOM wordt geconstrueerd |
async |
Op de achtergrond | Onmiddellijk na het laden |
defer |
Op de achtergrond | Nadat de rest van de pagina is geparsed, in de volgorde waarin het in de HTML verschijnt |
Hoe verbeteren async en defer de Pagespeed?
Synchrone JavaScript (Sync) kan het laden van de pagina aanzienlijk vertragen
en de website minder responsief maken, vooral als de scripts
groot zijn of lang duren om uit te voeren.
Asynchrone JavaScript (Async) kan de paginasnelheid verbeteren door onafhankelijke scripts parallel met andere bronnen te laten laden. Echter, er moet voorzichtigheid worden betracht om afhankelijkheden correct te beheren om onverwacht gedrag te voorkomen.
Deferred JavaScript kan ook de paginasnelheid verbeteren door het
critical rendering path niet te blokkeren. Het zorgt ervoor dat de DOM klaar is voordat
scripts worden uitgevoerd die ervan afhankelijk zijn, wat leidt tot een meer voorspelbare en
gecontroleerde uitvoeringsvolgorde.
Best Practices:
-
Gebruik asynchroon (async) voor onafhankelijke scripts die niet afhankelijk zijn van
de DOM en buiten volgorde kunnen worden uitgevoerd.
- Gebruik deferred (defer) voor scripts die afhankelijk zijn van de DOM en in een specifieke volgorde moeten worden uitgevoerd, vooral bij het uitvoeren van DOM-manipulatie.
- Vermijd het gebruik van synchrone JavaScript waar mogelijk, omdat dit een negatieve invloed heeft op de paginasnelheid en gebruikerservaring.
Door de juiste laadtechniek voor JavaScript-bestanden te gebruiken, kunt u de paginasnelheid optimaliseren, de gebruikerservaring verbeteren en zorgen voor soepelere interacties op hun websites. Het begrijpen van de verschillen tussen sync, async en defer en hun implicaties voor het laden van de pagina is essentieel voor het bouwen van performante webapplicaties.
Houd er rekening mee dat de effectiviteit van het gebruik van sync, async of defer
attributen kan variëren op basis van de specifieke context en inhoud van de
website. Regelmatig testen en prestatieanalyse zijn cruciaal om
de laadstrategie van de pagina te verfijnen en optimale resultaten te garanderen voor
verschillende scenario's.
Een stap verder gaan, laad scripts op aanvraag
Async en defer kunnen een pagina versnellen door de parser niet te blokkeren, maar
het is belangrijk op te merken dat 'scripts uitstellen' niet al
uw problemen zal oplossen. Bijvoorbeeld, het largest contentful paint element is
kwetsbaar voor netwerk- en CPU-concurrentie veroorzaakt door deferred en async
scripts. De interaction to next paint wordt ook beïnvloed door scripts
die vroeg tijdens het laden van de pagina worden uitgevoerd. Daarom moet u, waar mogelijk,
scripts op aanvraag laden om meer controle te hebben over hun
impact op de paginaprestaties. Nieuwsgierig? Lees hoe wij
scripts op aanvraag laden
I have done this before at your scale.
Complex platforms, large dev teams, legacy code. I join your team as a specialist, run the performance track, and hand it back in a state you can maintain.
Discuss Your Situation
