Une très bonne manière de mesurer l’impact d’une ressource tierce, comme un script, est de mesurer la performance de la page avec et sans ce script. Nombreux sont mes clients qui découvrent alors que leurs scripts, qu’ils ont pourtant chargé avec les attributs async
et defer
, sont bloquants pour le rendu.
Et c’est normal. D’après la spécification HTML (source), un script async defer
est, en fait, un script async
partout où async
est supporté, c’est-à-dire partout. Un script async
est téléchargé avec une priorité basse, voire la plus basse. En revanche, une fois qu’il est disponible, il est exécuté immédiatement, interrompant les tâches en cours (y compris les tâches de rendu).
Si vous cherchez d’autres manières de télécharger des scripts, en voici au moins sept.
Et pour tout comprendre des attributs permettant de différer ou rendre asynchrone un script, c’est par ici.