Sneller met async JavaScript en CSS
– En waarom FOUT goed is –
Async JS
Browsers lezen HTML om een pagina te kunnen weergeven. Wanneer een browser in dit proces een script tegenkomt, dan stopt het renderen en voert hij eerst de JavaScript uit en gaat dan pas weer verder met de weergave van de pagina. Wanneer een eigen script of een script van een externe server het laat afweten, kan dit ernstige gevolgen hebben voor de laadtijd en weergave van een pagina.
Probeer daarom het gebruik van blokkerende JavaScripts te voorkomen door de scripts die niet kritisch zijn voor de weergave van een pagina, asynchroon in te laden.
<script async src=mijn.js></script>
Inline JavaScript
Als je een klein script hebt, kun je die inline in de HTML plaatsen. Je voorkomt het blokkeren, en het scheelt ook een verzoek aan de server om een bestand op te halen.
<script>
// JavaScript hier
</script>
Het is wel zo dat je hetzelfde inline script waarschijnlijk moet invoegen op meerdere pagina’s waardoor het HTML-document groter wordt. Het voordeel van een sneller weergegeven pagina is echter meestal groter.
Blokkerende CSS
Okay, externe scripts kunnen we nu asynchroon laden, maar niet alleen JavaScript kan de weergave van de pagina blokkeren. CSS en met name webfonts zijn hier debet aan. Kunnen we CSS ook async laden? Jazeker, maar eerst wil ik wat meer vertellen over hoe browsers omgaan met webfonts.
FOUT, FOUC, FOIT, WTF?
- FOUT: Flash Of Unstyled Text
- Firefox
- FOIT: Flash Of Invisible Text
- Chrome, Safari, IE
Op het moment dat een browser @font-face tegenkomt, dan stopt de pagina-rendering en laadt de browser eerst de webfonts. Het effect is een FOUT en algemeen vindt men dit onesthetisch. Designers forceren liever een FOIT, bewapend met synchroon geladen font-loader-scripts, in plaats van het zo snel mogelijk tonen van de door de gebruiker opgevraagde content.
Daar ben ik het niet mee eens. Wat nou als je een externe dienst gebruikt om je webfonts te laden - zoals TypeKit - of je zit op een erg trage GPRS internetverbinding. Dan kan het lang, zo niet eeuwig duren voordat je enige tekst ziet. Liever een FOUT, want je kunt direct bij de content.
Als het webfont geladen is, dan gaat de browser weer verder met de weergave van het HTML document. Bij voorkeur laad je de webfonts asynchroon, om dezelfde blokkerende redenen als bij JavaScript.
Webfonts zijn niet kritisch
Webfonts zouden niet essentieel – kritisch – moeten zijn voor het functioneren van een webpagina. Maatwerk typografie verbetert meestal de leesbaarheid en beleving van een site of app, maar er is geen man overboord als er systeem- of fallback-fonts worden getoond. Vergeet niet dat gebruikers steeds vaker content op eigen wijze consumeren. Denk maar aan de reader-weergave in browsers, of services als Pocket en Instapaper. Daar heb je geen enkele invloed op.
Snellere pagina's met loadCSS
Met het asynchroon laden van CSS kun je snellere pagina's krijgen. 2 voorbeelden:
1. Webfonts asynchroon laden zodat ze het weergeven van de pagina niet in de weg zitten
2. De CSS onder ‘de vouw’ asynchroon laden terwijl je de kritische CSS boven de vouw synchroon inlaadt
Zo geef je gebruikers zo snel mogelijk toegang tot de inhoud die ze zoeken. Geen esthetische onzin met webfont- of pageloaders. Helaas bestaat er geeen async attribuut voor CSS. loadCSS, een kleine JavaScript-functie kan dit wel.
Zo werkt het
<head>
<script>
function loadCSS(){}
loadCSS("css/main.css");
</script>
<noscript>
<link href="css/main.css" rel="">
</noscript>
</head>
De CSS link staat binnen een no-script tag zodat deze beschikbaar blijft zonder JavaScript. Verder heeft loadCSS nog een paar handige media en onload instellingen.
Tenslotte
Het gaat erom de inhoud van pagina’s zo snel en zo volledig mogelijk beschikbaar te stellen aan de gebruiker. Async JavaScript en loadCSS helpen hierbij.
