Comment accélérer WordPress

• 1. Utilisez un hébergeur soucieux des performances
• 2. Utilisez la dernière version de PHP
• 3. Activer la compression Brotli ou Gzip
• 4. Activer la longue expiration pour le cache du navigateur
  • Vous utilisez le serveur Web apache ?
  • Utiliser nginx avec Plesk
  • Utiliser barebones nginx
• 5. Utiliser un générateur de cache statique côté serveur
• 6. Utiliser un plug-in Code Minifier et Optimizer
  • WP Rocket (notre préféré, payant)
  • WP Super Cache + Autoptimize (Gratuit)
    • Configuration de l'optimisation automatique
  • Dépannage des éléments cassés
    • Il manque des images ou des vidéos :
    • Les éléments généraux de mon site ne fonctionnent pas, comme un menu
    • Exclusions par page
    • Si vous utilisez Supprimer les CSS inutilisés (WP Rocket)
• 7. Compresser les fichiers image
  • Mise en cache des Gravatars
• 8. Configurer Nginx pour charger la sortie du cache statique [Avancé]
  • Configurer nginx pour charger les fichiers de cache statique de WP Super Cache
  • Configurer nginx pour charger les fichiers de cache statique de WP Rocket
• 9. Désactiver les modules PHP inutilisés [Avancé]
• Astuce bonus n° 1 :ReCAPTCHA v3
• Astuce bonus n° 2 :Détecter et réduire le traitement dynamique

Prendre la route facile…

Simplement en hébergeant votre site Web WordPress avec Websavers et en activant un plugin de mise en cache comme WP Super Cache ou WP Rocket + des plugins d'optimisation d'image comme Imagify ou ShortPixel, vous obtiendrez chaque étape de ce guide soit faite pour vous, soit automatisée. Sympa hein ?

Lisez la suite pour commencer !

Ce guide ne sera pas :

• Vous aider à résoudre les problèmes avec votre fournisseur d'hébergement ou ses mauvaises performances. L'utilisation d'un hébergeur WordPress de haute qualité fait une énorme différence.
• Vous aider à résoudre les problèmes liés aux plug-ins ou aux thèmes susceptibles de ralentir considérablement les choses ou de contribuer à de mauvais scores de référence synthétiques. Par exemple, de nombreux plugins et thèmes effectuent des appels de ressources externes que vous ne pouvez pas contrôler, ce qui réduira intrinsèquement la vitesse (et les scores de référence) de votre site. De même, de nombreux plugins et thèmes utilisent de mauvaises pratiques de codage qui nécessitent inutilement un traitement lourd des données. Par conséquent, vous devrez peut-être désactiver certaines parties de votre site Web (thème, plugins, etc.) pour qu'il fonctionne correctement avec votre plugin de mise en cache. Si vous utilisez des thèmes et des plugins qui optimisent les performances, vous constaterez que l'activation de la mise en cache fonctionnera parfaitement sans trop de manipulations.
• Vous permettre d'avoir votre gâteau et de le manger aussi :vous devrez peut-être accepter une perte de fonctionnalité ou de qualité au profit de meilleures performances et d'excellentes notes sur des benchmarks synthétiques tels que Google PageSpeed ​​Insights . Si vous aimez les images d'une qualité exceptionnelle qui font chacune plus de 1 Mo ou des fichiers vidéo insuffisamment compressés, vous n'obtiendrez jamais les meilleures notes sur les utilitaires d'analyse comparative des sites Web. De même, si une partie de votre site charge du contenu dynamique à chaque chargement de page, vous devrez peut-être désactiver cette fonctionnalité ou trouver un autre moyen de la charger pour des performances optimales.

Si vous rencontrez un problème où une page prend plus de 10 secondes avant même de commencer à charger du contenu, il y a souvent un problème sous-jacent avec WordPress ou la configuration d'hébergement que vous devez résoudre avant de passer à la mise en cache pour une solution. Cliquez ici pour obtenir de l'aide pour résoudre les problèmes liés aux pages de chargement soudainement très lentes.

Si vous êtes à l'aise avec toutes les instructions de cet article, vous devez toutes les suivre pour améliorer les performances de votre site Web. Si vous êtes un utilisateur de base, vous pouvez également ne remplir que les sections avec lesquelles vous êtes à l'aise. Vous constaterez toujours une amélioration des performances, mais pas autant que lorsque vous pourrez compléter toutes les options.

Certaines parties fourniront des améliorations massives du temps de chargement tandis que d'autres seront négligeables. Certaines parties feront en sorte qu'un test de vitesse synthétique comme le test de vitesse PageSpeed ​​ou GTMetrix de Google accorde une grande importance à votre site, mais ne créera peut-être pas de différence dans les temps de chargement réels. Telle est la nature des outils synthétiques d'analyse comparative.

Sans plus tarder, voici 9 choses que vous pouvez faire pour améliorer considérablement les performances de votre site Web :

