Parmi les nombreuses raisons de la popularité écrasante de WordPress sur le Web, la communauté des développeurs est qu'il existe un grand nombre de plugins et de thèmes disponibles pour créer un site Web personnalisé avec relativement peu d'effort et d'investissement. Cependant, lorsque plusieurs scripts fonctionnent sur le site, cela peut ralentir ses performances et son temps de chargement.
Même si certains des scripts n'ont pas besoin d'être chargés en même temps, ils le font et finissent par empêcher les utilisateurs de pouvoir visualiser rapidement le contenu du site Web, ce qui entraîne l'abandon du site par frustration. Heureusement, il existe plusieurs façons de supprimer ces fichiers JavaScript et CSS bloquant le rendu pour permettre au site Web de se charger rapidement et de fournir le contenu aux téléspectateurs.
JavaScript et CSS bloquant le rendu expliqués
Chaque fois qu'un site Web se charge dans un navigateur Web, il demande à tous les scripts de se charger dans une file d'attente. Si, pour une raison quelconque, la file d'attente des scripts refuse de s'effacer, le site Web ne s'affiche pas. Ces scripts qui refusent de se charger sont appelés fichiers JavaScript et CSS bloquant le rendu. Le temps de chargement complet du site dépend de la longueur de la file d'attente. Très souvent, de nombreux scripts bloqués dans la file d'attente ne sont même pas nécessaires pour permettre à l'utilisateur de voir le site Web à ce moment-là et peuvent très facilement attendre de s'exécuter jusqu'à ce que le site Web soit complètement chargé.
Inconvénients de JavaScript et CSS bloquant le rendu
Le principal impact des scripts JavaScript et CSS bloquant le rendu sur le site Web est qu'ils ralentissent sa vitesse de chargement. La vitesse du site est un paramètre très important qui détermine le degré d'utilisation du site Web et ses performances dans les SERP. Si le site se charge lentement, il est plus probable que les visiteurs l'abandonneront pour un autre site ; le taux de rebond qui en résulte est un signal SEO fort qui fait baisser le classement des moteurs de recherche. Selon moteur de recherche, plus que le temps réel passé à charger le site, le problème vient de la perception des utilisateurs du temps mis par le site à se charger. Étant donné que les navigateurs essaient de tout charger, y compris les scripts bloquant le rendu, en même temps, vous devez essayer de vous assurer que le site ne charge que les scripts requis pour que le site soit utilisable au début, après quoi, le reste des scripts peut charge.
Élimination de JavaScript et CSS bloquant le rendu
Avant même d'essayer de supprimer les scripts bloquant le rendu, vous devrez identifier les scripts responsables du problème. L'outil PageSpeed Insights de Google est le moyen le plus simple de le faire. Vous devez faire une liste des scripts qui nécessitent votre attention, puis décider si vous souhaitez résoudre le problème manuellement ou utiliser un plug-in spécialement conçu à cet effet.
Cependant, si vous mettez en œuvre certaines bonnes pratiques pour réduire le nombre de scripts bloquant le rendu sur votre site Web pendant la phase de développement, vous vous faciliterez non seulement la vie, mais vous assurerez également SEO abordable. Certaines des tactiques courantes incluent la réduction du JavaScript et du CSS en supprimant les espaces blancs et les commentaires inutiles dans le code, la concaténation des fichiers JavaScript et CSS pour réduire leur nombre global, ainsi que l'utilisation du chargement asynchrone pour différer le chargement du script Java.
Aussi simple que les méthodes puissent paraître, la suppression manuelle des scripts peut être fastidieuse en raison du grand nombre de fichiers JavaScript et CSS fournis avec chacun des plugins frontaux. Alors que WordPress propose un filtre combiné pour tous les scripts frontaux à l'aide duquel vous pouvez identifier tous les fichiers JavaScript ou CSS entrants ; il est beaucoup plus facile d'utiliser un plug-in plutôt que de le faire à partir de zéro.
Principaux plugins pour réduire le nombre de scripts JavaScript et CSS bloquant le rendu
WP Rocket
WP Rocket agit comme un très bon outil pour optimiser les sites Web car il est extrêmement polyvalent et peut gérer une variété de tâches telles que la réduction de CSS et de JavaScript, le report des requêtes JavaScript à distance, le chargement paresseux d'images, etc. Bien que le processus d'installation facile soit un gros plus, le plug-in vous obligera à vous adapter à une expérience de tableau de bord WordPress différente de celle à laquelle la plupart des développeurs sont habitués. Même si WP rocket est livré avec quelques extras gratuits, le prix de base pour un site Web commence à 49 $ par an.
Autoptimize
Conçu spécifiquement pour résoudre les problèmes identifiés par des outils tels que PageSpeed Insights, Autoptimize permet aux utilisateurs de configurer le plug-in avec un nouveau menu dans le tableau de bord WordPress. Alors qu'Autoptimize effectue toutes les tâches de base telles que la mise en cache et la réduction des scripts, il peut également optimiser et convertir les images au format de fichier WebP. Bien que sa configuration puisse être un peu difficile, le plug-in gratuit est très apprécié pour sa fonctionnalité. Un plan de configuration personnalisé de 165 $ et un plan de configuration de plug-in expert de 667 $ avec un examen de site Web professionnel sont également disponibles.
Optimiser JCH
JCH Optimize propose un ensemble d'outils uniques pour augmenter la vitesse de chargement de vos pages. Par exemple, il peut réduire la taille des pages et le nombre de requêtes HTTP nécessaires pour charger des pages Web, ce qui a pour effet de diminuer la charge sur le serveur et de réduire les besoins en bande passante.
Le Sprite Generator qui convertit les images d'arrière-plan en sprites afin que le chargement du navigateur nécessite moins de requêtes HTTP. Bien que les utilisateurs apprécieront ses fonctionnalités avancées, la courbe d'apprentissage abrupte peut être un problème, même si une documentation d'assistance adéquate est disponible pour garantir une installation sans erreur. Vous pouvez commencer en utilisant la version gratuite ; Cependant, si vous souhaitez accéder aux fonctionnalités avancées, vous devrez vous abonner à l'un des plans à partir de 29 $ pendant six mois.
Supprimer les fichiers CSS JS inutilisés dans WordPress
Il existe 4 capacités fondamentales lorsque vous devez évacuer les enregistrements CSS JS inutilisés dans le front-end WordPress :
- wp_deregister_script ($ handle)
- wp_dequeue_script ($ handle)
- wp_deregister_style($poignée)
- wp_dequeue_style($poignée)
// expulse les descripteurs de contenu dont nous n'avons pas à nous soucier, chacun avec ses propres conditions
add_action('wp_print_scripts', 'wra_filter_scripts', 100000);
add_action('wp_print_footer_scripts', 'wra_filter_scripts', 100000);
fonction wra_filter_scripts(){
#wp_deregister_script($handle);
#wp_dequeue_script($handle);
wp_deregister_script('bbpress-editor');
wp_dequeue_script('bbpress-editor');
// Prise en charge des pixels de l'appareil
// cela améliore les objectifs des transferts Gravatars et wordpress.com sur les programmes haute résolution et zoomés. Nous n'avons que des Gravatars, nous devrions donc nous en passer.
wp_deregister_script('devicepx');
wp_dequeue_script('devicepx');
if( !is_singular( 'docs' ) ){
wp_deregister_script('toc-front');
wp_dequeue_script ('toc-front');
}
if( !is_singular( array('docs', 'post' ) ) ){
wp_deregister_script ('codebox');
wp_dequeue_script ('codebox');
}
}
// supprimer les styles dont nous n'avons pas besoin
add_action ('wp_print_styles', 'wra_filter_styles', 100000);
add_action ('wp_print_footer_scripts', 'wra_filter_styles', 100000);
fonction wra_filter_styles(){
#wp_deregister_style($handle);
#wp_dequeue_style($handle);
// plus de styles bbpress.
wp_deregister_style('bbp-default');
wp_dequeue_style('bbp-default');
// le moniteur de téléchargement n'est pas utilisé dans le front-end.
wp_deregister_style('wp_dlmp_styles');
wp_dequeue_style('wp_dlmp_styles');
if( !is_singular( 'docs' ) ){
// le plug-in de liste de contenu est utilisé sur les pages de documentation telles qu'elles étaient
wp_deregister_style('toc-screen');
wp_dequeue_style('toc-screen');
}
// cela ne devrait pas être comme ça. Besoin de s'y pencher.
wp_deregister_style('wppb_stylesheet');
wp_dequeue_style('wppb_stylesheet');
}
if( !is_singular( array('docs', 'post' ) ) ){
wp_deregister_style('codebox');
wp_dequeue_style('codebox');
}
}
Le truc vraiment cool de le faire comme ça, c'est que vous pouvez utiliser des étiquettes restrictives WordPress pour vous concentrer sur une page spécifique ou sur un type de publication personnalisé entier. Cela nous donne l'adaptabilité dont nous disposons pour empiler nos enregistrements CSS/JS précisément là où ils sont nécessaires.
Conclusion
S'assurer que votre site Web se charge rapidement est essentiel pour être convivial et éviter qu'un taux de rebond élevé ne fasse baisser vos performances de référencement. Bien qu'il puisse y avoir de nombreuses raisons pour lesquelles votre site WordPress peut ne pas se charger rapidement, une raison courante est la file d'attente inutile de scripts JavaScript et CSS bloquant le rendu résultant de l'utilisation de plugins.
Pour résoudre les problèmes que même l'écriture de code propre ne peut pas résoudre, il peut être utile d'utiliser l'un des plug-ins spécialisés conçus pour réduire le nombre de scripts JavaScript et CSS ainsi que pour garantir que la formation inutile de files d'attente de scripts ne retarde pas la chargement du site.
