Lors de la création d’un site Web, certains aspects sont primordiaux pour offrir aux utilisateurs une expérience fluide. L’un de ces aspects est représenté par le temps de chargement. Un site Web qui se charge rapidement est toujours apprécié par les visiteurs qui souhaitent trouver ce qu’ils recherchent le plus rapidement possible. Afin d’obtenir un temps de chargement rapide, vous devez apprendre à éliminer JavaScript et CSS qui bloquent le rendu dans le contenu au-dessus de la ligne de flottaison.

La vitesse d’un site Web peut être influencée par un large éventail de facteurs, mais les facteurs abordés dans cet article ont le plus grand impact. L’équation parfaite du site Web peut être délicate à résoudre, car certains éléments ne dépendent pas de vos actions. Ils sont dictés par chaque situation en particulier (ex. emplacement géographique, débit Internet). Cependant, vous pouvez optimiser la livraison CSS en modifiant les éléments que vous pouvez contrôler entièrement. En savoir plus sur ce sujet ci-dessous dans cet article créé par notre équipe de wpDataTables.

Définir le blocage du rendu et le contenu au-dessus de la ligne de flottaison

Blocage du rendu

Le blocage du rendu fait référence aux éléments qui empêchent le contenu crucial d’un site Web (par exemple, le corps du texte principal d’un article) de se charger avant que la page entière ne soit chargée. Un bon exemple d’un tel élément est représenté par tout code JavaScript ou CSS supplémentaire ajouté à un site Web. Ce code peut empêcher l’utilisateur de voir quoi que ce soit dans son navigateur tant que le code n’a pas été entièrement exécuté, devenant ainsi un blocage du rendu.

Contenu au-dessus de la ligne de flottaison

Lorsqu’un visiteur accède à un site Web, il est accueilli par une certaine partie du site, c’est-à-dire la partie la plus haute. Pour voir la suite, l’utilisateur devra faire défiler vers le bas ou effectuer d’autres actions sur le site. Le contenu que les visiteurs voient immédiatement après y avoir accédé est appelé contenu au-dessus de la ligne de flottaison.

À propos du blocage du rendu en JavaScript et CSS

Les navigateurs lisent le HTML pour afficher un site. Il s’agit d’un processus qui comporte plusieurs étapes. Si le navigateur tombe sur des éléments faisant référence à un script/une feuille de style, des étapes supplémentaires sont nécessaires pour lire le code. Le navigateur devra demander un fichier, attendre une réponse, télécharger le fichier depuis le serveur, puis exécuter le fichier.

Bien entendu, ces étapes supplémentaires peuvent ralentir le temps de chargement. Gardez à l’esprit que certains thèmes WordPress impliquent plusieurs fichiers CSS ou JavaScript. Le temps de chargement peut être considérablement ralenti à cause de ces fichiers. C’est la raison pour laquelle vous devrez éliminer les ressources bloquant le rendu de votre site. Le plus souvent, ce ne sont pas des fichiers critiques, vous pouvez donc différer l’analyse JavaScript pour réduire le blocage du rendu des pages, améliorant ainsi la vitesse sur votre site.

Identifier JavaScript et CSS bloquant le rendu

Pour éliminer JavaScript et CSS qui bloquent le rendu dans le contenu au-dessus de la ligne de flottaison, vous devrez identifier ces éléments. L’un des moyens les plus simples de les identifier consiste à ouvrir votre site Web avec un outil de vitesse de page qui vous indique les problèmes auxquels il est confronté lors du chargement. PageSpeed Insights de Google est l’un de ces outils qui devrait vous aider à trouver les fichiers qui bloquent le rendu sur votre site. Une fois que vous avez compris quels sont les fichiers, vous pouvez procéder à la suppression ou à la réorganisation du JavaScript bloquant le rendu.

Comment éliminer JavaScript et CSS qui bloquent le rendu dans le contenu au-dessus de la ligne de flottaison ?

Vous avez deux options dans cette situation : apprenez à éliminer vous-même JavaScript et CSS qui bloquent le rendu dans le contenu au-dessus de la ligne de flottaison ou utilisez un plugin pour le faire. Si vous êtes féru de technologie et que vous souhaitez apprendre comment les ressources bloquant le rendu sont éliminées, appliquez l’une de ces méthodes :

Effacer JavaScript du chemin de rendu critique

