Optimiser WordPress peut sembler une tâche intimidante. Placer des plugins casse tout. Cela peut devenir un gâchis très rapidement. Certains plugins de qualité d'image rendent les images moches, petites, inutilisables. Vous finissez par perdre la qualité de votre site Web en termes de performances. Ne vous inquiétez pas, nous vous apprendrons étape par étape comment optimiser wordpress et où faire attention.

Exigences

  1. Optimiser automatiquement. Obtenez le plugin ici
  2. Cache LiteSpeed installé sur votre serveur (facultatif)
  3. PerfMatters. Obtenez le plugin ici
  4. ShortPixel (Vous pouvez utiliser Litespeed pour remplacer ce plugin)

Je vous suggère fortement d'utiliser ces plugins pour optimiser votre site WordPress. Ils peuvent être extrêmement utiles et optimiser les pages de votre site Web à moindre coût.

AVERTISSEMENT: cela pourrait casser votre site WordPress. Veuillez créer un bac à sable pour essayer ces paramètres avant de postuler sur un site Web en cours d'exécution.

Optimisez automatiquement

Autooptimize est le meilleur plugin pour générer des CSS critiques, cela signifie qu'il supprimera la plupart des parties inutiles des codes CSS. Il optimise également les codes JS et les minimise.

Options JavaScript

Certaines options peuvent endommager votre site Web. J'ai placé avec des couleurs les paramètres que vous voudrez probablement appliquer à votre site Web. Les verts sont moins susceptibles de casser votre site Web et les rouges sont plus susceptibles de le faire. Si vous savez que votre site Web tombe en panne, recherchez le fichier .js qui est cassé et essayez de l'ajouter pour «exclure de l'optimisation automatique». Cela résoudra la plupart des problèmes.

Agréger également JS en ligne?
Agréger des fichiers JS? Agréger tous les fichiers JS liés pour les charger sans blocage de rendu? Si cette option est désactivée, les fichiers JS individuels resteront en place mais seront minifiés.
Agréger également JS en ligne? Laissez Autoptimize extraire également JS du HTML. avertissement: cela peut augmenter rapidement la taille du cache d'Autoptimize, donc ne l'activez que si vous savez ce que vous faites.
Forcer JavaScript dans ? Chargez JavaScript tôt, cela peut potentiellement corriger certaines erreurs JS, mais rend le blocage du rendu JS.
Exclure des scripts d'Autoptimize:
Une liste de scripts séparés par des virgules que vous souhaitez exclure de l'optimisation, par exemple «any.js, another.js» (sans les guillemets) pour exclure ces scripts d'être agrégés par Autoptimize. Important: les fichiers non minifiés exclus sont toujours minifiés par Autoptimize à moins que cette option sous «divers» soit désactivée.
Ajouter un emballage d'essai? Si vos scripts se cassent à cause d'une erreur JS, vous pouvez essayer ceci.

Options CSS

Options CSS

CSS en ligne et différé?
Agréger des fichiers CSS? Agréger tous les fichiers CSS liés? Si cette option est désactivée, les fichiers CSS individuels resteront en place mais seront minifiés.
Agréger également les CSS en ligne? Cochez cette option pour optimiser automatiquement pour agréger également CSS dans le HTML.
Générer des données: URI pour les images? Activez cette option pour inclure de petites images d'arrière-plan dans le CSS lui-même au lieu de les télécharger séparément.
CSS en ligne et différé? Inline «au-dessus du CSS de pliage» lors du chargement du CSS principal optimisé uniquement après le chargement de la page. Consultez la FAQ pour plus d'informations. Cela peut être entièrement automatisé pour différents types de pages sur le CriticalCSS languette.
Inline tout CSS? L'inclusion de tous les CSS est un moyen facile d'empêcher le CSS de bloquer le rendu, mais n'est généralement pas recommandée car la taille du HTML augmente considérablement. De plus, cela pourrait pousser les méta-tags vers une position où, par exemple, Facebook et Whatsapp ne les trouveront plus, cassant les vignettes lors du partage.

Le «inline all css» n'est pas recommandé car il augmente les temps de chargement. Bien qu'il puisse être chargé «async», il se charge sur la page et peut retarder le temps de la première peinture.

Optimisation HTML

Optimiser le code HTML?
Conserver les commentaires HTML? Activez cette option si vous souhaitez que les commentaires HTML restent dans la page.

Je ne vous suggère pas de ne pas conserver les commentaires html, car ils n'ont généralement pas de fonctionnalité.

Optimisation d'image

Rendez votre site beaucoup plus rapide en cochant simplement quelques cases pour optimiser et charger paresseusement vos images, support WebP inclus!

