feat(slides): enhance monitoring slides (#51)

docs/markdown/07-monitoring/10-intro.md

@@ -2,26 +2,20 @@
 
 ## Pourquoi collecter de la donnée utilisateur ?
 
+<img src="./assets/images/07-monitoring/cycle-1.svg" style="width: 2000px; height: auto; display: block; margin: auto; margin-top: 20px;" />
+
 ##==##
 
 # Observabilité
 
 ## Pourquoi collecter de la donnée utilisateur ?
 
-|            | Local                                                         | Automatisé       |
-| ---------- | ------------------------------------------------------------- | ---------------- |
-| Rôle       | - Pendant les développements <br/>- Optimisation <br/>- Debug | - Non régression |
-| Pertinence | 👍                                                            | 👍👍             |
-| Précision  | 👍👍👍                                                        | 👍👍             |
+<img src="./assets/images/07-monitoring/cycle-2.svg" style="width: 2000px; height: auto; display: block; margin: auto; margin-top: 20px;" />
 
 ##==##
 
 # Observabilité
 
 ## Pourquoi collecter de la donnée utilisateur ?
 
-|            | Local                                                         | Automatisé       | Utilisateur (RUM)                                                                                                                                   |
-| ---------- | ------------------------------------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Rôle       | - Pendant les développements <br/>- Optimisation <br/>- Debug | - Non régression | - Détection d'anomalies en prod <br/>- Prioriser les correctifs / optimisations <br/>- Mesurer les effets des changements <br/>- Faire du reporting |
-| Pertinence | 👍                                                            | 👍👍             | 👍👍👍                                                                                                                                              |
-| Précision  | 👍👍👍                                                        | 👍👍             | 👍                                                                                                                                                  |
+<img src="./assets/images/07-monitoring/cycle-3.svg" style="width: 2000px; height: auto; display: block; margin: auto; margin-top: 20px;" />

docs/markdown/07-monitoring/20-tools.md

@@ -2,4 +2,4 @@
 
 ## Les outils
 
-<img src="./assets/images/07-monitoring/tools.png" style="width: 1000px; height: auto; display: block; margin-top: 20px;" />
+<img src="./assets/images/07-monitoring/tools.png" style="width: 1000px; height: auto; display: block; margin: auto; margin-top: 20px;" />

docs/markdown/07-monitoring/21-crux.md

@@ -0,0 +1,48 @@
+<!-- .slide: class="two-column with-code" -->
+
+# Observabilité
+
+## Zoom sur le CrUX
+
+Donnée collectée sur des navigateurs réels.
+
+Disponible sur BigQuery, et à travers plusieurs outils
+
+Permet de :
+
+- Suivre l'évolution des performances sur la durée
+- étudier les sites concurrents ou similaires
+- Trouver des éléments de comparaison
+- Base pour définir des budgets ou objectifs
+
+##--##
+
+<div style="margin-top: 205px;">
+
+<img src="./assets/images/07-monitoring/crux.png" style="width: 1000px; height: auto; display: block; margin: auto; margin-top: 20px;" />
+
+<small style="display: block; text-align: center;">
+
+https://developer.chrome.com/docs/crux/methodology/tools?hl=fr
+
+</small>
+
+</div>
+
+##==##
+
+# Observabilité
+
+## Zoom sur le CrUX : tableau de bord
+
+<img src="./assets/images/07-monitoring/crux-yt.png" style="width: 850px; height: auto; display: block; margin: auto;" />
+
+##==##
+
+# Observabilité
+
+## Zoom sur le CrUX
+
+Visible dans les devtools : <br/> Permet de comparer les performances locales et celles d'un service distant, publique.
+
+<img src="./assets/images/07-monitoring/crux-devtools.png" style="width: 1200px; height: auto; display: block; margin: auto;" />

docs/scripts/slides.js

@@ -201,6 +201,7 @@ function observabilitySlides() {
     '07-monitoring/01-title.md',
     '07-monitoring/10-intro.md',
     '07-monitoring/20-tools.md',
+    '07-monitoring/21-crux.md',
     '07-monitoring/30-metrics.md',
     '07-monitoring/40-sampling.md',
     '07-monitoring/50-reporting.md',