Core Web Vitals :
Comment optimiser la vitesse
de votre site ? [Tutoriel]

<!-- Format moderne : WebP avec fallback -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Description" loading="lazy" width="800" height="600">
</picture>

<!-- Compression avec qualité adaptative -->
<img src="image.jpg"
     srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
     alt="Description">

<!-- Lazy loading natif pour les images -->
<img src="placeholder.jpg" data-src="image.jpg" loading="lazy" alt="Description" class="lazyload">

<!-- Lazy loading pour les iframes (vidéos, cartes) -->
<iframe src="about:blank" data-src="https://www.youtube.com/embed/..." loading="lazy" frameborder="0" allowfullscreen></iframe>

// Implémentation JavaScript pour le lazy loading
document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll(".lazyload");

  const lazyLoad = (img) => {
    img.setAttribute("src", img.getAttribute("data-src"));
    img.onload = () => {
      img.classList.remove("lazyload");
    };
  };

  if ("IntersectionObserver" in window) {
    const lazyImageObserver = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          lazyLoad(entry.target);
          lazyImageObserver.unobserve(entry.target);
        }
      });
    });

    lazyImages.forEach((img) => {
      lazyImageObserver.observe(img);
    });
  } else {
    // Fallback pour les anciens navigateurs
    lazyImages.forEach(lazyLoad);
  }
});

<!-- Exemple de configuration .htaccess pour la mise en cache -->
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 month"

  # Images
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"

  # Fonts
  ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript
</IfModule>

<!-- Chargement asynchrone du JavaScript -->
<script src="script.js" async></script>

<!-- Chargement différé du JavaScript -->
<script src="script.js" defer></script>

<!-- CSS critique en ligne -->
<style>
  /* CSS critique pour le rendu above-the-fold */
  body { font-family: Arial; }
  .header { background: #00B894; }
</style>

<!-- CSS non critique chargé de manière asynchrone -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

// Exemple de code pour diviser les tâches longues (FID)
function processLargeData(data) {
  // Diviser la tâche en chunks
  const chunkSize = 1000;
  const chunks = [];

  for (let i = 0; i < data.length; i += chunkSize) {
    chunks.push(data.slice(i, i + chunkSize));
  }

  // Traiter chaque chunk avec setTimeout
  chunks.forEach((chunk, index) => {
    setTimeout(() => {
      processChunk(chunk);
    }, index * 50); // 50ms entre chaque chunk
  });
}

function processChunk(chunk) {
  // Traitement du chunk
}

<!-- Activation de la compression Brotli (meilleure que gzip) -->
<IfModule mod_brotli.c>
  AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript
</IfModule>

<!-- Préconnexion aux domaines tiers -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"></noscript>