Comment supprimer JS et CSS qui bloquent le rendu pour augmenter la vitesse du site

Bien que l’esthétique du site soit importante, son contenu et sa vitesse de chargement permettent aux gens de revenir en arrière. WordPress offre aux utilisateurs un plugin sophistiqué et une boîte à outils de thèmes pour créer rapidement leurs propres sites personnalisés. Cependant, ces sujets et plug – ins nécessitent JavaScript (JS) et des feuilles de style en cascade (CSS) pour fonctionner. WordPress les crée automatiquement sous forme de fichiers scriptés. Ils sont généralement mal optimisés. Par conséquent, ils réduisent considérablement la vitesse de votre site. Cela peut déprimer le lecteur. Ainsi, dans ce guide, nous allons explorer comment trouver et supprimer ces scripts de blocage de rendu et vous montrer comment accélérer le chargement des sites WordPress.
Qu’est – ce que les scripts JS et CSS qui bloquent le rendu et pourquoi sont – ils malveillants? La plupart des pages Web sur Internet se composent de trois composants clés: Javascript, css et langage de balisage hypertexte. Html comme base, Javascript et CSS sont intégrés. Cependant, il est maintenant plus traditionnel d’intégrer des appels vers des scripts externes dans des documents HTML. Ces scripts sont enregistrés dans la file d’attente utilisée par le navigateur Web pour rendre la page Web. La façon la plus simple de visualiser un script utilisé par une page Web sans consulter le code source est de le télécharger à partir d’un navigateur Web (Ctrl + s). Le navigateur Web téléchargera les documents HTML et les dossiers contenant tous (ou la plupart) les scripts, images et autres fichiers utilisés par la page Web.
Plus le script que votre page doit invoquer à partir de la file d’attente est complexe, plus il faut de temps pour le rendre. En général, les navigateurs Web téléchargent des ressources Web telles que des scripts et des images dans un cache local pour charger les pages plus rapidement. Bien que les utilisateurs clients puissent accélérer le temps de rendu des pages Web en désactivant JavaScript
Compte tenu de la taille du cache et de l’utilisation d’adblocker, ce n’est pas la solution idéale. Le fardeau devrait incomber aux développeurs web. Si vous recevez une plainte ou si vous remarquez un problème avec la présentation du contenu de votre site, il n’est pas trop tard pour le résoudre.
Comment optimiser un site Web en trouvant et en corrigeant des scripts de bloc de rendu vous devez évaluer la vitesse du site ou de la page Web avant de décider quels scripts arrêter ou optimiser. Vous pouvez utiliser des plateformes en ligne comme gtmetrix ou Google page speed Insights. Tout ce que vous avez à faire est d’entrer l’URL du site Web ou de la page Web à tester, qui sera évaluée par l’outil et fournira d’autres aperçus. Ils recommandent également des vérifications que vous pouvez utiliser pour accélérer votre site Web. Par exemple, ils vous conseillent d’utiliser moins d’éléments sur une page Web ou de réduire les CSS et javascripts inutilisés. Gtmetrix vous montrera les scripts qui doivent être optimisés. Alternativement, vous pouvez utiliser l’onglet couverture des outils chrome devtools pour afficher les données d’utilisation du script. Après avoir déterminé quels scripts ne sont pas les meilleurs, vous pouvez faire quelque chose pour les corriger. Cependant, ces étapes nécessitent un certain nombre de techniques de codage pour réussir. Vous devez au moins avoir les bases de la programmation JavaScript fonctionnelle. Participer à un tutoriel de codage (ou à un camp d’entraînement) est également une bonne idée pour vous aider à développer vos compétences. En moyenne, un camp d’entraînement au codage peut prendre jusqu’à 15 semaines, ce qui peut sembler long, mais cela en vaut la peine si vous considérez l’importance de la capacité de base de lire et d’écrire le code dans la société moderne. Cependant, il y a cinq façons de corriger les scripts de bloc de rendu et d’accélérer les pages Web.
1. Optimiser la séquence de chargement de la tête
(‘) ) Utilisé pour précharger les éléments. La base de votre page devrait être ici, de sorte que l’écran blanc ne rend pas hommage aux utilisateurs lors du téléchargement de votre page. Bien que le CSS intégré fonctionne correctement, vous devriez éviter d’entrer JavaScript ici. Une fois la Section de la tête optimisée, il est nécessaire d’optimiser le corps. La plupart des navigateurs Web affichent des pages Web de haut en bas. Vous devez trier les appels de script en fonction de leur importance et de leur complexité. Vous devriez appeler des scripts qui ne sont pas importants pour le rendu final de la page Web, ainsi que des scripts complexes qui prennent du temps.
Minimiser le Code minimiser le Code implique la réécriture et la suppression de caractères inutiles tels que les espaces, les commentaires, les virgules, les sauts de ligne, etc. Cela rend le code plus compact et réduit la taille du script et augmente le temps de chargement de la page Web. Des plug – ins et des outils comme le w3tc ont des modules qui minimisent le javascript et le CSS dans le sujet. Alternativement, vous pouvez minimiser manuellement le Code de script à l’aide d’outils en ligne gratuits comme JavaScript minifier. 3. Utilisez un navigateur Web JavaScript retardé et asynchrone pour lire le Code de haut en bas. Lorsqu’ils rencontrent des balises de script, ils arrêtent de charger les pages Web et lisent les fichiers de script. Cela ralentit le rendu.
Vous pouvez utiliser la propriété async pour charger le script en parallèle avec la page Web et l’exécuter dès que le script est disponible. Alternativement, vous pouvez utiliser l’attribut Delay pour retarder l’analyse du script. Cela signifie qu’il chargera également le script en parallèle avec la page Web, mais ne l’exécutera que lorsque le navigateur analysera la page. Il n’est pas recommandé d’utiliser des attributs asynchrones ou des scripts différents pour le rendu et l’affichage
Un élément visuel. Les mots – clés JavaScript équivalents à ces attributs sont async et Await. Vous pouvez les utiliser pour charger JavaScript de façon plus asynchrone sans changer les balises HTML sur les pages Web.
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 manquent d’outils d’interface utilisateur tels que les contrôles de base et les curseurs. Puis CSS 3. Il présente de nouvelles couleurs, des ombres de cadre, des opacités, etc. JavaScript est idéal pour ajouter des contrôles d’interface utilisateur complexes. Cependant, les ressources Javascript sont plus lourdes que CSS. Par conséquent, l’utilisation intensive de JavaScript peut considérablement ralentir votre site Web. Si vous remarquez que votre page Web utilise Javascript pour récupérer un jeu qui a échoué dans une version précédente de CSS, vous devriez l’éditer et remplacer tout JavaScript inutile par CSS si possible. Cela permettra de charger les pages plus rapidement.
Le but de supprimer tous les scripts inutiles JS et CSS est d’étendre la fonctionnalité aux pages Web et d’ajouter de la logique là où HTML ne peut pas être ajouté. Cependant, html 5.3 est livré avec de nouvelles balises qui rendent certaines opérations CSS et JS inutiles. L’utilisation du HTML au lieu des scripts accélère naturellement le chargement des pages Web. Par conséquent, la meilleure façon d’optimiser la vitesse du site est de supprimer tous les scripts sous – utilisés. Vous devez analyser quels scripts ne sont pas entièrement nécessaires et les supprimer. De même, vous pouvez utiliser l’onglet chrome devtools ou gtmetrix Coverage pour trouver le script le moins utilisé sur la page Web et le supprimer.
Après avoir supprimé toutes les fonctions ou balises inutiles, vous pouvez combiner des scripts fonctionnellement similaires. Si vous savez déjà comment contourner le code source d’une page Web, cela ne devrait pas être le cas.
C’est une tâche difficile pour vous. Cependant, les utilisateurs qui n’ont pas la même expérience ou les mêmes connaissances en matière de conception web ne doivent pas s’inquiéter. WordPress vous permet d’identifier plus facilement les scripts sur votre site et de les modifier à l’aide de différents plugins d’optimisation. Nous y reviendrons plus tard. Encore une fois, en utilisant le plugin pour optimiser le site WordPress, vous n’avez pas besoin de connaissances pratiques en programmation pour optimiser le site WP. Même si un peu d’expérience peut aider. Cependant, il existe une série de plug – ins axés sur l’optimisation des scripts. Certains d’entre eux utilisent l’intelligence artificielle pour minimiser le Code, changer l’ordre de chargement et remplacer les scripts sous – utilisés par du Code et des scripts plus efficaces. Certains des meilleurs plug – ins d’optimisation de script incluent: WP Rocket: C’est l’un des plug – ins d’optimisation Web les plus populaires. Il détecte automatiquement quels scripts ont des problèmes et les répare pour vous. Vous pouvez l’utiliser pour la mise en cache rapide, la conformité, la compression et la minimisation. Optimisation automatique: Vous pouvez retarder et supprimer des scripts inutiles, intégrer des CSS en ligne et minimiser les scripts, HTML et images. Autooptimize est fortement personnalisé avec des API ouvertes et des options avancées. W3 cache total: ce plug – in nécessite un peu de travail. Les scripts doivent être suivis et reconnus manuellement avant d’être supprimés ou édités. Dans la plupart des cas, ce plugin est livré avec des paquets WordPress. JavaScript asynchrone: plug – in Open Source fourni par WordPress. Il vous permet de détecter le javascript qui bloque le rendu, puis de le retarder ou de le charger asynchrone.

Alors pourquoi ne pas d’abord recommander le plug – in? Malheureusement, certains de ces plugins vous coûteront cher. Par exemple, l’optimisation automatique coûte 49 $par année. Même si c’est un prix raisonnable
Ce n’est peut – être pas idéal pour ceux qui ont déjà payé beaucoup pour l’hébergement et d’autres applications et plug – ins. Cependant, que vous utilisiez des plug – ins ou que vous trouviez manuellement des scripts, vous devez comprendre les concepts de minimisation, de chargement asynchrone et d’ordre de chargement. Si l’un des scripts échoue, il vous facilitera la résolution de tout problème de chargement.