Les bonnes pratiques pour optimiser la vitesse de son site WordPress ? [Episode n°5]

Les bonnes pratiques pour optimiser la vitesse de son site WordPress ? [Episode n°5]

Bienvenue dans ce 5ème épisode du podcast « Mon Premier Site Web », le podcast qui vous aide à créer votre site web.

Aujourd’hui, c’est l’optimisation de la vitesse de votre site qui est à l’honneur. Jonathan Buttigieg, qui est entre autres derrière le blog GeekPress.fr, est un spécialiste assez pointu de WordPress. Il nous livre ses conseils sans avarice, n’hésitant pas à être précis pour bien vous expliquer comment ça marche.

En bon passionné qui se respecte, Jonathan vous répond avec force et détails dans cet épisode assez technique mais très enrichissant. Voici les points que nous avons abordés, mais pas forcément dans l’ordre.

Au menu de cet épisode sur l’optimisation de la vitesse

  • Quel outil pour mesurer la vitesse de son site ? Comment interpréter ces résultats ?
  • La checklist de bonnes pratiques à garder en tête pour avoir un site rapide (très détaillée !)
  • L’influence des plugins sur la vitesse d’un site
  • L’importance du choix du serveur (hébergement web) dans la vitesse
  • Question de Christophe : Quels sont les plugins les plus utilisés les plus gourmands en « temps de chargement »?
  • Question de Lionel : WordPress est super mais il fait trop de requêtes sql, existerait-il une astuce pour les limiter ?
  • Question de Jérémie : Est-ce que l’attribut source des images (en HTML) peut être optimisé pour améliorer la rapidité d’affichage ? (on m’a dit qu’indiquer le chemin en relatif avait un effet positif)
  • Question de Aurore : A partir de quel moment doit-on considérer comme nécessaire d’installer un système de cache sur un site WordPress ? Quels plugins recommandez-vous et trouve-t-on de bons tutoriels pour les configurer correctement ?

Les outils cités dans le podcast

Pour mesurer la vitesse

  • Temps de chargement à partir de l’Europe : PingDomTools
  • Interface plus technique : WebPageTest
  • Donne une note : GTMEtrix (le mieux), YSlow et PageSpeed
  • Français et ludique : Dareboost

Checklist de bonnes pratiques

1/ Utiliser un système de cache : W3 Total Cache, WP Super Cache (gratuits) ou WP-Rocket (payant)

2/ Optimiser les images (65% du poids de la page)

  • Smush-it ne suffit pas, le faire avec PhotoShop ou Gimp
  • Choisir le mode progressif
  • Pour compresser ses photos en masse : ImageOptim (Mac), Faststone.org ou FILEminimizer Pictures (PC)
  • Utiliser les images dans la taille la plus appropriée
  • Choisir le bon format d’image (PNG ou JPEG)

3/ Eradiquer les erreurs 404 dans les ressources de la page

4/ mignifier et concaténer les fichiers CSS : WP-Minify ou intégré dans les plugins de cache

5/ Utiliser un système de chargement différé des images : LazyLoad (BG-Lazyload _permet de charger en différé les iframes aussi_, Lazyload ou la version LazyLoad de WP-Rocket)

REMARQUE : un article qui compare Faststone et vous le présente en détails : cliquez ici

Conseils divers

  • Le plugin P3 Profiler permet de détecter les plugins les plus gourmands (ça ne veut pas dire qu’il faut forcément les désinstaller)
  • Utiliser des sprites CSS
  • Mettre les fichiers CSS en haut du header
  • Mettre les fichiers JS en bas du footer
  • Ne jamais utiliser une balise ou un attribut « style »
  • Utiliser la compression GZIP (htaccess)
  • Utiliser un CDN si trafic venant de plusieurs pays

Transcription partielle de l’épisode

Introduction du podcast

