Qui n’a jamais poireauté devant son écran en attendant qu’une page se charge ? Vous connaissez ce long moment de solitude que l’on éprouve pendant que son navigateur mouline… En tant que créateur de site, vous ne voulez pas que…
Savez-vous que la vitesse de chargement des sites internet a un impact sur le référencement ?
Et oui, c’est un des éléments pris en compte par les moteurs de recherche pour classer les différents résultats. Alors certes, ce n’est pas le critère de classement principal, mais je pense qu’il est bon d’exploiter tous les leviers pour faire les yeux doux à notre ami Google.
N’oublions pas également qu’améliorer la vitesse de chargement de votre site fournira une meilleure expérience utilisateur à vos visiteurs.
Si vous vendez quelque chose via votre site, un chargement plus rapide de vos pages impactera également sur vos ventes. Par exemple chez Amazon, un dixième de seconde de gagné sur le chargement de leurs pages équivaut à 1% de chiffre d’affaire en plus !
Incroyable n’est ce pas ?
Ok, ni vous ni moi ne sommes Amazon mais ne vous est-il pas arrivé de perdre patience lors du chargement d’une page ?
Suite au passage de WP Themes Pro sous Thesis, j’ai voulu améliorer la vitesse de chargement du blog. J’avoue ne pas avoir été un très bon élève…
Optimisez la vitesse de chargement de votre thème WordPress
Après avoir fait pas mal de recherches sur la question, j’ai décidé de poser quelques questions à Jonathan de GeekPress concernant l’optimisation des thèmes WordPress.
Voici la première interview vidéo de WP Themes Pro* (soyez indulgent, c’est une première :))
* : WP Themes Pro est l’ancien nom de WPMarmite.
Points clés abordés dans la vidéo
Revenons sur les différents points d’optimisation dont nous avons parlé avec Jonathan. Vous pourrez trouver ici différentes techniques et outils pour faire en sorte que votre site se charge plus rapidement.
Mesurer la vitesse de chargement – 6:45
Optimisation des images – 8:23
- Compressez vos images au maximum via l’export pour le web dans Photoshop.
- ImageOptim (mac seulement)
- TinyPNG
- Image Alpha (mac seulement)
- CodeKit (mac seulement)
Optimiser le code de son thème – 13:04
- Créer des sprites CSS (combiner plusieurs images en une pour minimiser le nombre de requêtes). Voir SpriteMe.org pour vous aider à générer des sprites.
- Utiliser qu’un seul fichier CSS (dans la mesure du possible) – Utilisez le plugin WP Minify
- Charger le code CSS en haut du header et le code JS avant la balise
</body> - Minifier le code HTML, CSS et JS
Apprenez le CSS une bonne fois pour toutes
Créez des sites au rendu impeccable sans y passer des heures avec CSS Express.
Installer un plugin de cache – 18:30
Note : Testez pour voir quel plugin fonctionnera le mieux pour vous, ne les installez pas tous en même temps !
Vous pouvez aussi…
Après l’enregistrement, nous nous sommes rendu compte que nous avons oublié de parler de quelques autres mesures. Notamment la mise en place d’un CDN sur WordPress (content delivery network) afin de répartir le chargement des fichiers utiles au thème à partir de plusieurs serveurs.
Il y a également la solution CloudFlare. Jonathan et moi l’utilisons sur nos blogs. Une fois configurer, ce service va mettre en cache votre site pour le servir plus rapidement à vos visiteurs.
Un autre avantage est qu’il permet de protéger votre site de différentes menaces (spammers, botnet, zombies etc). CloudFlare est aussi un service gratuit, alors profitez-en !
Daniel de SeoMix vous apprendra aussi à optimiser WordPress (son article parle de choses non abordées ici).
Programmez plus vite avec le Mémento WordPress !
Vous avez pu le voir à la fin de la vidéo, Jonathan est l’auteur du Mémento WordPress. C’est un petit dépliant édité par Eyrolles qui rassemble les fonctions que l’on utilise le plus lorsque l’on créé ou modifie un thème WordPress.
Si vous touchez au code de vos thèmes WordPress, je vous le recommande grandement. C’est toujours utile et ça permet de gagner du temps 🙂
Pour vous donner une idée, voici le sommaire du Mémento WordPress :
- Templates de page (par défaut)
- Marqueurs conditionnels
- Permaliens
- Récupérer les informations générales du site
- Fonctions de la boucle (loop)
- Personnaliser la requête d’une boucle (query_posts et WP_Query)
- Sticky Posts (articles en avant)
- Champs personnalisés
- Posts Formats (comme sur Tumblr)
- Modèles de pages
- Constantes de paramétrage
- Rôles et capacités
- Shortcodes
- Transients API (mettre des données en cache pour une durée limitée)
- Tâches planifiées (cron)
- Sécurité
- Internationalisation (traduction)
Obtenir le Mémento WordPress sur Amazon
Passez une agréable journée
Alex
Crédit photo : Rafale par Joseph Quan
Recevez gratuitement les prochains articles et accédez à des ressources exclusives. Plus de 20000 personnes l'ont fait, pourquoi pas vous ?
Je m'inscris
Petites astuces bien pratiques pour optimiser son blog à fort trafic. Merci.
Salut,
Sympa cette interview 🙂 L’article est intéressant surtout pour les images mais il y a plein de choses à rajouter sur les moyens d’amélioration de la perf. Je me permets de rajouter quelques tips pour le .htaccess parce que le temps de chargement s’améliore sévèrement avec quelques règles : http://tweetpress.fr/codewp/ameliorer-performance-wordpress-htaccess/
Bonjour Julien,
Cet article n’est pas exhaustif, il y a effectivement d’autres leviers pour accélérer son site sous WordPress. Le but de l’article était de couvrir les premières mesures à prendre 🙂
Merci pour ton lien !
Alex
De rien 🙂 oui je sais que c’est une introduction à l’optimisation d’ailleurs avec ce qu’a indiqué Jonathan on a déjà une nette amélioration normalement.
En voici une vidéo pleine de bon sens et de bonnes astuces. Et réalisée en plus par la dreamteam de WordPress.
Par contre, il faut relativiser l’impact de la vitesse sur le SEO : cela va influer, mais uniquement sur les sites très lents qui seront pénalisés (plus de 10 secondes de temps de chargement) et les sites très rapides qui seraient légèrement favorisés (moins de 1 seconde de temps de chargement).
PS : j’ai failli faire un arrêt cardiaque en entendant mon nom : c’est Roch, comme un Rock, pas comme une Roche ^^
Et je confirme pour Julio l’expert sécurité : il peut te casser ton site en quelques minutes…
Salut Daniel,
Au niveau des noms, je pense qu’avec Jonathan on a dû entendre beaucoup de choses ^^
C’est noté pour Google, quoiqu’il en soit il faut toujours que ce soit rapide pour l’utilisateur 🙂
Dès que la vidéo de l’intervention sera en ligne, je l’enverrai directement aux abonnés du blog !
Je n’ai pu voir que le début mais ça valait vraiment le coup 🙂
A+
Alex
Attention ! Une faille à été révéler dans w3-total-cache !!
Pour les petits sites qui génère moins de 250 jours je recommande HyperCache 🙂
Simple & Efficace ..
Effectivement, Julio de BoiteaWeb en parle dans cet article : http://www.boiteaweb.fr/w3-total-cache-vulnerable-6220.html
Au plaisir
Alex
Merci pour le lien j’était passer à coté 😉
De bons conseils pour améliorer les performances de site ou blog.
C’est sur qu’il y a encore pas mal de choses à faire, mais pour commencer c’est déjà très bien.
Avec l’importance que ça prend dans le seo, le temps de chargement des pages est vraiment pas a prendre à la légère.
Merci pour l’article.
Merci pour ton retour Gilles 🙂
Il y a effectivement d’autres choses à faire comme le CDN (Daniel de SEOMix a fait un très bon tuto sur le sujet).
Bonne continuation
Alex
Le code doit être propre, après j’utilise W3 total cache et j’ai toujours de très bon résultat au GG pagespeed, mon dernier site à obtenu 92/100 !!
Félicitations 🙂
Hello
Sympa cette article, merci a vous 2.
Mais une question se pose pour moi, sur un nouveau je souhaite intégrer de la vidéo daily dans mes articles pour monétiser et apporter un plus a mes articles.
Savez vous si le chargement des vidéo daily a un impact sur le temps de chargement et si il y a un moyen d’accélérer le temps de chargement des vidéo daily ?
Merci
Bonjour Phil,
Merci pour ton commentaire 🙂
Dailymotion utilise la balise iframe dans le code d’insertion de ses vidéos. Je viens de trouver un article sur les performances liées aux iframes, il devrait t’intéresser : http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance
Bonne continuation
Alex
Ok merçi pour le lien 🙂
Donc d’après se que j’ai compris cette solution est la plus performante :
(function(d){
var iframe = d.body.appendChild(d.createElement(‘iframe’)),
doc = iframe.contentWindow.document;
// style the iframe with some CSS
iframe.style.cssText = “position:absolute;width:200px;height:100px;left:0px;”;
doc.open().write(”);
doc.close(); //iframe onload event happens
})(document);
Mais une question se pose, ou coller l’adresse de l’iframe ?
Désolé un peut nul coté code 🙁
Je vais tester tout ce qui est décrit dans cette article pour améliorer mon site!
Merci des conseils
De bon conseils pour réduire le temps de chargement.
Par contre je ne suis pas convaincu sur certains points, comme utiliser un plugin pour minifier son code alors qu’on peut très bien le faire sans.
Tout comme les plugins de cache, qui sont loin d’être parfait, long à paramétrer et au final il n’y pas vraiment de gain de temps.
Etant débutant, je viens d’apprendre plusieurs choses qui vont m’être vraiment profitable pour améliorer la rapidité de mon blog.
Mais ajouter un plugin de cache à wordpress ne va-t-il pas justement ralentir le site vu qu’ajouter des plugins ralentit wordpress?
Merci pour tous ces conseils judicieux, on peut vérifier sa vitesse de chargements sur de nombreux site. Pour ma part mon hébergeur me limite en compression et ça bug, je n’ai donc pas pu compresser mon site; mais certains plugins sur wordpress sont bien pratique en effet et facile à paramétrer.
Et oui, on y pense vraiment pas beaucoup, et pourtant, on se donne du mal à optimiser dans le référencement…C’est un article très explicite et je pense que cela va surtout booster les sites WordPress pour être mieux positionnés.
On peut tjs apporter des modifications mais suivant le thème utilisé on peut être limité. Tjs regarder avant d’acheter son theme.
Merci pour les infos sur les outils pour le temps de chargement de la page.
Rodolphe
Il n’y a pas de quoi 😉
Très bonne interview article intéressant, mais je pense qu’il y’a encore quelques truc à régler qui peuvent améliorer considérablement un site sous wordpress, je prends en exemple la suite donnée par Julien Maury.
Merci à tous pour ces formidable conseils.
Etes-vous jumeaux?
Merci en tout cas pour cette video 😉
Non pas du tout ^^
A bientôt pour une prochaine vidéo 🙂
Alex
Bravo Alex ..
Vous avez fait un bon travail
merci pour le partage 🙂
Merci pour votre commentaire 🙂
Bonjour Alex, merci pour ce super article. Mon blog commence justement à être loooooong à charger donc tes astuces vont me servir. Par contre je me pose une question sur le cache : tu proposes des pluggins pour le cache et après tu parles de CloudFlare ? CloudFlare est un supplément aux pluggins de cache pour améliorer la vitesse de chargement des pages? J’ai testé les 3 pluggins de cache que tu proposes et j’ai l’impression que mon blog charge plus rapidement avec DB cache reloaded mais WP m’indique cette erreur :wpdb class is redefined, plugin cannot work! Est-ce que ce pluggin est quand même adapté pour mon blog ? Je suis désolée de te poser pleins de questions ! Je te remercie par avance pour tes réponses
Bonjour Alex. Bravo pour ta 1ère video c super intéressant. merci pour le résumé et les liens.merci à Jonathan pour ses précieux conseils. seul bémol au niveau du son c,est très difficile d.entendre jonathan. je partage et après les conseils mis en place je te ferai un retour!
Bonjour à tous,
Un petit bémol concernant les images, prendre soin d’avoir un écran calibré !
En effet, sur un écran de moyenne qualité et non calibré, l’optimisation peut-être catastrophique (essayé sur des écrans d’un centre de formation 🙂
J’ai constaté que les thèmes “one page” étaient bien plus long à charger, je pense que si vous avez beaucoup d’images à mettre n valeur, il faut réserver ce type de thèmes aux artistes peintres ou photographes. On est souvent plus patient pour ce type de sites car on sait que l’image prévaut sur le rédactionnel (et inversement)…
Encore un article qui vient s’ajouter à la liste de ces ressources que vous mettez à notre disposition et qui sont toutes plus utiles les unes que les autres ! Merci de souligner des points auxquels on ne pense pas forcément lorsque l’on débute dans le domaine, merci de nous apporter tous ces conseils tellement enrichissants ! Merci à vous deux d’aider les gens comme moi 🙂
Très bonne continuation !
Salut,
Juste pour info, la vidéo n’apparaît pas chez moi : j’ai un espace blanc à la place. J’ai dû aller chercher le lien dans le code source.
Merci pour ce retour Boris
Salut l’équipe WP Marmite, petite question au sujet des extensions de cache: j’ai utilisé W3 Total Cache sur deux de mes sites et à chaque fois même constat (en utilisant PageSpeed Insights): la performance de mon site est améliorée immédiatement mais retombe au même niveau voire plus bas durant les 24 h suivantes. Une idée?
Bonjour, aucune idée. Tu fais des changements particuliers entre temps ? Sinon il n’y a pas vraiment de raison. Tu régénères le cache régulièrement ?