En plus d’être une recommandation de Google en terme de SEO, le chargement rapide d’un site est également plus agréable pour les visiteurs. L’optimisation WordPress peut être faite de plusieurs façons, celle que j’ai choisie est de tester les performances avec GTMetrix pour améliorer mon blog avec l’extension WordPress W3 Total Cache.
Voyons les étapes qui m’ont permis d’améliorer les performances de ce blog.
GTMetrix ?
GTMetrix est un outil permettant de tester les performances d’un site ou d’un blog et qui préconise des améliorations le cas échéant.
Google propose également un outil, Google Page Speed, qui possède des critères très similaires, la principale différence étant que la performance du serveur est également mesurée. Et selon les moments, celle-ci varie, et le résultat s’en trouve changé.
J’ai donc préféré GTMetrix pour faciliter la comparaison entre chaque amélioration, mais en gardant toujours un oeil sur Google Page Speed.
Un autre avantage de GTMetrix : une page de préconisations est dédiée à l’optimisation WordPress. Nous y reviendrons.
Situation de départ
Le premier rapport sur GTMetrix indique un score de 40%.
Première tentative ‘Manuelle’
J’avais déjà entendu parler des outils de cache pour WordPress, notamment de leur lourdeur pour la mise à jour du contenu. Ainsi, j’ai décider d’essayer d’installer une extension pour minifier et combiner le CSS et le JavaScript : JS & CSS Optimizer.
La minification consiste en la suppression de tous les caractères superflux et la réduction des codes CSS et JavaScript pour réduire la taille des fichiers transférés.
Pour sa part, la combinaison est le fait de rassembler tous les fichiers CSS en un seul, et tous les fichiers JavaScript en un seul pour réduire le nombre de fichiers à télécharger. Cela réduit le nombre de requêtes entre le navigateur et le serveur Web et permet de gagner du temps.
Résultat : on passe de 40% à 57%.
A ce stade, je commençais à entrevoir l’étendue des modifications à apporter, et par la même occasion, à me renseigner sur les extensions d’optimisation WordPress tout compris, plutôt que d’installer un plugin pour chaque préconisation. J’ai donc désinstallé JS & CSS Optimizer en faveur d’une extension tout compris.
W3 Total Cache, extension pour l’optimisation WordPress
Après une recherche des extensions qui permettent l’optimisation des performances de WordPress, deux grands noms se sont dégagés : WP Super Cache et W3 Total Cache.
Ils semblaient tous les deux équivalents fonctionnellement après installation sur mon WordPress local de test.
J’ai finalement choisi W3 Total Cache, parce que la page de préconisations dédiée à WordPress de GTMetrix explique pas à pas comment configurer cette extension.
Je vous conseille de suivre ces instructions, hormis l’activation de tous les caches et optimisations en une fois. Pour éviter cela, voilà la liste des optimisations que j’ai activées, toutes utilisent les fonctionnalités natives du serveur Web (c’est-à-dire sans installation supplémentaire) et ne nécessitent pas de création d’un compte chez un fournisseur tiers (comme un CDN par exemple) :
- Page cache : les pages du site sont stockées dans des fichiers et plus générés à la demande
- Minify
- Object cache
- Browser cache : des dates d’expiration sont ajoutées pendant la communication entre le serveur Web et le navigateur pour éviter de recharger les images et les autres fichiers à chaque fois, et d’utiliser la version en cache quand c’est possible.
La méthode des optimisations ci-dessus est sur ‘Disk’. C’est le plus simple à mettre en oeuvre sans installation supplémentaire. Si vous voulez utiliser une autre méthode sans rien installer, vous pouvez vérifier quels modules sont disponibles dans le ‘Dashboard’, en cliquant sur ‘Compatibility check’.
Résultat : on passe de 40% à 67%
Activation du KeepAlive
Cette optimisation n’est possible que si vous avez la main sur le serveur qui héberge votre site, c’est-à-dire si vous êtes hébergé sur un serveur dédié et pas un serveur mutualisé.
D’ailleurs, sur la plupart des serveurs mutualisés, cette fonctionnalité est déjà activée.
Mais à quoi sert le KeepAlive ?
Par défaut, la connexion entre le navigateur Web et le serveur est ouverte puis fermée immédiatement après chaque récupération de fichier : HTML, image, CSS, JavaScript, … Cette ouverture/fermeture prend du temps.
Le KeepAlive permet d’ouvrir la connexion et de la conserver ouverte quelques secondes, le temps que toutes les requêtes successives nécessaires pour le chargement d’une page Web se fassent. Une fois ces quelques secondes d’inactivité passées, la connexion est fermée automatiquement par le serveur Web et peut être utilisée pour afficher une autre page Web.
Pour l’activer sur votre serveur dédié, si votre serveur Web est de type Apache, éditez le fichier httpd.conf avec votre éditeur favori, et changez ces lignes :
KeepAlive On MaxKeepAliveRequests 150 KeepAliveTimeout 5 |
Le but : activer le KeepAlive, faire en sorte que la session dure 5 secondes et que la session soit réinitialisée toutes les 150 requêtes (dans la même session).
Une fois la modification effectuée, il faut recharger la configuration d’Apache (ou le redémarrer, au choix) :
/etc/init.d/httpd reload
Comme vous l’aurez compris, cette fonctionnalité est activée pour tous les sites Web présents sur votre serveur.
Résultat : on passe de 67% à 86%
Optimisation des images
Pour l’optimisation des images, j’ai suivi la préconisation de GTMetrix en installant le plugin WP Smush.it. Smush.it est un service fourni par Yahoo, permettant d’optimiser la résolution des images pour l’affichage, et en supprimant les informations supplémentaires superflues pour ce genre d’utilisation, comme les données EXIF.
Une fois l’extension installée, toutes les images ajoutées seront optimisées automatiquement. D’ailleurs, une nouvelle colonne apparaît dans la librairie des médias, indiquant le gain.
Pour cela, dans la section des médias, cliquez sur le bouton ‘Bulk Smush.it’, confirmez que le temps de génération ne vous dérange pas et enfin constatez les améliorations apportées pour chaque version de l’image.
Résultat : on passe de 86% à 88%
Génération du sprite
Un des préceptes de l’optimisation du site est de regrouper toutes les icônes en une seule image, l’image sprite, qui sera découpée au moment de l’affichage par le CSS. L’avantage : avec 15 icônes, au lieu d’avoir 15 connexions avec le serveur Web pour les télécharger, une seule image sera récupérée.
Voici un exemple de sprite :
Le CSS pour afficher l’icône de Twitter :
.twitter { background-image: url("images/sprites.png"); background-position: 0 -304px; } |
Par conséquent, il nécessite la modification du CSS du thème, et même de certaines pages. Dans ce cas, avoir un thème enfant est plus qu’utile.
Voilà comment j’ai procédé.
Les images à transformer en sprites
Toutes les icônes décrites par GTMetrix ne peuvent peuvent pas être incluses dans le sprite. C’est le cas de la favicon qui ne peut pas être découpée par CSS, et en règle générale des petites images répétées pour créer un fond. Techniquement, ce sont les images utilisées dans un CSS avec un attribut repeat-x ou repeat-y.
Il faut donc faire une sélection des images à inclure, pour ne pas surcharger inutilement l’image qui sera finalement générée.
Préparation des icônes pour le générateur de sprite
Pour générer l’image et le CSS associé, j’ai utilisé un outil en ligne prenant en entrée un fichier zip contenant toutes les icônes.
Une fois les icônes sélectionnées, je vous conseille de les numéroter pour conserver l’ordre, et donc leur emplacement dans le CSS en cas d’ajout de nouvelles icônes. Par exemple, nommez votre icône twitter.png en 22_twitter.png. Pour la suite, une nouvelle icône pour Pinterest s’appellera 35_pinterest.png (si la dernière image de la série est 34). Sans cela, il faudra mettre à jour toutes les positions dans le CSS.
Un autre détail : il n’est pas possible de redimensionner les images provenant d’un sprite, il est donc nécessaire de les réduire à la taille d’affichage avant de les envoyer à l’outil de génération.
Par exemple, mon thème contient des icônes de réseaux sociaux avec une dimension de 26×26, et les affiche en 22×22. En plus, ce redimensionnement ne respecte pas les recommandations. J’ai donc redimensionné ces icônes en 22×22 pour conserver la même apparence.
Aussi, le générateur ajoute un espace après chaque icône sauf après la dernière. Ce qui implique que si le CSS ne contient pas no-repeat, la première icône est affichée juste en-dessous de la dernière. Pour éviter d’avoir à insérer des no-repeat sur chaque classe, j’ai ajouté une icône ‘inutile’ à la fin et ainsi généré automatiquement l’espace nécessaire. J’ai tout simplement dupliqué une des images que j’ai renommée en 99_inutile.png.
La génération
L’outil de génération de sprite et du CSS associé est disponible à cette adresse : http://fr.spritegen.website-performance.org/.
Le page de résultat fournit l’image sprite et le fichier CSS.
La modification du CSS
Récupérez les classes CSS qui concernent les icônes du sprite dans la feuille de style du thème parent (généralement dans style.css) pour par exemple les modifier ainsi :
.format-standard .format-icon { background: transparent url(images/format-standard.png) center center no-repeat; } |
devient :
.format-standard .format-icon { /* format-standard.png */ background-image: url("images/sprites.png"); background-position: 0 -904px; } |
Il s’agit ici de redéfinir l’image pour utiliser le sprite, et la position, c’est-à-dire celle indiquée par l’outil de génération de sprite. Je vous conseille de laisser en commentaire le nom de l’image d’origine, pour retrouver plus facilement la classe dans le CSS de l’outil de génération.
Dès lors, la classe parent est lue puis la partie intéressante est écrasée par ce qui est défini dans la classe enfant.
Insérez ces classes dans la feuille de style enfant, ou là où vous mettez votre code CSS habituellement.
Le résultat
Ici, le travail est conséquent et fastidieux, et le gain n’est pas énorme !
Résultat : on passe de 88% à 90%
Autres améliorations
Nouvelle optimisation des images
Malgré l’optimisation de Smush.it, deux images (dont le sprite) ne sont pas optimales au goût de GTMetrix. Je télécharge donc la version optimale proposée directement par GTMetrix, je remplace celles du blog, et le tour est joué.
Résultat : on passe de 90 à 92%
Désactivation des miniatures des articles phares de Jetpack
Pour afficher l’icône des articles phares, Jetpack rapatrie les images pour les redimensionner. Le résultat : les images sont gérées sur le serveur de Jetpack, sur lequel GTMetrix trouve un défaut de KeepAlive et une URL qui ne permet pas la mise en cache sur le navigateur.
J’ai donc simplement décidé de ne plus afficher la miniature.
Cette amélioration ne procure aucun gain.
Suppression de l’@import du thème enfant
Pour permettre aux thèmes enfants d’inclure facilement la feuille de style du thème parent, le codex WordPress préconise l’utilisation de la fonction @import. Mais, dans le cadre de l’optimisation WordPress, cette méthode apporte deux inconvénients :
- elle provoque une requête HTTP pour récupérer le fichier
- la feuille de style n’est pas déclarée auprès de WordPress, qui ne peut pas la minifier.
W3 Total Cache permet de gérer automatiquement les fichiers utilisés dans le cadre de @import. Pour cela, tout se passe dans la section CSS de la page Minify, en modifiant la valeur de l’option @import handling à process.
Le résultat : on passe de 92% à 93%
Suppression de la fonction de personnalisation du CSS de Jetpack
En utilisant la fonction de personnalisation du CSS de Jetpack, bien pratique, l’URL est de type http://monblog.fr/?css…
Là encore, la minification et la combinaison ne sont pas possibles.
Pour résoudre ce problème, j’ai déplacé le CSS personnalisé dans la feuille de style du thème enfant. Autant que tout soit au même endroit…
Pas de gain significatif ici.
Minification/combinaison des CSS et Javascript externes
Certaines extensions, ou même le thème, utilisent des librairies JavaScript externes, c’est-à-dire qui ne se trouvent pas sur votre serveur, et qui ne peuvent donc pas être minifiées/combinées.
Selon le serveur externe, GTMetrix retourne des préconisations sur le KeepAlive, la gestion du cache, la compression, … Autant de raisons pour rapatrier certains fichiers externes, mais automatiquement bien sûr.
Notez bien que si les fichiers sont externes, c’est surtout pour permettre à l’éditeur du script de le mettre à jour sans avoir à nous en préoccuper. Pour conserver cet avantage, W3 Total Cache va considérer ces scripts comme périmés toutes les 24 heures et ainsi se remettre à jour périodiquement.
Les scripts indiqués par GTMetrix peuvent être ajoutés dans la section Advanced de la page Minify :
Ils doivent être ajoutés et testés un à un, pour bien vérifier que tout fonctionne toujours.
Cet amélioration n’apporte pas de gain significatif sur l’indicateur de GTMetrix, mais améliore de 3% l’indicateur Yslow.
Résumé des optimisations
- Situation de départ : 40%
- Installation de W3 Total cache : 67%
- Activation du KeepAlive : 86%
- Optimisation des images : 88%
- Mise en place de sprites CSS : 90%
- Nouvelle optimisation des images : 92%
- Suppression de l’@import CSS du thème enfant : 93%
Et le reste ?
Le rapport entre le gain et le travail à effectuer pour les autres points d’améliorations, pour arriver à l’optimisation WordPress parfaite, ne me semble pas intéressant (du moins pour l’instant).
En effet, il faudrait par exemple que j’améliore les sélecteurs CSS du thème (plus d’une centaine), au risque de devoir refaire une partie du travail ou de perdre en compatibilité au moment d’une mise à jour de thème.
Le mot de la fin
Le résultat concerne la page d’accueil, et on peut considérer qu’il serait nécessaire de refaire le travail pour chaque page et article. Toutefois, ce qui est fait pour la page d’accueil est globalement valable pour le reste.
En revanche, pour ma part, je vais essayer de refaire le test après chaque publication d’article, pour vérifier d’abord que l’image est correctement optimisée.
Pour aller plus loin, il peut être intéressant de suivre les conseils décrits dans la partie installation de l’extension W3 Total Cache, notamment pour utiliser d’autres méthodes de cache que sur le disque (avec APC, Memcache, …).
En tout cas, cette première tentative est concluante, je vais optimiser mes autres sites WordPress.
Sur le même thème...
Trois méthodes pour personnaliser le code de WordPress
Configurer WordPress SEO by Yoast : les paramètres généraux
Encore de l'optimisation WordPress avec W3 total cache et GTMetrix
L'optimisation WordPress simplifiée avec WP Rocket
Optimisation de blog avec WP Rocket et GTMetrix
Bonne année 2014 !
Suite du tutorial WordPress SEO : optimiser les articles
Gagnez en performances avec de nouveaux boutons de partage pour WordPress
Un bon résumé qui va permettre à beaucoup de personnes d’améliorer les performances de leur site WordPress. Par contre, il faut avoir les capacités en CSS que tout le monde n’a pas forcément.
Pour un système de cache vraiment efficace, je vous recommande un script que j’ai développé il y a peu de temps et qui permet d’obtenir de meilleurs résultats que W3TC ou WP Super Cache au niveau du cache statique des pages. Je vous laisse voir l’article qui présente la chose : Cache WordPress : Optimiser les performances d’un site
Aussi, je vous conseille de regarder du côté du LazyLoad, encore une technique pour réduire le temps de chargement d’un site 😉
Bonjour Jonathan,
J’avais regardé la vidéo sur laquelle tu présentes ta méthode, d’ailleurs je l’ai gardée de côté pour la mettre en oeuvre quand mon blog sera en proie (?) à de trop nombreuses visites et/ou quand je rencontrerai les problèmes de cache dont tu parles. Tes explications sont très claires.
Pour l’instant, j’ai choisi une solution facile à mettre en oeuvre pour mes quelques sites et les quelques pages/articles qu’ils présentent.
En tout cas, je suis fier que tu aies commenté sur mon modeste blog 🙂
Je vais me pencher sur LazyLoad.
David
Bonsoir,
Cela fait 1 heure que je suis sur ton tuto, pendant qu’il modifie mes images avec smushit j’en profite pour te poser une question : je vois que la modif du keepalive a l’air efficace mais je ne sais pas où trouver le fichier httpd.conf je suis hebergée chez 1&1.
J’ai essayé le pluging js and css optimizer c’est pire mon thème est déformé.
Tes infos sont claires, ça doit être moi qui suis nul.
je continue.
@mitié
Bonsoir Sandrine,
Le fichier httpd.conf se trouve souvent dans /etc/httpd/conf/httpd.conf. Selon ton système, tu peux utiliser la commande locate pour trouver son chemin. Par exemple :
locate httpd.conf
A propos de la minification, certains CSS et scripts sont sensibles, et il faut jouer avec les options pour trouver la meilleure configuration possible.
Amicalement,
David
Bonjour,
Merci pour ta réponse, tu vas avoir du temps de visite sur ta page j’y suis tout le temps.Je vais avoir l’air bête mais comment je fais et ou je vais pour trouver le chemin du fichier httpd.conf ?
Depuis hier soir j’essaie smush.it et j’ai plein de « no saving » je ne sais pas si c’est normal.
je continue et encore merci de m’avoir répondu.
Bonjour,
Mais tu es la bienvenue, tu peux rester autant de temps que tu le souhaites 😉
Si tu héberges ton site sur un serveur mutualisé, tu ne pourras pas avoir accès à ce fichier.
Chez 1&1, ils appellent ça hébergement Web. Aussi, la plupart des hébergements mutualisés activent le keep alive automatiquement.
Par contre, je viens de regarder le résultat de ton site (celui du domaine de ton adresse mail) sur GTMetrix, et tu as déjà le score maximum pour le Keep Alive.
Pour Smush.It, si tu lances l’optimisation plus d’une fois, No saving est affiché les fois suivantes. Ou tes images sont déjà bien optimisées.
David
Re,
Donc je n’ai pas besoin de toucher au fichier httpd.conf, je ne sais pas si je suis en mutualisé j’ai pris un pack business 1&1. Pour pas mourir idiote comment je fais pour éditer ce fichier et le modifier ? Vu que je suis pas la pour du backlink je met pas le lien vers mon site, il s’agit bien de blancsourire.fr
Pour le cache j’ai pris le wp-cache machine de Jonathan qui a commenté sur ton site ça m’évite d’installer w3 total cache.
T’as vu l’état de mon site dans gt métrix ça me désole, mais bon avec du temps et de l’huile de coude comme tu dis je vais peut-etre y arriver, c’est surtout le css qui me prend la tête.
En effet, tu n’as pas besoin de toucher au fichier httpd.conf, tu es en mutualisé et tu ne peux pas le modifier, il est dans un répertoire accessible seulement aux administrateurs de chez 1&1.
Avec un serveur dédié (que tu administres toi même, ce qui nécessite une attention particulière), il faut passer par SSH, avec une application comme putty par exemple. Là tu as accès aux commandes Linux, et tu peux modifier la configuration avec un éditeur de texte.
Tu as bien fait pour wp-cache-machine, c’est vraiment excellent. Perso, j’ai préféré aller vers la facilité, qui a quand même quelques contraintes.
Je pense migrer un jour vers cette solution également, ou peut-être mélanger les deux. Je ferai certainement un article à ce moment là.
En tout cas, persévère, tu vas y arriver, c’est sûr. Je ne sais pas si c’est ton cas, mais quand je corrigeais les points, je trouvais un côté ludique à l’optimisation.
J’ai une astuce pour les deux critères concernant ‘content-type’ si tu veux, et si tu utilises un thème enfant.
Aussi, GTMetrix indique que la compression n’est pas activée, alors qu’il me semblait que c’était le cas avec wp-cache-machine. Je te conseille de te pencher sur ce point, ainsi que sur le cache côté navigateur, qui améliorent grandement le score.
David
Oui, je trouve également que ça a un coté ludique ,je trouve ça attrayant de bosser la dessus le pb c’est que j’occupe toute les fonctions de créatrice de mode, blanchiment dentaire,bijoux de peau webmaster etc.. et j’ai des produits à entrer sur mon site rapidement.
je n’ai pas de thème enfant pas eu le temps d’en créer un pour les astuces je prends tout ce qui est gratuit ou pas cher si j’avais les moyen je me paierais un pro et un beau de préférence 🙂
Crois tu que mettre son site sur un serveur dédier améliore réellement les performances?
C’est qui les meilleurs hébergeurs?
C’est comme toujours, le problème, c’est le temps…
Je te conseille de faire l’optimisation selon les recommandations de GTMetrix au fur et à mesure.
En l’état, ton site est déjà super réactif grâce au cache-machine, et ça c’est déjà très bien pour tes visiteurs, et suffisant pour Google (même s’il faudra améliorer, comme lui, contrairement à tes visiteurs, regarde comment c’est fait).
Mettre son site sur un serveur dédié améliore les performances, mais demande pas mal de connaissances et… de temps. Aussi, il faut penser à tout, comme par exemple les sauvegardes et comment remonter en cas de panne.
Donc je te le conseille, mais quand tu auras recruté ton beau spécialiste du Web :p
A propos des hébergeurs, perso j’aime bien OVH, qui propose de bons services à des prix très abordables.
Mais 1&1 a l’air bien.
David
Merci pour ton accueil c’est sympa de trouver de l’aide et passe un excellent weekend.
je ne sais plus si je me suis abonnées à tes articles, je coche on verra bien.
De toute façon ton article est dans mes favoris je vais certainement y revenir je n’ai pas terminé.
Longue vie à ton blog.
Merci 😀
Bon week-end à toi aussi, et n’hésite pas 🙂
Bonjour, sympa le site, fonctionne parfaitement le temps d’ affichage est correct 0,900s. Si vous utilisez firefox pour navigateur un module complementaire est dispo pour l’optimiser. @ +++
Fasterfox Lite: Performance and network tweaks for Firefox, without the Enhanced Prefetching. This is a fork from the original « Fasterfox ».
Noté 4 sur 5 étoiles (218)
102 942 utilisateurs
Bonjour Éric, merci pour l’astuce 🙂
David
Bonjour, dans Mozilla Firefox, on accéder au paramètres du navigateur en entrant dans la barre URL, « about:config » ! faire attention ici est la configuration du navigateur. J’ ai fait des modifies avec des infos sur les optimisations pas trop top parfois. Vaut mieux en rester à installer certain module et les faire des tests, c’ est plus sur.
Sur votre blog dans footer vous pouvez supprimer le theme utilisé, facile a trouver, editer le footer.php. @+++
Bonjour Eric,
Je conserve le nom du thème pour remercier (un peu) l’auteur, comme je n’ai pas acheté la version premium, je trouve que c’est un minimum. En plus, cette mention ne gêne en rien les visiteurs.
David
Bonjour,
je me suis plongé ce soir sur l’optimisation de la vitesse de mon blog qui n’était pas fameuse. Je suis arrivé à un résultat plutôt intéressant, mais en installant W3 Total Cache, le slider de ma page d’accueil ne fonctionnait plus.
En cherchant sur le web, j’ai vu qu’il fallait décoché l’option minify… sauf que le slider ne fonctionnait toujours pas… et même après avoir désactivé le plugin W3TC.
J’ai alors supprimé tous les fichiers en rapport… pas mieux…
J’ai remis la plupart des fichiers de mon WordPress issus d’une sauvegarde récente… Toujours pas…
Je suis arrivé sur ce blog après plusieurs recherches. Vu que vous êtes à maîtriser, je me permets de vous demander si vous avez une idée pour remettre mon blog d’aplomb.
Concrêtement, le slider n’affiche plus les images. Je peux désactiver celui-ci, mais du coup mon design est beaucoup moins sympa.
Merci d’avance pour vos pistes.
Bonjour,
A ce que je vois, vous avez réussi à réparer le slider.
Je pense que le problème qui persistait après la désactivation de la minification, de W3 Total Cache ou la réinstallation était un problème de cache côté navigateur. Avez-vous pu vérifier sur un autre navigateur ?
N’abandonnez pas l’optimisation, ça vaut le coup 🙂
David
Bonjour, merci pour votre réponse.
J’ai en effet trouvé la solution, toute simple, après mettre tiré les cheveux pendant des heures. Un plugin foutait le bordel.
Du coup W3TC est en place avec un htaccess optimisé et cloudflare.
Je suis passé à 90% pour GPS et 92% pour Yslow.
Donc je suis plutôt content du résultat.
Merci encore 😉
Je n’ai pas fait grand chose, bien vu pour le plugin.
Jolie optimisation, je suis content que ça fonctionne 🙂
David
Bonjour,
j’ai le même souci que vous au niveau du slider, pouvez-vous me dire quel plugin empêchait le slider de s’afficher svp?
Bonjour Azerty,
Bonne question 🙂
David
Article très utile qui m’a beaucoup servit! Merci à toi! 😀
Bonjour Katraz,
Y a pas de quoi 🙂
David
Bonjour,
J’ai déjà eu de tels scores, voire, plus d’abord sur du mutualisé, ensuite aujourd’hui sur du VPS.Wordpress nonoptimisé peut devenir un calvaire aussi bien pour le propriétaire que les lecteurs. Il faut concilier la sécurité et la performance.c’est ce que j’ai essayé dfe faire après de longs teste et des nuits blanches.
ce n’est pas un coup d epub, c’est un blog « local », sans pub/adsense, c’est juste pour informations :
http://chatenay-infos.fr/changement-migration-hebergement/
Il est possible de passer le page load time de 4.45 @ 1.50 mais je laisse ainsi pour tester la stabilité comme je l’écris dans mon articles.
Agréable ton blog 😉
@++
Bonjour Chatenaisien,
C’est vrai que les derniers pourcents sont ceux qui consomment le plus de temps en optimisation.
David
salut David !
Depuis que je suis sur un serveur, les attaques pleuvent, m’obligeant à concéder un peu de sécurité et revoir ts mes plugins. c’est rageant.
j’utilise bad behavior et WP better security, qui, bien configuré empêchent l’écriture htacess et wp-config et quand on sait que W3 total cache en dépent !
bref on peut avoir 99 % aux 2 test et avoir quelques fois des lags, ça dépend.
Le pire étant les cookies statics, les images scaled (bon ça C fait) et les jsquery ,et consorts, c’est assez dur à optimiser.
Si quelqu’un sait comment monter un static domaine pour y mettre ses cookies, je suis toute ouiiiieee.
Sinon j’ai trouvé un plugin : asynchrone JS qui semble bien marcher.la minification par W3 Total cache marche quand elle veut…
Bonjour Chatenaisien,
Pour la sécurité, tu as jeté un oeil sur le blog de BoiteAWeb ? C’est une mine d’informations en matière de sécurité, sans (trop) pénaliser les performances de WordPress. Tu peux y trouver par exemple une manière de changer l’adresse de la page de connexion.
Tu peux aussi passer l’interface d’administration en HTTPS, j’avais écrit un article à ce propos.
Je note pour asynchrone JS. C’est vrai que W3 Total Cache peut être une plaie pour ordonner les chargements et faire en sorte que tout fonctionne toujours.
Enfin, quel est ton problème avec les cookies statiques ?
David
Salut,
j’ai supprimé W3 total cache (trop lourd, trop dingue et minification buggue chez moi : donne quelques fois des pages blanches), et mon site a retrouvé la santé ! j’ai optimisé avec des bouts de codes testés ici et là.W3 t cache est tres trop lourd a configurer. Et depuis WP Better security fonctionne sans soucis. Il me reste des pages à optimiser. Le problème avec les cookies statiques :
There are 18 components that are not cookie-free > visible sur gtmetrix. Il faudrait créer un subdomaine static, bof pas trop envie car après problèmes d’images ect.
Sinon je crois avoir trouvé une bonne soluce pour tous les soucis de JS et CSS ( même si optimisée avec Clean CSS).
essaie Dom Monster! sur ta page tu vas etre étonné ! 😉
Bonjour Chatenaisien,
W3 Total Cache, c’est un peu la grosse artillerie, et pour le faire fonctionner, il faut passer du temps en réglages et en test.
Et quelques fois, même avec tout ça, ça ne passe pas. La preuve 😉
Je vais essayer DOM Monster.
David
Très bon article, j’ai quasiment fait la même chose sur mon site avant de tomber sur ton article, ca résume bien la méthode.
j’utilise WP Super Cache
Bonjour Sam,
Quasiment, oui… Je te conseille vivement d’optimiser les images, avec EWWW Image Optimizer (ou WP Smush.it), tu vas gagner beaucoup encore.
David
Aujourd’hui j’utilise WP SUPER CACHE pour wordpress je trouve que c’est le meilleur plugin de cache du moment et gratuit.
je vais tester smush it pour voir je ne connaissais pas.
A+
Fabien, consultant référencement
Bonjour Fabien,
Pour répondre à ton argumentation sur WP Super Cache : ok.
Si tu essaies des plugins pour optimiser les images, je te conseille EWWW Image Optimizer.
David
Bonjour,
D’abords merci pour le tuto 🙂
Je me suis concentré sur le plugin W3 total cache dans l’optique principal non pas d’augmenter ma note mais mon temps d’accès. En fait c’est sur site (sur un mutu) avec un nbr important de plugins (BP …). Ceci ralentissait beaucoup le site, notamment la page d’accueil qui se veut attractive, mais qui comporte 2 images de plus de 600 ko !!
Après activation sur cette page, je passe de plus de 6s à 2 ou 3s. Super 🙂
Néanmoins j’ai une page avec un plugin de shortcode (qui utilises les CPT) pour faire une faq. Rien ne s’affiche. Je n’arrête pas du supprimer des paramètres depuis 1 semaine de test. Je viens de le désactiver car à force de modif, je n’ai plus d’affichage sur la page d’accueil, ni la faq.
Ce qui se passait c’est qu’après avoir vidé le cache après la modif de ces paramètres, cela fonctionnait bien pendant qq heures ou 1 journée. Puis à nouveau je n’ai à nouveau plus d’affichage du contenu (même en vidant le cache de mon navigateur)
Je suis désemparé. Des pistes ?
a+
Bonjour Hervé,
Très bonne question.
Quel était le contenu qui ne s’affichait pas ? La page ou la FAQ ?
David
Bonjour David,
J’ai fini par désactiver le plugin, mais du coup cela fait exploser le temps d’accès.
Je viens de le réactiver. la page c’est http://www.bienetre.info/foire-aux-questions/
A mon avis d’ici demain, tu devrais constater que la page s’affiche bien mais qu’il n’y a aucun contenu central (correspondant qu shortcode qui met en page la faq)
Des fois que tu ais une piste !!
a+
Bonjour Hervé,
J’ai regardé, et j’ai eu la chance (?) de voir la version avec le contenu et la version sans.
Je n’ai pas bien compris le mode de fonctionnement du plugin de FAQ que tu utilises (Intense WordPress plugin si j’ai bien compris).
J’ai l’impression qu’une requête est faîte pour récupérer la page, et une autre pour récupérer les entrées de la FAQ, par Ajax, mais que cette deuxième requête passe à la trappe (la raison m’échappe).
Ainsi, je te conseille :
– de contacter le support de l’extension pour avoir plus d’information
– si payer pour un plugin ne te dérange pas, d’installer WP Rocket, tu éviteras très certainement ce genre de problème
– d’installer EWWW Image Optimizer (ou WP Smush.it) pour optimiser les images de la page d’accueil, c’est vrai qu’elles sont volumineuses
Tiens moi au courant si tu veux bien 🙂
David