Depuis très longtemps déjà, je voulais avoir un portfolio et un blog, pour pouvoir écrire et exposer un peu ce que je fais en tant que développeur. Et j’ai testé quelques solutions jusqu’à présent, statiques et non statiques.
J’ai d’abord essayé Hexo et Hugo, pour la profusion de template pré-existant, mais aussi parce qu’ils sont des générateurs de sites statiques (j’en ai d’ailleurs fait un post sur dev.to, mais en anglais). Les deux sont de bons choix, mais j’avais déjà eu une préférence pour Hexo, surtout parce qu’il repose sur Javascript.
Plus tard, après mon passage à La Capsule, j’ai opté pour Next.js, un framework un peu “hype” censé permettre très simplement de monter un portfolio. Cette tentative m’a notamment permis de découvrir Wisp, un CMS “headless” très pratique pour faire tourner un petit blog Next.js sans se soucier d’avoir un backend ou une solution de stockage pour les articles. Mais les pauvres performances du site et la DX de Next.js m’ont fait revoir mon choix.
J’ai donc finalement fait le choix de revenir sur un portfolio basé sur Hexo, et de faire en sorte qu’il soit bien optimisé (selon les recommandations de PageSpeed Insights). Comme vous allez pouvoir le lire, malgré l’utilisation d’un template, cela a représenté une bonne dose de travail.
Configuration et mise en place
Après avoir pris mon nom de domaine, j’ai commencé par installer la configuration de base d’un projet Hexo, avec la thème “Frame”, dont j’aime bien le design.
Ensuite, et contrairement à mon premier contact avec Hexo, j’ai mis en place le déploiement automatique du site via Gitlab Pages et la CI de Gitlab, pour ne pas avoir à me soucier de la génération des fichiers statiques.
À ce niveau, le site est fonctionnel mais, dépendamment du thème choisi, peut nécessiter quelques optimisations, ce qui sera le cas pour le thème “Frame”.
Mon objectif est donc de viser le plus haut score possible dans les critères d’évaluations de PageSpeed :
- Performances
- Accessibilité
- SEO
- Bonnes pratiques
Amélioration des performances
Affichage des images
Un site rapide et responsive est ce qu’il y a de mieux pour l’expérience utilisateur. Un des premiers obstacles à un rendu rapide de la page, c’est la vitesse d’affichage d’une image. Le premier axe d’amélioration, c’est d’avoir des images dont les dimensions correspondent à celles de leur rendu sur la page. Pour cela, la meilleure solution est de passer par un CDN, et j’ai opté pour Cloudinary (que j’avais déjà utilisé par le passé). En combinant cela aux attributs srcset et sizes de la balise <img>, on obtient un site dont les images sont toujours servies à vitesse grand V !
Au niveau du thème, cela se traduit par l’ajout d’un nouveau helper et d’une balise custom (un tag, chez Hexo). Il est alors possible de les utiliser dans les différents fichiers du template, afin d’ajouter les images dans les pages et dans les articles de blogs (comme celui-ci).
Le style
Côté CSS, le thème “Frame” se base sur Stylus, une technologie avec laquelle je ne suis pas du tout familier. Ne voulant pas refaire entièrement le style du thème, j’ai juste ajouté une mécanique de minification pour le style généré. Avec Hexo, rien de complexe : juste un recours à hexo-clean-css.
Les polices
Il y avait aussi un gros travail à faire au niveau des polices. En premier lieu, j’ai arrêté de me reposer sur les polices de Google, et opté pour un hébergement local. Étonnament, le thème possèdait aussi ses polices au format TTF, un format un peu ancien et manquant de compression. J’ai donc non seulement choisi de passer les fichiers au format WOFF2, un format plus récent avec une meilleure compression, mais aussi de ne garder qu’un subset des caractères latins (parce que je n’ai pas prévu d’écrire en mandarin de si tôt).
Un regard sur l’accessibilité
Après avoir passé le plus clair de cette refonte sur les aspects de performances, je n’ai pas eu besoin de consacrer beaucoup de temps sur l’accessibilité. Il y avait deux points à améliorer : le maximum-scale et le manque d’attribut aria-label sur certains éléments.
J’ai passé le maximum-scale, l’attribut déterminant le zoom maximum autorisé sur la page, de “1.0” à “5.0”, afin de permettre aux utilisateurs qui en ont besoin de zoomer sur la page. J’ai également des aria-label sur certains boutons et liens, pour informer explicitement sur la fonction de ces éléments. Cela a d’ailleurs nécessité la création d’un nouveau composant de pagination, avec des liens possédant des attributs aria-label.
Un peu de SEO
Pendant que je m’attelais à améliorer les performances de mon portfolio, j’ai également pu apporter quelques améliorations côté SEO. J’ai d’abord ajouté un fichier robots.txt et un fichier sitemap.xml (via le plugin hexo-generator-sitemap), afin que les crawlers puissent lire le site facilement.
Plus tard, j’ai ajouté la gestion des données OpenGraph pour avoir des liens enrichis pour mes articles de blog. Un ajout simple, via un helper fourni par Hexo, qui permet d’ajouter les balises <meta> correspondantes.
J’ai également ajouté un flux RSS, pour permettre de suivre l’arrivée de nouveaux articles, et des attributs rel=nofollow aux liens menants à des sites externes.
Bonnes pratiques ?
Pas de javascript superflu
Le thème “Frame” possède une barre de navigation, dont l’affichage sous mobile est géré via javascript. Un peu dommage quand on sait que HTML5 peut gérer ça avec un élément natif : le popover. J’ai donc ajouté une popover ! Cela m’a permis de me débarrasser du code javascript concerné et ainsi de ne pas laisser des comportements natifs être reproduits par du javascript.
Plus de sémantique
En lisant le code du thème, je me suis aperçu qu’une majorité de balise <div> régnait dans les templates. Pour y apporter plus de clarté, j’ai passé un peu de temps à ajouter des balises sémantiques (telles que section ou footer).
Conclusion
Passer à Hexo et au thème “Frame” m’a permis d’avoir un portfolio qui correspondait à mes attentes : simple, rapide et facile à maintenir. Loin de mes précédentes tentatives avec d’autres technologies, j’ai beaucoup appris sur ce qui était nécessaire pour avoir un site performant.
Evidemment, j’aurais pu opter pour une technologie plus moderne et plus “hype”, comme Astro. D’ailleurs, il est possible que je le fasse, pour un autre projet. Mais réussir cette optimisation du thème “Frame” était le fait d’arme dont j’avais besoin pour boucler la boucle, et mettre un terme à mon errance sur mon projet de portfolio. Je ne regrette absolument pas ce choix !
Un score PageSpeed presque parfait pour l’affichage mobile
Un score PageSpeed parfait pour l’affichage sur ordinateur