Habilidades web-performance-optimization
⚡

web-performance-optimization

Seguro

Optimize Web Performance with Claude

Slow websites hurt user experience and SEO rankings. This skill helps you systematically measure, analyze, and optimize web performance using proven techniques like code splitting, image optimization, and Core Web Vitals improvements.

Suporta: Claude Codex Code(CC)
🥉 73 Bronze
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "web-performance-optimization". My LCP is 4.2s and I need it under 2.5s. The main hero image is 2.5MB.

Resultado esperado:

Convert the hero image to AVIF format (saves ~80%), compress to under 200KB, add preload link, use fetchpriority='high', and implement responsive images with srcset for different screen sizes.

A utilizar "web-performance-optimization". My JavaScript bundle is 850KB gzipped and causing slow TTI.

Resultado esperado:

Replace moment.js (67KB) with date-fns (12KB), import only needed lodash functions instead of entire library, implement route-based code splitting for heavy components, and defer non-critical scripts like analytics.

A utilizar "web-performance-optimization". I have a CLS score of 0.25 with content jumping around.

Resultado esperado:

Add width and height attributes to all images, use CSS aspect-ratio property, implement skeleton loaders for dynamic content, and reserve space for ads/widgets before they load.

Auditoria de Segurança

Seguro
v1 • 2/25/2026

All 94 static analysis findings are false positives. The skill file is pure documentation (SKILL.md) containing markdown code examples and best practices for web performance optimization. Detected patterns such as dynamic import(), shell commands, and URLs are within markdown code blocks as educational examples, not executable code. No security risks identified.

1
Arquivos analisados
649
Linhas analisadas
1
achados
1
Total de auditorias
Problemas de Baixo Risco (1)
SKILL.md:77-644
Documentation Contains Command Examples
File contains bash commands and code examples within markdown code blocks for educational purposes only. These are not executable code and pose no security risk.
Auditado por: claude

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
87
ConteĂşdo
50
Comunidade
100
Segurança
87
Conformidade com especificações

O Que VocĂŞ Pode Construir

E-commerce Site Optimization

Optimize product pages to improve conversion rates by reducing load times and improving Core Web Vitals scores

Dashboard Performance Improvement

Reduce JavaScript bundle size and optimize data loading for faster dashboard interactions

Content Site Speed Optimization

Implement image optimization, lazy loading, and caching strategies for faster content delivery

Tente Estes Prompts

Analyze Performance Issues 
I ran a Lighthouse audit and got these results: [paste scores]. Help me understand what's causing poor performance and prioritize which issues to fix first.
Optimize Core Web Vitals 
My Core Web Vitals are: LCP [value], FID [value], CLS [value]. Show me specific code changes to improve these metrics for my [framework] application.
Reduce Bundle Size 
My JavaScript bundle is [size] and takes [time] to load on 3G. Analyze my dependencies and suggest code splitting strategies or smaller alternatives.
Implement Image Optimization 
Help me implement an image optimization strategy for my site. I have [number] images totaling [size]. Show me how to convert to modern formats and implement lazy loading in [framework].

Melhores Práticas

  • Always establish baseline metrics with Lighthouse before making optimizations to measure improvement accurately
  • Focus on Core Web Vitals (LCP, FID, CLS) first as they directly impact user experience and SEO rankings
  • Test performance on real mobile devices and slow 3G networks, not just desktop with fast internet

Evitar

  • Optimizing without measuring first - always run audits to identify actual bottlenecks before making changes
  • Over-optimizing desktop while ignoring mobile performance - most users are on mobile devices with slower networks
  • Premature optimization - focus on high-impact changes that affect user-facing metrics rather than micro-optimizations

Perguntas Frequentes

What are Core Web Vitals and why do they matter?
Core Web Vitals are Google's performance metrics: LCP (loading speed), FID (interactivity), and CLS (visual stability). They directly impact SEO rankings and user experience. Good scores are LCP under 2.5s, FID under 100ms, and CLS under 0.1.
Should I optimize images or JavaScript first?
Start with whichever issue your Lighthouse audit identifies as most severe. Generally, optimize images first if they're over 1MB each, as this is often the quickest win. Then address JavaScript bundle size if it's over 200KB gzipped.
What's the difference between lazy loading and code splitting?
Lazy loading defers loading resources (like images) until they're needed. Code splitting breaks your JavaScript into smaller chunks loaded on demand. Use both together: lazy load images and below-the-fold components, split code by route or feature.
How do I know if my optimizations are working?
Run Lighthouse audits before and after changes, documenting each metric. Test on multiple devices and network speeds. Use real user monitoring (RUM) tools to track actual user experience over time, not just lab scores.
Can this skill implement optimizations automatically?
No, this skill provides expert guidance, code examples, and optimization strategies. You or your development team will implement the suggested changes. The skill helps you understand what to optimize and how to approach it.
What tools should I use alongside this skill?
Lighthouse (built into Chrome DevTools) for audits, webpack-bundle-analyzer for bundle analysis, WebPageTest for detailed waterfall charts, and Chrome DevTools Performance tab for runtime profiling. This skill helps interpret results from all these tools.

Detalhes do Desenvolvedor

Autor

sickn33

Licença

MIT

RepositĂłrio

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/web-performance-optimization

ReferĂŞncia

main

Estrutura de arquivos

đź“„ SKILL.md