Optimiser les imagesOptimisez les images à la volée et diffusez-les à partir du CDN mondial de Shortpixel. Obtenez plus d'amour Google et améliorez la vitesse de chargement de votre site Web en optimisant vos images accessibles au public à la volée (également au format d'image WebP de nouvelle génération) par ShortPixel puis mis en cache et servi rapidement à partir du CDN mondial de Shortpixel. S'inscrire maintenant pour recevoir un bonus de 1 000 + 50% de crédits d'optimisation d'image en plus quel que soit le trafic utilisé. D'autres optimisations d'image peuvent être achetées à partir de $4.99.Des questions? Jetez un oeil à la FAQ ShortPixel! Fonctionne uniquement pour les sites / images accessibles au public. L'utilisation de cette fonctionnalité est soumise aux conditions de Shortpixel Conditions d'utilisation et Politique de confidentialité.
Images paresseuses?Le chargement paresseux des images retardera le chargement des images non visibles pour permettre au navigateur de charger de manière optimale toutes les ressources pour la page «au-dessus du pli» en premier.

Cela devrait vous permettre de configurer votre site Web. Facile et pas beaucoup de problèmes. Ce plugin est également gratuit.

Comme je l'ai dit, assurez-vous de bien tester. Cela pourrait casser certaines fonctionnalités.

Optimisations supplémentaires

Google FontsLaissez tel quel
Supprimer les polices Google
Combinez et liez dans la tête (les polices se chargent rapidement mais bloquent le rendu), comprend affichage: échange.
Combinez et préchargez dans la tête (les polices se chargent tard, mais ne bloquent pas le rendu), comprend affichage: échange.
Combinez et chargez des polices de façon asynchrone avec webfont.js
Supprimer les emojisSupprime les CSS emojis principaux de WordPress, JavaScript en ligne et un fichier JavaScript non optimisé par ailleurs.
Supprimer les chaînes de requête des ressources statiquesSuppression des chaînes de requête (ou plus précisément du ver ) n'améliorera pas le temps de chargement, mais pourrait améliorer les scores de performances.

Maintenant, vient la partie délicate. Cette partie ne doit être effectuée que si vous êtes sûr de ce que vous faites.

Accédez à tools.pingdom.com et testez votre site Web.

Guide facile pour optimiser Wordpress en moins d'une heure. 1

Vous verrez quelque chose comme ça. Maintenant, cela vous dira quels liens si vous devez vous reconnecter ou dns prefetch. Ceci est un bon exemple, car notre site Web se reconnecte uniquement aux polices Google. Cela signifie que moins de temps sera utilisé pour effectuer des recherches DNS sur d'autres sites Web. Dans ce cas, ce n'est pas très pertinent mais dans cet exemple je pourrais mettre:

fonts.gstatic.com, fonts.googleapis.com

Assurez-vous également d'écouter les informations de vitesse de Google, car il vous indiquera si une demande doit être préchargée. S'ils vous suggèrent de précharger des fichiers .js ou .css, placez-les dans «Précharger des demandes spécifiques» et saisissez-les. Dans mon cas, je mettrai la police car ils suggèrent qu'elle est chargée en premier pour améliorer le temps de premier rendu.

L'un des avantages supplémentaires de l'utilisation de l'optimisation automatique est qu'elle vous donne la possibilité de générer des fichiers de cache. Cela peut créer beaucoup de fichiers, alors assurez-vous qu'il est utile pour votre site Web. Ajouté, chaque fois que vous supprimez le cache, il faudra plus pour charger votre site Web. Si vous avez beaucoup de visites sur votre site Web, cela peut le faire planter et utiliser des quantités anormales de CPU.

Perfmatters

Ce plugin coûte. Mais cela en vaut vraiment la peine.

Les options

Sélectionnez les options de performances que vous souhaitez activer.

Désactiver les emojisActiver
Désactiver les intégrationsActiver
Supprimer les chaînes de requêteActiver
Désactiver XML-RPCActiver
Supprimer jQuery MigrateActiver
Masquer la version WPActiver
Supprimer le lien wlwmanifestActiver
Supprimer le lien RSDActiver
Supprimer ShortlinkActiver
Désactiver les flux RSSActiver
Supprimer les liens du flux RSSActiver
Désactiver les auto-renvoisActiver
Désactiver l'API RESTActiver
Supprimer les liens de l'API RESTActiver
Désactiver les DashiconsActiver
Désactiver Google MapsActiver
Désactiver les polices GoogleActiver
Désactiver la jauge de force du mot de passeActiver
Désactiver les commentairesActiver
Supprimer les URL de commentaireActiver
Chargement paresseuxBETAActiver
Utiliser natifActiver
Désactiver le rythme cardiaqueDefaultDisable EverywhereOnly Allow When Editing Posts / Pages
Fréquence du rythme cardiaque15 secondes (par défaut) 30 secondes45 secondes60 secondes
Limiter les révisions de posteDefaultDisable Post Revisions123451015202530
Intervalle d'enregistrement automatique1 minute (par défaut) 2 minutes3 minutes4 minutes5 minutes
Changer l'URL de connexionPourrait être utile à des fins de sécurité.

