feat(labs): readme (#50)

sfeir-open-source · Dec 4, 2024 · 3b82b72 · 3b82b72
1 parent f4e3826
commit 3b82b72
Show file tree

Hide file tree

Showing 16 changed files with 278 additions and 35 deletions.
diff --git a/docs/markdown/02-stability/40-lab.md b/docs/markdown/02-stability/40-lab.md
@@ -8,14 +8,18 @@
 
 **1. Images**
 
-- Corriger les images produit
-- Corriger les images des recommandations produit
+- Anticiper le chargement des images :
+  - Images produit
+  - Recommendations
+  - ...
 
 **2. Contenu asynchrone**
 
-- Optimiser les contenus asynchrones
+- Anticiper les chargements de contenus asynchrones
 
 <br/> <br/>
 
 **ℹ️ Running the lab**<br/>
 `npm run dev -w 02.01`
+
+</small>
diff --git a/docs/markdown/02-stability/60-lab.md b/docs/markdown/02-stability/60-lab.md
@@ -6,11 +6,16 @@
 
 <small>
 
-- Afficher le texte de contenu des que possible
-- Pour les titres attendre la font pour l'afficher
-- Eviter de charger trop de variants
+Mettre en place une stratégie de chargement des fonts.
+
+- Pour les textes de contenus : afficher dès que possible
+- Pour les titres (Police Pixel) : attendre le chargement
+
+Eviter de charger trop de variants
 
 <br/> <br/>
 
 **ℹ️ Running the lab**<br/>
 `npm run dev -w 02.02`
+
+</small>
diff --git a/docs/markdown/03-1-speed-size/47-lab.md b/docs/markdown/03-1-speed-size/47-lab.md
@@ -8,15 +8,21 @@
 
 **1. Images**
 
-- Utiliser des résolutions d'images adaptées
+La fiche produit charge 26MB d'images 😱
+
+- Charger des résolutions d'image adaptées
 - Charger uniquement les images nécessaires
 
+Au chargement initial, la page devrait pouvoir charger moins d'1MB
+
 **2. Ressouces**
 
-- Nettoyer le code
+- Nettoyer le code inutile
 - Optimiser les ressources
 
-<br/> <br/>
+<br/>
 
 **ℹ️ Running the lab**<br/>
 `npm run dev -w 02.01`
+
+</small>
diff --git a/docs/markdown/03-2-speed-critical/77-lab.md b/docs/markdown/03-2-speed-critical/77-lab.md
@@ -6,12 +6,22 @@
 
 <small>
 
-- Ordonnancement
+**1. Les ressources**
+
+Contrôler la priorisation des chargements. Pour cela, utiliser :
+
+- L'ordonnancement de déclaration
 - Defer / async
-- Mieux gérer l'image principale
-- Charger de manière asynchrone les reviews
+- éventuellement fetchpriority
+
+**2. Les étapes bloquantes**
+
+- Améliorer le chargement de l'image principale
+- **Bonus** - Côté serveur, les avis client retardent le traitement : Trouver un moyen de reporter leur chargement
 
 <br/> <br/>
 
 **Running the lab**<br/>
 `npm run dev -w 03.02`
+
+</small>
diff --git a/docs/markdown/04-interactivity/70-lab.md b/docs/markdown/04-interactivity/70-lab.md
@@ -4,7 +4,24 @@
 
 ## Lab
 
+<small>
+
+**1. Au chargement**
+
+- Inspecter le chargement de la page via les devtools
+- Trouver un moyen d'éviter une tâche trop longue au chargement
+
+**2. Interactions**
+
+Essayez d'interragir avec la page : certaines interactions sont très lentes à répondre.
+
+- Voir ce qu'il se passe en utilisant les devtools
+- Trouver l'origine des problèmes d'interaction
+- Trouver un moyen d'améliorer la réactivité
+
 <br/> <br/>
 
 **Running the lab**<br/>
 `npm run dev -w 04.01`
+
+</small>
diff --git a/docs/markdown/05-custom-metrics/61-lab.md b/docs/markdown/05-custom-metrics/61-lab.md
@@ -4,7 +4,23 @@
 
 ## Lab
 
-<br/> <br/>
+<small>
 
-**Running the lab**<br/>
+**1. Mesures custom de chargement**
+
+- **User Timing API :** Mettre en place une mesure custom sur le chargement de la zone de conversion
+- **Element Timing API :** Mesurer le chargement du contenu de la bannière principale
+- Instancier un PerformanceObserver pour suivre ces deux métriques custom
+
+**2. Mesures custom de ressources**
+
+- **Resource Timing API** : Instancier un PerformanceObserver pour suivre le chargement des ressources de la page
+- Calculer le nombre total de ressources
+- Calculer le cache hit ratio de la page
+
+<br/>
+
+**ℹ️ Running the lab**<br/>
 `npm run dev -w 05.01`
+
+</small>
diff --git a/docs/markdown/06-automation/15-demo.md b/docs/markdown/06-automation/15-demo.md
@@ -0,0 +1,8 @@
+<!-- .slide: class="exercice" -->
+
+<h1 id="stability" style="margin-bottom: 30px;">06.01 - Démo Automation</h1>
+
+<br/> <br/>
+
+**ℹ️ Running the demo**<br/>
+`npm run lhci -w 06.01`
diff --git a/docs/scripts/slides.js b/docs/scripts/slides.js
@@ -175,6 +175,7 @@ function customMetricsSlides() {
     '05-custom-metrics/40-loaf.md',
     '05-custom-metrics/50-event.md',
     '05-custom-metrics/60-resource-timing.md',
+    '05-custom-metrics/61-lab.md',
   ];
 }
 
@@ -191,6 +192,7 @@ function automationSlides() {
     '06-automation/12-tools.md',
     '06-automation/13-example.md',
     '06-automation/14-metric.md',
+    '06-automation/15-demo.md',
   ];
 }
 

diff --git a/steps/02.01-stability/README.md b/steps/02.01-stability/README.md
@@ -3,28 +3,18 @@
 ## Running the lab
 
 ```
-npm run start -w 02.01
+npm run dev -w 02.01
 ```
 
 ## Instructions
 
 **1. Images**
 
-- Corriger les images produit
-- Corriger les images des recommandations produit
+- Anticiper le chargement des images :
+  - Images produit
+  - Recommendations
+  - ...
 
 **2. Contenu asynchrone**
 
-- Optimiser les contenus asynchrones
-
-## Information / Ressources
-
-### CSS
-
-```css
-img {
-  width: 100%;
-  height: auto;
-  aspect-ratio: 8/10;
-}
-```
+- Anticiper les chargements de contenus asynchrones
diff --git a/steps/02.02-fonts/README.md b/steps/02.02-fonts/README.md
@@ -1,16 +1,19 @@
-# 02.01 - Fonts
+# 02.02 - Fonts
 
 ## Running the lab
 
 ```
-npm run start -w 02.02
+npm run dev -w 02.02
 ```
 
 ## Instructions
 
-- Afficher le texte de contenu des que possible
-- Pour les titres attendre la font pour l'afficher
-- Eviter de charger trop de variants
+Mettre en place une stratégie de chargement des fonts.
+
+- Pour les textes de contenus : afficher dès que possible
+- Pour les titres (Police Pixel) : attendre le chargement
+
+Eviter de charger trop de variants
 
 ## Information / Ressources
 

diff --git a/steps/03.01-resources/README.md b/steps/03.01-resources/README.md
@@ -0,0 +1,35 @@
+# 03.01 - Optimisation des ressources
+
+## Running the lab
+
+```
+npm run dev -w 03.01
+```
+
+## Instructions
+
+**1. Images**
+
+La fiche produit charge 26MB d'images 😱
+
+- Charger des résolutions d'image adaptées
+- Charger uniquement les images nécessaires
+
+Au chargement initial, la page devrait pouvoir charger moins d'1MB
+
+**2. Ressouces**
+
+- Nettoyer le code inutile
+- Optimiser les ressources
+
+## Conseils / Informations
+
+La configuration du serveur accepte le redimentionnement d'images.
+
+Exemples :
+
+- Redimentionnement : http://localhost:3000/images/product/200/1.jpg?width=200
+- Changement de la qualité d'image : http://localhost:3000/images/product/200/1.jpg?quality=10
+- Redimentionnement + crop : http://localhost:3000/images/product/200/1.jpg?width=200&height=200
+
+Si vous êtes curieux, vous pouvez jeter un oeil à `/steps/shared/imageTransformer.js`
diff --git a/steps/03.02-priority/README.md b/steps/03.02-priority/README.md
@@ -0,0 +1,34 @@
+# 03.02 - Le chemin critique
+
+## Running the lab
+
+```
+npm run dev -w 03.02
+```
+
+## Instructions
+
+**1. Les ressources**
+
+Contrôler la priorisation des chargements. Pour cela, utiliser :
+
+- L'ordonnancement de déclaration
+- Defer / async
+- éventuellement fetchpriority
+
+**2. Les étapes bloquantes**
+
+- Améliorer le chargement de l'image principale
+- **Bonus** - Côté serveur, les avis client retardent le traitement : Trouver un moyen de reporter leur chargement
+
+## Conseils / Informations
+
+### Image Principale
+
+L'implémentation de l'image principale a été gérée en JavaScript, dans la fonction `initMainImage` (`/public/scripts/main.js`)
+
+Ne pas hésiter à visualiser le problème en utilisant les devtools
+
+### Avis client
+
+Pour le chargement des avis client, vous pouvez vous inspirer du chargement de la zone de conversion : `loadConversionContent` (`/public/scripts/main.js`)
diff --git a/steps/03.03-cache-demo/README.md b/steps/03.03-cache-demo/README.md
@@ -0,0 +1,9 @@
+# 03.03 - Le chemin critique
+
+## Running the demo
+
+```
+npm run dev -w 03.03
+```
+
+Consulter la page d'accueil (http://localhost:3000) : plusieurs types de directives sont présentés
diff --git a/steps/04.01-interactivity/README.md b/steps/04.01-interactivity/README.md
@@ -0,0 +1,50 @@
+# 04.01 - Interactivité
+
+## Running the lab
+
+```
+npm run dev -w 04.01
+```
+
+## Instructions
+
+**1. Au chargement**
+
+- Inspecter le chargement de la page via les devtools
+- Trouver un moyen d'éviter une tâche trop longue au chargement
+
+**2. Interactions**
+
+Essayez d'interragir avec la page : certaines interactions sont très lentes à répondre.
+
+- Voir ce qu'il se passe en utilisant les devtools
+- Trouver l'origine des problèmes d'interaction
+- Trouver un moyen d'améliorer la réactivité
+
+## Conseils / Informations
+
+Cela pourra vous être utile :
+
+Fonction debounce :
+
+```js
+const debounce = (callback, delay) => {
+  let timer;
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      callback(...args);
+    }, delay);
+  };
+};
+```
+
+Fonction yieldToMain :
+
+```js
+const yieldToMain = () => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, 0);
+  });
+};
+```