Performance optimisation

Analyze Lighthouse audits to optimize website loading and runtime performance.

Updated Jan 23, 2026
One-click install
npx skills add https://github.com/pixels-and-code/pixels-and-code --skill performance-optimisation-pixels-and-code
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Performance optimisation
Source: https://github.com/pixels-and-code/pixels-and-code/tree/main/skills/performance
Command: npx skills add https://github.com/pixels-and-code/pixels-and-code --skill performance-optimisation-pixels-and-code

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses slow website loading times and poor runtime performance by identifying and resolving bottlenecks, ultimately improving user experience and Core Web Vitals.

Core Features & Use Cases

  • Bottleneck Identification: Pinpoints performance issues in code, assets, and third-party scripts.
  • Optimization Strategies: Provides actionable code examples and best practices for critical rendering path, JavaScript, images, and fonts.
  • Performance Budgeting: Defines clear targets for resource sizes and load times.
  • Use Case: A website's Largest Contentful Paint (LCP) is too high. This Skill analyzes the page, identifies the large hero image as the culprit, and suggests using AVIF format with appropriate fetchpriority and loading attributes.

Quick Start

Analyze the provided URL to identify performance bottlenecks and suggest optimizations.

Frequently Asked Questions about Performance optimisation

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

FAQPage Schema
How do I improve my website loading speed using Lighthouse audits?

Improve website loading speed by analyzing Lighthouse audits to identify bottlenecks in the critical rendering path, JavaScript execution, and resource loading. This process provides actionable optimization strategies for assets like images and fonts to boost efficiency.

What is the best way to optimize Largest Contentful Paint for hero images?

The best way to optimize Largest Contentful Paint is to compress large hero images into modern formats like AVIF and apply appropriate fetchpriority and loading attributes. This reduces resource load times and directly improves your Core Web Vitals.

How do I fix poor Core Web Vitals when runtime performance is slow?

Fix poor Core Web Vitals by pinpointing runtime performance issues in code and third-party scripts. Optimizing JavaScript execution and defining strict performance budgets for resource sizes resolves slow runtime bottlenecks.

Can I use performance budgets to prevent website loading speed issues?

Yes, you can use performance budgets to prevent loading speed issues by defining clear targets for maximum resource sizes and load times. Enforcing these budgets ensures adherence to optimization constraints and maintains optimal runtime efficiency.

Why does my Largest Contentful Paint score drop despite optimized images?

Your Largest Contentful Paint score may drop due to unoptimized font loading or render-blocking JavaScript in the critical rendering path. Analyzing Lighthouse audits helps identify these hidden bottlenecks and suggests appropriate caching mechanisms.