Vous êtes sûrement entrain de mesurer votre temps de chargement via Page Speed Insights.

Cet outil officiel de Google vous permet d’évaluer le temps de chargement de votre site sur mobile d’abord et sur PC.

Il vous permet de :

• simuler le temps de chargement et de le visualiser étape par étape.
• connaitre les temps véritables de chargement et d’utilisation.
• identifier les facteurs bloquants
• connaitre les pistes d’amélioration

Le Page Speed expliqué

WordPress vous permet de construire un site web personnalisé avec les plugins et les thèmes de votre choix. Toutefois, cela peut signifier que votre site comporte beaucoup de scripts ralentissant son temps de chargement. Tous ces scripts n’ont pas besoin d’être chargés immédiatement, et certains peuvent même empêcher les visiteurs de voir votre contenu le plus rapidement possible.

Ces fichiers étrangers sont appelés JavaScript et CSS bloquant le rendu. Dans cet article, nous allons expliquer ce que sont ces scripts, puis vous montrer comment les supprimer de votre site WordPress. Commençons !

Qu’est-ce que le JavaScript et le CSS bloquant le rendu ?

Lorsqu’un site web se charge dans le navigateur, il envoie des appels à tous les scripts d’une file d’attente. En général, cette file d’attente doit être vide avant que le site ne soit visible dans le navigateur. La file d’attente des scripts qui peuvent empêcher le chargement complet de votre site web sont les fichiers JavaScript et CSS bloquant le rendu.

Lorsque la file d’attente des scripts est très longue, il peut s’écouler un certain temps avant que les visiteurs ne puissent accéder à votre site. Souvent, bon nombre de ces scripts ne sont pas nécessaires pour visualiser le site web immédiatement, et peuvent tout aussi bien attendre d’être exécutés une fois que le site lui-même est entièrement chargé.

En d’autres termes, ce type de scripts ralentit vos pages web sans pour autant contribuer aux besoins immédiats de vos visiteurs. Tout script qui n’implique pas ce que le visiteur verra immédiatement (souvent appelé éléments « au-dessus de la ligne de flottaison ») doit être reporté jusqu’à ce que le reste de la page soit chargé.

Pourquoi les JavaScript et CSS bloquant le rendu sont-ils mauvais pour les pages web ?

Les scripts JavaScript et CSS bloquant le rendu ralentissent vos pages web, ce qui est mauvais pour de nombreuses raisons. La vitesse joue un rôle dans de nombreux aspects vitaux de votre site web, notamment la convivialité générale et l’optimisation pour les moteurs de recherche (SEO). Lorsque votre site se charge lentement, vous risquez davantage de perdre des visiteurs, et moins d’être bien classé dans les résultats des moteurs de recherche.

Bien entendu, la vitesse du site n’est pas seulement affectée par les scripts de blocage du rendu. Cela dit, c’est un facteur qui peut faire une différence significative dans les temps de chargement. N’oubliez pas que chaque ressource d’une page web occupe des octets, dont une plus grande quantité peut entraîner des temps de téléchargement plus longs. Moins il y a de scripts et plus ils sont légers sur votre site, mieux c’est. Après tout, vous ne voulez pas qu’un site lent ait un impact négatif sur votre activité.

En général, il est préférable de veiller à ce que le code de votre site soit aussi propre et minimal que possible pour améliorer la vitesse globale. Toutefois, il y aura toujours un peu de code en trop. Par défaut, les navigateurs tenteront de tout charger en une fois, y compris les scripts de blocage du rendu.

C’est à vous de vous assurer que votre site charge d’abord les scripts nécessaires pour qu’il ait l’air correct et soit utilisable lorsqu’un visiteur arrive pour la première fois sur une page. Ce n’est qu’ensuite que le reste des scripts doit être chargé.

Comment éliminer les scripts JavaScript et CSS bloquant le rendu ?

Avant de pouvoir éliminer les scripts bloquant le rendu, vous devrez identifier les scripts qui posent problème. Pour ce faire, nous vous recommandons d’utiliser le service PageSpeed Insights de Google. Il vous suffit d’entrer votre URL, et Google vous indiquera exactement quels sont les scripts qui ralentissent votre page :

Faites une liste de tous les scripts qui apparaissent dans les résultats sous Éliminer les JavaScript et CSS bloquant le rendu. Que vous essayiez de les traiter manuellement ou que vous utilisiez un plugin, ce sont les scripts auxquels vous devrez prêter une attention particulière lorsque vous appliquerez les corrections suivantes.

Pour réduire le nombre de scripts bloquant le rendu sur votre site, vous devrez suivre quelques bonnes pratiques :

