Site Speed Optimization

Esta skill capacita o Claude a diagnosticar, planejar e executar otimizações avançadas de velocidade para websites, focando em métricas Core Web Vitals e impacto no SEO.

Keywords

Core Web Vitals, LCP otimização, FID melhoria, CLS correção, otimização de imagens, compressão GZIP/Brotli, cache de navegador, lazy loading, critical CSS, remoção de CSS/JS não utilizado, pré-carregamento de fontes, CDN implementação, otimização de servidor, tree shaking, WebP conversão, TTFB redução, TBT otimização, render-blocking resources.

Quick Start

1. Auditoria Inicial com PageSpeed Insights: Analisar https://www.exemplo.com.br e https://www.exemplo.com.br/categoria-produto para identificar os principais gargalos LCP (Largest Contentful Paint), FID (First Input Delay) e CLS (Cumulative Layout Shift) em dispositivos móveis e desktop.
2. Otimização de Imagens Críticas: Converter todas as imagens do hero section e das primeiras galerias para WebP ou AVIF, comprimir com Squoosh.app e implementar loading="lazy" para imagens abaixo da dobra. Ex: hero-banner.jpg (2MB) para hero-banner.webp (200KB).
3. Minificação e Agrupamento de CSS/JS: Utilizar ferramentas de build (ex: Webpack, Gulp) ou plugins de cache para CMS (ex: WP Rocket, LiteSpeed Cache) para minificar e agrupar todos os arquivos .css e .js, reduzindo o número de requisições HTTP e o tamanho dos arquivos.
4. Ativar Cache do Navegador: Configurar cabeçalhos HTTP Cache-Control: max-age=2592000, public e Expires para recursos estáticos (imagens, fontes, CSS, JS) via .htaccess ou configuração do servidor web (Nginx/Apache), permitindo que o navegador armazene esses arquivos por 30 dias.
5. Priorizar Conteúdo Acima da Dobra (Critical CSS): Extrair o CSS essencial para renderizar o conteúdo visível inicial (acima da dobra) de páginas como https://www.exemplo.com.br/ e embuti-lo diretamente no <head> do HTML, adiando o carregamento do restante do CSS.