LE PIPELINE D'IMAGES
Le pipeline FAL plus Sharp que j'exécute sur chaque site Seahawk pour atteindre un score Lighthouse 100 sur les images par défaut, avec des chiffres concrets de taille de fichier.
Pourquoi la discipline d'images est la moitié de la bataille de performance
Les images sont l'élément LCP sur environ 70 pour cent des pages marketing. La discipline d'images est le levier de performance à plus haut effet de levier que je connaisse. Les équipes qui maîtrisent cela atteignent les Core Web Vitals sans effort ; les équipes qui se trompent combattent les Core Web Vitals pour toujours.
La discipline est structurelle : choisir le format, redimensionner au moment du téléchargement, optimiser l'encodage, définir des dimensions explicites, précharger l'image LCP. Chacun de ces éléments est un investissement d'ingénierie unique qui rapporte à travers chaque page de chaque site.
Génération de héros FAL
Je génère des images de héros via FAL flux-pro/v1.1-ultra et Recraft v3. Les deux produisent des images JPEG de 1200 par 675 pixels à qualité d'encodage complète, généralement 600KB à 1,5MB par image. Le téléchargement brut vers Supabase Storage signifie que chaque page expédie environ 1MB de héros seul.
FAL coûte environ 4 cents par image héroïque, ce qui est négligeable comparé à la photographie manuelle ou aux licences de stock.
Réencodage tranchant en WebP
Avant tout téléchargement, l'image passe par sharp(buf).resize({width:1600, fit:"inside"}).webp({quality:82}).toBuffer(). Cela produit un fichier WebP 90 % plus petit que le JPEG source sans perte perceptuelle. Un héros de 900 KB devient un héros de 80 KB.
Sur 53 images héroïques sur gautamkhorana.com, l'économie totale était d'environ 50 MB au niveau du site. Le même pipeline appliqué aux sites clients chez Seahawk Media livre régulièrement des gains similaires. Le code fait dix lignes ; l'impact est durable.
Paramètres de téléchargement de stockage
Définissez cacheControl: 31536000 sur le téléchargement de stockage pour que le CDN mette en cache le fichier pendant un an. Le format WebP donne aux navigateurs modernes ce qu'ils veulent ; les anciens navigateurs reviennent à JPEG via l'élément picture.
Utilisez un modèle d'URL stable (slug-hero.webp) pour que l'histoire d'invalidation du cache soit claire. Quand un héros se met à jour, le slug doit pivoter (slug-hero-v2.webp) et la base de données met à jour l'URL atomiquement.
L'intégration frontale
Chaque image héroïque doit avoir des attributs width et height explicites dans le HTML. Sans eux, des décalages de mise en page surviennent lors du chargement de l'image et le CLS augmente. Les composants Astro et Next.js Image le gèrent automatiquement ; les balises img brutes le nécessitent manuellement.
L'image héroïque au-dessus de la pliure doit être préchargée avec link rel="preload" as="image" dans l'en-tête du document. Économise généralement 100 à 400 millisecondes sur la métrique LCP. Le changement à une ligne au plus grand impact disponible sur la plupart des sites marketing.
Lazy-load chaque image sous la ligne de flottaison avec loading="lazy". Les navigateurs gèrent cela nativement maintenant ; aucune bibliothèque JavaScript nécessaire.
Le pipeline complet dans une fonction auxiliaire
J'ai extrait ce pipeline dans scripts/lib/optimize-image.mjs qui prend un buffer, exécute le redimensionnement plus l'encodage WebP, retourne le buffer optimisé. Utilisé dans le pipeline auto-blog hero, les scripts de ré-encodage en masse, et l'utilitaire d'upload manuel.
La fonction auxiliaire unique signifie que la discipline est centralisée. Les nouveaux scripts qui ont besoin d'uploader des images appellent la même fonction auxiliaire, obtiennent la même compression, produisent les mêmes tailles de fichier. La discipline ne dépend pas d'un seul ingénieur se souvenant d'exécuter sharp.