• Minifiez votre JavaScript et votre CSS. Cela signifie qu’il faut supprimer tous les espaces supplémentaires et les commentaires inutiles dans le code.
• Concaténez votre JavaScript et votre CSS. Pour ce faire, vous devrez prendre plusieurs fichiers .js et .css différents et les combiner. Dans l’idéal, vous ne disposerez que de quelques fichiers de ce type.
• Reportez le chargement du JavaScript. Il peut être utile de forcer les fichiers JavaScript à attendre que tout le reste de la page soit prêt avant de les charger. Un moyen fiable de différer le chargement de JavaScript est d’utiliser un chargement asynchrone.

Ces conseils peuvent être délicats à mettre en œuvre à la main dans WordPress, car de nombreux plugins frontaux sont livrés avec leurs propres fichiers JavaScript et CSS. Un plugin peut facilement attacher jusqu’à cinq ou six scripts à l’interface de votre site. Ces fichiers peuvent s’additionner assez rapidement !

Heureusement, WordPress utilise un filtre combiné pour enregistrer tous les scripts en façade. Cela signifie que vous avez la possibilité d’identifier et de traiter tout fichier JavaScript ou CSS entrant – même si vous ne savez pas exactement ce que vous devez rechercher. Bien entendu, il est beaucoup plus facile de réaliser cela avec un plugin plutôt que de partir de zéro.

Plugins pour réduire les JavaScript et CSS bloquant le rendu

Il existe quelques plugins WordPress qui peuvent vous aider à optimiser votre site en supprimant les JavaScript et CSS qui bloquent le rendu. Dans cette section, nous allons examiner quatre choix populaires.

— WP ROCKET —

WP Rocket aide à l’optimisation des sites grâce à des tâches telles que la minification des CSS et JavaScript, le chargement paresseux des images, le report des requêtes JavaScript distantes, etc. C’est le « couteau suisse » des plugins d’optimisation.

L’un des principaux avantages de ce plugin est sa facilité d’installation. Cependant, l’interface utilisateur est un inconvénient potentiel. Le plugin crée une expérience différente dans votre tableau de bord WordPress de celle à laquelle vous êtes habitué. Certains utilisateurs de longue date peuvent ne pas apprécier ce changement d’interface. Néanmoins, les fonctionnalités du plugin restent excellentes.

Il y a quelques extras gratuits que vous pouvez obtenir pour WP Rocket dans le répertoire des plugins WordPress. Cependant, le plugin de base lui-même coûte 49 dollars par an pour un site web et un an de support, avec des niveaux supplémentaires offrant plus d’options.

— AUTOPTIMISER —

Autoptimize est conçu spécifiquement pour répondre aux problèmes soulevés par les 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 au format WebP. Cet outil a reçu d’excellentes critiques dans l’ensemble, mais vous devez garder à l’esprit qu’il peut être quelque peu complexe à configurer.

Bien que le plugin lui-même soit gratuit, vous pouvez acheter l’un des deux paquets auprès des développeurs pour vous aider à le configurer. Il existe un plan de configuration personnalisé qui coûte environ 149 €. Vous pouvez également bénéficier d’un examen professionnel de votre site web et d’une configuration de plugin par nos soins.

— JCH Optimiser —

JCH Optimize propose également des outils uniques pour vous aider à améliorer la vitesse de chargement de vos pages. Par exemple, il peut réduire le nombre de requêtes HTTP nécessaires pour charger vos pages, et réduire également la taille de ces pages. Il en résulte une diminution de la charge du serveur et des besoins en bande passante.

Une autre caractéristique unique de JCH Optimize est son générateur de sprites. Il combine des images de fond en « sprites », ce qui réduit le nombre de requêtes HTTP nécessaires pour les charger dans un navigateur. L’un des inconvénients de ce plugin peut toutefois être la courbe d’apprentissage abrupte. La plupart des utilisateurs devront se fier à la documentation d’assistance pour s’assurer qu’ils ont configuré le plugin correctement, afin d’éviter les erreurs.

Cela étant dit, le plugin a fait l’objet de nombreuses évaluations cinq étoiles et compte plus de 10 000 installations actives. En termes de prix, il existe une version gratuite du plugin. Cependant, si vous souhaitez accéder à l’assistance et aux fonctionnalités avancées comme l’API d’optimisation des images, vous devrez acheter un abonnement. Ceux-ci commencent à 29 € pour six mois d’assistance et d’accès à l’API.

Améliorez la vitesse de votre site avec CLEATIS

Quelle que soit votre approche pour améliorer la vitesse de votre site, nous sommes là pour vous aider. Nous disposons d’un outil de mesure de la vitesse pour tester votre site web, et des meilleures ressources pour les développeurs afin de vous aider à optimiser votre expérience.

Nous souhaitons vous aider à construire un meilleur site web. Contactez-nous dès aujourd’hui !