skills.rest
achyutkneupane
achyutkneupaneCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

performance

Diagnose and optimize web page speed using Core Web Vitals budgets and code-level fixes.

Updated Nov 29, 2025
Search Tags:#caching#lighthouse#web performance#code splitting#core web vitals#image optimization#page speed
One-click install
npx skills add https://github.com/achyutkneupane/Blog-Kit --skill performance-achyutkneupane
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/achyutkneupane/Blog-Kit/tree/main/.ai/skills/performance
Command: npx skills add https://github.com/achyutkneupane/Blog-Kit --skill performance-achyutkneupane

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Slow page loads, render-blocking resources, and unoptimized assets hurt user experience and search rankings. This Skill provides a systematic audit workflow with concrete code fixes for loading speed, runtime efficiency, and resource optimization. ## Core Features & Use Cases - Performance Budgets: Enforce measurable limits for page weight, JavaScript, CSS, images, fonts, and third-party scripts. - Critical Rendering Path Optimization: Apply preconnect, preload, Early Hints, Speculation Rules, and deferred CSS/JS patterns with ready-to-use snippets. - Asset & Runtime Optimization: Implement responsive images (AVIF/WebP), font loading strategies, caching headers, service workers, and layout-thrashing fixes. - Use Case: A Lighthouse audit shows a 4.5s LCP on your landing page. Use this Skill to identify the unoptimized hero image, add fetchpriority and preload hints, and compress assets to bring LCP under 2.5s. ## Quick Start Audit my web page for performance bottlenecks and suggest specific optimizations to improve Core Web Vitals scores.

Frequently Asked Questions about performance

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

FAQPage Schema
How do I improve my website's Largest Contentful Paint (LCP)?▼

Improve LCP by preloading the hero image with fetchpriority="high", using modern formats like AVIF or WebP, and reducing server response time below 800ms TTFB. Target an LCP under 2.5 seconds measured with Lighthouse or CrUX data.

How to reduce JavaScript bundle size for faster page loads?▼

Reduce bundle size with route-based and component-based code splitting using dynamic imports, and tree shaking by importing only specific functions instead of entire libraries. Keep compressed JavaScript under 300 KB to limit parsing and execution time.

What image format should I use for web performance?▼

Use AVIF for photos where supported (92%+ browsers) with WebP as fallback and JPEG as final fallback via the picture element. Use SVG for icons and logos, and PNG only for graphics requiring transparency.

Does lazy loading images hurt SEO or performance?▼

Lazy loading helps performance for below-fold images but harms LCP if applied to above-fold hero images. Set loading="eager" and fetchpriority="high" on the LCP image, and loading="lazy" only on images below the fold.

Why is my page still slow after optimizing images?▼

Remaining slowness usually comes from render-blocking CSS/JS, slow server response (TTFB over 800ms), or heavy third-party scripts. Defer non-critical scripts, inline critical CSS, enable Brotli compression, and delay third-party widgets until user interaction.

Related Skills

Explore More Software Engineering Skills→
oiagorodriguesoiagorodrigues

core-web-vitals

Identify Core Web Vitals metrics and apply optimization patterns for LCP, INP, and CLS.

Community
Advanced
Gekkos-techGekkos-tech
4

core-web-vitals

Optimize LCP, INP, and CLS metrics for web pages.

Official
Intermediate
petrogurcakpetrogurcak

technical-seo

Audit technical SEO elements like Core Web Vitals and structured data.

Community
Advanced
bytetalentbytetalent

Astro Static Patterns

Generate static Astro sites with content collections and MDX.

Official
Intermediate