Les extensions incontournables pour WordPress – Partie 4

Toutes les extensions incontournables pour WordPress en un clin d'oeil !

Gardez toujours la liste des plugins incontournables WordPress avec vous ! Grâce à ce plan, il vous suffit d’un clic pour accéder à la liste de votre choix.

Les extensions incontournables pour WordPress – 1ère partie (Sécurité)
Les extensions incontournables pour WordPress – 2ème partie (SEO et sauvegarde)
Les extensions incontournables pour WordPress – 3ème partie (Newsletter, Formulaires et Multi-lingue)
Les extensions incontournables pour WordPress – 4ème partie (Gestion des performances de son site internet)
Les extensions incontournables pour WordPress – 5ème partie (WooCommerce)
Les extensions incontournables pour WordPress – 6ème partie (Elementor)

Bienvenue dans la quatrième partie de ce nouvel article par Walk The Line !
Cette fois-ci, nous nous pencherons sur les extensions incontournables pour optimiser les performances de son site WordPress.
Voici donc les différents points abordés :

Comment optimiser les performances de son site web ?

Comment optimiser les performances de son site web ?

Vous est-il déjà arrivé de naviguer sur un site web dont le chargement des pages était extrêmement lent ? Si oui, alors vous avez probablement mis fin à votre navigation avant même de trouver ce que vous recherchiez. Vous n’êtes pas les seuls puisqu’on estime à 40% le taux de visiteurs quittant un site web prenant plus de trois secondes à charger. Si ce chiffre ne reste qu’une estimation, il n’en est pas moins équivoque sur les attentes des utilisateurs.

Qu’en est-il de votre site web ? Avez-vous des retours de vos clients dessus ? Connaissez-vous la vitesse de chargement de vos pages ?

Si vous ne pouvez pas répondre à ces questions, il existe un outil simple et gratuit pour vous y aider. Il vous permet d’obtenir des axes d’amélioration pour les performances de votre site web. Il vous suffit de rentrer l’adresse de votre site sur le site Google Page Speed Insights.

Vous constaterez que les résultats vous sont détaillés. Vitesse de chargement de la page, ergonomie mobile, poids des images, etc. Ces indications vous seront utiles pour connaître vos axes d’amélioration.

Fast Velocity Minify

Fast Velocity Minify est un plugin WordPress qui vous sera utile pour optimiser les performances de votre site web. En minifiant vos fichiers CSS et JavaScript, vous allégez le poids de votre page. La concaténation de ces fichiers permet de réaliser l’envoi de ces fichiers en une seule requête au lieu de plusieurs, ce qui fait gagner du temps de chargement.

1/ Télécharger l'extension Fast Velocity Minify

Pour cela, rendez-vous dans votre back office WordPress (tableau d’administration) puis dans Extensions > Ajouter, via le menu latéral, à gauche. Recherchez ensuite “Fast Velocity Minify”.

2/ Activez l'extension

Rendez-vous dans vos extensions ajoutées via Extensions > Extensions installées. Ici, cherchez “Fast Velocity Minify” et cliquez sur “Activer”.

3/ Réglages

Concernant les réglages de l’extension Fast Velocity Minify, cochez la dernière option de “Functionnality” afin d’améliorer la compatibilité de l’extension avec les constructeurs de page.

Laissez le paramètre suivant sur “auto detect” si vous n’avez pas recours à un CDN. Dans le cas contraire, il se peut que vous deviez cocher “force https url” si votre site est bien sécurisé par un certificat SSL.

Dans “HTML options”, cochez la dernière option et la seconde pour “Font options”.

Dans “Google Fonts” et “Font Awesome”, choisissez la première option. Pour “CSS Options”, choisissez “Preserve the order of CSS files”, “Disable the print related stylesheet” et “inline css in the footer”.

Ne cochez pas les paramètres JavaScript, ni les suivants.

Avec Fast Velocity Minify, vous pouvez d’ores et déjà voir du mieux dans vos performances de site, notamment au niveau de la vitesse d’affichage des éléments.

Autoptimize

Autoptimize est une alternative à Fast Velocity Minify. Il a l’avantage d’être très léger et de gérer le cache du site ainsi que le lazy loading, c’est-à-dire le chargement différé des images. Avec plus d’un million d’installations actives, Autoptimize est un plugin d’optimisation pour WordPress très répandu. Et il a donc notre préférence 🙂

1/ Télécharger l'extension Autoptimize

Pour cela, rendez-vous dans votre back office WordPress (tableau d’administration) puis dans Extensions > Ajouter, via le menu latéral, à gauche. Recherchez ensuite “Autoptimize”.

