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.

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 ?

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”.
Telecharger Fast Velocity Minify 01

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

Reglages Fast Velocity Minify 1

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”.

Reglages Fast Velocity Minify 2

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”.

Telecharger Fast Velocity Minify 01

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

Reglages Autoptimize 1
Cochez les options pour optimiser et concaténer les fichiers et le code JavaScript.
Reglages Autoptimize 2
Cochez les mĂȘmes options pour le CSS, en ajoutant la concatĂ©nation du CSS en ligne.
Reglages Autoptimize 3
Choisissez d’optimiser le code HTML. Celui-ci sera minifĂ©.
Reglages Autoptimize 4

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.

Chargement Differe Images Autoptimize

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”.

Installer Smush WordPress 01

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

Reglages Smush 1

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”.

Telecharger Imagify WordPress 01

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.

Reglages Imagify 1

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.

Reglages Imagify 2

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.

Acheter 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
Reglages Wprocket 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.

Reglages Wprocket Fichiers Css

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

Reglages Wprocket Fichiers Js
Reglages Wprocket Fichiers Js 2

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
Reglages Wprocket Media
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.
Reglages Wprocket Media2

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”.

Eglages Base Donnees Wprocket

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 ?

Partager sur facebook
Facebook
Partager sur email
Email
Partager sur twitter
Twitter
Pas de RĂ©ponse

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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 ?

Walk The Line - agence de développement et formations web

En poursuivant votre navigation, vous acceptez le dĂ©pĂŽt de cookies tiers pour nous permettre d’amĂ©liorer notre site. En savoir +