Does it require external tools for media optimization?

Yes, it utilizes ffmpeg for video compression and can use either ffmpeg or the sharp library for advanced image processing and placeholder generation.

Is this skill only for Next.js?

While it is specifically designed for Next.js projects with existing Image component patterns, the auditing logic and media scripts are applicable to most modern web frameworks.

How does this skill run a Lighthouse audit?

It checks for Lighthouse CLI or MCP availability to run a headless audit, parsing the results for metrics like LCP, CLS, and INP.

Can it handle background video optimization?

Absolutely. It provides automated scripts to compress videos for web use and implements Intersection Observer patterns for scroll-triggered playback.

What specific fixes can it automate?

It automates WebP conversion, placeholder generation, lazy loading setup, font optimization, and the implementation of dynamic imports for heavy components.

Website Speed Audit & Optimization

Name: Website Speed Audit & Optimization
Author: spuneiartur

byspuneiartur

0•

Analytics & Monitoring

Audits and automatically optimizes Next.js website performance through image compression, lazy loading, and Core Web Vitals improvements.

The Website Speed Audit & Optimization skill provides a comprehensive three-phase workflow—Audit, Fix, and Report—specifically designed for Next.js projects. It identifies performance bottlenecks using Lighthouse and manual codebase analysis, then applies automated fixes such as WebP conversion, ffmpeg video compression, blur-up lazy loading implementation, and bundle size reduction. This skill is essential for developers aiming to improve Core Web Vitals (LCP, CLS, INP) and ensure a fast, efficient user experience without manually configuring complex media processing pipelines.

Key Features

010 GitHub stars

02Automated Lighthouse audits and manual codebase performance scans

03Core Web Vitals optimization including LCP, CLS, and INP improvements

04Video compression and scroll-triggered playback implementation via ffmpeg

05Advanced image optimization using WebP conversion and blur-up placeholders

06Next.js-specific rendering and bundle size optimization strategies

Use Cases

01Automating bulk media optimization and responsive image implementation

02Improving Lighthouse scores and Core Web Vitals for better SEO and UX

03Diagnosing and fixing slow page load times in Next.js applications

Key Features

010 GitHub stars

02Automated Lighthouse audits and manual codebase performance scans

03Core Web Vitals optimization including LCP, CLS, and INP improvements

04Video compression and scroll-triggered playback implementation via ffmpeg

05Advanced image optimization using WebP conversion and blur-up placeholders

06Next.js-specific rendering and bundle size optimization strategies

Use Cases

01Automating bulk media optimization and responsive image implementation

02Improving Lighthouse scores and Core Web Vitals for better SEO and UX

03Diagnosing and fixing slow page load times in Next.js applications