performance

Name: performance
Availability: InStock
Author: Carlo

Analyze web performance bottlenecks in code, assets, and server response.

Updated Jul 2, 2024

Search Tags:#performance #optimization #lighthouse #core web vitals #loading speed #web speed

Ready to run

npx skills add https://github.com/carloitaben/dotfiles --skill performance-carloitaben

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/carloitaben/dotfiles/tree/main/.config/opencode/skills/performance
Command: npx skills add https://github.com/carloitaben/dotfiles --skill performance-carloitaben

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses slow website loading times and poor user experience by identifying and resolving performance bottlenecks.

Core Features & Use Cases

Bottleneck Identification: Pinpoints issues in code, assets, and server response.
Optimization Strategies: Provides actionable code examples and best practices for critical rendering path, JavaScript, images, fonts, and caching.
Measurement: Offers key metrics and testing commands for performance evaluation.
Use Case: Improve your website's Lighthouse score and reduce bounce rates by implementing the suggested optimizations for faster load times.

Quick Start

Use the performance skill to optimize the loading speed of my website by analyzing its critical rendering path and image assets.

Frequently Asked Questions about performance

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

FAQPage Schema

How do I optimize my website's loading speed and improve Core Web Vitals?▼

Optimize website loading speed by analyzing and resolving bottlenecks in code, assets, and server response. This involves targeted strategies for the critical rendering path, JavaScript execution, image handling, fonts, and caching to directly improve Core Web Vitals metrics.

What is the best way to identify web performance bottlenecks in my code and assets?▼

Identify web performance bottlenecks by evaluating your critical rendering path, JavaScript bundles, image assets, and server response times. Analyzing these specific areas allows you to pinpoint slow loading triggers and apply actionable code examples to resolve them.

Can I get actionable code examples for optimizing the critical rendering path and images?▼

Yes, you can get actionable code examples and best practices specifically for optimizing the critical rendering path, images, fonts, and caching. These targeted optimizations help reduce bounce rates and yield faster page load times.

How do I measure and evaluate my website's Lighthouse score after optimizations?▼

Measure your Lighthouse score and evaluate web performance using provided key metrics and testing commands. Running these measurement tools after implementing optimizations validates your improvements in overall page speed and user experience.

Why does my website have a slow loading speed and high bounce rate?▼

Slow loading speed and high bounce rates are typically caused by unoptimized bottlenecks in your code, large asset sizes, and poor server response times. Resolving issues in JavaScript, images, and the critical rendering path directly addresses this poor user experience.

Does this approach work for optimizing JavaScript, fonts, and caching specifically?▼

Yes, this approach provides specific optimization strategies tailored for JavaScript, fonts, and caching. By addressing these individual components, you systematically remove rendering bottlenecks and improve overall web speed and Core Web Vitals.