Ce guide examine les règles de PageSpeed Insights en contexte: éléments à prendre en compte lors de l'optimisation du chemin critique du rendu et pourquoi.
Éliminer les codes JavaScript et CSS qui bloquent l'affichage
Pour réduire le plus vite possible le premier affichage, réduisez et (si possible) supprimez 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 bloquent 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 l'analyseur JavaScript oblige le navigateur à attendre le CSSOM et met en pause la construction du DOM, ce qui peut retarder considérablement le délai de premier affichage.
Privilégier les ressources JavaScript asynchrones
Les ressources asynchrones débloquent l'analyseur de documents et permettent au navigateur d'éviter tout 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 affichage. 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 page, parfois sensiblement. Le code suivant montre comment utiliser navigator.sendBeacon() pour envoyer des données au serveur dans le gestionnaire pagehide plutôt que dans le 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, vous devez 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 de récupération est un objet stream à partir de 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 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 scripts JavaScript de longue durée
Un code JavaScript de longue durée empêche le navigateur de créer le DOM, de CSSOM et d'afficher la page. Par conséquent, remettez à plus tard toute logique et fonctionnalité d'initialisation qui ne sont pas essentielles pour le premier affichage. Si une longue séquence d'initialisation doit s'exécuter, envisagez de la diviser en plusieurs étapes pour permettre au navigateur de traiter d'autres événements entre les deux.
Optimiser l'utilisation du CSS
L'utilisation de CSS est nécessaire pour construire l'arborescence d'affichage, et JavaScript se bloque souvent dans 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, la presse écrite et d'autres requêtes média), et que la quantité de CSS critique et le temps de livraison 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 requête pour le 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 instructions, car elles introduisent des allers-retours supplémentaires dans le chemin critique: les ressources CSS importées ne sont découvertes qu'après la réception et l'analyse de la feuille de style CSS contenant la règle @import.
Code CSS intégré qui bloque l'affichage
Pour obtenir des performances optimales, vous pouvez envisager d'intégrer le code CSS essentiel directement dans le document HTML. Cela élimine les allers-retours supplémentaires dans le chemin critique et, si cela est fait correctement, peut livrer une longueur de chemin critique "un aller-retour" où seul le code HTML est une ressource bloquante.