Bien que l’esthétique d’un site Web soit importante, son contenu et sa vitesse de chargement incitent les gens à revenir. WordPress fournit aux utilisateurs une boîte à outils sophistiquée de plugins et de thèmes pour créer rapidement leurs propres sites Web personnalisés.
Cependant, ces thèmes et plugins nécessitent JavaScript (JS) et des feuilles de style en cascade (CSS) pour fonctionner. WordPress les crée automatiquement sous forme de fichiers de script. Ils sont souvent mal optimisés. En tant que tels, ils peuvent ralentir considérablement votre site Web.
Cela peut être frustrant pour les lecteurs. Ainsi, dans ce guide, nous explorerons comment trouver et supprimer ces scripts de blocage de rendu et vous montrerons comment augmenter les vitesses de chargement de votre site Web WordPress.
Que sont les scripts JS et CSS qui bloquent le rendu et pourquoi sont-ils mauvais ?
La plupart des pages Web sur Internet sont constituées de trois composants clés : JavaScript, CSS et les langages de balisage hypertexte. HTML sert de base, tandis que JavaScript et CSS y sont intégrés. Cependant, de nos jours, il est plus conventionnel d’intégrer des appels à des scripts externes dans le document HTML.
Ces scripts sont conservés dans une file d’attente que votre navigateur Web utilise pour afficher la page Web. Le moyen le plus simple de voir quels scripts une page Web utilise sans regarder le code source est de le télécharger à partir de votre navigateur Web (Ctrl + S). Le navigateur Web téléchargera le document HTML ainsi qu’un dossier contenant tous (ou la plupart) des scripts, images et autres fichiers utilisés par la page Web.
Plus votre page Web doit appeler de scripts complexes à partir de la file d’attente, plus le rendu sera long. Souvent, les navigateurs Web téléchargent des ressources de pages Web telles que des scripts et des images dans un cache local pour charger les pages Web plus rapidement. Alors que les utilisateurs côté client peuvent accélérer les temps de rendu des pages Web en désactivation de JavaScript, en augmentant la taille du cache et en utilisant AdBlockers, ce n’est pas une solution idéale. La responsabilité devrait incomber au développeur Web.
Si vous recevez des plaintes ou avez remarqué que votre site Web a des problèmes pour rendre son contenu, il n’est pas trop tard pour y remédier.
Comment optimiser votre site Web en trouvant et en corrigeant les scripts bloquant le rendu
Avant de décider quels scripts terminer ou optimiser, vous devez évaluer la vitesse de votre site Web ou de votre page Web. Vous pouvez utiliser une plateforme en ligne telle que GTmetrix ou PageSpeed Insights de Google. Tout ce que vous aurez à faire est d’insérer l’URL du site Web ou de la page Web que vous souhaitez tester, et l’outil le notera et fournira d’autres informations.
Ils suggéreront également des audits que vous pouvez utiliser pour rendre votre site Web plus rapide. Par exemple, ils vous proposeront d’utiliser moins d’éléments dans votre page Web ou de réduire les CSS et JavaScript inutilisés. GTmetrix ira jusqu’à vous montrer quels scripts doivent être optimisés.
Alternativement, vous pouvez utiliser Onglet Couverture de Chrome DevTools pour vous montrer les données d’utilisation de vos scripts. Une fois que vous avez identifié les scripts sous-optimaux, vous pouvez faire quelques choses pour les corriger. Cependant, ces étapes nécessiteront un peu de prouesse de codage pour les mettre en œuvre avec succès. Vous aurez au moins besoin d’une compréhension de base de la programmation JavaScript fonctionnelle.
Rejoindre un cours de didacticiel de codage (ou bootcamp) est également une bonne idée pour vous aider à développer davantage vos compétences. En moyenne, un bootcamp de codage peut prendre jusqu’à quinze semaines pour terminer, et bien que cela puisse sembler long, cela en vaut la peine si l’on considère à quel point l’alphabétisation de base du code est une compétence importante à avoir dans le monde moderne. Néanmoins, voici cinq façons de corriger les scripts bloquant le rendu et d’augmenter la vitesse de votre page Web.
1. Optimisez l’ordre de chargement
La section de tête () de la page Web est utilisé pour le préchargement des éléments. La base de votre page Web doit se trouver ici, de sorte qu’un écran blanc n’accueille pas l’utilisateur lorsqu’il charge votre page Web. Bien que le CSS intégré convienne, vous devez éviter de placer du JavaScript ici.
Une fois que vous avez optimisé la section de tête, vous devez optimiser le corps. La plupart des navigateurs Web affichent les pages Web de haut en bas. Vous devez ordonner les appels aux scripts en fonction de leur importance et de leur complexité. Vous devez placer les appels aux scripts qui ne sont pas cruciaux pour le rendu de la page Web en dernier, ainsi que les scripts complexes qui prennent du temps.
2. Minifier le code
La réduction du code consiste à le réécrire et à supprimer les caractères inutiles tels que les espaces blancs, les commentaires, les virgules, les sauts de ligne, etc. Cela rend le code plus concis et compact, ce qui réduit finalement la taille du script et augmente les temps de chargement de votre page Web.
Les plugins et outils tels que W3TC ont des modules qui minimisent le JavaScript et le CSS dans vos thèmes. Alternativement, vous pouvez minifier manuellement votre code de script avec un outil en ligne gratuit comme JavaScript Minifier.
3. Utiliser le chargement différé et asynchrone de JavaScript
Les navigateurs Web lisent le code de haut en bas. Lorsqu’ils rencontrent une balise de script, ils arrêtent de charger la page Web et lisent le fichier de script. Cela ralentit le rendu.
Vous pouvez utiliser le asynchrone pour charger le script en parallèle avec la page Web et l’exécuter dès qu’il est disponible. Alternativement, vous pouvez utiliser le reporter pour différer l’analyse des scripts. Cela signifie qu’il chargera également le script parallèlement à la page Web, mais ne l’exécutera que lorsque le navigateur analysera la page Web.
Nous vous déconseillons d’utiliser le asynchrone ou reporter attributs sur les scripts utilisés pour rendre et afficher des éléments visuels. Les équivalents des mots clés JavaScript de ces attributs sont les asynchrone et attendre mots clés. Vous pouvez les utiliser pour chargez vos Javascripts de manière plus asynchrone sans modifier les balises HTML de votre page Web.
4. Remplacer les éléments visuels JavaScript par CSS3
Dans le passé, CSS n’était pas aussi polyvalent qu’aujourd’hui. Par exemple, CSS 1.0 et 2.0 étaient dépourvus d’outils d’interface utilisateur tels que des commandes de base et des curseurs.
Puis CSS 3 est arrivé. Il présentait de nouvelles couleurs, des ombres de boîte, une opacité, etc. JavaScript est idéal pour ajouter des contrôles d’interface utilisateur complexes. Cependant, Javascript est plus lourd en ressources que CSS.
Ainsi, l’utilisation de quantités excessives de JavaScript ralentit considérablement votre site Web. Si vous remarquez que votre page Web utilise JavaScript pour prendre le relais là où les versions précédentes de CSS sont tombées à plat, vous devez la modifier et remplacer tout JavaScript inutile par CSS – où vous le pouvez. Cela permettra aux pages Web de se charger plus rapidement.
5. Éliminez tous les scripts inutiles
Le but de JS et CSS est d’étendre les fonctionnalités aux pages Web et d’ajouter une logique là où HTML ne le peut pas. Cependant, HTML 5.3 est arrivé avec de nouvelles balises qui rendraient inutiles certaines opérations CSS et JS. L’utilisation de HTML au lieu de scripts accélère naturellement le chargement de vos pages Web.
Ainsi, le meilleur moyen d’optimiser la vitesse de votre site Web est d’éliminer tous les scripts sous-utilisés. Vous devrez analyser quels scripts sont complètement inutiles et les supprimer. Encore une fois, vous pouvez utiliser l’onglet Couverture de Chrome DevTools ou GTmetrix pour rechercher les scripts les plus sous-utilisés sur votre page Web, puis les supprimer.
Une fois que vous avez supprimé toutes les fonctions ou balises inutiles, vous pouvez combiner des scripts dont les fonctions sont similaires. Si vous savez déjà comment vous frayer un chemin dans le code source de votre page Web, cela ne devrait pas être une tâche difficile pour vous. Cependant, les utilisateurs qui ne sont pas aussi expérimentés ou bien informés en matière de conception de sites Web ne devraient pas s’inquiéter. WordPress vous permet d’identifier plus facilement les scripts sur votre site Web et de les modifier à l’aide de divers plugins d’optimisation. Nous les couvrirons ensuite.
6. Utiliser des plugins pour optimiser votre site WordPress
Encore une fois, vous n’avez pas besoin de connaissances pratiques en programmation pour optimiser votre site Web WP. Bien qu’une certaine expérience puisse aider. Néanmoins, il existe une gamme de plugins orientés vers l’optimisation des scripts. Certains d’entre eux utilisent l’IA pour réduire le code, modifier l’ordre de chargement et remplacer les scripts sous-utilisés par un code et des scripts plus efficaces.
Certains des meilleurs plugins pour l’optimisation des scripts incluent :
- Fusée WP: C’est l’un des plugins les plus populaires pour l’optimisation Web. Il peut détecter automatiquement les scripts problématiques et les corriger pour vous. Vous pouvez l’utiliser pour la mise en cache rapide, la déférence, la compression et la minification.
- Optimisation automatique: Cela peut différer et éliminer les scripts non essentiels, intégrer le CSS en ligne et réduire les scripts, le HTML et les images. Autoptimize est hautement personnalisable via une API ouverte et des options avancées.
- Cache total W3: Ce plugin nécessite un peu de travail à utiliser. Vous devrez suivre et identifier les scripts manuellement avant de les supprimer ou de les modifier. Dans la plupart des cas, ce plugin est déjà disponible avec votre package WordPress.
- Javascript asynchrone: Un plugin open-source présenté par WordPress. Il vous permet de détecter le JavaScript bloquant le rendu, puis de le différer ou de le charger de manière asynchrone.
Alors pourquoi n’avons-nous pas simplement recommandé les plugins en premier lieu ? Malheureusement, certains de ces plugins vous coûteront cher. Par exemple, Autoptimize coûte 49 $ par an. Bien qu’il s’agisse d’un tarif raisonnable, il peut ne pas être idéal pour les personnes qui paient déjà une grosse somme d’argent pour l’hébergement et d’autres applications et plugins.
Néanmoins, que vous utilisiez des plugins ou que vous trouviez des scripts manuellement, vous devez comprendre des concepts tels que la minification, le chargement asynchrone et l’ordre de chargement. Cela vous permettra de résoudre plus facilement les problèmes de chargement en cas d’échec de l’un de vos scripts.
