LCP (Largest Contentful Paint): < 2.5s (what users see as \"loaded\") INP (Interaction to Next Paint): < 200ms (responsiveness) CLS (Cumulative Layout Shift): < 0
The Performance skill guides marketers and developers on optimizing Core Web Vitals to improve user experience and search rankings. It focuses on achieving key metrics like Largest Contentful Paint (LCP) under 2.5 seconds, Interaction to Next Paint (INP) below 200 milliseconds for responsiveness, and minimizing Cumulative Layout Shift (CLS) to less than 0.1 for visual stability. The skill covers practical techniques such as image optimization, font loading strategies, CSS performance tuning, and efficient JavaScript handling to reduce load times and prevent layout shifts.
By implementing these optimizations, users can ensure faster page loads, smoother interactions, and stable layouts, which directly impact SEO performance and conversion rates. This skill distills complex front-end performance best practices into actionable steps relevant to content, SEO, and conversion rate optimization (CRO) efforts.
This skill is designed for performance marketers managing SEO and CRO who need to improve page speed and user engagement metrics. Agency strategists working with clients on technical SEO audits will find it valuable for prioritizing frontend fixes that affect Core Web Vitals. Additionally, growth leads coordinating between developers and marketing teams can use this skill to align technical improvements with business goals like reducing bounce rates and increasing conversion velocity.
First, audit the site’s Core Web Vitals using tools like Google PageSpeed Insights or Web Vitals Chrome extension to identify bottlenecks in LCP, INP, and CLS. Next, optimize images by converting to next-gen formats (WebP, AVIF), setting explicit width and height attributes to prevent layout shifts, and applying lazy loading to below-the-fold assets. Then, improve font delivery by preloading critical fonts with WOFF2 format, using font-display swap to avoid invisible text flashes, and limiting font files to reduce payload. Finally, refine CSS and JavaScript by avoiding expensive properties during scroll, deferring non-critical scripts, debouncing event handlers, and batching DOM updates to prevent layout thrashing and improve responsiveness.
How do I reduce CLS effectively? Always set width and height on images and media elements and reserve space for dynamic content to prevent unexpected layout shifts. Can I use Google Fonts without hurting performance? Self-host fonts in WOFF2 format and preload them to avoid extra DNS lookups and improve load times. What’s the best way to defer JavaScript? Use the `defer` attribute for non-essential scripts and `async` for independent analytics or third-party scripts to prevent render blocking.
Attach the Performance skill to any Metaflow agent task that involves SEO audits, content optimization, or frontend performance improvements. The agent will provide targeted recommendations based on Core Web Vitals and practical optimizations for images, fonts, CSS, and JavaScript. Expect actionable insights that translate technical metrics into marketing impact, helping prioritize fixes and monitor performance trends over time. This skill integrates smoothly with workflow steps focused on technical SEO and CRO, enabling data-driven decisions around page speed and user experience.
For broader context, see our roundup of marketing skills claude, and read Claude skills for SEO for related setup guidance.