Aujourd’hui, je vous partage mon dernier projet, kevin-vincendeau.fr, mon site façon « marque personnelle ». Je l’ai développé avec le framework Nuxt.js, qui est une surcouche de Vue.js, dans sa version 3. Les numéros de version de Nuxt suivent ceux de Vue.
Nuxt.js
Le framework est super sympa à utiliser et permet de :
- générer le rendu des pages côté serveur (SSR) pour le référencement
- importer automatiquement certaines utilisations des fonctions de Vue.js (références, fetch, computed, …)
- développer avec Vite, qui est pré-cablé (🙏 merci au HMR pour le gain de temps).
- simplifier l’i18n, la sécurité, le SEO, l’a11y entre autres, parmi pléthore de modules.
Technos utilisées
J’en ai profité pour découvrir Tailwind, que j’ai beaucoup apprécié. La syntaxe est concise et son utilisation plutôt intuitive. Il m’a permis d’inclure facilement la version mobile et un mode clair/foncé.
J’ai testé recaptcha v3 de Google avant de me raviser. J’ai finalement développé un captcha autonome. C’est toujours mieux de ne pas dépendre d’un service extérieur.
J’ai soigné l’accessibilité (a11y): le site est navigable au clavier et il est compatible WCAG AA (pour la dernière version publiée en octobre 2023 soit la 2.2).
Le tout est auto-déployé via Gitlab CI vers un serveur Node.js, administré par mes soins. Des tests Cypress vérifient quelques points avant le déploiement.
Résultat
En dernier lieu, j’ai bossé sur l’optimisation PageSpeed. Car au premier jet, le globe terrestre en 3D accaparait le thread principal.
Et autant dire que le résultat était dégueulasse (¯ . ¯٥)
Pour pallier ça, j’ai utilisé un worker javascript et y ait déporté l’utilisation du canvas via OffscreenCanvas. Le worker permet de paralléliser un traitement pour libérer le thread principal.
C’était un peu galère car j’ai dû modifier les appels Three.js et utiliser un autre loader de texture (ImageBitmapLoader). (╯°□°）╯︵ ┻━┻
Mais bon, le résultat est là et en valait la peine. Le score de performance mobile est passé de 64 à 95 points ! ლ(ó﹏ò｡ლ)
Voilà c’est bien mieux ainsi.
Cerise sur le mac do
Tout le code est en accès libre sur le dépôt Gitlab. Vous pouvez le réutiliser conformément avec la licence GPL v3.
Et voilà, je passe au projet suivant !