1. Utilisez un hébergeur qui se soucie de la performance

Si votre fournisseur d'hébergement Web charge ses serveurs avec des milliers de sites Web ou ne sait pas comment tirer le meilleur parti de ses serveurs, il est inévitable que vous rencontriez des ralentissements fréquents.

Si vous êtes sur un hébergement partagé, assurez-vous que votre hébergeur limite artificiellement le nombre total de sites par serveur pour vous assurer que votre site disposera des ressources dont il a besoin pour bien fonctionner. Si vous avez votre propre VPS, demandez à votre hébergeur comment il est configuré et quelles parties de la configuration sont conçues pour garantir des performances optimales. Si leur réponse n'inclut pas des éléments tels que le stockage SSD, nginx ou un serveur Web lightspeed, et des configurations optimisées personnalisées pour servir les fichiers de cache statiques, il est temps de trouver un meilleur hébergeur WordPress.

Si vous êtes très soucieux des performances, il est recommandé d'obtenir votre propre VPS pour vous assurer que votre site dispose de ressources dédiées. Nous recommandons souvent d'essayer d'abord notre hébergement mutualisé sous-chargé et si vous trouvez que vous avez besoin de performances encore meilleures, vous pouvez toujours passer à un VPS.

2. Utilisez la dernière version de PHP

Vous pouvez consulter certaines des mesures ici. Si vous pouvez utiliser PHP 8.x ou 7.4, cela fournira jusqu'à 30 à 70 % d'amélioration supplémentaire des performances par rapport à la version 7.2 et antérieure. Mais attention :vous ne remarquerez pas cette amélioration sur les pages frontales mises en cache. Cette amélioration des performances se verra dans les temps de chargement des pages lorsque votre plugin de mise en cache met la page en cache pour la première fois et lorsque vous traversez la zone d'administration de WordPress.

Ça a l'air génial... mais comment puis-je l'utiliser ?

• Tout d'abord, connectez-vous à Plesk
• Sous le domaine en question, accédez à "Paramètres PHP"
• Il y aura deux listes déroulantes en haut de la page ; un pour la version PHP, un pour le gestionnaire PHP. Pour la version, essayez la dernière version, puis si vous rencontrez des problèmes, arrêtez une version à plusieurs reprises jusqu'à ce que le site fonctionne. Si vous faites rencontrez des problèmes avec la dernière version de PHP, votre meilleur pari sera finalement de trouver la source du problème et de le résoudre, comme la mise à jour d'un plugin ou d'un thème incompatible, mais nous reconnaissons que ce n'est pas toujours possible.
• Faites défiler vers le bas et cliquez sur "OK" ou "Appliquer"

3. Activer la compression Brotli ou Gzip

Utilisez-vous l'hébergement mutualisé de Websavers ou un VPS avec assistance pratique ? Si tel est le cas, nous avons déjà activé la compression Brotli (avec gzip de secours) pour vous ! Vous ne ressentez pas encore la différence Websavers ? Eh bien, nous espérons vous voir bientôt.

Si vous n'hébergez pas chez nous, la plupart des plugins de mise en cache s'en chargent pour vous, mais si ce n'est pas le cas, ajoutez ces valeurs à votre fichier .htaccess pour ajouter la compression GZIP sur votre site :

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>

Cela indique à Apache de compresser tout le contenu compatible avant de l'envoyer, ce qui permet d'économiser du temps et de la bande passante !

Utiliser Nginx uniquement ? Utilisez ceci dans vos directives Nginx pour activer brotli avec gzip fallback :

brotli on;
brotli_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

gzip on;
gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
gzip_proxied any;
gzip_comp_level 5;
gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/x-icon image/bmp image/svg+xml;
gzip_vary on;

4. Activer la longue expiration pour le cache du navigateur

Tout d'abord, il est important de comprendre ce qu'est exactement la mise en cache du navigateur. Quelqu'un vous a-t-il déjà dit de "vider votre cache" sur votre navigateur ? En effet, les navigateurs modernes sont configurés pour télécharger des copies de ressources (HTML/CSS/JS/Images) afin d'accélérer la vitesse des pages lors des visites ultérieures. Par défaut, cependant, certains de ces éléments sont configurés pour "expirer" très rapidement, ce qui n'aide pas beaucoup en termes de vitesse !

Dans une section ultérieure, nous parlerons de l'utilisation d'un plugin de mise en cache pour WordPress. Si vous utilisez strictement un serveur Web apache, tous les plug-ins de mise en cache activeront également les longues valeurs d'expiration pour la mise en cache du navigateur pour vous .

Ceci n'est pas recommandé si vous êtes encore en train de développer votre site. Veuillez n'appliquer cette configuration que lorsque le site est en ligne.

Cela dit, si votre site est en ligne et que vous souhaitez en tirer un peu plus de performances, vous pouvez configurer votre serveur pour indiquer aux visiteurs combien de temps conserver certaines ressources.

