Chaque milliseconde compte ! Chaque kilo-octet doit être traqué, chaque script doit être vraiment utile, et ainsi de suite. Finis l’embonpoint des sites, l’obésité des scripts. Le temps de chargement est redevenu une donnée essentielle au référencement de votre site. Votre thème respecte-t-il ces critères ?
Il y a quelques années de cela, avant de faire quoi que ce soit, on se posait la question du temps de chargement. Forcément, avec des débit façon minitel, il fallait chaque kilo-octet avec férocité, optimiser chaque image au maximum, la découper en tranche, optimiser son code html, chasser les lignes vides, et ainsi de suite.
Avec le boum de l’ADSL, finis l’optimisation place à la liberté, aux image de 200K, au code source long comme une route entre Dunkerque et Marseille, aux javascript en tous genre, bref, aux pages obèses. Plus grand monde ne se souciait vraiment du temps de chargement d’une page.
Google a remis tout le monde dans le droit chemin en imposant ce critère comme nouvelle pierre angulaire du référencement. L’emmergence du mobinaute n’étant certainement pas étrangère à cet état de fait.
Impact visuel et/ou référencement
Désormais, lors de l’achat d’un thème, il faut aussi se demander quel peut être son impact sur le référencement de votre site.
Plusieurs aspects son à prendre en compte. D’une part, un thème qui embarque des dizaines d’options, c’est aussi un thème qui risque de ralentir votre site. Forcément, toutes ces options sont stockées en base de données, et forcément, il faut bien interroger la base à chaque chargement pour utiliser ces options.
Cette problématique peut être contenu d’une part par le système de cache de MySQL lui même (si vous pouvez l’activer, sur un mutualisé, renseignez vous auprès de votre hébergeur), ou par un plugin de cache dans WordPress. W3 Total Cache par exemple prend en charge le cache des données MySQL.
L’autre problématique, c’est le poids du thème lui même. Qu’embarque t-il comme scripts, est-il plus ou moins rapide à charger ? Difficile à savoir en regardant une vignette. Il faut donc passer par la case test. Bien souvent, les sites vendeurs vous propose de voir le thème grandeur nature sur un site pilote. Ne vous en privez pas.
Yslow pour un choix en finesse
Mais pour vous faire une idée précise, ce n’est pas en comptant les secondes dans votre tête durant le chargement. D’une parce que vous n’êtes pas un chronomètre bien fiable, et deux, parce que ces sites sont souvent à la limite de la surcharge. Donc, le temps de chargement est assez long.
L’idéal est d’utiliser Yslow. Une petite extension disponible aussi bien pour Firefox que pour Chrome et qui va vous dire tout ce dont vous avez besoin pour faire votre choix.
Démonstration
Dans ce petit test, j’ai utilisé un serveur local, sur mon réseau, reprenant la configuration exacte du serveur de 4h18. Je m’évite ainsi le trafic engorgé sur un serveur distant, et je peux me concentrer sur le thème lui même.
J’ai choisis de mener ce petit test avec3 thèmes :
- Twenty-eleven, le thème de base livré avec WordPress
- Un thème premium type « responsive » chez ThemeForest
- Canvas, chez wootheme, un thème hautement paramétrable
Comme contenu, j’ai dupliqué la base d’article de 4h18, puis j’ai désactivé l’ensemble des plugins. Je suis donc sur un wordpress vierge, tout frais moulu, avec plus de 200 articles.
Enfin, j’ai utilisé YSlow (version 2) avec Chrome. Une fois Yslow installé, vous verrez paramètre un quart de chronomètre dans votre barre de menu, en haut, sur la droite. Il vous suffit de cliquer dessus pour lancer YSlow. Enfin, dans la fenêtre YSlow, dans l’onglet home, cliquez sur « Run Test », le bouton jaune.
Bien sûr, ce test est assez succin, et les plus technique d’entres vous ne manquerons pas de le souligner. Encore une fois, je m’adresse en premier lieu à des débutants.
Twenty-Eleven
Détail de Twenty Eleven
Twety Eleven est un thème très léger, comme vous pouvez le constater sur le graphique ci-dessus, avec 203Ko de fichiers chargés sur page d’article. En utilisant un cache, vous pouvez faire tomber ce résultat à 35ko, une bouchée de pain.
Grade Twenty Eleven dans YSlow
Un bon point pour Twenty Eleven, les javascrit du thème sont dans le footer, ce qui améliore le temps de chargement de vos pages.
Le thème obtient le grade B dans YSlow, plutôt une bonne note. De base, Twenty Eleven n’aura pas un impact négatif sur le temps de chargement de votre site.
Canvas WooTheme
Autre thème, et cette fois-ci, nous partons du côté de WooThemes. Leurs thèmes sont tous livrés avec un framework très complet, qui, au premier coup d’oeil, peut paraitre lourd tellement les options sont nombreuses, notament sur le thème Canvas.
Détail de Canvas par Wootheme
La première surprise, c’est que Canvas ne pèse pas beaucoup plus lourd que Twenty Eleven, avec 275ko. Son passage en cache vous permettra de diviser par deux le poids des fichiers à charger.
Grade Canvas
Au passage de la moulinette YSlow, Canvas, de base, ne ralentis pas notre site qui conserve son Grade B. Un bon point pour ce thème très riche d’options en tous genres.
ThemeForest
Pour finir, j’ai choisis le Thème Propulsion, disponible chez ThemeForest. Propulsion est un thème type « responsive », c’est à dire qu’il s’adapte au média sur le quel vous visualiser le site.
Detail du thème Propulsion
On se rend compte tout de suite d’une chose : Le poids ! Notre thème prend ici 534ko, soit deux fois plus que les deux thèmes précédemment testés. Et même si vous utilisez un cache, vous resterez tout de même au dessus de 300ko, ce qui commence à peser.
Grade Propulsion
Cet embonpoint ce ressent tout de suite sur le Grade dans YSlow, puisque l’on passe de B à C. Le nombre de scripts à charger étant conséquent, et ces derniers n’étant pas chargés dans le footer, votre temps de chargement en prend un coup derrière la tête.
Conclusion
Malheureusement, il n’est pas possible de comptabiliser le nombre de requêtes faites à la base de données, information qui serait pourtant bien utile. Il nous faut donc faire avec le peu d’informations dont nous disposons.
Le thème que vous allez choisir aura un impact direct sur le temps de chargement de votre site, vous l’aurez compris. Aussi, avant de choisir un thème avec des dizaines d’options, demandez vous si vous aurez vraiment besoin de celles-ci. Cela peut paraître simpliste, mais c’est une évidence souvent oubliée.
Par exemple, si vous n’avez pas besoin des fonctions de portfolio, est-il vraiment utile de prendre un thème proposant ces fonctionnalités ?
Par ailleurs, l’installation de YSlow étant gratuite et très simple sous Chrome, ne vous privez pas de cet outil, seul capable de vous aider pour voir un peu les entrailles du thème que vous souhaitez acquérir.
Abonnez vous à l’esPresso
Un test de mon blog le montre catastrophique et pourtant pas très riche en contenu surtout graphique.
Le plus dur, comprendre les recommandations et surtout comment les appliquer.
J'ai un sacré boulot !
Encore merci ;)
Pour afficher/connaître le nombre de requêtes il suffit de placer ceci
requetes en secondesquelque part (le footer par exemple)Keep the pressure ;-)
Le voici donc en mode texte requetes en secondes
Moi ca me parait évident que le choix du thème influera sur la vitesse de téléchargement et d'affichage du site.
Si je peux me permettre un petit ajout pour Yslow, c'est un lien vers le site Gtmetrix qui permet d'avoir les résultats du plugin cité plus ceux de Google Page speed. Cela peut éviter d'alourdir son navigateur par l'ajout d'extensions en passant par ce lien. je préviens, c'est le genre d'analyse cruelle qui fait déprimer, même si des solutions sont proposées.
Trouver un équilibre entre esthétique et rapidité est décidément difficile. Des thèmes populaires comme Arras ou Suffusion en sont un bon exemple. Ils permettent de faire énormément de choses mais le prix a payé est une certaine lourdeur.
(c'est mieux si je mets le lien)
Firebug est une excellente extension pour FFx ;)
requêtes. secondes.Mais je ne vois pas en quoi le nombres d'options influe sur les perf. Je suis en train de développer un thème premium en ce moment, et malgré ma vingtaine d'options j'obtiens un meilleur score que celui que tu as avec twenty-eleven (j'arrive même à obtenir un A avec une optimisation du htaccess). De plus une fois le cache mis en place (indispensable pour n'importe quel site wordpress faisant plus de 1000 visiteurs/jour), le nombre de requêtes ne joue plus un rôle prédominant dans le chargement.
D'ailleurs si j'ai bcp d'options dans mon thème c'est justement pour parvenir à optimiser le chargement en activant uniquement que ce dont vous avez besoin (lightbox, etc ...).
Le chargement du js en footer c'est bien, mais il faut aussi s'assurer qu'il soit appelé de la bonne manière (via wp_enqueue_script), ce qui permet d'utiliser un hook (ou plugin) pour coller et compresser à la volée l'ensemble des js présent sur la page.
Bref, on peut tout à fait faire un thème "complet" sans pour autant finir avec un truc hyper lourd, mais ça demande pas mal de taf en amont ça c'est sur.
Comme tu le soulignes, il existe de véritables usines à gaz.
Cet article n'a d'autres prétention que d'attirer l'attention du débutant sur le choix de son thème.
Super !