optimize

Analyze Core Web Vitals and implement optimization strategies for web performance.

59|5|Updated Mar 8, 2026
One-click install
npx skills add https://github.com/FavioVazquez/learnship --skill optimize-faviovazquez
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/FavioVazquez/learnship/tree/main/.windsurf/skills/impeccable/optimize
Command: npx skills add https://github.com/FavioVazquez/learnship --skill optimize-faviovazquez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses slow loading times, janky animations, and large bundle sizes that degrade user experience and impact conversion rates.

Core Features & Use Cases

  • Performance Auditing: Identifies bottlenecks in loading, rendering, and animation.
  • Optimization Strategies: Provides actionable steps for images, JavaScript, CSS, and network requests.
  • Core Web Vitals Improvement: Focuses on enhancing LCP, FID/INP, and CLS scores.
  • Use Case: A website's LCP is over 4 seconds due to a large hero image. This Skill can guide the process of optimizing the image format, sizing, and implementing lazy loading to significantly improve load times.

Quick Start

Use the optimize skill to improve the loading speed of the website by optimizing images and JavaScript bundles.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I improve my website's Core Web Vitals when the LCP is over 4 seconds?

To improve poor Core Web Vitals, you must optimize web interface performance by identifying loading bottlenecks and applying strategies like image optimization, code splitting, and network request enhancements to improve LCP, FID/INP, and CLS scores.

What are the best strategies for reducing JavaScript bundle size and initial load time?

The best strategies for reducing JavaScript bundle size involve implementing code splitting and tree shaking. These web performance optimization techniques systematically eliminate unused code and split bundles to significantly improve initial loading speed.

Why do my web animations appear janky and how can I optimize rendering performance?

Janky web animations occur due to rendering bottlenecks, and you can optimize rendering performance by implementing CSS containment and GPU-accelerated animations. These frontend optimization techniques ensure smooth runtime performance and enhance user experience.

How do I use the Intersection Observer for efficient viewport detection and lazy loading?

You can use the Intersection Observer for efficient viewport detection by implementing it to trigger lazy loading of elements. This web performance technique defers off-screen network requests, significantly improving loading speed and reducing initial rendering workload.

Does CSS containment work for optimizing frontend rendering without breaking layout?

CSS containment works for optimizing frontend rendering by isolating page subtrees, which limits the browser's rendering scope to prevent janky animations. When applied correctly, it improves runtime performance without breaking the overall layout.