Si tu as suivi mes derniers articles sur la performance web, tu sais que j’attache beaucoup d’importance au temps de chargement de mes sites, et ce n’est pas pour rien 😉
Il a été démontré à de maintes reprises que les visiteurs se font la malle lorsque les temps de chargement sont trop élevés. Par exemple, cette étude de Google démontre que plus de la moitié des visiteurs mobile abandonnent leur navigation si la page prend plus de 3 secondes à charger. Et la tendance ne fait que s’accentuer : plus le temps passe, plus les internautes sont impatients d’avoir un résultat rapide.
Je souhaite le meilleur pour mes visiteurs, mais cela se traduit souvent par l’utilisation d’un grand nombre de plugins (actuellement 36 sur Web & SEO). Et certains plugins ont la fâcheuse tendance de prendre du jus pour rien. Par exemple, le plugin Contact Form 7 va charger un fichier JS ainsi qu’un fichier CSS sur l’ensemble des pages de ton site, même si tu utilises seulement le plugin sur ta page de contact.
Dans mon précédent article “Comment j’ai diminué le temps de chargement de Web & SEO de 58%“, je t’avais dévoilé une astuce pour désactiver certains plugins sur certaines pages, en bidouillant son fichier functions.php. Cette solution fait bien le job pour un codeur qui maîtrise WP, mais si tu souhaites te simplifier la vie et avoir des résultats concrets, il existe un plugin de performance qui fait parfaitement le job, j’ai nommé : Perfmatters !
Combiné à un plugin de cache comme WP Rocket, Perfmatters va permettre d’optimiser au max ses temps de chargement.
Voici ma configuration de base sur Web & SEO :
Tu noteras que je n’ai pas activé certaines options, car elles sont déjà en place sur le plugin WP Rocket.
Perfmatters te permet également de configurer un CDN :
Le CDN est ce qui va te permettre d’améliorer la vitesse de chargement de ton site aux 4 coins du globe, comme ça tout le monde peut en profiter 😉
Pour ma part, j’utilise KeyCDN et j’en suis très satisfait. Je l’ai également mis en place sur mes meilleurs sites de niche pour des résultats optimaux.
Une autre rubrique te permettra de configurer Analytics :
Cet appel au script de Google Analytics est optimisé et te fera gagner un peu plus de temps de chargement.
Et enfin la configuration des extras :
Ici tu vas pouvoir faire plusieurs choses :
- Activer le gestionnaire de scripts (pour activer/désactiver les plugins où tu as besoin)
- DNS Prefetch : précharger des requêtes DNS
- Ajouter une icône vierge au cas où le navigateur ne réussit pas à appeler ton favicon
- Ajouter du code dans le footer ou le header
Petite parenthèse sur le DNS Prefetch, cette fonctionnalité va te permettre de charger plus rapidement tes ressources externes, comme par exemple :
//gstatic.com
//fonts.gstatic.com
//www.google.com
//ajax.googleapis.com
//www.google-analytics.com
//cdnjs.cloudflare.com
//s.w.org
Le gestionnaire de scripts Perfmatters
Pour chaque page de ton site, tu vas pouvoir sélectionner avec précision les plugins, les scripts et les styles qui seront activés ou non.
Par exemple, pour la page d’accueil de Web & SEO, je peux désactiver le plugin de recherche (Ivory Search) comme je n’affiche pas le menu d’en-tête, le plugin de deals Affiliate Coupons, le plugin de partages sociaux Monarch, le plugin de contact Contact Form 7, ainsi qu’un script de mon thème permettant de rendre le menu responsive.
Pour chacune de tes pages importantes, tu vas pouvoir personnaliser avec précision les scripts et les styles appelés pour maximiser tes temps de chargement. Pour nous simplifier la vie, Perfmatters a également mis en place une fonction permettant d’appliquer la désactivation d’un plugin/script sur l’ensemble du site / des pages / des articles, tout en ayant la possibilité de faire des exceptions (dont des regex simplifiées).
Maintenant que je t’ai présenté le plugin, venons-en aux résultats concrets ! Je vais te dévoiler ci-dessous les temps de chargement du site avant et après l’installation du plugin, pour la page d’accueil, mais aussi pour un article (et pas des moindres) : le guide ultime sur l’affiliation Amazon.
Pour que les résultats soient les plus exacts possibles, j’ai réalisé des tests à l’aide de 4 outils d’analyse : GTMetrix, PageSpeed, Pingdom et WebPageTest.
Page d’accueil
Avant Perfmatters
Après Perfmatters
Article
Avant Perfmatters
Après Perfmatters
Résultats
Temps de chargement pour la page d’accueil (avant)
Temps de chargement pour la page d’accueil (après)
Temps de chargement pour l’article (avant)
Temps de chargement pour l’article (après)
Pour te récapituler tous ces jolis screenshots et tableaux, voici le tableau comparatif des évolutions et des performances :
En somme, on a une très jolie progression pour la page d’accueil et pour toutes les pages qui nécessitent l’appel de moins de scripts et plugins. J’ai volontairement choisi un méga article pour ce test, qui nécessite l’utilisation de la plupart des plugins, pour voir si l’écart serait si flagrant avec la page d’accueil.
En tout cas, je trouve les résultats très positifs, sachant que j’avais déjà mis en place de nombreuses optimisations, avec :
- un thème rapide à charger : Maker Pro
- le meilleur plugin de cache : WPRocket
- l’utilisation d’un CDN performant : KeyCDN
- la suppression de Google Fonts
- la mise en place de plugins optimaux
- l’appel de scripts JS externes (CDN)
- l’activation du DNS Prefetching pour les services Google
- la désactivation de certains plugins
Perfmatters est un plugin premium qui se décline en 3 abonnements :
- 1 site : $24.95
- 3 sites : $54.95
- illimité : $124.95
Choisir une licence Perfmatters
Un site rapide impacte autant sur l’expérience utilisateur, la conversion et le référencement, alors l’investissement peut être vite rentabilisé ! Pour ma part, j’ai opté pour la licence illimité pour pouvoir le mettre en place sur une bonne vingtaine de sites… pour commencer 😉
D’ailleurs, j’ai un bon plan à te partager ! Tu peux bénéficier dès à présent d’une remise de -15% à vie sur la licence Perfmatters de ton choix :
Laisser un commentaire