Ces directives sont envoyées par le serveur pour indiquer au navigateur de chaque visiteur combien de temps il faut « conserver » différents types de fichiers.

Vous utilisez le serveur Web apache ?

Ajoutez ce qui suit à votre fichier .htaccess.

## EXPIRES CACHING ## 
<IfModule mod_expires.c> 
ExpiresActive On 
ExpiresByType image/jpg "access plus 1 year" 
ExpiresByType image/jpeg "access plus 1 year" 
ExpiresByType image/gif "access plus 1 year" 
ExpiresByType image/png "access plus 1 year" 
ExpiresByType text/css "access plus 1 month" 
ExpiresByType text/html "access plus 1 week" 
ExpiresByType application/x-compressed "access plus 1 week" ExpiresByType application/x-gzip "access plus 1 week" 
ExpiresByType application/pdf "access plus 1 month" 
ExpiresByType text/x-javascript "access plus 1 month" 
ExpiresByType application/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" 
ExpiresDefault "access plus 1 week" 
</IfModule> 
## EXPIRES CACHING END ##

Utiliser nginx avec Plesk

• Connectez-vous à Plesk et accédez à "Paramètres Apache et nginx" sous le domaine que vous optimisez
• Sous Expire> Entrez une valeur personnalisée entrez 365 jours . et cochez la case :réponse avec les en-têtes Expires pour les fichiers statiques uniquement
• Cochez les cases à côté de Traitement intelligent des fichiers statiques et Servir des fichiers statiques directement par nginx

Dans le cas où l'option "Servir les fichiers statiques directement par nginx" n'a pas toutes ces extensions de fichiers statiques répertoriées (avec des espaces ou | entre elles), collez ceci dans la case prévue :

ac3|atom|avi|bmp|bz2|css|csv|cue|dat|doc|docx|dts|eot|exe|flv|gif|gz|htm|html|ico|img|iso|jpeg|jpg|js|map|mid|midi|mkv|mp3|mp4|mpeg|mpg|m4a|ogg|ogv|otf|pdf|png|ppt|pptx|qt|rar|rm|rss|rtf|svg|svgz|swf|tar|tgz|ttf|txt|wav|webp|woff|woff2|xls|xlsx|zip

Cliquez maintenant sur Appliquer ou sur OK pour enregistrer vos modifications.

Utilisation de barebones nginx

Ajoutez ceci à votre configuration nginx :

location ~* \.(css|js)$ {
        gzip_vary on;
        expires 30d;
}
location ~* \.(ac3|atom|avi|bmp|bz2|css|csv|cue|dat|doc|docx|dts|eot|exe|flv|gif|gz|htm|html|ico|img|iso|jpeg|jpg|js|map|mid|midi|mkv|mp3|mp4|mpeg|mpg|m4a|ogg|ogv|otf|pdf|png|ppt|pptx|qt|rar|rm|rss|rtf|svg|svgz|swf|tar|tgz|ttf|txt|wav|webp|woff|woff2|xls|xlsx|zip)$ {      
        gzip_vary on;
        expires max;  
        log_not_found off;
}

5. Utiliser un générateur de cache statique côté serveur

Dans nos tests, la meilleure option commerciale pour cela est WP Rocket et la meilleure option gratuite pour cela est WP Super Cache. Les deux créeront des fichiers de cache statiques pour chacune des pages et publications de votre site et les deux fonctionneront exceptionnellement bien avec notre configuration nginx personnalisée qui détecte automatiquement les fichiers statiques et les sert sans avoir besoin de lancer un processus Apache et/ou PHP plus lourd. Les avantages que nous avons trouvés à payer pour WP Rocket par rapport aux plugins de mise en cache gratuits sont presque exclusivement dans la partie minification et optimisation du code du site Web. Voir la partie 6 de ce guide ci-dessous pour plus d'informations à ce sujet.

Nous utilisons une configuration nginx personnalisée construite en interne sur tous nos serveurs pour détecter automatiquement l'utilisation des plugins de mise en cache de page côté serveur les plus courants et servir automatiquement leurs fichiers html statiques directement avec nginx sans avoir à passer par apache ou le Processeur PHP, réduisant ainsi l'utilisation du processeur et de la mémoire. Nos systèmes peuvent détecter automatiquement et servir la sortie de cache statique de WP Rocket, WP Super Cache, WP Fastest Cache, W3 Total Cache et WP Optimize. Malheureusement, Hummingbird ne peut pas fonctionner avec nos systèmes car ils utilisent des noms de fichiers de cache statiques générés de manière aléatoire. Si vous souhaitez utiliser Hummingbird, demandez au support WPMUDEV de corriger leurs noms de fichiers de cache.

Ces plugins générateurs de cache statique peuvent permettre à votre site de gérer des pics massifs de trafic sans transpirer, même sur nos services d'hébergement mutualisé !