2/ Activez l'extension

Pour cela, rendez-vous dans votre back office WordPress (tableau d’administration) puis dans Extensions > Ajouter, via le menu latéral, à gauche. Recherchez ensuite “Autoptimize”.

3/ Réglages

Cochez les options pour optimiser et concaténer les fichiers et le code JavaScript.

Cochez les mêmes options pour le CSS, en ajoutant la concaténation du CSS en ligne.

Choisissez d’optimiser le code HTML. Celui-ci sera minifé.

Laissez les dernières options activées. Éventuellement, vous pouvez décocher la dernière option si Autoptimize interfère avec votre constructeur de pages, pour vos utilisateurs connectés.

Enfin, cochez “Chargement différé des images ?” pour activer le Lazy Loading. Cette option fera que vos images seront chargées progressivement, en suivant la navigation de vos utilisateurs, et non en une seule fois.

Comme vous pouvez le voir, les réglages d’autoptimize sont simples et rapides. Vous constaterez également qu’ils sont efficaces ! Si vous désirez pouvoir gérer plus amplement vos paramètres de cache et de lazy loading, nous vous invitons à jeter un œil au plugin de gestion de cache WP Rocket.

Smush

Les images jouent un rôle considérable dans le poids des pages web. En effet, en moyenne 21% du poids d’une page web est dû aux images ! Dimensions trop grandes, compression absente ou encore mauvais format sont responsables du grand poids de vos images. Avec Walk the Line et Smush, apprenez à le réduire simplement !

1/ Télécharger l'extension Smush

Pour cela, rendez-vous dans votre back office WordPress (tableau d’administration) puis dans Extensions > Ajouter, via le menu latéral, à gauche. Recherchez ensuite “Smush”.

2/ Activez l'extension

Rendez-vous dans vos extensions ajoutées via Extensions > Extensions installées. Ici, cherchez “Smush” et cliquez sur “Activer”.

3/ Réglages

Depuis le tableau de bord Smush, dans “Bulk Smush”, descendez pour voir les options de compression de vos images.
Activez l’option “Automatic compression” pour que Smush compresse automatiquement les images que vous importez dans votre médiathèque WordPress.

Smush est un plugin Freemium. Sa gratuité est limitée et est déterminée par la quantité de médias que vous optimisez. Plus vos médias sont lourds et donc, à optimiser, moins longtemps durera votre version gratuite de Smush. Pour gagner quelques optimisations, vous pouvez en amont compresser vos images pour que Smush n’ait pas à trop les réduire. Pour cela, vous pouvez utiliser le compresseur iloveimg.com. Il vous suffit ensuite d’importer vos médias pré-optimisés sur votre site web pour que Smush termine la compression.

Vous constaterez très vite que des images compressées et optimisées sont synonymes de meilleures performances !

Imagify

Imagify est une alternative au plugin Smush. A l’instar de celui-ci, il a pour vocation de réduire le poids des images en les compressant. Imagify redimensionne également automatiquement les images trop grandes.

1/ Télécharger l'extension Imagify

Pour cela, rendez-vous dans votre back office WordPress (tableau d’administration) puis dans Extensions > Ajouter, via le menu latéral, à gauche. Recherchez ensuite “Imagify”.

2/ Activez l'extension

Rendez-vous dans vos extensions ajoutées via Extensions > Extensions installées. Ici, cherchez “Imagify” et cliquez sur “Activer”.

3/ Réglages

Avant toute chose, Imagify vous demandera de rentrer une clé d’API. Suivez la marche à suivre fournie pour créer votre clé d’API Imagify en quelques clics.

Par défaut, la compression des images est réglée sur “Agressif”. Vous pouvez le laisser tel quel. Compresser davantage vos images risque de leur faire perdre en qualité. Si cela peut booster vos performances, vos utilisateurs risquent cependant de ne pas trouver vos médias très attractifs…
Souvenez-vous que les performances doivent optimiser l’expérience utilisateur.

Laissez les options “Optimiser automatiquement les images envoyées” et “Conserver une copie des images d’origine” cochées. Inutile de conserver les données EXIF des images à moins que vous ayez réellement un intérêt à cela.

Le format WebP est un format d’image matricielle mis en place par Google ayant pour vocation de remplacer les formats d’images PNG, JPEG, GIF, etc, en promettant un allégement du poids des images jusqu’à 30% de celui-ci.
Cochez donc ce paramètre.

Cochez également le paramètre de redimensionnement des images trop grandes en définissant le paramètre sur 2048 pixels. Cela permettra de redimensionner directement des images dont le format dépasserait celui-ci.

Enregistrez et c’est terminé ! Imagify est également un plugin freemium, à l’instar de Smush. Une fois votre crédit mensuel consommé, vous pouvez soit attendre d’en recevoir à nouveau le mois prochain, soit décider d’activer une licence pro. Concernant ce point, c’est à vous de déterminer si vous avez besoin ou non d’une licence payante. Si vous ajoutez régulièrement de nouveaux médias, alors il s’agit sûrement d’un investissement utile. Autrement, le crédit mensuel automatiquement alloué peut vous suffire. Nous vous invitons à faire l’essai.

WP Rocket

WP Rocket est un plugin de gestion de cache et d’optimisation des performances pour WordPress. Si celui-ci n’est pas gratuit, il vaut toutefois largement que l’on s’y attarde ! L’extension agit à la fois sur le cache navigateur (côté client) et sur le cache serveur. Ce n’est pas tout, elle gère également le lazy loading, la minification et concaténation de fichiers, le nettoyage de la base de données… Ce petit couteau-suisse complet est en plus une extension française.

1/ Télécharger l'extension WP Rocket

Pour télécharger l’extension, il faudra vous rendre sur le site de WP Rocket.

2/ Téléversez et activez l’extension

Rendez-vous dans “Extensions” depuis votre back office WordPress. Là, cliquez sur “Téléverser une extension”. Il vous suffit ensuite de glisser le fichier .zip de votre extension WP Rocket pour l’installer.

3/ Réglages

Cache

Activez le cache pour les appareils mobiles ainsi que le cache utilisateur. Concernant le délai de nettoyage du cache, tenez compte de la fréquence des modifications que vous effectuez sur votre site. Si vous avez tendance à en effectuer régulièrement, choisissez un délai court pour garantir un affichage correct à vos utilisateurs.

Dans “optimisations des fichiers”, cochez les cases relatives à la minification et à la concaténation des fichiers CSS et JavaScript.

Ici, appliquez la même logique aux fichiers JavaScript que CSS. Vous pouvez notamment préciser quels scripts JavaScript doivent être reportés.

Lazy Loading

Comme nous vous l’expliquions, WP Rocket gère également le lazy loading. Vous pouvez l’activer sur les images, les iframes, les vidéos. Choisissez également de désactiver les emojis de WordPress. Vous utiliserez alors les emojis du navigateur et gagnerez des requêtes HTTP.

Cochez les deux derniers paramètres. N’oubliez pas de sauvegarder vos modifications avant de poursuivre.

Préchargement

Le préchargement de vos pages vous sera très utile et est effectué en fonction du sitemap. Le préchargement, comme son nom l’indique, s’effectue en amont de la visite d’un utilisateur. C’est-à-dire qu’au lieu qu’un utilisateur “test” génère le cache de votre site lors de la première visite de celui-ci, on effectue cela nous-même.
Cochez donc tous les paramètres, sans oublier “Activer le préchargement des liens”.

Votre base de données, au fur et à mesure des révisions, brouillons et contenus corbeillés a besoin d’être nettoyée. Pour l’alléger sans risquer d’y causer des dommages irrémédiables, vous pouvez cocher “révisions” et “contenus de la corbeille”. En cliquant sur “sauvegarder et optimiser” en bas de page, vous effectuerez un simple nettoyage de votre base de données.
Walk The Line vous rappelle qu’un nettoyage plus poussé doit être fait avec précaution, en connaissance de cause et toujours avec un backup de votre site WordPress en amont. Si vous ne savez pas comment faire, nous vous conseillons de lire notre article relatif à la sauvegarde de site WordPress avant toute opération.

WP Rocket est une extension proposant également de nombreux tutoriels pour apprendre à la paramétrer. Ces réglages sont ceux que votre agence web utilise. Ils peuvent tout à fait être adaptés à vos besoins ! Pour cela, nous vous invitons à consulter les tutoriels vidéo WP Rocket ainsi que la documentation WP Rocket pour en apprendre plus.

WP Rocket conclut notre partie consacrée aux extensions WordPress dédiées à l’optimisation des perofrmances votre site WordPress. Nous verrons prochainement les extensions WordPress indispensables lorsque l’on souhaite créer sa boutique e-commerce.

D’ici là, si vous avez la moindre question concernant notre article, n’hésitez pas à nous envoyer un message !

Des questions au sujet de notre article ?

Mélody Challier
12 Nov 2020

Pas de Réponse

Laisser un commentaire Annuler la réponse

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Vous souhaitez lire plus d’articles ?