FrontMaster - Apprendre le Front-end Avance

Core Web Vitals et Optimisation

Suivi des metriques cles et optimisation du bundle.

Les Core Web Vitals sont les metriques cles de Google pour mesurer l'experience utilisateur :

LCP (Largest Contentful Paint) : Temps d'affichage du plus grand element visible. Objectif : < 2.5s
FID (First Input Delay) / INP (Interaction to Next Paint) : Reactivite aux interactions. Objectif : < 200ms
CLS (Cumulative Layout Shift) : Stabilite visuelle. Objectif : < 0.1

Techniques d'optimisation : - Code splitting et dynamic imports - Lazy loading des images et composants - Optimisation des images (WebP, AVIF) - Minification et tree-shaking

Exemple de code

optimization.tsx

typescript

import dynamic from "next/dynamic";
import Image from "next/image";

// Dynamic import (code splitting)
const HeavyChart = dynamic(
  () => import("@/components/HeavyChart"),
  {
    loading: () => <p>Chargement du graphique...</p>,
    ssr: false // Desactiver le SSR si necessaire
  }
);

// Image optimisee avec next/image
function ProductCard({ product }) {
  return (
    <div>
      <Image
        src={product.image}
        alt={product.name}
        width={400}
        height={300}
        placeholder="blur"
        blurDataURL={product.blurHash}
        sizes="(max-width: 768px) 100vw, 50vw"
        loading="lazy"
      />
      <h3>{product.name}</h3>
    </div>
  );
}

// Lazy loading de composants React
import { lazy, Suspense } from "react";

const LazyModal = lazy(() => import("./Modal"));

function App() {
  return (
    <Suspense fallback={<div>Chargement...</div>}>
      <LazyModal />
    </Suspense>
  );
}

A retenir

1LCP < 2.5s, INP < 200ms, CLS < 0.1
2Dynamic imports pour le code splitting
3next/image pour l'optimisation automatique des images
4Lazy loading et Suspense pour le chargement differe

Exercice pratique

Optimiser le chargement d'une page

Ecrivez une page Next.js optimisee qui :

1Utilise dynamic de next/dynamic pour charger un composant lourd HeavyChart avec un fallback "Chargement..."

2Utilise Image de next/image pour afficher une image produit optimisee avec loading="lazy" et un placeholder="blur"