Nous avons utilisé ces configurations pour amener un site sur un hébergement mutualisé à environ 100 000 vues uniques quotidiennes sans aucun problème, et un site sur son propre VPS à plus de 500 000 vues de pages uniques quotidiennes à une charge moyenne de 1,0.

Si votre hôte ne peut pas suivre, consultez nos options d'hébergement WordPress canadiennes. Mieux encore, avec les optimisations décrites dans cette étape, étape 6 (optimisation) et étape 7 (compression d'image), votre site peut passer d'un score Google Page Speed ​​défaillant ou faible à un score de 90+, selon le thème. et plugins utilisés.

Voici comment obtenir une sortie de cache statique à partir de nos deux plugins de mise en cache préférés :

• WP Rocket :Voici comment installer et activer WP Rocket à l'aide de leur guide. Une fois activé, il commencera automatiquement à créer un cache statique.
• Super cache WP :connectez-vous à votre installation WordPress et accédez à Plugins> Ajouter un nouveau. Installez WP Super Cache et activez-le. Dirigez-vous vers Paramètres> WP Super Cache et sélectionnez "Activer la mise en cache" et appuyez sur le bouton État de la mise à jour. Cliquez sur l'onglet Avancé. Cochez tout avec "Recommandé" à côté. Appuyez sur le bouton Mettre à jour l'état. Faites défiler jusqu'à la section "Délai d'expiration et collecte des ordures" et définissez l'intervalle sur une ou deux fois par jour, puis appuyez sur le bouton "Modifier l'expiration".

Certaines personnes préfèrent W3 Total Cache et d'autres comme WP Fastest Cache, parmi beaucoup autres plugins de mise en cache. En général, ces plugins sont excellents pour gérer les améliorations de performances, et tous ceux répertoriés ci-dessus fonctionneront très bien pour générer des fichiers de cache statiques pour des performances de site Web plus rapides. Ils n'ont pas tous tendance à être aussi bons en matière d'optimisation que décrit à l'étape 6 ci-dessous.

Maintenant, ouvrez un navigateur différent de celui avec lequel vous êtes connecté à WordPress et chargez n'importe quelle page de votre site. Une fois le chargement terminé, actualisez la page. Vous devriez constater que l'actualisation est maintenant beaucoup plus rapide que le chargement initial de la page. Ce n'est pas *seulement* parce que votre navigateur a utilisé ce premier chargement de page pour mettre en cache les ressources, mais aussi (et surtout) parce que le serveur a utilisé ce chargement initial de page pour créer un fichier de cache statique qui est ensuite servi lors des visites suivantes.

L'activation de la mise en cache des pages statiques ne devrait pas avoir d'effet sur les fonctionnalités de votre site, mais améliorera considérablement le TTFB (délai avant le premier octet) de votre site Web, car le serveur sera en mesure de fournir chaque page beaucoup plus rapidement qu'auparavant. La seule exception à cela est si vous avez des données dynamiques qui changent sur le site qui n'utilise pas AJAX; cette partie de votre site ne sera pas automatiquement mise à jour à chaque chargement de page. Si cela se produit, parlez au développeur de votre site Web et demandez-lui de modifier la fonctionnalité afin qu'elle utilise AJAX.

Dans la partie 6 ci-dessous, vous pouvez lire comment configurer WP Rocket ou SuperCache + Autoptimize pour gérer des optimisations sur site plus agressives qui amélioreront considérablement votre score Google Page Speed.

6. Utiliser un plug-in Code Minifier et Optimizer

De manière générale, vous souhaitez vous en tenir à un seul plugin d'optimisation à la fois, mais WP Super Cache et Autoptimize sont en fait conçus pour fonctionner ensemble. WP Rocket combine les fonctionnalités de WP Super Cache et Autoptimize en ce sens qu'il génère à la fois des fichiers de cache statiques (comme décrit dans la partie 5 ci-dessus) et minimise et optimise le code du site.

Autoptimize fonctionne avec WP Rocket, dans la mesure où WP Rocket désactivera simplement sa fonctionnalité d'optimisation lorsque Autoptimze est détecté, mais dans la plupart des cas, nous l'avons trouvé inutile car WP Rocket a déjà la même fonctionnalité intégrée. La fonctionnalité d'optimisation de WP Rocket a également tendance à être meilleur pour ne pas casser les sites Web que l'optimisation automatique lorsque des fonctionnalités telles que la minification et le report des scripts sont activées.

Lorsqu'il s'agit d'optimiser le code du site (comme la minification), qui est souvent nécessaire pour obtenir des scores plus élevés avec Google Page Speed ​​ou GTMetrix, nous n'avons jamais réussi à faire fonctionner W3 Total Cache ou WP Fastest Cache (entre autres). comme Autoptimize ou les fonctions d'optimisation de WP Rocket.

