Sélectionner une page

Divi affiche brièvement du contenu sans style lors du chargement de la page

Est-ce que votre site web créé avec Divi affiche brièvement du contenu sans style lors du chargement de la page ?

Cela est connu sous le nom de FOUC (Flash Of Unstyled Content) et peut donner une impression peu professionnelle à vos visiteurs. En effet, avant que vos feuilles de style ne soient entièrement chargées, le navigateur affichera temporairement le style par défaut, puis le contenu se mettra à jour avec le style approprié. Cette situation peut également entraîner des problèmes de changement de disposition de contenu, connus sous le nom de CLS (Cumulative Layout Shift).

Comment réparer le chargement du CSS sous Divi ?

Avez-vous remarqué que le contenu de votre site web créé avec Divi bouge lors du chargement ?

Pour contrer cela, nous recommandons l’installation du plugin WP Rocket. Il s’agit d’un plugin d’optimisation de performance qui permet de corriger ce problème.

La solution proposée ci-dessous n’est qu’à mettre en place de manière temporaire.

Tout d’abord, accédez aux options du thème Divi, puis à l’onglet « Intégration ». Ensuite, ajoutez le code suivant à l’élément <head> de votre blog :

<script type="text/javascript"> 
var elm=document.getElementsByTagName("html")[0]; 
elm.style.display="none"; 
document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; }); 
</script>

Ce code cache temporairement le contenu de votre site web pendant le chargement, puis l’affiche une fois que la page est entièrement chargée, évitant ainsi le sursaut indésirable.

Si vous avez des questions ou des préoccupations, n’hésitez pas à les partager dans les commentaires ci-dessous.

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *