P2.3c - Optimisation Web

Exercice à débuter en classe sous la supervision de l'enseignante.
Important de suivre les étapes dans l’ordre. Spécification à propos des installations de GSAP et ses plugiciels Svp, si nécessaire, veuillez apporter les correctifs AVANT de publier sur GitHub pages.

Installation de librairies et plugiciels JavaScript

Pour la librairie GSAP "core” ainsi que ses plugiciels gratuits nécessaires au projet, vous devrez les installer via CDN. N’en ajoutez pas pour rien, n’ajouter que les plugiciels nécessaires au requis du projet.

Plugiciels GSAP gratuits (Extra Plugins)

Suivez le liens ci-dessous et cochez les plugiciels gratuits dont vous avez besoin (onglet CDN) et ajoutez les balises script générées dans vos fichiers HTML. Accédez ici

Plugiciels GSAP payants (Club Plugins)

J’ai décidé de ne PAS vous faire inclure les fichiers des plugiciels payant (GSDevTool, DrawSVG et MorphSVG) dans votre projet. S’ils y sont, supprimez-les.

Utilisez plutôt le lien fourni ici (onglet CodePen), cochez le(s) plugiciel(s) de votre choix du Club Plugins et ensuite le bouton COPY URL à côté en bas pour l’ajouter dans une balise <script> dans votre page HTML.
https://codepen.io/GreenSock/full/JjPwRob

Notez que ces scripts ne fonctionneront pas sur un site publié en ligne (comme sur GitHub Pages ou un autre hébergeur comme Host Papa) puisque vous ne payez pas pour le Club GSAP.

