Comment réduire le temps de chargement du site Web WordPress - 6,3 secondes à 2 secondes

Publié: 2022-05-04

Transcription vidéo

Cette vidéo va vous guider à travers le processus que nous utilisons chez Sagapixel pour réduire le temps de chargement d'un site Web d'environ six secondes à quelque chose d'un peu plus acceptable. Espérons que nous allons nous retrouver dans la plage de deux à trois secondes pour ce site Web.

Cette méthode va utiliser tous les plugins gratuits. Ils se trouvent directement sur le référentiel WordPress, et je vais expliquer ce que chacun d'eux fait au fur et à mesure que je l'utilise. Allons-y. Il s'agit du rapport GTMetrix pour un site Web que nous avons créé il y a quelques mois et qui n'a pas vraiment été optimisé.

Je vais en fait aller sur le front-end du site, utiliser également mon navigateur, donc nous allons passer au réseau et je vais faire une actualisation complète. Je suis sur Mac. Je vais maintenir la touche Maj enfoncée et appuyer sur l'actualisation pour effacer le cache, et c'est lent. Ouais, cette chose avait un temps de premier octet de six secondes.

C'est assez ridicule, et nous n'allons pas laisser un site Web client s'asseoir là et prendre autant de temps pour le premier octet. Maintenant, le serveur lui-même est probablement un facteur. Je sais qu'ils sont sur un hébergement GoDaddy de très faible qualité, mais nous pouvons certainement accélérer cette chose, donc pendant les 10 prochaines minutes environ, nous allons le faire.

Je vais d'abord me connecter à ce truc, et nous allons passer aux plugins. La première chose qui doit être activée est cette réduction de vitesse rapide. Fast Velocity minify va combiner un grand nombre d'actifs qui sont chargés, donc première chose, je crois qu'un SSL est installé, donc je vais configurer cette chose pour forcer le SSL.

Je ne vais pas vérifier ça. Cela ne fait généralement pas grand-chose. Je ne veux pas désactiver la fusion des polices Google. Je ne veux pas conserver l'ordre des fichiers CSS. Je souhaite intégrer le CSS dans l'en-tête et le pied de page. La raison pour laquelle je vérifie ces paramètres est que nous travaillons principalement avec Elementor, et je sais que ces paramètres ne vont rien casser.

Pendant que vous utilisez Fast Velocity Minify, si vous cassez quelque chose, ce sera probablement sur Chrome, alors assurez-vous qu'après avoir fait tous vos réglages et que vous vous êtes déconnecté du site Web, vous démarrez avec Chrome. et assurez-vous que vous n'avez tué aucune de vos feuilles de style.

D'accord, je ne vais rien désactiver. Ça a l'air bien ici, donc je vais enregistrer ça, et je vais réexécuter les métriques Gt. Le simple fait d'avoir fait cela devrait probablement réduire une partie du temps de chargement sur ce site. Une grande partie est probablement encore le serveur, cependant.

D'accord, ça l'a fait baisser d'un peu plus d'une seconde. Nous n'avons pas encore fini, cependant. Le prochain plugin que nous allons installer est… sur ce site, nous avons l'optimiseur d'image à pixels courts. Il semble qu'il n'ait jamais été activé, nous devrons donc peut-être optimiser certaines images.

Je ne vais pas vraiment utiliser celui-là, cependant. Je vais installer un autre plugin que nous avons adopté récemment qui s'occupera de tout un tas de choses dont il faut s'occuper, y compris l'optimisation de l'image, donc nous devons réoptimiser.

D'accord, allez dans les paramètres, et la toute première chose que nous allons faire est d'aller dans le cache. Je vais activer la mise en cache des pages. Je vais également m'assurer que je n'ai pas de plugin de mise en cache déjà actif ici, ce que nous n'avons pas. Bon. Et je vais activer la mise en cache des pages.

