Je n’ai pas été dans le technique, mais c’est exactement ce que je voulais dire lorsque j’ai dit:
Nuxt est fantastique. C’est la première plateforme qui a permis de faire du Server Side Rendering (SSR) avec Vue.
Sans Nuxt, Google n’aurait vue que des pages blanches. C’est donc essentiel que les pages soient générés côté serveur avant d’être envoyés vers le client.
Maintenant, pour ce qui concerne la méthodologie Jamstack, l’idée est de servir des générer des pages STATIQUES et de les déployer le plus près du visiteur.
Le problème avec ça, c’est que les pages de La Tranchée ne sont toutes statiques. Si tu es connecté, tu as une page différente de celle que tu reçois si tu n’es pas connecté.
La solution à ce problème est donc de servir certaines sections de ton application de façon dynamique et d’autres de façon statique. On dit que ce genre de déploiement est « hybride ».
Le problème avec Nuxt2, c’est qu’il ne permet pas ce genre de déploiement. Soit que tout est statique, soit que tout est interactif. Nuxt3 vient donc à la rescousse pour régler ce problème avec le déploiement hybride.
Pour ce qui est du développement en île, c’est déjà l’approche que j’utilise et c’est un des changements techniques que j’ai apporté au site.
Avant, le serveur générait une version différente du contenu de chaque page « on the spot » à chaque chargement, ce qui rendait le serveur lent à répondre.
Maintenant, j’utilise Redis pour mettre la version de base en cache et de la servir ultra rapidement au client. Par la suite, une fois le module en vue, la personnalisation se charge:
En d’autres mots, je « lazy load » toutes les composantes du sites qui n’ont pas besoin d’être affichées dès le départ.
J’ai également utilisé Cloudinary pour optimiser le chargement des images. Maintenant, que tu sois sur mobile, tablette ou ordinateur, une version spécifique de l’image est utilisée.
La version des images change dynamiquement selon la taille du navigateur.
J’ai aussi supprimé la police d’icône et j’ai remplacé l’ensemble des icônes du site en SVG, ce qui sauve environ ~500K de données au premier chargement du site.
Quill.Js, l’éditeur que j’utilisais pour le texte, était également chargé partout. Il était quand même lourd alors je l’ai remplacé par un éditeur que j’ai créé avec TipTap. De cette façon, je peut le charger dynamiquement uniquement lorsqu’on en a besoin.
Les plus gros changements que j’ai fait sont surtout côté serveur:
- J’ai réduit les données au stricte minimum. Le serveur ne sert que les données que le client utilise. J’ai passé la taille des données d’une page de 500K à ~12K.
- J’ai mis à jour et optimisé ma base de donnée, ce qui a accéléré la vitesse des requêtes d’environ 80%.
Finalement, j’ai utilisé PurgeCSS pour me permettre d’inclure uniquement le CSS utilisé, ce qui m’a permi de faire passer les feuilles de style de 50 à à ~2kb.
Pour améliorer encore la vitesse du site, j’ai pas mal juste 2 choses sur ma To Do:
- Utiliser Redisearch pour refaire le module de recherche du site. C’est une tâche de 3-4 jours.
- Migrer vers Nuxt3, c’est plus un projet de 2-3 mois. J’aime mieux attendre qu’ils aient une version stable avant de me lancer.
Nuxt3 va me permettre d’activer le Edge caching, une fonction vraiment cool qui permet de stocker ton app, non pas dans un SERVEUR près du client, mais dans la mémoire du fournisseur Internet que la personne utilise! Ce n’est pas Bell/Vidéotron qui appel le serveur le plus près, mais bien Bell qui génère et te sers le site directement.
On peut lire plus sur Nuxt3 + Netlify ici: Nuxt 3 - Netlify
Bref, je n’ai pas abordé tout ça dans l’article puisque ce ne sont pas des choix que les gens normaux doivent faire.
Si tu es sur WordPress, les chances sont que tu roules un thème monté en PHP et que tu peux profiter de la suite de plugins d’optimisation qui existe déjà.
Tout ce que je dis ne concerne que les gens qui décident de faire une applicaiton web. Dans le cas de La Tranchée, j’y ai été un peu overkill sans trop savoir dans quoi je m’embarquais. Au final, je suis content de l’avoir fait, mais c’est définitivement une courbe d’apprentissage.
Pour la détection de la fraude tout simplement. Puisque le script est loadé avec le tag « DEFER », ça n’impact pas vraiment le temps avant l’interactivité, le gros problème que j’ai présentement!
Et ceux qui le font ont tort et devraient sortir leur laptop.
! 🫣
.
peuvent aider 
Je vais continuer de faire mes devoirs! Le résultat n’est pas encore super dans lighthouse.
