web-performance-optimization

Name: web-performance-optimization
Availability: InStock
Author: WP-Coaching

Diagnose and optimize website performance including Core Web Vitals, bundle size, and caching.

Updated Sep 1, 2021

Search Tags:#performance #caching #bundle size #lighthouse #code splitting #core web vitals #image optimization

Ready to run

npx skills add https://github.com/WP-Coaching/pellegrims.coach --skill web-performance-optimization-wp-coaching

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-performance-optimization
Source: https://github.com/WP-Coaching/pellegrims.coach/tree/main/.agents/skills/web-performance-optimization
Command: npx skills add https://github.com/WP-Coaching/pellegrims.coach --skill web-performance-optimization-wp-coaching

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Slow websites hurt user experience, SEO rankings, and conversion rates. This Skill provides a systematic workflow to measure, analyze, and fix performance issues such as slow loading times, large JavaScript bundles, unoptimized images, and poor Core Web Vitals scores. ## Core Features & Use Cases - Core Web Vitals Optimization: Diagnose and fix LCP, FID, and CLS issues with concrete code patterns for images, scripts, and layout stability. - Bundle Size Reduction: Analyze JavaScript bundles, replace heavy dependencies, implement code splitting, and remove dead code. - Image & Caching Strategies: Convert images to WebP/AVIF, implement responsive and lazy-loaded images, and configure caching headers. - Use Case: Your Next.js site scores 62 on Lighthouse with a 4.2s LCP. Use this Skill to identify the oversized hero image and blocking scripts, apply the recommended fixes, and verify the score improves. ## Quick Start Ask the assistant to audit your website's performance and create an optimization plan for improving Core Web Vitals.

Frequently Asked Questions about web-performance-optimization

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

FAQPage Schema

How do I improve Core Web Vitals scores on my website?▼

Start by measuring LCP, FID, and CLS with Lighthouse, then fix the largest issues first. Common fixes include optimizing hero images with modern formats, code splitting large JavaScript bundles, and setting explicit width and height on images to prevent layout shifts.

How to reduce JavaScript bundle size in a Next.js app?▼

Analyze the bundle with webpack-bundle-analyzer, replace heavy dependencies like moment.js with lighter alternatives such as date-fns, and use dynamic imports for code splitting. Removing unused code and deferring third-party scripts also reduces the main bundle significantly.

What image formats should I use for web performance?▼

Use AVIF for the best compression, WebP as a widely supported fallback, and optimized JPEG as a final fallback. Serve them with the picture element and srcset so browsers pick the best supported format and size.

Why does my site have a high Cumulative Layout Shift score?▼

High CLS usually comes from images or embeds without explicit dimensions, or dynamically injected content. Fix it by setting width and height attributes, using the CSS aspect-ratio property, and reserving space with skeleton loaders.

Does lazy loading hurt above-the-fold content performance?▼

Yes, lazy loading above-the-fold images delays LCP. Use loading="eager" and fetchpriority="high" for hero images, and reserve lazy loading for below-the-fold content only.