Catégorie 2 : Performance du code
1 - Minifiez le CSS
Cela consiste à réduire la taille du code (CSS)
2 - Minifiez le JS -> Ou évitez le JS
Idem pour le JS, avec plusieurs points plus spécifiques abordés ci-après.
Le JS est un langage très consommateur vis-à-vis du fil conducteur et les ressources seront à optimiser ou à éviter.
3 - Différez le CSS
Notamment en utilisant WordPress avec un thème préfabriqué, un site aura plusieurs feuilles de styles et scripts.
Chaque fois que dans le chargement le navigateur va tomber sur un de ces éléments, il va devoir interrompre le chargement de la page, charger la ressource, puis reprendre le chargement.
Si le chargement des ressources est différé, la page chargera et les ressources non-critiques chargeront ensuite, permettant un délai d'affichage au plus rapide.
4 - Limitez la taille du DOM
C'est un des points où les thèmes préfabriqués sont un handicap. Le DOM (Document Object Model) est l'interface qui fournit une représentation structurée d'une page web, sous forme de noeuds et d'objets. Plus la page (le DOM) sera simple, meilleur sera votre score.
5 - Limitez le nombre de scripts tiers
Une plateforme en ligne aujourd'hui n'est pas un espace autarcique et déconnecté. Le déploiement de scripts tiers est souvent nécessaire, par exemple Google Analytics évoqué précédemment, comme les flux de réseaux sociaux, les iframes ou les bibliothèques (polices, JS, etc.)
Ces déploiements sont nocifs à la performance de votre site.
Il faut donc arbitrer ce qui sera utile, ce qui le sera moins et donc rationaliser au maximum - tout en évitant l'utilisation de solutions préfabriquées qui regorgent souvent de dépendances externes.
6 - Pré-connectez les ressources tierces
Pour limiter le temps que prendront les navigateurs à se connecter aux ressources tierces précitées, il est recommandé d'utiliser l'attribut de pré-connexion pour indiquer aux navigateurs la présence de ces scriptes tiers et déclencher leur chargement au plus vite, améliorant la vitesse de chargement global.
7 - Suppression du code non utilisé
Pour aborder la notion de "fil conducteur", il s'agit de permettre au plus vite à l'internaute d''interagir avec votre site.
Le fil conducteur est l'élément qui transforme le code en plateforme web, lorsqu'il travaille à afficher des éléments il n'est pas disponible pour les interactions.
La minification des ressources ou le cache jouent en ce sens, mais il faut également supprimer les briques de code non utilisées, voire...
8 - Fractionner le code
Méthode avancée, utilisable notamment via Webpack, va fragmenter le JS en plusieurs paquets distincts et va conditionner leur exécution à leur stricte nécessité.
9 - Réduire le temps d'exécution du JS
Comme nous le voyons, le JS est la principale source de saturation du fil conducteur. Réduire au maximum ces ressources par optimisation, arbitrages, développements, fragmentation est une nécessité :