optimize

Optimize web performance by analyzing metrics and implementing code splitting and image optimization.

5|Updated Sep 14, 2025

Search Tags:#performance #web vitals #optimization #bundle size #rendering #animation #loading speed

Ready to run

npx skills add https://github.com/JiaxuanZou0714/jiaxuanzou0714.github.io --skill optimize-jiaxuanzou0714

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/JiaxuanZou0714/jiaxuanzou0714.github.io/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/JiaxuanZou0714/jiaxuanzou0714.github.io --skill optimize-jiaxuanzou0714

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses slow loading times, janky animations, and large file 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 image compression, code splitting, CSS optimization, and GPU-accelerated animations.
Core Web Vitals Improvement: Focuses on enhancing LCP, FID/INP, and CLS scores.
Use Case: A website's mobile loading speed is poor, leading to high bounce rates. This Skill analyzes the site, suggests optimizing images and deferring non-critical JavaScript, resulting in a faster, more engaging mobile experience.

Quick Start

Use the optimize skill to improve the loading speed of the website.

Frequently Asked Questions about optimize

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

FAQPage Schema

How do I improve Core Web Vitals scores for poor mobile loading speed?▼

Improve Core Web Vitals by optimizing loading speed through image compression, deferring non-critical JavaScript, and minimizing bundle size. This directly enhances LCP, FID/INP, and CLS scores to reduce high mobile bounce rates.

What is the best way to fix janky animations and rendering bottlenecks?▼

Fix janky animations by implementing GPU-accelerated animations and CSS containment. Auditing rendering performance identifies specific bottlenecks, allowing you to apply strategies that ensure smooth frame rates and responsive user interfaces.

How does code splitting help with web performance optimization?▼

Code splitting helps web performance optimization by breaking large bundle sizes into smaller chunks. Deferring non-critical JavaScript execution improves network efficiency and loading speed, preventing large files from degrading user experience.

Can I use CSS containment to optimize rendering and loading speed?▼

Yes, you can use CSS containment to optimize rendering by isolating parts of the page, allowing the browser to skip unnecessary rendering work. Combined with image delivery optimization, it significantly improves loading speed and interface performance.

Why does large bundle size degrade user experience and impact conversion rates?▼

Large bundle size degrades user experience by increasing network payload and delaying JavaScript execution, which slows loading speed. This creates slow loading times and janky interactions that frustrate users and directly impact conversion rates.