Remarque :il s'agit de l'étape où l'activation de certaines optimisations peut casser certaines parties de votre site, en particulier si le thème, le plug-in ou le code personnalisé n'a pas été écrit pour fonctionner correctement avec l'optimisation. Si cela se produit pour vous, veuillez consulter les étapes de dépannage ci-dessous pour savoir comment y remédier.

WP Rocket (notre favori, payant)

Si vous n'avez pas terminé la partie 5 ci-dessus, installez et activez WP Rocket à l'aide de leur guide. Allez ensuite dans Paramètres> WP Rocket pour commencer.

Onglet Cache :

• Activer la mise en cache pour les appareils mobiles . Si vous utilisez un site mobile complètement séparé (non recommandé) ou si vous utilisez beaucoup d'éléments qui n'apparaissent que sur mobile (comme échanger des parties d'une page entre une version mobile et une version de bureau), puis cochez la case pour Séparer les fichiers de cache pour les appareils mobiles .
• Activer la mise en cache pour les utilisateurs WordPress connectés

Enregistrer les modifications

Onglet Optimisation des fichiers :

• Réduire le CSS : activé
• Combinez les fichiers CSS : désactivé*
• Optimiser la diffusion CSS : nous vous recommandons d'utiliser l'option "Charger le CSS de manière asynchrone" car elle est beaucoup plus fiable que l'option (actuellement en version bêta) Supprimer le CSS inutilisé. Supprimer les CSS inutilisés améliore considérablement les performances, mais n'est pas fiable pour une utilisation régulière ou pour les âmes sensibles. Si vous l'utilisez, préparez-vous à un certain nombre d'ajustements manuels pour l'obtenir parfaitement.
• Réduire les fichiers JavaScript : activé
• Combiner les fichiers JavaScript :désactivé*
• Charger JavaScript différé : activé
• Retarder l'exécution de JavaScript : activé**

Maintenant videz le cache de WP Rocket et charger votre site dans un autre navigateur

* des fichiers séparés est préférable lorsque votre serveur Web prend en charge http/2 ou http/3 (comme le nôtre) car le moteur du serveur Web enverra les fichiers simultanément.

** Vérifiez l'onglet de la console de l'inspecteur Web de votre navigateur pour les erreurs. Si vous voyez des erreurs qui ressemblent à :'jQuery n'est pas défini' ou 'jQuery n'est pas trouvé', vous devrez soit déterminer pourquoi un plugin, un thème ou un code personnalisé ne charge pas correctement ses ressources, et exclure celles nécessaires à partir de la fonctionnalité Defer et/ou Delay Javascript, ou optez pour la simplicité et appliquez les exclusions par défaut pour Retarder l'exécution de Javascript affiché sur cette page des paramètres de WP Rocket.

Si vous voyez d'autres erreurs JavaScript, vous devrez soit désactiver Load JavaScript Deferred, soit déterminer pourquoi le fichier JavaScript ne peut pas être différé en discutant avec le développeur du plugin ou du thème.

Onglet Médias :

• Tout activer sur cette page.

Onglet Modules complémentaires :

• Si Google Analytics est activé sur votre site (mais pas via Google Tag Manager ) activez le module complémentaire Google Tracking. [Remarque :le plugin MonsterInsights n'est pas compatible avec cet addon. Si vous souhaitez utiliser cet addon Rocket, vous devrez supprimer MonsterInsights et inclure le code d'analyse à l'aide d'un autre plug-in tel que SiteKit de Google, ou en copiant et collant manuellement le code UA dans le champ de code d'en-tête de votre thème.]
• Si vous utilisez le code de suivi Facebook Pixel sur votre site, activez l'addon Facebook Pixel.
• Si votre serveur utilise le cache Varnish (le nôtre ne l'est pas car le cache nginx est disponible à la place), vous devez activer le module complémentaire Varnish ici.
• Si vous utilisez Shortpixel ou Imagify pour générer des images WEBP pour votre site, vous pouvez activer l'option ici pour les diffuser de préférence aux images JPG/PNG.

WP Super Cache + Optimisation automatique (gratuit)

Si vous n'avez pas terminé la partie 5 ci-dessus, faites-le maintenant, puis connectez-vous à votre installation WordPress et accédez à Plugins> Ajouter un nouveau et installez et activez Autoptimize

Configuration de l'optimisation automatique

• Accédez à Paramètres > Optimisation automatique et assurez-vous que la minification Javascript, CSS et HTML est activée.
• Sous l'onglet Extra, à côté de Google Fonts, essayez l'option "Combiner et charger les polices de manière asynchrone avec webfont.js" ainsi que "Supprimer les chaînes de requête".
• Appuyez sur "Enregistrer les modifications".

Dépanner les éléments cassés

Après avoir activé les optimisations dans WP Rocket ou Autoptimze, il est possible que vous voyiez des éléments cassés sur le site, selon les plugins utilisés, votre thème et une variété d'autres choses. Voici quelques raisons et solutions courantes :

Il manque des images ou des vidéos :

Si votre créateur de thème ou de page utilise Javascript pour charger des images sur votre site, le Lazyload pour les images et les vidéos L'option peut casser cela et vous devrez désactiver le lazyload sur les pages qui ont ce contenu. Consultez la section "Par page" ci-dessous pour savoir comment procéder.

Les éléments généraux de mon site ne fonctionnent pas, comme un menu

S'il s'agit d'un code personnalisé, il est préférable d'essayer de corriger le code responsable. S'il s'agit d'une fonctionnalité fournie par un thème ou un plugin, essayez de remplacer cette fonctionnalité par un autre thème ou plugin (car le thème ou le plugin n'est probablement pas conçu pour la vitesse). Vous pouvez également signaler le problème de compatibilité au développeur du thème ou du plug-in afin qu'il puisse le résoudre.

Si vous ne parvenez pas à corriger le code ou à remplacer le logiciel qui n'est pas optimisé pour la vitesse, désactivez chacun des types de minification (par exemple :sous l'onglet Optimisation des fichiers dans WP Rocket) un par un jusqu'à ce que le problème disparaisse, puis réactivez tout sauf le paramètre que vous avez désactivé en dernier, car il était à l'origine du problème.

Si vous êtes un utilisateur avancé, vous pouvez réactiver le paramètre qui ne fonctionnait pas pour vous, puis utiliser un inspecteur Web pour inspecter la page et déterminer quel fichier est à l'origine du problème. Une fois que vous l'avez trouvé, accédez à la configuration WP Rocket ou Autoptimize et excluez uniquement ce fichier singulier de la minification. (Cela réduira probablement le score de vitesse de votre page)

Exclusions par page

Si vous ne trouvez que certaines pages ayant des problèmes, vous pouvez désactiver l'option causant des problèmes sur cette seule page. Modifiez la page dans WordPress et recherchez la case "Options de cache" sur la droite.

Si vous savez quelle partie du plug-in de mise en cache pose problème, décochez-la. Si vous ne le faites pas, décochez-les un par un et affichez la page pour voir si le problème est résolu. Répétez cette opération pour chaque option jusqu'à ce que vous trouviez le paramètre problématique.

Si vous utilisez Supprimer les CSS inutilisés (WP Rocket)

Il existe deux options pour résoudre ce problème, selon la situation :

1. Vous débutez avec la suppression des CSS inutilisés ? Eh bien, nous vous avions dit que cela arriverait probablement. Peu importe, cependant; recherchez simplement les identificateurs CSS de tous les éléments qui ont "tordu" et ajoutez-les à la liste d'exclusion dans WP Rocket. Rechargez ensuite la page dans un autre navigateur et confirmez que le problème est résolu. Si ce n'est pas le cas, trouvez l'élément CSS suivant et essayez celui-ci - vous l'aurez compris et vous devriez toujours voir des gains significatifs dans les performances de votre site.
2. Si vous avez supprimé le CSS inutilisé depuis un certain temps et qu'il est soudainement cassé, essayez de le rafraîchir en allant sur WP Rocket -> Effacer le CSS utilisé. Cela peut arriver en cas de mise à jour de certains plugins/thèmes, et WP Rocket doit être invité à régénérer ses fichiers.

7. Compresser les fichiers image

Cela ne vous donnera qu'un petit coup de pouce notable à moins que vous n'utilisiez une connexion Internet lente ou que vous n'ayez téléchargé des images extrêmement volumineuses sur votre site, mais cela peut améliorer considérablement votre score de vitesse de page Google puisque leurs scores mobiles Core Web Vitals sont basés sur les débits Internet 3G.

Remarque :si vous souhaitez vraiment optimiser votre site pour obtenir la moindre baisse de performances, vous devez vous attendre à une baisse de la qualité de l'image . Si vous préférez des images de meilleure qualité, vous choisissez cette option au détriment a) des temps de chargement des pages sur des connexions plus lentes et b) des scores de référence synthétiques comme Google PageSpeed ​​et Core Web Vitals. Vous devez choisir ce que vous préférez :des images de haute qualité ou de meilleurs scores de référence. Vous ne pouvez pas avoir les deux.

Méthode manuelle originale : Exécutez tous les fichiers PNG via un compresseur, puis téléchargez-les par-dessus leurs versions précédentes. Ces outils ne sont peut-être pas disponibles, mais j'ai ouvert tous les fichiers PNG dans Photoshop et les ai exportés pour le Web. Si vous faites cela, assurez-vous que les fichiers ne incluez les métadonnées, car cela peut consommer de grandes parties des fichiers, en particulier pour les icônes.

Méthode plus simple et payante : Nous utilisons Imagify pour gérer cela pour nous, tous côté serveur. C'est un plugin fantastique fourni par les mêmes personnes que WP Rocket qui gérera automatiquement la compression de vos images, soit en une seule fois, soit en continu. Une autre option est le plugin appelé ShortPixel, il fonctionne aussi bien qu'Imagify dans nos tests et offre également des prix très équitables. Découvrez tous de nos ressources recommandées ici.

Mise en cache des Gravatars

Comme cela fait référence aux images (celles utilisées par les auteurs de messages), cela semblait être le bon endroit pour en parler. WP Rocket et WP Super Cache ne mettent pas en cache les gravatars par défaut, ce qui signifie que si vous avez beaucoup de commentaires sur vos publications de différents auteurs, le chargement d'images gravatar externes peut prolonger le temps de rendu total de votre page.

Le blog WP Rocket a un excellent article sur la façon de gérer cela, l'essentiel étant d'installer le plugin appelé "FV Gravatar Cache".

8. Configurer Nginx pour charger la sortie du cache statique [Avancé]

Seuls ceux qui utilisent un hôte avec un proxy inverse nginx peuvent profiter de cette option. Cela s'applique à toute personne utilisant Plesk 12 ou une version plus récente, à moins que l'hôte ne fasse des choses étranges avec la configuration de son serveur.

Étant donné que nginx est un moteur de serveur Web plus léger qu'apache, en configurant nginx pour servir directement ces fichiers statiques, nous améliorons considérablement les performances. Pour chaque requête, plutôt que d'utiliser un thread nginx pour lancer un processus apache pour gérer la requête, nous allons configurer nginx pour utiliser uniquement le thread nginx et ne pas prendre la peine de charger apache du tout pour toutes les pages pour lesquelles nous avons un fichier de cache statique . Cool hein ?

Si votre hébergement est avec Websavers, vous n'avez rien à faire, car nous le faisons automatiquement avec tous les comptes d'hébergement partagé et d'hébergement VPS géré.

Si votre hébergement n'est pas chez nous, alors vous devez avoir un accès administrateur à Plesk pour pouvoir appliquer ces changements. Vous n'aurez généralement un accès administrateur que si vous avez votre propre VPS ou serveur dédié.

Configurer nginx pour charger les fichiers de cache statique de WP Super Cache

Rappelez-vous ci-dessus quand nous avons dit à WP Super Cache d'utiliser mod_rewrite pour servir nos fichiers de cache ? C'est à peu près automatique si vous utilisez apache car WP Super Cache modifiera automatiquement votre fichier .htaccess pour inclure les règles mod_rewrite nécessaires.

L'insertion de ce qui suit dans votre configuration nginx indiquera à nginx de contourner entièrement apache lors de la diffusion de la sortie statique de WP Super Cache. Dans Plesk, vous faites cela sous les "Paramètres Apache &nginx" du domaine, puis sous le champ Directives nginx supplémentaires.

### WP Super Cache Below ###
set $cache_uri $request_uri;
 
# POST requests and urls with a query string should always go to PHP
if ($request_method = POST) {
    set $cache_uri 'null cache';
}   
if ($query_string != "") {
    set $cache_uri 'null cache';
}   
 
# Don't cache uris containing the following segments
if ($request_uri ~* "(/wp-admin/|/xmlrpc.php|/wp-(app|cron|login|register|mail).php|wp-.*.php|/feed/|index.php|wp-comments-popup.php|wp-links-opml.php|wp-locations.php|sitemap(_index)?.xml|[a-z0-9_-]+-sitemap([0-9]+)?.xml)") {
    set $cache_uri 'null cache';
}   
 
# Don't use the cache for logged in users or recent commenters
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_logged_in") {
     set $cache_uri 'null cache';
}
 
