feat: preconnect & handleThumbnailClick (#49)

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

Hide file tree

Showing 10 changed files with 46 additions and 0 deletions.
diff --git a/docs/markdown/03-2-speed-critical/53-preload-prefetch.md b/docs/markdown/03-2-speed-critical/53-preload-prefetch.md
@@ -39,3 +39,23 @@ Attributs essentiels:
 - <strong>rel="preload"</strong> : Indique au navigateur de précharger la ressource.
 - <strong>as="type"</strong> : Spécifie le type de ressource (image, font, script, etc.) pour optimiser le traitement.
 - <strong>crossorigin="anonymous"</strong> : Nécessaire pour les ressources provenant de domaines tiers (comme des polices Google).
+
+##==##
+
+# Le chemin critique
+
+## et preconnect alors ?
+
+Initialiser une connexion vers l'origine de la ressource de façon préventive.
+
+<br>
+
+```html
+<!-- Preconnect -->
+
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link rel="preconnect" href="https://www.google-analytics.com" />
+```
+
+<!-- .element: class="fragment" data-fragment-index="1"-->
diff --git a/docs/scripts/slides.js b/docs/scripts/slides.js
@@ -96,6 +96,7 @@ function speedSizeSlides() {
     '03-1-speed-size/44-comparision.md',
     '03-1-speed-size/45-who.md',
     '03-1-speed-size/46-devtools.md',
+    '03-1-speed-size/47-lab.md',
     '03-1-speed-size/50-cache.md',
     '03-1-speed-size/51-cache-intro.md',
     '03-1-speed-size/52-cache-headers.md',
@@ -124,6 +125,7 @@ function speedCriticalSlides() {
     '03-2-speed-critical/74-http2.md',
     '03-2-speed-critical/75-http3.md',
     '03-2-speed-critical/76-http-devtools.md',
+    '03-2-speed-critical/77-lab.md',
   ];
 }
 

diff --git a/steps/03.01-resources-solution/public/scripts/main.js b/steps/03.01-resources-solution/public/scripts/main.js
@@ -88,7 +88,10 @@ const handleThumbnailClick = (event) => {
 
   const thumbnailImage = clickedThumbnail.querySelector('img');
   if (mainImage && thumbnailImage) {
+    let newFileName = thumbnailImage.src.match(/\/([^\/?]+\.jpg)/)[1];
+    let newValue = mainImage.srcset.replace(/\/\d+\.jpg/g, `/${newFileName}`);
     mainImage.src = thumbnailImage.src.split('?')[0];
+    mainImage.srcset = newValue;
     mainImage.alt = thumbnailImage.alt;
   }
 

diff --git a/steps/03.02-priority-solution/public/scripts/main.js b/steps/03.02-priority-solution/public/scripts/main.js
@@ -103,7 +103,10 @@ const handleThumbnailClick = (event) => {
 
   const thumbnailImage = clickedThumbnail.querySelector('img');
   if (mainImage && thumbnailImage) {
+    let newFileName = thumbnailImage.src.match(/\/([^\/?]+\.jpg)/)[1];
+    let newValue = mainImage.srcset.replace(/\/\d+\.jpg/g, `/${newFileName}`);
     mainImage.src = thumbnailImage.src.split('?')[0];
+    mainImage.srcset = newValue;
     mainImage.alt = thumbnailImage.alt;
   }
 

diff --git a/steps/03.02-priority/public/scripts/main.js b/steps/03.02-priority/public/scripts/main.js
@@ -88,7 +88,10 @@ const handleThumbnailClick = (event) => {
 
   const thumbnailImage = clickedThumbnail.querySelector('img');
   if (mainImage && thumbnailImage) {
+    let newFileName = thumbnailImage.src.match(/\/([^\/?]+\.jpg)/)[1];
+    let newValue = mainImage.srcset.replace(/\/\d+\.jpg/g, `/${newFileName}`);
     mainImage.src = thumbnailImage.src.split('?')[0];
+    mainImage.srcset = newValue;
     mainImage.alt = thumbnailImage.alt;
   }
 

diff --git a/steps/03.03-cache-demo/public/scripts/main.js b/steps/03.03-cache-demo/public/scripts/main.js
@@ -103,7 +103,10 @@ const handleThumbnailClick = (event) => {
 
   const thumbnailImage = clickedThumbnail.querySelector('img');
   if (mainImage && thumbnailImage) {
+    let newFileName = thumbnailImage.src.match(/\/([^\/?]+\.jpg)/)[1];
+    let newValue = mainImage.srcset.replace(/\/\d+\.jpg/g, `/${newFileName}`);
     mainImage.src = thumbnailImage.src.split('?')[0];
+    mainImage.srcset = newValue;
     mainImage.alt = thumbnailImage.alt;
   }
 

diff --git a/steps/04.01-interactivity-solution/public/scripts/main.js b/steps/04.01-interactivity-solution/public/scripts/main.js
@@ -116,7 +116,10 @@ const handleThumbnailClick = (event) => {
 
   const thumbnailImage = clickedThumbnail.querySelector('img');
   if (mainImage && thumbnailImage) {
+    let newFileName = thumbnailImage.src.match(/\/([^\/?]+\.jpg)/)[1];
+    let newValue = mainImage.srcset.replace(/\/\d+\.jpg/g, `/${newFileName}`);
     mainImage.src = thumbnailImage.src.split('?')[0];
+    mainImage.srcset = newValue;
     mainImage.alt = thumbnailImage.alt;
   }
 

diff --git a/steps/04.01-interactivity/public/scripts/main.js b/steps/04.01-interactivity/public/scripts/main.js
@@ -103,7 +103,10 @@ const handleThumbnailClick = (event) => {
 
   const thumbnailImage = clickedThumbnail.querySelector('img');
   if (mainImage && thumbnailImage) {
+    let newFileName = thumbnailImage.src.match(/\/([^\/?]+\.jpg)/)[1];
+    let newValue = mainImage.srcset.replace(/\/\d+\.jpg/g, `/${newFileName}`);
     mainImage.src = thumbnailImage.src.split('?')[0];
+    mainImage.srcset = newValue;
     mainImage.alt = thumbnailImage.alt;
   }
 

diff --git a/steps/05.01-custom-metrics-solution/public/scripts/main.js b/steps/05.01-custom-metrics-solution/public/scripts/main.js
@@ -121,7 +121,10 @@ const handleThumbnailClick = (event) => {
 
   const thumbnailImage = clickedThumbnail.querySelector('img');
   if (mainImage && thumbnailImage) {
+    let newFileName = thumbnailImage.src.match(/\/([^\/?]+\.jpg)/)[1];
+    let newValue = mainImage.srcset.replace(/\/\d+\.jpg/g, `/${newFileName}`);
     mainImage.src = thumbnailImage.src.split('?')[0];
+    mainImage.srcset = newValue;
     mainImage.alt = thumbnailImage.alt;
   }
 

diff --git a/steps/05.01-custom-metrics/public/scripts/main.js b/steps/05.01-custom-metrics/public/scripts/main.js
@@ -116,7 +116,10 @@ const handleThumbnailClick = (event) => {
 
   const thumbnailImage = clickedThumbnail.querySelector('img');
   if (mainImage && thumbnailImage) {
+    let newFileName = thumbnailImage.src.match(/\/([^\/?]+\.jpg)/)[1];
+    let newValue = mainImage.srcset.replace(/\/\d+\.jpg/g, `/${newFileName}`);
     mainImage.src = thumbnailImage.src.split('?')[0];
+    mainImage.srcset = newValue;
     mainImage.alt = thumbnailImage.alt;
   }