Optimisation des performances Web du projet Pour cette étape du projet, vous devrez désactiver temporairement vos plugiciels payants. Dans le HTML, ajoutez les balises de commentaires autour des balises scripts correspondants à drawSVG, morphSVG et tous autres plugiciels payants que vous avez utilisés. (ex: <!-- <script ...> --> Dans votre fichiers script.js, ajoutez des commentaires toute propriété qui font référence à drawSVG, morphSVG (ex /*drawSVG: "0% 100%"*/ ) afin d’éviter des erreurs JS. Avant de mettre en ligne, ajoutez un display: none; à ul.technique-gsap dans votre css. Publication de votre site sur https://tim-momo.com/

Voir capsule vidéo pour la mise en ligne disponible dans le wiki du cours 14.

Testez votre page web avec PageSpeed Insights

Avec le URL de votre site web (https://votreprenom.tim-momo.com), générez un rapport PageSpeedInsights via https://pagespeed.web.dev/

Plan et documentation d’optimisation Créez un document Markdown à la racide de votre projet nommé rapport-optimisation.md. Tout dans le dans ce document doit être rédigé en Markdown et non en HTML ou autre langage. Ajoutez-y: Titre niveau 1 :
- “Rapport d’optimisation du projet ScrollyTelling” (sans les guillemets) Lien :
- Dans votre rapport généré de PageSpeed Insights, cliquez sur Copiez le lien en haut à droite.
- Dans votre fichier Markdown, créez un lien, collez-y le lien de votre rapport PageSpeed Insights.
- Le texte de ce lien sera : “Page Speed Insights - Rapport du 6 mai 2024, 15:01:06” (la partie “Rapport du 6 mai 2024, 15:01:06” est en fait une copie de la ligne équivalente qui a été générée dans votre rapport). À partir du rapport Page Speed Insight, sélectionnez 3 éléments à corriger qui vont avoir le plus d’impact dans l’optimisation de la performance. Dans le document Markdown, pour chacun des 3 éléments: Ajoutez un titre de niveau 2 :
- “Problème #1” (ou 2 ou 3) (sans les guillemets). Sous lequel vous allez devoir ajouter deux titres de niveau 3 :
- Nom du problème (écrivez le nom du problème et non le texte non du problème)
- “Action concrète pour résoudre le problème” (sans les guillemets) Sous le titre "Nom du problème", écrivez, dans vos mots le problème à résoudre (pas de copier-coller de ce que vous voyez à l’écran dans Page Speed). Si vous ne le comprenez pas bien, allez lire sur le sujet. Dans le rapport PageSpeed Insights, vous donne toujours des liens pour en savoir plus sur chaque sujet en question. Sous le titre "Action concrète...", écrivez, dans vos mots la ou les actions concrètes pour régler le problème ou améliorer la situation. Soyez précis, nommez les fichiers que vous allez changer, nommez bien les fichiers ou ressources concernées afin que ce soit super clair pour un tierce partie qui lirait votre documentation. Exécutez votre plan. À la fin de chaque section Problème #1 etc, ajoutez un troisième titre de niveau 3 “Résultat” et décrivez ce que vous avez fait concrètement et si vous avez réussi ou non à résoudre le problème. Optimisation des médias Pour vos images en jpg et png, créez une Actions Photoshop pour optimiser le poids et la taille des images de grande dimension telles que vos images d'arrière-plan de chapitre. Optimisez toutes ces images via un traitement par lots avec cette Action Photoshop. Faites de même pour d'autres images à optimiser, si vous n'avez pas besoin de changer leur taille, vous pouvez le faire, ne serait-ce que pour réduire leur poids via une compression complémentaire png ou jpg. Optimisation des spritesheets créées dans After Effects Certaines spritesheets ont été créées dans After Effect à une cadence de 24 ou même 30 images par seconde. Ce qui en résulte: des fichiers images avec un poids monstrueux! Si tel est le cas, retournez dans AE, diminuez le framerate de votre composition à 12 ou même 6 images/seconde et ré-exportez vos images pour recomposer votre spritesheet. Évitez aussi que la taille de la composition ne dépasse les 500px X 500px. Si vous changez le framerate et ré-exportez votre spritesheet, vous devrez, évidemment, ajuster le nombre de steps dans votre css pour le nouveau nombre d'images clé de votre nouvelle spritesheet. Appliquez le chargement différé sur vos images

Le chargement différé (lazy loading en anglais) est une stratégie d'identification des ressources non critiques (comme des images) afin de ne les charger qu'au moment où elles sont utiles. C'est une façon de réduire le temps de chargemen de la page et de faire en sorte qu'on ne charge pas des images inutilement.

L'attribut loading utilisé sur un élément <img> peut être utilisé pour demander au navigateur de différer le chargement des images qui se situent en dehors de la zone affichée à l'écran, jusqu'à ce que la personne visitant le site ne les affiche en faisant défiler la page.

<img src="image.jpg" alt="..." loading="lazy"> Minifiez vos CSS et JavaScript Avec une extention VS Code ou un outil en ligne, créez une version minifiée de votre fichier styles.css que vous nommerez styles.min.css et une version minifiée de scripts.js que vous nommerez scripts.min.js. N'oubliez pas de changer les liens vers ces styles et scripts minifiés dans votre HTML. Publiez vos changements

Déployez vos modifications sur le serveur tim-momo.com : écrasez simplement l'ancienne version de vos fichiers préalablement publiés).

Re-testez votre page web avec PageSpeed Insights

Avec le le même URL de votre site hébergé sur github Page, regénérez un rapport PageSpeedInsights https://pagespeed.web.dev/

Les résultats en pourcentage devraient alors avoir augmenté suite à vos modifications d’optimisation.

Pour conclure, dans le fichier MarkDown Ajoutez un titre de niveau 2 à la toute fin:
- “Rapport projet ScrollyTelling après optimisation” Ajoutez le lien :
- Dans le nouveau rapport PageSpeed Insights, cliquez sur Copiez le lien en haut à droite.
- Dans votre fichier Markdown, créez un lien, collez-y le lien copié.
- Le texte de ce lien sera : “Page Speed Insights - Rapport du 6 mai 2024, 17:50:00” (la partie “Rapport du 6 mai 2024, 17:50:00” est en fait une copie de la ligne équivalente qui a été générée dans votre rapport). Préparation de la remise finale À faire lorsque vous aurez tout complété P2.3a, P2.3b et P2.3c et couvert ce qui a été discuté en rencontre avec moi au cours 14. N'OUBLIEZ PAS D'ENLEVER LES BORDURES AUTOUR DE VOS CHAPITRES ET ÉLÉMENTS GRAPHIQUES avant la remise finale et la mise en ligne finale 😊 Certains chapitres peuvent quand même nécessiter une bordure sur le haut ou le bas pour mieux définir leur limite graphique, à vous de juger. Par contre, enlevez quand même les bordures à droite et à gauche sur tous vos chapitres (si ce n'est pas déjà fait). Republiez en ligne (tim-momo.com) vos dernières modifications et optimisations. Dans cette version, vous devez avoir commenté ce qui fait référence à drawSVG et morphSVG. Vous devrez aussi sur cette version avoir caché ul.technique-gsap à l'aide d'une display: none;. Avec cette version, créez une branche git nommée live. Commitez et pousser vers github. Créez ensuite une autre branche git nommée final, décommentez tout ce qui a un lien avec drawSVG et morphSVG. Réaffichez ul.technique-gsap. Commitez et pousser vers github. Ce sera la version que vous allez présenter en classe au cours 15. Votre projet dois être 100% fonctionnel lorsqu'on clique sur index.html (donc sans passer par Live Server de Visual Studio Code). Remise (après avoir comptété P2.3a, P2.3b et P2.3c)

Dans Teams>Devoir, déposez le lien de votre répertoire git individuel.

Vous devez aussi y déposer le URL de votre site publié en ligne sur tim-momo.com.

Présentation du projet

Environ 7 min par personne

Simplement faire la démo de la version de la branche "final" que j’aurai téléchargé sur le poste du professeur en avant. La branche "final", c'est la version qui inclut drawSVG et morphSVG, tout est fonctionnel et on peut voir en haut à gauche le petit carré "techniques-gsap" visible.

Donc en 2 temps:

1. Racontez-nous votre histoire, chapitre par chapitre (lire le texte ou interprétez un sous-texte si vous le souhaitez).
2. Remontez en haut et cette fois, expliquez chapitre par chapitre quelles sont les techniques d'animation GSAP que vous avez utilisées et programmées.

Notes de cours 📚