Ce guide examine les règles PageSpeed Insights en contexte: quels sont les éléments à prendre en compte pour optimiser le chemin critique du rendu et pourquoi.
Éliminer les fichiers JavaScript et CSS qui bloquent l'affichage
Pour accélérer le premier rendu, réduisez et (si possible) éliminez le nombre de ressources critiques sur la page, réduisez le nombre d'octets critiques téléchargés et optimisez la longueur du chemin critique.
Optimiser l'utilisation de JavaScript
Les ressources JavaScript sont bloquées par l'analyseur par défaut, sauf si elles sont marquées comme async ou ajoutées via un extrait JavaScript spécial. Le blocage de JavaScript par l'analyseur oblige le navigateur à attendre le CSSOM et suspend la construction du DOM, ce qui peut considérablement retarder le premier affichage.
Préférer les ressources JavaScript asynchrones
Les ressources asynchrones débloquent l'analyseur de documents et permettent au navigateur d'éviter le blocage sur CSSOM avant l'exécution du script. Souvent, si le script peut utiliser l'attribut async, cela signifie également qu'il n'est pas essentiel pour le premier rendu. Envisagez de charger les scripts de manière asynchrone après le rendu initial.
Éviter les appels de serveur synchrones
Utilisez la méthode navigator.sendBeacon() pour limiter les données envoyées par XMLHttpRequests dans les gestionnaires unload. Étant donné que de nombreux navigateurs exigent que ces requêtes soient synchrones, ils peuvent ralentir les transitions de pages, parfois considérablement. Le code suivant montre comment utiliser navigator.sendBeacon() pour envoyer des données au serveur dans le gestionnaire pagehide au lieu du gestionnaire unload.
<script>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
}();
</script>
La nouvelle méthode fetch() permet de demander facilement des données de manière asynchrone. Comme elle n'est pas encore disponible partout, nous vous conseillons d'utiliser la détection de fonctionnalités pour vérifier sa présence avant de l'utiliser. Cette méthode traite les réponses avec des promesses plutôt que plusieurs gestionnaires d'événements. Contrairement à la réponse à une requête XMLHttpRequest, une réponse d'extraction est un objet de flux commençant dans Chrome 43. Cela signifie qu'un appel à json() renvoie également une promesse.
<script>
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
</script>
La méthode fetch() peut également gérer les requêtes POST.
<script>
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
}).then(function() { // Additional code });
</script>
Reporter l'analyse du code JavaScript
Pour réduire la quantité de travail que le navigateur doit effectuer pour afficher la page, différez les scripts non essentiels qui ne sont pas essentiels à la construction du contenu visible pour le rendu initial.
Éviter les exécutions de code JavaScript de longue durée
Une longue exécution de JavaScript empêche le navigateur de créer le DOM, le CSSOM et d'afficher la page. Attendez donc un peu plus tard toute logique et fonctionnalité d'initialisation non essentielles pour le premier rendu. Si une longue séquence d'initialisation doit s'exécuter, envisagez de la diviser en plusieurs étapes pour permettre au navigateur de traiter les autres événements intermédiaires.
Optimiser l'utilisation du CSS
Le code CSS est nécessaire pour construire l'arborescence de rendu, et JavaScript est souvent bloqué sur CSS lors de la construction initiale de la page. Assurez-vous que tous les CSS non essentiels sont marqués comme non critiques (par exemple, les impressions et les autres requêtes média), et que la quantité de CSS critique et le délai de diffusion sont aussi courts que possible.
Placer le code CSS dans l'en-tête du document
Spécifiez toutes les ressources CSS le plus tôt possible dans le document HTML afin que le navigateur puisse détecter les balises <link> et envoyer la demande au CSS dès que possible.
Éviter les importations CSS
La directive d'importation CSS (@import) permet à une feuille de style d'importer des règles à partir d'un autre fichier de feuille de style. Évitez toutefois ces directives, car elles introduisent des allers-retours supplémentaires dans le chemin critique: les ressources CSS importées ne sont découvertes qu'après réception et analyse de la feuille de style CSS avec la règle @import elle-même.
Code CSS intégré qui bloque l'affichage
Pour des performances optimales, vous pouvez envisager d'intégrer le CSS essentiel directement dans le document HTML. Cela élimine les allers-retours supplémentaires dans le chemin critique et, s'il est correctement effectué, peut fournir une longueur de chemin critique "un aller-retour" où seul le code HTML est une ressource bloquante.