Une refonte, ou plutôt un aménagement
25 octobre 2014 3 commentairesComme à mon habitude et comme ce devrait être l’habitude de n’importe quel webdesigner, cette refonte n’est pas une révolution mais une évolution.
- Avant
- Avant
Oui, c’est très discret. On peut jouer à trouver Charly mais pour gagner du temps, je détaille les changements ci-dessous.
Changement de menu
Fini les liens en haut de page, place désormais à un menu top moumout’ 2014 type application mobile qui passe justement beaucoup mieux sur les petits écrans et qui va très bien pour un blog mais pas que d’ailleurs car de plus en plus de sites de contenus abandonnent la bonne vieille navigation horizontale à la papa pour un menu très discret car ma bonne dame, les menus sur le web, à l’heure où on visite des sites sur des écrans qui font à peine 10 pouces, ça ne peut plus être un élément structurant. Les menus se font discrets de nos jours et celui-ci n’échappe pas à la règle.
Sous le capot
Aujourd’hui, ce qui importe pour un site, encore plus que le design, c’est le temps de chargement. Un temps de chargement court, ce sont des utilisateurs heureux et des moteurs de recherche qui vous référencent mieux. Le temps de chargement est depuis 2010 chez Google un critère qui entre en compte dans le référencement. A titre personnel je trouve ça absolument injuste car tout le monde n’a pas les moyens de louer un serveur qui déboîte ni les compétences pour optimiser aux petits oignons son site mais jusqu’à preuve du contraire, Google ne m’a pas demandé pas mon avis.
Pour accélérer le chargement de ce blog, sans migrer sur une brute de serveur, j’ai fait comme dans la France des années 70 où il n’y avait pas de pétrole mais des idées : j’ai réfléchi. L’idée, pas révolutionnaire non plus, tout comme les idées des années 70, c’est de réduire le nombre de fichiers appelés et de réduire le poids des ressources dont on ne peut se passer.
Souvent, les plugins WordPress chargent leur propres feuille de style, dont on peut se débarrasser sans problèmes. Pour ce faire, il faut utiliser la fonction wp_dequeue_style
. L’équivalent pour se débarrasser d’un fichier javascript superflu est wp_dequeue_script
. Une fois identifié les js css dont on n’a pas besoin, la marche à suivre pour s’en débarrasser est expliquée ici : Remove Plugin Stylesheets and Scripts in WordPress.
Pour le reste, il faut minifier, c’est à dire supprimer dans les scripts js et les feuilles de style les espace, les retours à la ligne les commentaires pour n’avoir plus que la substantifique moelle d’un js ou d’une css devenue par conséquent illisible par un être humain puisque dépouillée de tout ce qui fait sens pour nous (indentation, commentaires, bref tout ce que j’ai cité avant pour ceux qui suivent). C’est l’une des raison pour lesquelles j’ai basculé de mes bonnes vieilles css (que certes on pouvait minifier) vers Less css. Mais j’y reviendrai plus longuement dans un autre billet.
Enfin, pour les images, il existe quelques plugins tels que le très bon wp-smushit qui permet d’optimiser les images à la volée. Le bon plan aussi c’est d’utiliser un CDN. Cloudflare propose une version gratuite de son service.
Pour voir si malgré votre petite bourse vous satisfaites aux critères de Google, vous pouvez faire un test de vitesse de chargement Google Insight. Si vous êtes dans le vert, bravo vous êtes très fort, ou très riche. Pour ma part, après avoir une de points, je n’arrive pas à sortir du jaune malgré tous les efforts sus mentionnés.
Tout ça pour … quoi ?
Ces ajustements vont de le sens du « mobile first ». Plus un seul éditeur ou créateur de contenu, qu’il soit blogueur, journaliste ou président de la république, ne peut aujourd’hui imaginer publier quoi que ce soit sur Internet , sur son site ou sur les réseaux sociaux associés, sans comprendre que ces contenus seront consultés désormais en majorité sur téléphone mobile ou tablettes. Il faut donc penser les sites et les contenus avant tout pour ces terminaux.
1. C’est quand même écrit très gros 🙂
2. La lecture serait plus agréable avec la césure automatique des mots en fin de ligne (voir )
https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
@Hugo c’est parce que je suis maintenant âgé, alors je lis plus facilement les gros caractères 😉 Ceci dit c’était assezvrai, j’ai diminué la taille de la typo générale.
Par contre le -moz-dev-hyphen, également intégré, ne m’a pas l’air très efficace. Je vais creuser un peu.