La prochaine chose que je vais faire est de passer au préchargement et je vais activer ce préchargement programmé. Je pense qu'on va faire ça une fois par jour. Enregistrez-le, et je vais l'exécuter maintenant, et cela va commencer à précharger toutes les URL, tout comme vous pouvez le lire ici, le déclenchement réel pour réoptimiser, mettre en cache le site Web en visitant des pages pour les précharger de sorte que la première fois qu'un visiteur humain les veut, le site n'aura pas à tout générer.

Nous devrons lui accorder une minute. La prochaine chose que je vais faire est de passer aux images, et à partir de maintenant, nous allons configurer cette chose pour compresser automatiquement les images nouvellement ajoutées. Cela va le faire en se connectant à WP Smush. Si vous ne voulez pas l'utiliser, nous pouvons décocher cette case, et je dirai que le pixel court est généralement le meilleur lorsqu'il s'agit de gérer l'optimisation de l'image.

Tout ce processus de préchargement des pages prend en fait un peu de temps. Vous savez, nous n'en sommes qu'à la page 17 sur 30. La prochaine chose à laquelle nous allons passer pendant que ça tourne, c'est ceci ici. Nous allons examiner la base de données, et nous avons ces options pour optimiser les tables de base de données, nettoyer les révisions de publication, donc cela va vraiment nettoyer la base de données et lui permettre de fonctionner beaucoup plus rapidement, mais je tiens vraiment à souligner qu'il va se débarrasser de trucs.

Donc, si vous avez, s'il y a une possibilité que vous vouliez restaurer un ancien message, restaurer une ancienne page comme cela se faisait à un moment donné, en exécutant ces optimisations, vous allez effacer toutes ces anciennes versions de tout, donc vous voudrez probablement sauvegarder votre site Web avant de faire quoi que ce soit sur la base de données.

Je sais que nous avons une sauvegarde de cela. Je ne vais pas non plus le faire pendant que nous exécutons le préchargement, mais il semble que cela ait été pris en charge, alors allons-y. Je vais exécuter toutes ces optimisations. Ici, nous avons 1 200 révisions de publication qui sont maintenant supprimées.

Ça va prendre du temps pour passer par là, parfois. C'est un site Web assez petit, donc cela n'a pas pris trop de temps, mais lançons-le une fois de plus, voyons ce qu'il a fait. Très bien, nous sommes maintenant à 2,6 secondes de tout le chemin, qu'est-ce que c'était, plus de 6 secondes avant de commencer.

Le prochain que je vais ajouter va être une charge paresseuse. Chargement paresseux, c'est parti, le chargement paresseux de WP Rock est celui que j'utilise. Super facile à configurer. Il suffit de cliquer dessus, d'activer, d'aller dans les paramètres, et nous ne cocherons que quelques cases ici.

Images, cadres I. Je ne vais pas faire les vidéos YouTube par vignette. Sauvegarder les modifications. D'accord. Maintenant, dernière étape, vraiment, je pense que l'optimisation… nous n'allons pas nous asseoir ici pendant que nous optimisons toute la bibliothèque, mais l'optimisation des images pour cette chose va être la dernière étape pour vraiment réduire cela.

Je pense que nous allons probablement réduire cela à environ 2,5 secondes si nous finissions par utiliser des images trop grandes et le site. J'espère que cela a été utile. Faire en sorte qu'un site WordPress se charge rapidement n'est vraiment pas si difficile.

Je pense aussi que beaucoup de critiques des constructeurs de pages visuelles, comme WP Bakery, dans ce cas Elementor, Divi, sont injustifiées, car il y a beaucoup de choses que vous pouvez faire pour que ces sites Web se chargent rapidement même avec un constructeur visuel de page.

Si cela vous a été utile, assurez-vous de laisser un commentaire et si vous souhaitez en savoir plus sur le référencement et WordPress, assurez-vous de vous abonner à notre chaîne. Merci.