Réduire son CLS à 0 en évitant les flash de design, notamment sur le thème Divi avec WP Rocket (ou tout autre thème)
Votre site Divi affiche-t-il du contenu sans style lors du chargement de la page ? Cela s’appelle FOUC pour Flash of unstyled content : votre site affiche brièvement le style par défaut du navigateur avant que vos feuilles de style ne soient chargées. Avec FOUC, votre contenu va changer et cela ne semble pas professionnel. Et avec le changement de contenu, vous risquez d’avoir des problèmes de CLS .
Pour solutionner ce problème de CLS et de FOUC, il va vous falloir ajouter un bout de code JavaScript en haut de votre code source, dans la balise <head> de votre site.
Pas de souci, le bout de code présenté ci-dessous fonctionne pour tous les thèmes WordPress. Il vous suffit de trouver l’option équivalente vous permettant d’ajouter un bout de JavaScript dans votre balise <head> ou d’installer le plugin Head, Footer & Post Injections pour y intégrer le bout de code partagé ci-dessous.
Si vous utilisez par exemple le thème Divi, allez dans Divi > Options du thème > Intégration > Ajouter du code au <head> de votre site.
Intéressé par Divi ? Retrouvez un review complète de ce thème premium ici :
Sinon, cherchez la fonctionnalité équivalente dans les Theme Options de votre thème WordPress, ou utilisez un plugin comme Head, Footer & Post Injections pour ajouter un bout de code dans votre balise <head>.
Étape 1, ajoutez le bout de code JS suivant en haut de votre balise <head> :
<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; });
</script>Voici à quoi cela ressemble si vous avez choisi d’utiliser le plugin d’insertion de code dans le Header & Footer :
Inclut tout en haut de votre code source, ce script aura pour effet de masquer le rendu HTML tant que l’ensemble de la page n’aura pas été téléchargé. Autrement dit, dès que la page aura été entièrement télécharger, JavaScript déclenchera l’affichage du rendu de la balise <html>.
Ce code est du pur JavaScript, c’est-à-dire sans jQuery, donc compatible avec les plugins de performance comme WP Rocket, qui reporte l’exécution du JS.
Grâce à ce code, il est donc impossible que vos utilisateurs, Google ou PageSpeed Insights soient témoins d’un chargement progressif de votre webdesing.
Pour encore plus d’efficacité, pour les cas de CLS les plus élevés, vous pouvez par exemple définir un timer de 50 ms avant l’affichage du contenu chargé sans son entièreté, sans FOUC.
Pour cela, vous pouvez vous inspirer du code suivant :
<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) {
setTimeout(function(){ elm.style.display="block"; }, 50);
});
</script>Vous pouvez noter l’utilisation de la fonction setTimeout(function(){ elm.style.display="block"; }, 50); qui va demander au JavaScript d’attendre un très bref instant (50 ms) avant d’afficher la plage complète (sans CLS) aux utilisateurs.
Étape 2, ajoutez cette exclusion à votre plugin de performance :
Pour les utilisateurs de WP Rocket ou d’un plugin de performance avec « Report de l’Exécution du JavaScript », comme le fait WP Meteor par exemple, il est nécessaire de ne pas reporter l’exécution du bout de JS ajouté précédemment à notre site.
elm.style.displayVoici à quoi cela ressemble si vous êtes utilisateur de WP Rocket :
Grâce à cette mesure, vous devriez réduire considérablement le CLS de votre site. Mais si cela n’a pas résolu complètement votre problème de CLS, rassurez-vous…
Nous avons publié un billet totalement dédié à la résolution des problèmes de CLS que vous pouvez consulter en suivant le lien suivant :