# Use cached or actual file if they exists, otherwise pass request to WordPress
location ~ / {
   try_files /wp-content/cache/supercache/$http_host/$cache_uri/index.html $uri /index.php;
}

Il est important de noter que vous pouvez rencontrer des problèmes avec les règles nginx fournies si vous utilisez WordPress dans un sous-répertoire, en particulier si vous avez une installation « imbriquée » (avec WordPress dans le répertoire de base et une autre installation WordPress dans un sous-répertoire). Cela peut être fait avec de nombreuses modifications délicates des règles fournies, mais c'est certainement plus facile à tous points de vue si vous modifiez votre structure pour utiliser un sous-domaine plutôt qu'un sous-dossier.

Configurer nginx pour charger les fichiers de cache statique de WP Rocket

Nous avons utilisé cette configuration pratique de WP Rocket nginx en générant une configuration (suivez les instructions d'installation), puis en collant le résultat dans l'emplacement des directives de configuration avancées de nginx dans Plesk.

Nous avons apporté des ajustements à la configuration qui, selon nous, a fonctionné le mieux pour notre environnement ; si vous souhaitez profiter de nos optimisations, pensez à l'hébergement avec Websavers !

9. Désactiver les modules PHP inutilisés [Avancé]

Accès administrateur Plesk requis (VPS uniquement)

Si vous avez un accès administrateur complet à votre VPS, vous pouvez désactiver les modules PHP dont vous n'avez pas besoin. Moins d'éléments à charger en mémoire, moins d'utilisation de la mémoire, un traitement moins intensif et des performances plus rapides. Ce sont des choses très avancées, alors assurez-vous soit de savoir ce que vous faites ou ne le faites pas sur un serveur en direct, donc vous ne cassez rien 😉

• Accédez à Outils et paramètres dans Plesk
• Sous Paramètres généraux cliquez sur Paramètres PHP
• Sélectionnez la version PHP et le gestionnaire dont vous souhaitez modifier les paramètres
• Désactiver les modules PHP que vous n'utilisez pas
• Cliquez sur OK ou Appliquer pour économiser

Maintenant, retournez sur votre site Web et assurez-vous que rien n'est cassé ! Vous ne savez peut-être pas quels modules sont utilisés dans chaque aspect de votre site Web, il peut donc y avoir pas mal d'essais et d'erreurs pour bien faire les choses.

Astuce bonus n° 1 :ReCAPTCHA v3

Si vous utilisez Google ReCAPTCHA pour la protection contre les bots, que ce soit sur un formulaire de contact/devis ou pour protéger les commentaires de votre blog, nous ne vous en voulons pas, c'est un système décent pour empêcher les bots de soumettre vos formulaires.

ReCAPTCHA v2 est le type de captcha que tout le monde connaît et déteste un peu où vous "cochez une case" pour confirmer que vous n'êtes pas un bot. La haine survient lorsque le système affiche une vérification dans laquelle vous devez cliquer sur des images correspondant à une description telle que "sélectionner toutes les images contenant un camion". Cela vous semble familier ?

ReCAPTCHA v3 est "invisible" en ce sens qu'aucune case à cocher n'est requise, ce qui améliore l'expérience utilisateur. Mais, il présente certains inconvénients en termes de vitesse du site dans la mesure où il doit charger tous ses scripts sur chaque page de votre site Web . Il suit les utilisateurs lorsqu'ils naviguent sur votre site, car leurs comportements aideront à déterminer s'il s'agit de bots ou non.

Étant donné que ces scripts sont chargés sur chaque page, la seule façon d'empêcher ces ressources d'être signalées par GTMetrix et d'autres outils d'analyse comparative synthétique est de revenir à la v2 (si votre formulaire ou votre plug-in recaptcha le permet), car les ressources ne seront alors que loaded on the pages where the forms exist.

Advanced users:you can write a WordPress hook that dequeues the ReCAPTCHA v3 resources on all pages except those with your forms, but you should know that doing this will very likely decrease the effectiveness of ReCAPTCHA’s protection.

Bonus Tip #2:Detect and Reduce Dynamic Processing

There’s a few common cases where, regardless of all the caching and optimizations, we just implemented, your server will still launch dynamic PHP processes to serve the requests, thus requiring CPU and memory to handle that request.

Check out our guide to analyzing dynamic processing with WordPress!

UPDATE HISTORY:

• Jan 12, 2022:Updates to PHP Versions, simplify wording, add brotli compression details
• Aug 28, 2020:Add notes about content encoding headers, MonsterInsights incompatibility with WP Rocket’s GA Addon, Gravity Forms incompatibility with deferred jQuery
• Apr 30, 2020:Add Bonus Tip 2:Detecting and Reducing Dynamic Processing
• Apr 26, 2020:Add tip for caching Gravatar images.
• Jan 10, 2020:Add improved instructions for configuring browser caching rules in Plesk to improve scores on synthetic benchmarks like Google Page Speed and GTMetrix.
• Dec 31, 2019:Remove our recommendation to use nginx direct to PHP-FPM processing and instead use rules that will ensure nginx will directly serve your caching plugin’s static cache file output, bypassing apache. This results in identical performance for most website visitors, but much better security, if your host has Plesk’s web application firewall properly configured.
• Oct 15, 2019:Split step 5 into 2 sections (now 5 and 6) — static cache generating in step 5 (which improves performance but doesn’t break websites) and optimization of resources in step 6 (which improves scores on things like Google Page Speed, but which can also break your website).
• Feb 4, 2019:Replace Better WordPress Minification with Autoptimize as recommended minification system.
• Jan 9, 2019:Add PHP 7.3 Info
• Dec 3, 2018:Reformatted post for better understanding of difference between browser cache vs. nginx->php-fpm direct mode. Use Plesk recommended rewrite rules for nginx.
• Jul 4, 2017:Added ShortPixel as an image compression option, reformatted post.
• Feb 20, 2016:Added commercial option, WP Rocket, as a great paid replacement for WP Super Cache + WP Minify.
• Jun 16, 2017:Added some hosting/server tips.
• Dec 25, 2013:Original Post Date.