Bonjour Jonathan, merci d’être avec nous pour ce 5ème épisode. Je pense que la plupart des auditeurs qui nous écoutent te connaissent déjà, ou au moins ton blog. Mais un petit rappel ne fait jamais de mal. Donc, peux-tu te présenter à nos auditeurs ?

Ecoutez la réponse dans le podcast

Rentrons dans le vif du sujet.

La vitesse d’un site, c’est un point auquel on ne pense pas forcément quand on souhaite améliorer son site, pourtant c’est un critère très important. En moyenne un visiteur décide en 5 secondes s’il va rester sur un site ou plutôt aller voir ailleurs.

Avant de passer aux questions des lecteurs, j’ai deux questions pour toi Jonathan.

Mesurer la vitesse d’un site WordPress

Les auditeurs ne savent peut-être pas quelle est la vitesse de leur site, il existe plusieurs outils pour la mesurer, est-ce qu’il y en a un que tu conseillerais plutôt qu’un autre ? (et pourquoi)

Ecoutez la réponse dans le podcast

Bonnes pratiques pour optimiser la vitesse de son site

De façon très concrète, est-ce que tu peux nous donner une liste de bonnes pratiques à toujours garder en tête pour conserver un site rapide ?

Ecoutez la réponse dans le podcast

Questions des lecteurs

Question de Christophe : Quels sont les plugins les plus utilisés les plus gourmand en « temps de chargement »?

Ecoutez la réponse dans le podcast

Question de Lionel : WordPress est super mais il fait trop de requêtes sql, existerait-il une astuce pour les limiter ?

Ecoutez la réponse dans le podcast

Question de Jérémie : Est-ce que l’attribut source des images (en HTML) peut être optimisé pour améliorer la rapidité d’affichage ? (on m’a dit qu’indiquer le chemin en relatif avait un effet positif)

Ecoutez la réponse dans le podcast

Question de Aurore : A partir de quel moment doit-on considérer comme nécessaire d’installer un système de cache sur un site WordPress ? Quels plugins recommandez-vous et trouve-t-on de bons tutoriels pour les configurer correctement ?

Ecoutez la réponse dans le podcast

podcast site web, podcast sur l’optimisation de la performance, rapidité d’un site, site wordpress rapide, vitesse d’un site

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