Le chemin de rendu critique ne doit inclure que les éléments essentiels pour le site Web. Vous pouvez déplacer les ressources JavaScript inutiles hors de ce chemin. Cela se fait en ajoutant certains attributs là où JavaScript est requis. Les attributs sont :

Async : cet attribut indique au navigateur qu’il doit commencer à télécharger les ressources immédiatement pour éviter des temps de chargement lents. Une fois les ressources disponibles, l’analyse HTML est temporairement interrompue et les ressources sont chargées.
Différer : cet attribut indique au navigateur de différer le téléchargement des ressources jusqu’à ce que le processus d’analyse HTML soit terminé. Une fois terminé, le navigateur téléchargera et affichera les scripts dans l’ordre de leur apparition sur le site Web.

Vérifiez comment les ressources CSS sont fournies et optimisez-les

Pour éliminer les ressources bloquant le rendu dans CSS, vous devrez :

Identifiez les ressources requises pour le contenu au-dessus de la ligne de flottaison et alignez les styles CSS avec HTML.
Utilisez un autre attribut pour identifier les ressources CSS absolument nécessaires (attribut média).
Chargez les ressources CSS de manière asynchrone (en utilisant les attributs décrits ci-dessus).

Une liste de plugins qui peuvent vous aider à éliminer plus facilement JavaScript bloquant le rendu

Optimisation automatique

Pour éliminer JavaScript et CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison de WordPress, vous pouvez utiliser des plugins tels que Autoptimize. Ce plugin améliore le temps de chargement de votre site WordPress en combinant des morceaux de code, en réduisant la taille des blocs de code en supprimant les caractères inutiles (compression), etc. En effectuant ces modifications, le code est plus facile à lire et la taille du fichier est réduite, ce qui permet de gagner quelques centaines de millisecondes voire quelques secondes sur le temps de chargement.

Pour installer ce plugin, il vous suffit d’accéder à votre tableau de bord WordPress et d’accéder à l’onglet Plugins. Ensuite, sélectionnez l’option Ajouter nouveau qui se trouve en haut de la fenêtre. Après cela, vous pouvez rechercher Autoptimize ou d’autres plugins dans la barre de recherche. Cliquez sur Installer maintenant, activez-le pour le site Web de votre choix et vous êtes prêt à partir.

Cache total W3

Autoptimize propose de nombreuses autres alternatives que vous pouvez utiliser pour supprimer les ressources bloquant le rendu de WordPress. Le plugin W3 Total Cache est l’un des meilleurs. Ce qui est intéressant avec ce plugin, c’est qu’il intègre de multiples fonctionnalités supplémentaires pour optimiser WordPress. La mise en cache représente le processus par lequel certains fichiers sont stockés sur l’ordinateur d’un utilisateur pour améliorer son expérience avec le site Web. Les visites ultérieures seront plus faciles et les temps de chargement s’amélioreront.

Pack booster de vitesse

Une autre option est Speed Booster Pack. Une fois que vous l’avez installé, vous pouvez accéder aux paramètres et choisir les options qui correspondent à vos besoins. Le plugin offre quelques options de configuration comme déplacer des scripts vers le pied de page ou différer l’analyse des fichiers JavaScript. En les sélectionnant, vous pouvez supprimer JavaScript et CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison en quelques clics seulement.

JCH Optimiser

JCH Optimize est un plugin qui combine JavaScript et CSS tout en réduisant la taille des fichiers. Il possède de nombreuses autres fonctionnalités qui peuvent être utiles à long terme, mais il est excellent pour éliminer les ressources bloquant le rendu. Naviguez dans ses paramètres et activez les fonctionnalités qui semblent pertinentes pour votre site Web.

Même si cela nécessite une certaine attention, la résolution de ce problème aura un impact important sur votre site. Une fois que vous avez appris à supprimer le JavaScript et le CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison, assurez-vous d’éliminer dès que possible tous les éléments susceptibles de ralentir votre site Web.

Si vous avez aimé lire cet article sur la façon d’éliminer JavaScript et CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison, vous devriez consulter celui-ci sur la façon de changer les polices dans WordPress.

Nous avons également écrit sur quelques sujets connexes tels que comment intégrer un iframe WordPress, comment trouver l’ID de page dans WordPress, comment télécharger la médiathèque WordPress, comment arrêter une attaque DDoS et comment masquer le titre de la page dans WordPress.

Source d’enregistrement: wpdatatables.com