# How to Optimize Core Web Vitals (LCP, INP, CLS) for AI-Generated Landing Pages > Boost AI landing page performance by optimizing Core Web Vitals. Learn to chain skills for faster LCP, INP, and CLS scores, ensuring a superior user experience. - Repository: [Leon Lin/taste-skill](https://github.com/Leonxlnx/taste-skill) - Tags: tutorial - Published: 2026-06-01 --- **Optimize Core Web Vitals for AI-generated landing pages by chaining specific skills in the Leonxlnx/taste-skill repository—using minimalist-skill for lightweight assets, imagegen-frontend-web for WebP/AVIF formats, and output-skill with `scriptStrategy: "defer"`—to achieve LCP under 2.5s, INP under 100ms, and CLS under 0.1.** The **taste-skill** repository provides a modular framework where markdown-based **skills** define workflows for AI-generated landing-page content. Each skill resides in the `skills/` directory and controls specific rendering layers, from image generation to HTML assembly. By configuring these skills to manage asset delivery, script loading, and dimensional stability, you systematically tune **Largest Contentful Paint (LCP)**, **Interaction-to-Next-Paint (INP)**, and **Cumulative Layout Shift (CLS)** without sacrificing generative content quality. ## Optimize Largest Contentful Paint (LCP) with Lightweight Assets LCP measures the render time of the largest visible element, typically the hero image or primary heading. The [`skills/minimalist-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/minimalist-skill/SKILL.md) workflow reduces LCP by stripping non-essential decorative assets and limiting high-resolution image counts in hero sections. Pair this with [`skills/imagegen-frontend-web/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md), which outputs modern **WebP/AVIF** formats and automatically injects explicit `width`/`height` attributes along with `loading="lazy"` for below-the-fold assets, eliminating decode delays that push LCP beyond the 2.5s threshold. ## Minimize Interaction-to-Next-Paint (INP) via Script Strategy INP captures the latency of the slowest user interaction throughout the page lifecycle. In [`skills/output-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/output-skill/SKILL.md), set the `scriptStrategy` parameter to `"defer"` to prevent non-critical JavaScript from blocking the main thread during user gestures. The [`skills/stitch-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/stitch-skill/SKILL.md) orchestrates fragment merging to respect loading order, ensuring interactive elements like buttons and forms become responsive before ancillary scripts execute, keeping INP below 100ms. ## Eliminate Cumulative Layout Shift (CLS) with Explicit Dimensions CLS occurs when visible elements shift position after initial render, often due to missing size attributes on images or dynamic content injection. Enable the **`preserve-size`** flag in [`skills/redesign-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/redesign-skill/SKILL.md) to write explicit `width`/`height` attributes into all HTML fragments. The [`skills/brutalist-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/brutalist-skill/SKILL.md) and [`skills/soft-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/soft-skill/SKILL.md) workflows further stabilize layouts by declaring dimensions for videos and iframes, while injecting fallback CSS rules that reserve vertical space for AI-generated headings before text streams arrive, maintaining CLS under 0.1. ## Step-by-Step Optimization Workflow Follow this sequence to implement performance tuning across the three architectural layers: 1. **Initialize the Minimalist skill** to remove visual noise and reduce hero image weight. 2. **Generate optimized images** using ImageGen-frontend-web with `--format webp` and `--quality 80` to produce next-gen assets. 3. **Enforce dimensional constraints** by activating `preserve-size` in the Redesign skill, ensuring all media carries explicit size attributes. 4. **Defer non-critical JavaScript** via the Output skill's `scriptStrategy: "defer"` setting, keeping critical CSS inline while pushing scripts to the bottom of the body. 5. **Audit the generated page** using Lighthouse or PageSpeed Insights to verify targets: LCP < 2.5s, INP < 100ms, CLS < 0.1. ## Automating Performance Tuning with skill.sh The repository includes [`skill.sh`](https://github.com/Leonxlnx/taste-skill/blob/main/skill.sh) as a convenience wrapper for invoking skills from the command line. This script reads the corresponding [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md) files, loads hidden configuration blocks, and calls the underlying Instagit API. ```bash # 1️⃣ Generate a lightweight hero image in WebP format ./skill.sh run imagegen-frontend-web \ --format webp \ --quality 80 \ --output assets/hero.webp # 2️⃣ Build the page with minimal layout and explicit sizes ./skill.sh run minimalist-skill \ --hero assets/hero.webp \ --headline "Delicious AI-Powered Design" # 3️⃣ Stitch fragments together with deferred scripts ./skill.sh run stitch-skill \ --defer-scripts true \ --output dist/index.html ``` Adjust the flags to match your desired performance profile, ensuring the final [`dist/index.html`](https://github.com/Leonxlnx/taste-skill/blob/main/dist/index.html) meets Core Web Vitals thresholds before deployment. ## Summary - **LCP optimization** relies on [`skills/minimalist-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/minimalist-skill/SKILL.md) for lightweight heroes and [`skills/imagegen-frontend-web/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md) for WebP/AVIF generation with explicit dimensions. - **INP reduction** requires configuring `scriptStrategy: "defer"` in [`skills/output-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/output-skill/SKILL.md) and proper fragment ordering via [`skills/stitch-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/stitch-skill/SKILL.md). - **CLS prevention** depends on the `preserve-size` flag in [`skills/redesign-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/redesign-skill/SKILL.md) and space reservation rules in [`skills/soft-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/soft-skill/SKILL.md). - Use [`skill.sh`](https://github.com/Leonxlnx/taste-skill/blob/main/skill.sh) to chain these optimizations into automated workflows that produce performance-first AI landing pages. ## Frequently Asked Questions ### What is the taste-skill repository? The **taste-skill** repository by Leonxlnx is a collection of markdown-based skill definitions that drive AI-generated landing-page content. Each skill describes a self-contained workflow for design, layout, or asset generation, which the Instagit platform stitches together to produce complete HTML pages according to the core definition in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md). ### How does the minimalist-skill improve LCP scores? The [`skills/minimalist-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/minimalist-skill/SKILL.md) workflow improves **Largest Contentful Paint** by reducing the weight of hero sections through fewer high-resolution images and smaller type scales. This directly decreases the render time of the largest visible element, keeping LCP under the 2.5-second threshold recommended by Google. ### Can I apply these optimizations to existing landing pages or only new AI-generated ones? These optimizations are designed specifically for the AI generation pipeline defined in the taste-skill repository. While the principles apply broadly to any web page, the specific implementations—such as the `preserve-size` flag and `scriptStrategy` parameters—require execution through the Instagit platform and [`skill.sh`](https://github.com/Leonxlnx/taste-skill/blob/main/skill.sh) wrapper as outlined in the respective [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md) files. ### Which skill controls the final HTML output and script loading? The [`skills/output-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/output-skill/SKILL.md) controls final HTML rendering and supports the `scriptStrategy` parameter to inject `async` or `defer` attributes on scripts. This skill works in conjunction with [`skills/stitch-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/stitch-skill/SKILL.md) to ensure the final page structure prioritizes critical rendering paths for optimal Core Web Vitals.