perf-web-optimization

Optimize Core Web Vitals and Lighthouse scores through image, caching, and code-splitting improvements.

59|14|Updated Mar 10, 2026
One-click install
npx skills add https://github.com/guilhermemarketing/esc-skills --skill perf-web-optimization-guilhermemarketing
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: perf-web-optimization
Source: https://github.com/guilhermemarketing/esc-skills/tree/main/skills/perf-web-optimization
Command: npx skills add https://github.com/guilhermemarketing/esc-skills --skill perf-web-optimization-guilhermemarketing

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Performance issues on modern websites cause slow user experiences, high bounce rates, and poor search rankings. This Skill provides a repeatable approach to identify and fix Core Web Vitals, image and asset optimization, caching, and code-splitting to deliver faster pages.

Core Features & Use Cases

  • Systematic workflow: Measure → Identify → Prioritize → Implement → Verify to deliver consistent improvements.
  • Target areas include LCP, CLS, INP, TTFB, and bundle size, with concrete techniques for images, fonts, third-party scripts, and caching.
  • Use Case: A marketing site with slow product pages can apply this Skill to reduce load times, improve Lighthouse scores, and increase conversions.

Quick Start

Run a performance audit on your site and apply the recommended optimizations to improve Core Web Vitals.

Frequently Asked Questions about perf-web-optimization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I improve Core Web Vitals like LCP, CLS, and INP on my website?

Improve Core Web Vitals by following a systematic workflow: measure, identify, prioritize, implement, and verify fixes. This targets LCP, CLS, INP, and TTFB through image optimization, code-splitting, caching strategies, and resource loading improvements.

What is the best way to reduce large bundle size in a single page application?

The best way to reduce bundle size is implementing code-splitting techniques alongside resource loading improvements. This optimizes heavy bundles by loading JavaScript more efficiently, directly improving Lighthouse scores and overall web performance for SPAs.

How do I fix slow-loading web pages with large image assets?

Fix slow-loading pages by applying systematic image optimization and caching strategies. This workflow identifies large image assets as target areas and implements concrete techniques to reduce load times and improve LCP metrics.

Does this web performance optimization workflow work for marketing sites?

Yes, this web performance optimization workflow works for marketing sites. A marketing site with slow product pages can apply this systematic approach to reduce load times, improve Lighthouse scores, and increase conversions.

How do I optimize third-party scripts and fonts to improve Lighthouse scores?

Optimize third-party scripts and fonts by applying concrete techniques within a systematic performance workflow. This process identifies and prioritizes these target areas to reduce their impact, ultimately improving Lighthouse scores and Core Web Vitals.