Comment supprimer JS et CSS bloquant le rendu pour la vitesse du site

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 la 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 bloquant le rendu et vous montrerons comment augmenter les vitesses de chargement de votre site WordPress.

Que sont les scripts JS et CSS bloquant 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 avec 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 page 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ésactivant 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 afficher 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 devrez 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 vous 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.

Vous pouvez également utiliser l'onglet Couverture de Chrome DevTools pour afficher les données d'utilisation de vos scripts. Une fois que vous avez identifié les scripts qui ne sont pas optimaux, vous pouvez faire quelques choses pour les corriger. Cependant, ces étapes nécessiteront pas mal de prouesses en matière 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 tutoriel 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, et même si cela peut sembler long, cela en vaut la peine si l'on considère à quel point la connaissance de base du code est une compétence importante à posséder 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. Optimiser l'ordre de chargement

La section d'en-tête (</head></head> ) de la page Web est utilisée pour le pré-chargement des éléments. La base de votre page Web devrait aller ici, de sorte qu'un écran blanc n'accueille pas l'utilisateur lorsqu'il charge votre page Web. Bien que le CSS intégré soit correct, 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 avec les scripts complexes qui prennent du temps.

2. Minifier le code

Minifier le code implique de le réécrire et de 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 réduire 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 l'attribut async pour charger le script en parallèle avec la page Web et l'exécuter dès qu'il est disponible. Vous pouvez également utiliser l'attribut defer 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 conseillons de ne pas utiliser les attributs async ou defer sur les scripts utilisés pour rendre et afficher les éléments visuels. Les équivalents mot-clé JavaScript de ces attributs sont les mots-clés async et await . Vous pouvez les utiliser pour charger vos Javascripts de manière plus asynchrone sans modifier les balises HTML de votre page Web.

4. Remplacez les éléments visuels JavaScript par CSS3

Dans le passé, CSS n'était pas aussi polyvalent qu'il l'est aujourd'hui. Par exemple, CSS 1.0 et 2.0 étaient dépourvus d'outils d'interface utilisateur tels que les contrôles de base et les curseurs.

Puis CSS 3 est arrivé. Il a présenté de nouvelles couleurs, ombres de boîte, 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 le modifier et remplacer tout JavaScript inutile par CSS - là 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 la fonctionnalité aux pages Web et d'ajouter une logique là où HTML ne 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, la meilleure façon 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 trouver 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à 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 compétents en matière de conception 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 couvrirons ceux-ci ensuite.

6. Utiliser des plugins pour optimiser votre site Web WordPress

Encore une fois, vous n'avez pas besoin d'une connaissance pratique de la programmation pour optimiser votre site Web WP. Bien qu'une certaine expérience aiderait. 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 du code et des scripts plus efficaces.

Certains des meilleurs plugins pour l'optimisation des scripts incluent :

• WP Rocket : C'est l'un des plugins les plus populaires pour l'optimisation Web. Il peut détecter automatiquement les scripts qui posent problème et les corriger pour vous. Vous pouvez l'utiliser pour la mise en cache rapide, la déférence, la compression et la minification.
• Autoptimize : 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 grâce à une API ouverte et à des options avancées.
• W3 Total Cache : 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.
• Async Javascript : 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 ê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 recherchiez 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.