Améliorer la vitesse du site : supprimer le blocage du rendu JS & CSS
WordPress vous permet de construire un site web personnalisé avec votre choix de plugins et de thèmes. Toutefois, cela peut signifier que votre site a beaucoup de scripts ralentissant ses temps de chargement. Tous ces scripts n’ont pas besoin d’être chargés immédiatement, et certains peuvent en fait empêcher les visiteurs de voir votre contenu aussi rapidement que possible.
Ces fichiers étrangers sont appelés JavaScript et CSS qui bloquent le rendu. Dans cet article, nous vous expliquerons quels sont ces scripts, puis vous montrerons comment les supprimer de votre site WordPress.
Lets Go!
Qu’est-ce que le blocage de rendu JavaScript et CSS?
Lorsqu’un site Web se charge dans le navigateur, il envoie des appels à chaque script dans une file d’attente. Habituellement, cette file d’attente doit être vide avant que le site web ne soit visible dans le navigateur. La file d’attente de scripts qui peuvent empêcher votre site web de charger entièrement sont les fichiers JavaScript et CSS bloquant le rendu.
Lorsque la file d’attente de script est très longue, il peut prendre un certain temps avant que les visiteurs soient en mesure d’accéder à votre site. Souvent, beaucoup de ces scripts ne sont pas nécessaires pour consulter le site tout de suite, et pourrait tout aussi bien attendre d’exécuter jusqu’à ce que le site lui-même est entièrement chargé.
En d’autres termes, ces types de scripts ralentissent vos pages Web sans réellement contribuer aux besoins immédiats de vos téléspectateurs. Tout script qui n’implique pas ce que le spectateur verra tout de suite (souvent appelé « au-dessus du pli » éléments) doit être reporté jusqu’à ce que le reste de la page est chargée.
Pourquoi le blocage de rendu JavaScript et CSS est-il mauvais pour les pages Web ?
Les scripts JavaScript et CSS qui bloquent le rendu ralentissent vos pages Web, ce qui est mauvais pour de nombreuses raisons. La vitesse du site joue un rôle dans de nombreux aspects vitaux de votre site Web, y compris la facilité d’utilisation générale et l’optimisation des moteurs de recherche (SEO). Lorsque votre site se charge lentement, vous êtes plus susceptible de perdre des visiteurs, et moins susceptibles d’être classés haut dans les résultats des moteurs de recherche.
Bien sûr, la vitesse du site est affectée par plus que de simplement scripts de blocage de rendu. Cela dit, il s’agit d’un facteur qui peut faire une différence significative dans les temps de chargement. N’oubliez pas que chaque ressource d’une page Web prend des octets, dont un plus grand nombre peuvent entraîner des temps de téléchargement plus longs. Moins votre site dispose de scripts de moins en moins légers, mieux c’est. Après tout, vous ne voulez pas laisser un site lent avoir un impact négatif sur votre entreprise.
En général, il est préférable de s’assurer que le code de votre site web est aussi propre et minimal que possible pour améliorer la vitesse globale. Cependant, il y aura toujours quelques restes de code. Par défaut, les navigateurs essaieront de tout charger à la fois, y compris les scripts de blocage de rendu.
C’est à vous de vous assurer que votre site charge d’abord les scripts nécessaires pour qu’il semble correct et utilisable lorsqu’un spectateur atterrit pour la première fois sur une page. Ce n’est qu’à ce moment-là que le reste des scripts doit être chargé.
Comment éliminer le blocage de rendu JavaScript et CSS
Avant de pouvoir éliminer les scripts de blocage de rendu, vous devrez identifier les scripts qui causent des problèmes. Pour ce faire, nous vous recommandons d’utiliser PageSpeed Insights deGoogle . Il vous suffit d’entrer votre URL, et Google vous indiquera exactement quels scripts ralentissent votre page :
Faites une liste de tous les scripts qui apparaissent dans les résultats sous Éliminer le blocage de rendu JavaScript et CSS. Que vous essayiez de les aborder manuellement ou d’utiliser un plugin, ce sont les scripts que vous voudrez prêter une attention particulière à que vous appliquez les correctifs suivants.
Pour réduire le nombre de scripts de blocage de rendu sur votre site, vous devrez suivre quelques bonnes pratiques :
- ‘Minify’ votre JavaScript et CSS. Cela signifie supprimer tous les espaces blancs supplémentaires et les commentaires inutiles dans le code.
- Concatenate votre JavaScript et CSS. Pour ce faire, vous aurez envie de prendre plusieurs .js différents et .css fichiers et les combiner. Idéalement, vous n’aurez que quelques fichiers de ce genre.
- Report du chargement de JavaScript. Il peut être utile de forcer les fichiers JavaScript à attendre pour charger jusqu’à ce que tout le reste sur la page est prêt. Un moyen fiable de reporter JavaScript est d’utiliser le chargement asynchrone.
Ces conseils peuvent être difficiles à accomplir à la main dans WordPress, parce que de nombreux plugins orientés vers l’avant sont venus avec leurs propres fichiers JavaScript et CSS. Un plugin peut facilement fixer plus de cinq ou six scripts à l’extrémité avant de votre site. Ces fichiers peuvent s’additionnent assez rapidement!
Heureusement, WordPress utilise un filtre combiné pour enregistrer tous les scripts orientés vers l’avant. Cela signifie que vous avez la possibilité d’identifier et de gérer tous les fichiers JavaScript ou CSS entrants – même si vous ne savez pas exactement quoi rechercher. Bien sûr, c’est beaucoup plus facile à accomplir avec un plugin plutôt que de partir de zéro.
Plugins pour réduire le blocage de rendu JavaScript et CSS
Il existe quelques plugins WordPress qui peuvent vous aider à optimiser votre site en supprimant javascript et CSS qui bloquent le rendu. Dans cette section, nous examinerons quatre choix populaires.
1. Fusée WP
WP Rocket aide à l’optimisation du site grâce à des tâches telles que la minification de CSS et JavaScript, des images de chargement paresseuses, le report des demandes JavaScript distantes, et plus encore. C’est le « couteau suisse » des plugins d’optimisation.
Un des plus grands avantages à l’aide de ce plugin est le processus d’installation facile. Cependant, un inconvénient potentiel est l’interface utilisateur. Le plugin crée une expérience différente dans votre tableau de bord WordPress, puis vous pourriez être utilisé pour. Certains utilisateurs de longue date peuvent ne pas apprécier ce changement d’interface. Pourtant, la fonctionnalité réelle du plugin reste de premier ordre.
Il ya quelques extras gratuits que vous pouvez obtenir pour WP Rocket dans le Répertoire Plugin WordPress. Toutefois, le plugin de base lui-même est au prix de 49 $ par année pour un site Web et un an de soutien, avec des niveaux supplémentaires offrant plus d’options.
2. Autoptimize
Autoptimize est conçu spécifiquement pour résoudre les problèmes soulevés par des outils de recommandation comme PageSpeed Insights. Tous les paramètres qui vous permettent de configurer le plugin pour votre site web seront contenus dans un nouveau menu dans votre tableau de bord WordPress.
Autoptimize couvre toutes les tâches d’optimisation de base, telles que la minification et la mise en cache des scripts. Une caractéristique unique est qu’il peut également optimiser et convertir des images dans le format WebP. Cet outil a d’excellents commentaires globaux, même si vous aurez envie de garder à l’esprit qu’il peut être un peu complexe à configurer.
Alors que le plugin lui-même est gratuit, vous pouvez acheter l’un des deux paquets des développeurs pour aider à sa configuration. Il ya un plan de configuration personnalisé au prix d’environ 165 $ (€ 149). Vous pouvez également obtenir un examen professionnel complet de votre site web et une configuration plugin expert pour environ 667 $ (599 €).
3. JCH Optimiser
JCH Optimize offre également des outils uniques pour aider à améliorer la vitesse de chargement de vos pages. Par exemple, il peut réduire le nombre de demandes HTTP qu’il faut pour charger vos pages, et réduire la taille de ces pages ainsi. Il en résulte une diminution de la charge du serveur et une diminution des besoins en bande passante.
Une autre caractéristique unique de JCH Optimize est son générateur Sprite. Cela combine des images d’arrière-plan en « sprites », de sorte qu’il faut moins de demandes HTTP pour les charger sur un navigateur. Un des inconvénients de ce plugin peut être la courbe d’apprentissage raide, cependant. La plupart des utilisateurs devront s’appuyer sur la documentation de support pour s’assurer qu’ils ont configuré le plugin correctement, afin d’éviter les erreurs.
Cela étant dit, le plugin a de nombreux commentaires cinq étoiles et plus de 10.000 installations actives. En termes de prix, il ya une version gratuite du plugin disponible. Toutefois, si vous souhaitez accéder à la prise en charge et aux fonctionnalités avancées comme l’API Optimiser l’image, vous devrez acheter un abonnement. Ceux-ci commencent à 29 $ pour six mois de soutien et d’accès à l’API.
4. Pack booster de vitesse
Speed Booster Pack offre l’optimisation CSS et JavaScript, chargement paresseux, et une fonction de suppression de l’encombrement. Les développeurs d’Optimocha maintiennent le plugin à jour avec une base de code en constante évolution, de sorte que vous savez que vous serez toujours en utilisant les dernières méthodes. Il existe également une fonctionnalité d’optimisation WooCommerce intégrée qui permet de résoudre les goulots d’étranglement.
L’un des avantages de l’utilisation de Speed Booster Pack est qu’il dispose d’une fonction d’intégration du Réseau de diffusion de contenu (CDN). Il est ainsi facile d’utiliser le CDN de votre choix dans WordPress, tout en optimisant avec le plugin. L’inconvénient de ce plugin réside dans le processus d’essais et d’erreurs que vous devrez peut-être suivre afin de le configurer correctement.
Il est également intéressant de noter qu’il ya une option de service pour aller de pair avec le plugin gratuit. Tout comme Autoptimize, les développeurs offrent plusieurs options pour fournir une approche pratique et professionnelle pour configurer le plugin pour s’adapter à votre site Web unique.
Améliorez la vitesse de votre site avec le moteur WP
Quelle que soit votre approche pour améliorer la vitesse de votre site, nous sommes là pour vous aider. Nous avons un outil de vitesse pour tester votre site Web, et les meilleures ressources de développeur pour vous aider sur votre chemin vers une expérience optimisée.
Publication author
