Images, polices et scripts : le trio classique de la performance

Ce sujet concerne le volet performance. Les images comme canal de trafic (alt, recherche d'images, schéma ImageObject) sont traitées dans SEO des images.

Images. next/image apporte le lazy loading, l'AVIF/WebP et des tailles correctes, mais seulement avec une configuration honnête :

import Image from "next/image";

// Image LCP : priority, pas de lazy loading
<Image
  src="/hero.jpg"
  alt="Équipe travaillant sur la feuille de route d'un produit"
  width={1200}
  height={630}
  priority
  sizes="(max-width: 768px) 100vw, 1200px"
/>;

• priority uniquement sur l'image LCP (en général le hero). Tout ce qui est sous la ligne de flottaison reste en lazy.
• sizes doit correspondre à votre mise en page : sans lui, les appareils mobiles téléchargent des fichiers de taille desktop.
• alt décrit l'image aussi bien aux lecteurs d'écran qu'à la recherche d'images. Un alt="" vide uniquement pour les visuels purement décoratifs.

Polices. next/font auto-héberge Google Fonts, supprime la requête externe et règle font-display: swap tout seul :

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin", "latin-ext"], display: "swap" });

Scripts. Chaque script externe se dispute le thread principal avec votre contenu :

import Script from "next/script";

// Analytics : une fois la page devenue interactive
<Script src="https://www.googletagmanager.com/gtm.js?id=GTM-XXX" strategy="afterInteractive" />

// Widgets de chat, heatmaps : seulement quand le navigateur est inactif
<Script src="https://widget.example.com/chat.js" strategy="lazyOnload" />

Auditez ce que vous chargez : faites une trace dans Lighthouse et remettez en cause chaque script qui n'est pas essentiel à la page. Un gestionnaire de balises rempli de pixels oubliés peut lourdement charger le thread principal et faire grimper l'INP.

Checklist :

• L'image hero a priority, un sizes correct et un alt pertinent
• Toutes les polices via next/font, aucun CSS de police externe
• Scripts externes en afterInteractive ou lazyOnload
• Les images ne provoquent pas de décalages de mise en page (width/height toujours définis)