Avez-vous déjà fini de créer un site Web WordPress et tout aimé? Ensuite, vous avez rapidement commencé à le détester après avoir réalisé que le chargement prend une éternité?
Non seulement les vitesses de chargement lentes sont une nuisance pour vous et vos visiteurs, mais elles peuvent également vous coûter cher de manière significative en matière de référencement. Depuis 2010, les algorithmes de Google ont expliquait la vitesse de chargement dans les décisions de classement , de sorte que les pages lentes apparaissent plus faibles sur les pages de résultats.
Vous connaissez peut-être les coupables courants des mauvaises performances des pages - contenu excessif, fichiers image non compressés , un hébergement insuffisant et un 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 bloquant le rendu.
Que sont les ressources de blocage de rendu?
Les ressources bloquant le rendu sont des portions de code dans les fichiers de site Web, généralement CSS et JavaScript, qui empêchent une page Web de chargement rapide. Ces ressources prennent un temps relativement long à traiter pour le navigateur, mais peuvent ne pas être nécessaires pour l'expérience utilisateur immédiate. Les ressources bloquant le rendu peuvent être supprimées ou retardées jusqu'à ce que le navigateur ait besoin de les traiter.
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 à notre websi tes. Mais, s'ils sont exécutés au mauvais moment, CSS et JavaScript peuvent nuire aux 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 à l'écran pour un visiteur. Lorsque le navigateur rencontre un lien vers un fichier CSS, un fichier JavaScript ou un en ligne (c'est-à-dire du code JavaScript dans le document HTML lui-même), il met en pause l'analyse HTML pour récupérer et exécuter le code, ce qui ralentit tout.
Si vous avez optimisé les performances de votre page dans WordPress et rencontrent toujours des problèmes, les ressources bloquant le rendu peuvent en être la cause. Parfois, ce code est important à exécuter au premier chargement, mais la plupart du temps, il peut être supprimé ou poussé jusqu'à la toute fin de la file d'attente.
Dans cet article, nous allons vous montrer comment éliminer ce code embêtant de votre site Web WordPress et donnez votre une amélioration des performances.
Comment éliminer les ressources bloquant le rendu dans WordPress
- Identifiez les ressources bloquant le rendu.
- Éliminez le problème de blocage du rendu urces manuellement ou avec un plugin.
- Relancez une analyse de site.
- Vérifiez votre site Web pour les bogues.
1. Identifiez les ressources bloquant le rendu.
Avant d'apporter des modifications, vous devez d'abord localiser le blocage du rendu Ressources. La meilleure façon de le faire est d'utiliser un test de vitesse en ligne gratuit comme Outil PageSpeed Insights de Google . Collez l'URL de votre site et cliquez sur Analyser Lorsque l'analyse est 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 dans la partie supérieure de cette plage ou au-dessus.
Pour identifier les fichiers bloquant le rendu qui ralentissent votre page, faites défiler vers le bas à Opportunités , puis ouvrez l'accordéon Éliminer les ressources bloquant le rendu .
Source de l'image
Vous verrez une liste de fichiers ralentissant 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. Ceci est également appelé contenu «au-dessus du pli».
Notez tous les fichiers se terminant par les extensions .css et .js, car ce sont ceux sur lesquels vous voudrez vous concentrer.
2. Éliminez les ressources bloquant le rendu manuellement ou avec un plugin.
Maintenant que vous avez identifié le problème, il y a deux façons de le résoudre dans WordPress: manuellement ou avec un plugin. Nous aons d'abord la solution du plugin.
Plusieurs plugins WordPress peuvent réduire l'effet des ressources bloquant le rendu sur les sites Web WordPress. Je vais couvrir deux solutions populaires, Autoptimize et W3 Total Cache.
Comment éliminer les ressources bloquant le rendu avec le plug-in Autoptimize
Autoptimize est un plugin gratuit qui modifie les fichiers de votre site Web pour fournir des pages plus rapides. Autoptimize fonctionne en agrégeant les fichiers, en minimisant le code (c'est-à-dire, réduire la taille du fichier en supprimant les caractères redondants ou inutiles), et retarder le chargement des ressources bloquant le rendu.
Puisque vous modifiez le backend de votre site, n'oubliez pas de faire preuve de prudence avec ce plugin ou tout autre plugin similaire . Pour éliminer les ressources bloquant le rendu avec l'optimisation automatique:
1. Installez et activez le plugin Autoptimize.
2. Dans votre tableau de bord WordPress, sélectionnez Paramètres> Optimiser automatiquement .
3. Sous Options JavaScript , cochez la case à côté de Optimiser le code JavaScript? .
4. Si la case à côté de L'agrégation des fichiers JS? est cochée, décochez-la.
5. Sous Options CSS , cochez la case à côté de Optimiser le code CSS? .
6. Si la case à côté de L'agrégation des fichiers CSS? est cochée, décochez-la.
7. Au en bas de la page, cliquez sur Enregistrer Modifications et Vider le cache .
8. Analysez votre site Web avec PageSpeed Insights et recherchez une amélioration.
9. Si PageSpeed Insights signale toujours des fichiers JavaScript bloquant le rendu, revenez à Paramètres> Optimiser automatiquement et cochez les cases en regard de Agréger les fichiers JS? Et Agréger les fichiers CSS? . Cliquez ensuite sur Enregistrer les modifications et vider le cache et effectuez à nouveau le scan.
Comment éliminer les ressources bloquant le rendu avec le cache total W3 Plugin
W3 Total Cache est un plugin de mise en cache largement utilisé qui aide à traiter le code laggy. Pour éliminer le JavaScript bloquant le rendu avec W3 Total Cache:
1. Installez et activez le plugin W3 Total Cache.
2. Une nouvelle option Performance sera ajoutée à votre menu de tableau de bord WordPress. Sélectionnez Performances> Paramètres généraux.
3. Dans la section Réduire , cochez la case à côté de Réduire , puis définissez le mode Minify sur Manual
4. Cliquez sur Enregistrer tous les paramètres en bas de Réduire la section .
5. Dans le menu du tableau de bord, sélectionnez Performances> Réduire .
6. Dans la section JS à côté de Paramètres de minification JS , assurez-vous que la case Activer est cochée. Ensuite, sous Opérations dans les zones , ouvrez le premier Intégrer tapez dans la liste déroulante et choisissez Non bloquant en utilisant "différer" .
7. Sous Gestion des fichiers JS , choisissez votre thème actif dans la Menu déroulant Thème .
8. Reportez-vous aux résultats PageSpeed Insights de votre analyse précédente. Pour chaque élément sous Éliminer les ressources bloquant le rendu se terminant par .js, cliquez sur Ajouter un . Ensuite, copiez l'URL complète de la ressource JavaScript de PageSpeed Insights et collez-la dans le champ URI du fichier .
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 bas de la section JS .
10. Dans le Section CSS à côté de Paramètres de réduction CSS , cochez la case à côté de Paramètres de réduction CSS et assurez-vous que la méthode de réduction de réduction est définie à Combiner & Minifier .
11. Sous Gestion des fichiers CSS , choisissez votre thème actif dans le menu déroulant Thème .
12. Pour chaque élément sous Elimi natez les ressources bloquant le rendu se terminant par .css dans les résultats de l'analyse PageSpeed Insights, cliquez sur Ajouter une feuille de style . Ensuite, copiez l'URL complète de la ressource CSS à partir de PageSpeed Insights et collez-la dans le champ URI du fichier .
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 bas de la section CSS .
14. Analysez votre site Web avec PageSpeed Insights et recherchez une amélioration.
Comment éliminer manuellement JavaScript bloquant le rendu
Les plugins peuvent gérer le travail du backend à votre place . Là encore, 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 résoudre manuellement le JavaScript bloquant le rendu.
Pour ce faire, recherchez le indiquent au navigateur de charger et d'exécuter le identifié par le attribut src (source). Le problème avec ce processus est que ce chargement et son exécution retardent l'analyse de la page Web par le navigateur, ce qui a un impact sur le temps de chargement global:
Source de l'image
Pour résoudre ce problème, vous pouvez ajouter le hrone (hrone) ou le defer aux balises de pour les ressources bloquant le rendu. et defer sont p lacé comme ceci:
src="resource.js" >
src="resource.js" defer>
Bien qu'ils aient des effets similaires sur les temps de chargement, ces attributs indiquent le navigateur pour faire différentes choses.
L'attribut signale au navigateur de charger la ressource JavaScript tout en analysant le reste de la page et exécute ce immédiatement après son chargement. L'exécution du interrompt l'analyse HTML:
Source de l'image
Les s avec l'attribut defer sont également chargés pendant que la page est analysée, mais ceux-ci les s sont retardés du chargement jusqu'à après le premier rendu ou jusqu'à ce que les parties les plus essentielles aient été chargées:
Source de l'image
Les attributs defer et ne doivent pas être utilisés ensemble sur la même ressource, mais l'un peut être mieux adapté à une ressource particulière que l'autre. En règle générale, si un non essentiel repose sur un pour s'exécuter avant lui, utilisez différer . Le defer garantit que le s'exécutera après le nécessaire précédent. Sinon, utilisez .
3. Relancez une analyse du site.
Après avoir apporté vos modifications, effectuez une dernière analyse de votre site Web via PageSpeed Insights et voyez l'impact de vos modifications sur votre score.
, il y a une amélioration notable, mais ne vous inquiétez pas si ce n'est pas le cas. De nombreux facteurs peuvent nuire aux performances de la page, et vous devrez peut-être creuser davantage pour trouver la source d'une mauvaise perforation mance.
4. Vérifiez votre site Web pour les bogues.
En plus d'une nouvelle analyse, vérifiez vos pages pour vous assurer que votre site fonctionne. La page se charge-t-elle correctement? Tous les éléments apparaissent-ils? Si quelque chose est cassé ou ne se charge pas correctement, annulez vos modifications et résolvez le problème.
Si vous avez atteint un point où vous avez essayé à plusieurs reprises d'autres moyens d'accélérer vos pages , plutôt que de risquer de casser votre site.
Optimiser votre site WordPress pour les performances
De nombreux facteurs contribuent à l'expérience de vos utilisateurs sur votre site Web, mais peu sont plus importants que le temps de chargement. Chaque fois que vous apportez de gros changements au contenu ou à l'apparence de votre site WordPress, vous devez toujours considérer comment ces changements affectent les performances.
Maintenant que vous avez éliminé les ressources bloquant le rendu, vous devez continuer à optimiser votre site Web. vitesse en analysant d'autres fonctionnalités connues pour ralentir les performances. Essayez d'incorporer des tests de vitesse réguliers dans le calendrier de maintenance de votre site - rester en avance sur tout problème potentiel sera essentiel à votre succès.