25 commentaires

  1. Tout d’abord merci pour les informations que vous partagez avec les poditeurs ! J’ai par contre deux petites choses à proposer. Niveau son, c’est un peu dommage mais il arrive que le son sature ou bien à l’inverse, devienne inaudible. On s’y perd un peu, surtout lorsque cela tombe sur le nom de plugons que l’on ne connait pas forcément. Je sais qu’il est parfois difficile de gérer la qualité du son de l’invité, surtout si l’on passe par Skype ou par Mumble pour faire les enregistrements.
    Autre petite demande… serait-il possible de retrouver le nom des plugins dans le billet de l’épisode ? J’avoue que je cherche encore certains noms de plugins. Une galère lorsque l’on n’a pas l’orthographe exacte.

    Sinon, encore merci pour les astuces et autres ! Bonne continuation !

    Répondre
    • Bonjour Irslo,

      Merci pour ton retour, je vais mettre les noms des plugins sous la vidéo le plus vite possible. Je manque un peu de temps…
      Pour le son, j’ai eu une galère du fait que je connais mal le nouveau matériel que je viens d’acheter. Ca ira mieux au prochain !

      Bonne continuation à toi aussi !

      Répondre
  2. bonjour
    dommage qu’il n’y ai pas des lien vers les site qui sont evoqué pour tester la rapider j’ai chercher bigdumbtool, j’ai pas trouver

    cdmt

    Répondre
    • Bonsoir Fabien,

      Oui, je voulais les mettre mais je n’ai pas eu le temps car des soucis techniques dans le montage m’ont fait perdre 3 heures… dès que je peux, je les mets ! Désolée pour l’inconfort…

      Répondre
  3. Ouais c’est n’importe quoi ce podcast on comprend pas le nom des Plugins, on se moque de qui?!……..
    Non je déconne ! bravo MarieEve, juste pour te mettre la pression 😉
    Sinon super interview et pour le nom des plugins…bah on comprend rien, mais alors que dalle. c’est ça les codeurs ils sont dans leur monde..
    A bientot

    Répondre
    • Tu rigoles, mais ça a bien marché quand j’ai lu ton commentaire, mon sang n’a fait qu’un tour !

      Dès que je peux, je les mets en ligne, mais là je suis complètement full-buzi-okupaïe…milles excuses !

      Répondre
    • Ca y’est, j’ai décrypté le code 😉 Les outils sont notés sous le podcast !

      Répondre
  4. Genial ce podcast!

    Merci Marie-Eve et Jonathan!

    J’attends avec impatience le podcast dédié au cache,

    D’ici la, excellente semaine a tous!

    Répondre
  5. Avis à tous les podcasteurs : les outils mentionnés dans l’épisode pour améliorer la vitesse de son site sont à présent notés sous le lecteur audio. Je n’ai pas eu le temps de chercher toutes les urls, j’espère que vous me pardonnerez :)

    Répondre
  6. Bonjour Marie-Eve et Jonathan,
    J’ai enfin trouvé le temps d’écouter le podcast 😉
    Pour revenir sur ma question au sujet du chemin des images, l’ami qui m’en avait parlé m’avait dit qu’il y avait une façon de coder le src qui permettait de ne pas faire appel à une autre page internet (celle qui contient l’image en question), en allant prendre directement l’image sur le serveur…
    Je me contente de rapporter ses propos sans vraiment les comprendre, d’où la raison de ma question…
    Mais déjà tous les autres conseils à appliquer devraient accélérer mon site ^^
    Bonne idée de faire un podcast spécial sur le système de cache, car effectivement, ça me semble difficile et me rebute…
    Merci pour toutes ces infos à tous les 2,
    A bientôt,
    Jérémie

    Répondre
    • Coucou Jérémie,

      Je pense savoir à quoi ton ami faisait allusion. En fait, quand tu insères une image dans wp, tu as le choix de la lier à « Fichier média » ou « Page du fichier attaché ». De cette façon, quand on clique sur l’image, on arrive sur cette image en taille réelle (pratique pour les très grandes images). Et en effet, si tu choisis « Page du fichier attaché », tu charges un template de wp et donc c’est plus lourd (et lent) que « Fichier média » qui affiche l’image présente directement sur le serveur (sans template)…et donc c’est plus rapide.

      Ca semble coller à ce que ton ami t’a dit, non ? Sauf que…ce n’est pas un attribut « src » pour le coup, mais « href ».

      A bientôt bonne soirée :)

      Répondre
      • Salut Marie-Eve,
        Merci pour ta réponse ! Oui, je pense qu’il devait s’agir de ce que tu évoques, je comprends mieux ses paroles et c’est bon à savoir pour la rapidité du site 😉

  7. Pour ma part, je trouve que le meilleur moyen d’optimiser la vitesse de chargement d’un WordPress est de passer un coup de GTMetrix et de suivre les conseils qu’ils fournissent, sans oublier les Plug In primordiaux tels que WP SuperCache !

    Répondre
  8. Bonjour Marie-Eve et Jonathan,
    Je reviens car une petite chose que vous avez dites a retenu mon attention : qu’il fallait éviter les balises contenant l’attribut style= »exemple » et préférer styler les éléments via la feuille CSS.
    Par exemple, ça veut dire que dans l’éditeur d’articles et de pages de wordpress, il vaut mieux éviter les fonctions pour justifier ou aligner le texte ?

    En fait, tous les de tous mes articles et pages sont de la forme
    Si j’ai bien compris, ça accélèrerait légèrement mon site si je supprimais toutes ces attributs et rajoutais plutôt dans ma feuille CSS un truc comme :
    .entry-content p {text-align:justify;}

    Jérémie

    Répondre
    • Bonjour Jérémie,

      Oui tu as bien compris, c’est exactement ça. L’éditeur wysiwyg ne doit être utilisé qu’avec parcimonie, et le mieux est plutôt de le faire à la main en passant par des classes.

      PS: on ne justifie pas les textes sur le web car la lecture à l’écran est facilitée par un texte non justifié. Cette mise en page est appropriée pour l’imprimerie.

      Répondre
      • J’ai enlevé la justification dans mon éditeur sur un article et modifié la feuille CSS, mais au début ça ne marchait pas : il fallait en fait rajouter !important juste après justify. Sans doute TwentyTwelve est-il paramétré pour empêcher la justification.
        Je m’attaquerai bientôt aux images avec des classes.
        Merci pour ton aide, chaque milliseconde de chargement est importante 😉

      • C’est à cause des règles de la cascade des CSS. 😉

  9. Très bon récapitulatif ! Il est vrai que la vitesse d’un blog est primordiale si l’on souhaite que les visiteurs restent longtemps.

    Répondre
  10. Bonsoir,
    Je reviens (encore) avec une question pour Jonathan : sur la page de présentation de Rocket Lazy Load, il est marqué que la compatibilité n’est testée que jusqu’à WP 3.8.3 : http://wordpress.org/plugins/rocket-lazy-load/
    Est-ce que ce n’est qu’une formalité ou bien y a-t-il un risque de dysfonctionnement ou mauvais affichage avec un thème Twenty Twelve (je me doute que certains thèmes sont moins sujets que d’autres à des bugs) ?
    Et je voudrais aussi l’installer sur un autre site avec Twenty Twelve et WooCommerce.
    Merci
    Jérémie

    Répondre
    • Bonjour Jérémie,

      Je pense que pour la compat’, c’est une formalité. D’ailleurs je l’utilise ici avec la dernière version de WP sans problème.

      Par contre, pour woocommerce, je ne sais pas si y’a une contre-indication…à priori non.

      Répondre
      • Merci ! Je vais donc l’activer. A bientôt !

    • Bonjour Jérémie,

      Le plugin Rocket LazyLoad n’a pas eu de mise à jour depuis le début de l’année et à l’époque, la version 3.9 n’était pas encore sortie.

      C’est pour cela qu’au niveau de la compatibilité il est marqué 3.8.3, mais cela ne veut pas dire qu’il n’est pas compatible avec la 3.9

      Répondre
      • Ok merci de la précision Jonathan. Je l’ai de toute façon installé sur mes 2 sites et ça fonctionne très bien :-) Ma note dans PageSpeed de Google a légèrement augmenté suite à cela.
        A bientôt,
        Jérémie

  11. Salut Marie-Eve,

    Toujours prêt à suivre tes conseils, je me suis fais un petit W.E « applique les conseils du Podcast N#5  » soit Comment améliorer la vitesse de son site.
    Parce que pourquoi essayer de référencer son site, je paie des mecs pour ça, si c’est pour avoir une vitesse de changement pas terrible?
    Et donc je me suis fait un W.E , « je retire mes 404 de mon site » que mon copain Gtmetrix a détecté.
    Donc je les isolent-les erreurs- avec Google Tools , je les mets dans le Robot.txt de Wp et là quand je re scanne Gtmetrix….pas de différence!
    Com d’hab!
    Mais ma question est plus générale, hormis ton E-formation, c’est comment qu’on fait quand on y presque, mais pas tout à fait, pour résoudre un problème?
    Parce que les mecs en galère il doit y en avoir quelques uns sur la Toile?
    Voila à bientôt.
    Alexandre (l’ami du Chinois en vacances avec les sous de la Conference Solopreneur – Solopreneur ça veut dire je suis le seul à prendre?)

    Répondre

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint