Core Web Vitals fixen met AI suggesties
Als UX designer loop ik vaak tegen performance problemen aan die niet echt mijn expertise zijn. Vorige maand had een klant slechte Core Web Vitals scores en moest ik het fixen. AI heeft me gered.
Mijn aanpak:
1. PageSpeed Insights rapport gekopieerd (de JSON versie via de API)
2. In Claude geplakt met de vraag: "Analyseer dit rapport en geef me concrete acties om de scores te verbeteren, gesorteerd op impact."
3. Claude gaf een lijst van 12 acties, van image optimization tot lazy loading tot font loading strategie
De top 3 fixes die het meeste effect hadden:
- Images converteren naar WebP/AVIF en responsive sizes (LCP ging van 4.2s naar 1.8s)
- Unused CSS en JS verwijderen met PurgeCSS (FCP -40%)
- Font loading strategie aanpassen naar font-display: swap (CLS van 0.25 naar 0.05)
Het mooie is dat Claude niet alleen zegt WAT je moet doen maar ook HOE. Het gaf me concrete code snippets voor next/image configuratie, een PurgeCSS setup, en de font loading fix.
De totale score ging van 45 naar 89 op mobile. Klant was blij, ik had iets nieuws geleerd.
Reageer
bram.vdh17 dagen geleden
Nice! Die image optimalisatie is bijna altijd de grootste winst. Gebruik je next/image of een externe service? Ik gebruik Cloudinary voor grotere sites, dan hoef je je geen zorgen te maken over formats en sizes.
lisa_9216 dagen geleden
Next/image voor deze site, was al een Next.js project. Maar Cloudinary kende ik niet voor dit doel, ga ik eens bekijken voor WordPress sites.
thijs_vd16 dagen geleden
Dat je de JSON van PageSpeed Insights gebruikt ipv de visuele interface is een goede tip. Daar zit veel meer detail in die Claude kan analyseren. Ga ik overnemen.
anne.c16 dagen geleden
Als mede-designer herken ik dit zo. Performance is niet ons vakgebied maar we worden er wel op afgerekend. Fijn dat AI die kloof kan dichten.