skills.rest
MasaKagami
MasaKagamiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

optimize

Diagnose and fix UI performance issues in websites and applications.

Updated Jan 26, 2024
Search Tags:#bundle size#performance optimization#web performance#ui performance#load time
One-click install
npx skills add https://github.com/MasaKagami/masakagami.com --skill optimize-masakagami
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/MasaKagami/masakagami.com/tree/main/.crush/skills/optimize
Command: npx skills add https://github.com/MasaKagami/masakagami.com --skill optimize-masakagami

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill diagnoses and fixes UI performance issues, improving loading speed, rendering, animations, images, and bundle size, enhancing user experience.

Core Features & Use Cases

  • Performance Assessment: Measures and identifies bottlenecks like slow load times, large bundle sizes, and inefficient animations.
  • Optimization Strategies: Implements strategies for image optimization, JavaScript bundle reduction, CSS optimization, font optimization, and loading strategy improvements.
  • Rendering Optimization: Avoids layout thrashing, optimizes rendering, and reduces paint and composite times.
  • Animation Performance: Utilizes GPU acceleration and smooth 60fps animations.
  • React/Framework Optimization: Offers React-specific optimizations and general framework-agnostic improvements.
  • Network Optimization: Reduces requests, optimizes APIs, and enhances performance for slow connections.
  • Core Web Vitals Optimization: Focuses on Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.
  • Performance Monitoring: Utilizes tools like Chrome DevTools, WebPageTest, and Core Web Vitals for ongoing performance monitoring.

Quick Start

Use the optimize skill to analyze and improve the performance of your website or application.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I reduce my web application bundle size and improve load time?▼

To reduce bundle size and improve load time, you can implement JavaScript bundle reduction, image optimization, and loading strategy improvements to enhance overall website performance and user experience.

What is the best way to optimize Core Web Vitals like Largest Contentful Paint and Cumulative Layout Shift?▼

Optimizing Core Web Vitals involves focusing on Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift by improving rendering, optimizing images, and reducing layout thrashing for smoother performance.

How do I fix layout thrashing and inefficient rendering in my front-end application?▼

To fix layout thrashing and inefficient rendering, you need to optimize rendering processes, avoid layout thrashing, and reduce paint and composite times to achieve smoother UI performance.

Can I use this approach to optimize React-specific performance issues?▼

Yes, you can optimize React-specific performance issues using targeted framework optimizations alongside general improvements like GPU acceleration for animations and JavaScript bundle reduction.

Why do my UI animations drop below 60fps and how can I make them smoother?▼

UI animations drop below 60fps due to inefficient rendering, but you can achieve smooth 60fps animations by utilizing GPU acceleration and optimizing paint and composite times.

What tools do I need for ongoing website performance monitoring after optimization?▼

For ongoing website performance monitoring, you should utilize tools like Chrome DevTools, WebPageTest, and Core Web Vitals metrics to track loading speed, rendering, and bundle size continuously.

Related Skills

Explore More Software Engineering Skills→
threeblindthreeblind

i-optimize

Analyze Core Web Vitals and optimize web loading, rendering, and animations.

Community
Advanced
AndersonBaezPAndersonBaezP

core-web-vitals

Analyze and improve Core Web Vitals metrics including LCP, INP, and CLS.

Community
Intermediate
SylphxAISylphxAI
4

performance

Analyze Next.js frontend performance for Core Web Vitals and bundle size.

Official
Intermediate
Awannaphasch2016Awannaphasch2016

refacter

Profile code complexity and hotspots to guide targeted refactoring.

Community
Advanced