đź’» DĂ©veloppement

web-performance-optimizer

Optimise les performances web (Core Web Vitals, loading, rendering).

⚡ Installation & lancement en 1 commande

Copiez-collez dans votre terminal : le skill s'installe dans ~/.claude/skills et Claude Code se lance directement dessus.

macOS / Linux
curl -fsSL https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.sh | sh -s -- web-performance-optimizer --launch
Windows (PowerShell)
iex "& { $(iwr -useb https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.ps1) } web-performance-optimizer -Launch"

🚀 Déjà installé ?

claude "/web-performance-optimizer"

Ou tapez /web-performance-optimizer dans une session Claude Code, ou décrivez simplement votre besoin — le skill se déclenche automatiquement via le skill-router.

🔑 Déclencheurs automatiques

Le skill s'active automatiquement quand votre demande contient :

performance webCore Web VitalsLCPFIDCLSlighthouse scorepage speedsite lentbundle sizelazy loading

📦 Installation manuelle

git clone https://github.com/khalilbenaz/claude-skills-collection.git cp -r claude-skills-collection/dev-skills/web-performance-optimizer ~/.claude/skills/

Source : dev-skills/web-performance-optimizer

đź“– Manuel

Web Performance Optimizer

Workflow

  1. Audit avec Lighthouse et WebPageTest : lancer un audit Lighthouse (mode navigation, desktop et mobile) pour obtenir les scores et métriques, puis WebPageTest pour le waterfall détaillé, le Time to First Byte, et l'analyse des requêtes bloquantes.
  1. Core Web Vitals : viser les seuils "Good" définis par Google — LCP (Largest Contentful Paint) < 2.5s pour le chargement perçu, FID (First Input Delay) < 100ms / INP (Interaction to Next Paint) < 200ms pour la réactivité, CLS (Cumulative Layout Shift) < 0.1 pour la stabilité visuelle.
  1. Optimisation du chargement JavaScript : implémenter le code splitting par route (dynamic import()), le tree shaking pour éliminer le code mort, les dynamic imports pour les fonctionnalités non critiques, et <link rel="preload"> / <link rel="prefetch"> pour les ressources prioritaires.
  1. Optimisation des images : convertir en formats modernes WebP et AVIF (30-50% plus légers), appliquer le lazy loading (loading="lazy") aux images hors écran, utiliser des images responsives (srcset/sizes), et servir via un CDN avec redimensionnement à la volée.
  1. Optimisation du CSS : extraire et inliner le CSS critique (above-the-fold) dans le <head>, charger le reste en asynchrone (media="print" onload), purger le CSS inutilisé avec PurgeCSS ou le purge intégré de Tailwind, et éviter les imports CSS en cascade.
  1. Optimisation JavaScript : utiliser defer ou async sur les scripts non critiques, analyser le bundle avec webpack-bundle-analyzer ou Rollup Visualizer, déplacer les tâches lourdes vers des Web Workers, et réduire le main thread blocking time.
  1. Stratégie de cache : configurer les headers HTTP Cache-Control (immutable pour les assets versionnés, stale-while-revalidate pour les pages), implémenter un Service Worker pour le cache offline et les stratégies cache-first/network-first, et invalider le cache via content hashing.
  1. Infrastructure et livraison : déployer les assets statiques sur un CDN (Cloudflare, Fastly, AWS CloudFront), activer HTTP/2 ou HTTP/3 pour le multiplexage des requêtes, activer la compression Brotli (meilleur que gzip), et explorer l'edge computing pour réduire la latence réseau.

Règles