Cela dépendra beaucoup de votre site Web. Si vous avez Google Maps ou si vous n'avez pas besoin de polices Google, faites ce qui convient le mieux à votre site Web. Testez également soigneusement et assurez-vous que cela n'affecte aucune fonctionnalité.

Dans l'onglet Extras, activez le «gestionnaire de scripts».

Cette partie est très utile, car dans google, vous recevez souvent une alerte disant "supprimer les fichiers css qui ne sont pas utilisés" ou "supprimer les fichiers js qui ne sont pas utilisés"

Guide facile pour optimiser Wordpress en moins d'une heure. 2

Dans cet exemple, vous voyez des fichiers qui sont presque totalement inutilisés. Ils disent qu'il a une économie possible de 10,3 sur 10,6 Ko, ce qui signifie qu'il est probablement sûr de le supprimer. Effectuez un test approfondi lors de cette opération. Les perfmatters nous aident ici car vous pouvez les désactiver directement.

Accédez à http://yourwpdomain.com/yourwpdirectory/fileyouwanttoedit? perfmatters

ou ajoutez simplement ? perfmatters à la page que vous souhaitez optimiser.

Ici, vous verrez les scripts en cours de chargement.

Guide facile pour optimiser Wordpress en moins d'une heure. 3

Certains auront les informations suivantes:

Guide facile pour optimiser Wordpress en moins d'une heure. 4

Là, vous pouvez le faire correspondre avec les suggestions Google de .css inutilisés. Désactivez tous les CSS inutilisés qui, selon vous, n'affecteront pas votre site Web. Faites-le également avec les fichiers .js. Mais comme je l'ai déjà dit, vous devez à peu près vérifier paramètre par paramètre et page par page pour voir lequel fonctionne et lequel ne fonctionne pas. Ce plugin supprimera tous les fichiers .js et .css inutilisés, ce qui augmentera considérablement vos performances.

Shortpixel - Optimisation d'image

Shortpixel est l'un des meilleurs optimiseurs d'image sur le marché. Voici mes paramètres:

optimisation d'image à pixels courts

Dans mon cas personnel, je me soucie beaucoup de la qualité de l'image. Par conséquent, je décide de redimensionner mes images à 1025 × 1024. La plupart des paramètres présentés ici seront extrêmement utiles pour votre site Web.

Sur les paramètres de page avancés, je vous suggère d'activer ces options:

Conversion CMJN en RVB Ajustez les couleurs de vos images pour l'affichage sur écran d'ordinateur et mobile.Les images pour le Web n'ont besoin que du format RVB et les convertir de CMJN à RVB les rend plus petites.
Images WebP:Livrez les versions WebP des images dans le front-end:
Créez également Versions WebP des images, gratuitement.
 En utilisant le syntaxe de balise
 Global (traite tout le tampon de sortie avant d'envoyer le HTML au navigateur)
Optimiser les images de la rétine Optimisez également les images Retina (@ 2x) si elles existent.Si vous disposez d'un plugin Retina qui génère des images spécifiques à Retina (@ 2x), ShortPixel peut également les optimiser, à côté des images et des vignettes de la médiathèque habituelles.  Plus d'informations 
Optimiser les autres pouces Optimisez également les vignettes non répertoriées si elles sont trouvées.Certains plugins créent des vignettes qui ne sont pas enregistrées dans les métadonnées, mais les créent uniquement à côté des autres vignettes. Laissez ShortPixel les optimiser également. 
Optimiser les PDF Optimisez automatiquement les documents PDF.

Vous devez être très prudent si vous souhaitez activer "Convertir les images PNG en JPEG" car cela peut parfois altérer les images que vous souhaitez avec un fond transparent.

Vous devez également les activer:

Optimiser les médias lors du téléchargement Optimisez automatiquement les éléments de la bibliothèque multimédia après leur téléchargement (recommandé). Par défaut, ShortPixel optimise automatiquement toutes les images et fichiers PDF fraîchement téléchargés. Si vous décochez cette option, vous devrez soit exécuter Bulk ShortPixel, soit aller à la médiathèque (en vue liste) et cliquer sur le (s) bouton (s) «Optimiser maintenant» à droite. 
Processus en front-end Optimisez automatiquement les images ajoutées par les utilisateurs en front-end. Cochez cette case si vous avez des utilisateurs qui ajoutent des images ou des documents PDF à partir de formulaires personnalisés dans le front-end. Cela pourrait augmenter la charge de votre serveur si vous avez plusieurs utilisateurs connectés simultanément.

Cache LiteSpeed

Ce plugin ne doit être utilisé que si vous avez un serveur Litespeed. Il réduit considérablement les temps de réponse.

Accédez à Cache et activez tous les paramètres dans «Paramètres de contrôle du cache». Activez également les paramètres de contrôle du cache. Pour plus d'informations, vous devez vous rendre sur le site Site Web de Litespeed.

Partager sur facebook
Facebook
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn
Dans cet article: