Comment supprimer les ressources bloquant le rendu de votre site Web WordPress

Avez-vous déjà fini de créer un site Web WordPress et avez-vous tout aimé? Vous avez donc rapidement commencé à le détester après avoir réalisé qu’il fallait une éternité pour le charger ?

Les vitesses de chargement lentes ne sont pas seulement une gêne pour vous et vos visiteurs, elles peuvent également vous coûter cher en matière de référencement. Depuis 2010, les algorithmes de Google ont pris en compte la vitesse de chargement dans les décisions de classement, de sorte que les pages lentes apparaissent plus bas dans les pages de résultats.

Vous connaissez peut-être les coupables courants des mauvaises performances des pages : contenu excessif, fichiers image non compressés, hébergement insuffisant et manque de mise en cache, pour n’en nommer que quelques-uns. Mais il y a un autre auteur souvent négligé en jeu : les ressources qui bloquent le rendu.

Ne vous méprenez pas, CSS et JavaScript sont excellents. Sans CSS, les sites Web seraient des murs de texte brut. Sans JavaScript, nous ne serions pas en mesure d’ajouter des éléments dynamiques, interactifs et attrayants à nos sites Web. Mais, s’ils sont exécutés au mauvais moment, CSS et JavaScript peuvent affecter les performances de votre site Web.

Voici pourquoi : lorsqu’un navigateur Web charge une page Web pour la première fois, il analyse tout le code HTML de la page avant de l’afficher pour un visiteur. Lorsque le navigateur rencontre un lien vers un fichier CSS, un fichier JavaScript ou un script en ligne (c’est-à-dire du code JavaScript dans le document HTML), il arrête l’analyse HTML pour rechercher et exécuter le code, ce qui ralentit tout.

Si vous avez optimisé les performances de votre page WordPress et que vous rencontrez toujours des problèmes, les ressources de blocage du rendu peuvent être à blâmer. Parfois, il est important d’exécuter ce code lors du premier chargement, mais la plupart du temps, il peut être supprimé ou envoyé à la fin de la file d’attente.

Dans cet article, nous vous montrerons comment supprimer ce code gênant de votre site WordPress et augmenter ses performances.

Si vous préférez suivre une vidéo, consultez ce tutoriel créé par WP Casts :

1. Identifiez les ressources qui bloquent le traitement.

Avant d’apporter des modifications, vous devez d’abord localiser les ressources de verrouillage de rendu. La meilleure façon de le faire est d’utiliser un test de vitesse en ligne gratuit comme l’outil PageSpeed ​​​​Insights de Google. Collez l’URL de votre site et cliquez sur Analyser.

Une fois l’analyse terminée, Google attribue à votre site Web un score de vitesse global, de 0 (le plus lent) à 100 (le plus rapide). Un score compris entre 50 et 80 est moyen, vous voudrez donc atterrir au sommet de cette fourchette ou au-dessus.

Pour identifier les fichiers qui bloquent le rendu et ralentissent votre page, faites défiler jusqu’à Opportunitéspuis ouvrez le Supprimer les ressources qui bloquent le rendu accordéon.

Vous verrez une liste de fichiers qui ralentissent la “première peinture” de votre page ; ces fichiers affectent le temps de chargement de tout le contenu qui apparaît dans la fenêtre du navigateur lors du chargement initial de la page. C’est ce qu’on appelle aussi le contenu de la « moitié supérieure de la page ».

Prenez note des fichiers qui se terminent par les extensions .css et .js, car ce sont ceux sur lesquels vous voudrez vous concentrer.

2. Supprimez les ressources bloquant le rendu manuellement ou avec un plugin.

Maintenant que vous avez identifié le problème, il existe deux façons de le résoudre dans WordPress : manuellement ou avec un plugin. Nous couvrirons d’abord la solution du plugin.

Divers plugins WordPress peuvent réduire l’effet des ressources de blocage de rendu sur les sites Web WordPress. Je couvrirai deux solutions populaires, Autoptimize et W3 Total Cache.

Comment supprimer les ressources bloquant le rendu avec le plugin Autoptimize

Autoptimize est un plugin gratuit qui modifie les fichiers de votre site Web pour fournir des pages plus rapides. Autoptimize fonctionne en ajoutant des fichiers, en minimisant le code (c’est-à-dire en réduisant la taille du fichier en supprimant les caractères redondants ou inutiles) et en retardant le chargement des ressources qui bloquent le traitement.

Puisque vous modifiez le backend de votre site, n’oubliez pas d’être prudent avec ce plugin ou tout autre plugin similaire. Pour supprimer les ressources bloquant le rendu avec Autoptimize :

1. Installez et activez le plugin Autoptimize.

deux. Dans votre tableau de bord WordPress, sélectionnez, Paramètres> Optimisation automatique.

3. En dessous de Options Javascriptcochez la case à côté de Optimiser le code JavaScript ?.

Quatre. Si la case à côté de Fichiers JS ajoutés ? est coché, décochez-le.

5. En dessous de Options CSScochez la case à côté de Optimiser le code CSS ?.

6. Si la case à côté de Fichiers CSS ajoutés ? est coché, décochez-le.

sept. En bas de la page, cliquez sur Enregistrer les modifications Oui cache vide.

8. Scannez votre site Web avec PageSpeed ​​​​Insights et vérifiez les améliorations.

9. Si PageSpeed ​​​​Insights signale toujours des fichiers JavaScript bloquant le rendu, revenez à Paramètres> Optimisation automatique et cochez les cases à côté Fichiers JS ajoutés ? Oui Fichiers CSS ajoutés ?. Puis clique Enregistrer les modifications et vider le cache et numérisez à nouveau.

Comment supprimer les ressources bloquant le rendu avec le plugin W3 Total Cache

W3 Total Cache est un plugin de mise en cache largement utilisé qui aide à lutter contre le code retardé. Pour supprimer le JavaScript qui bloque le rendu avec W3 Total Cache :

1. Installez et activez le plugin W3 Total Cache.

deux. Un nouveau Performance L’option sera ajoutée au menu du tableau de bord WordPress. Sélectionner Performances> Paramètres généraux.

3. Dans le minifier section, cochez la case à côté de minifierpuis réglez mode de minification pour Manuel.

Quatre. Cliquer Enregistrer tous les paramètres au fond de la minifier section.

5. Dans le menu du panneau, sélectionnez Performances > Réduire.

6. Dans le JS section à côté de JS minifier la configurationsois sûr que Activer la case est cochée. Si bas Opérations dans les zonesouvrez le premier Type d’intégration déroulant et choisissez Pas de blocage par “différer”.

sept. En dessous de Gestion des fichiers JSchoisissez votre thème actif dans le Thème menu déroulant.

8. Consultez les résultats PageSpeed ​​​​Insights de votre analyse précédente. Pour chaque élément ci-dessous Supprimer les ressources qui bloquent le rendu se termine par .js, cliquez sur Ajouter un scénario. Copiez ensuite l’URL complète de la ressource JavaScript PageSpeed ​​Insights et collez-la dans le URI de fichier Campagne.

9. Une fois que vous avez collé toutes les ressources JavaScript bloquant le rendu signalées par PageSpeed ​​​​Insights, cliquez sur Enregistrer les paramètres et purger les caches au fond de la JS section.

dix. Dans le CSS section à côté de Paramètres de minification CSScochez la case à côté de Paramètres de minification CSS et assurez-vous que le Méthode de minimisation est réglé sur Combiner et Minifier.

Onze. En dessous de Gestion des fichiers CSSchoisissez votre thème actif dans le Thème menu déroulant.

12. Pour chaque élément ci-dessous Supprimer les ressources qui bloquent le rendu qui se terminent par .css dans les résultats d’analyse de PageSpeed ​​​​Insights, cliquez sur Ajouter une feuille de style. Copiez ensuite l’URL complète de la ressource CSS PageSpeed ​​​​Insights et collez-la dans le URI de fichier Campagne.

13. Une fois que vous avez collé toutes les ressources CSS bloquant le rendu signalées par PageSpeed ​​​​Insights, cliquez sur Enregistrer les paramètres et purger les caches au fond de la CSS section.

14. Scannez votre site Web avec PageSpeed ​​​​Insights et vérifiez les améliorations.

Comment supprimer manuellement le verrou de rendu JavaScript

Les plugins peuvent gérer le travail de backend pour vous. D’autre part, les plugins eux-mêmes ne sont que des fichiers supplémentaires ajoutés à votre serveur Web. Si vous souhaitez limiter ces fichiers supplémentaires, ou si vous préférez simplement gérer la programmation vous-même, vous pouvez adresser manuellement le JavaScript qui bloque le rendu.

Pour ce faire, localisez le