# Site Speed Optimization > Site Speed Optimization — Skill especializada para site speed optimization - Skill: `kursku/site-speed-optimization` (Agent Skill) - Install (CLI): `npx skillmds@latest add kursku/site-speed-optimization` - Raw SKILL.md: https://api.skillmd.com/api/skills/kursku/site-speed-optimization/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - License: MIT - Author: kursku (https://skillmd.com/u/kursku) - Updated: 2026-09-08 - Page: https://skillmd.com/skills/kursku/site-speed-optimization --- # 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 `` do HTML, adiando o carregamento do restante do CSS. --- ## Core Workflows ### Workflow 1: Otimização Avançada de Imagens para Core Web Vitals Este workflow foca em reduzir o tempo de carregamento da Maior Pintura de Conteúdo (LCP) e evitar mudanças de layout cumulativas (CLS) causadas por imagens, que são frequentemente os maiores bloqueadores de velocidade em qualquer página web. **Passos Detalhados:** 1. **Identificação de Imagens LCP Candidatas e Causas de CLS**: * **Ferramenta**: PageSpeed Insights ou Chrome DevTools (aba "Performance" com "Web Vitals" habilitado). * **Ação**: Analisar `https://www.exemplo.com.br/pagina-de-produto` no PageSpeed Insights. Na seção "Diagnósticos", buscar "Largest Contentful Paint element" para identificar a imagem principal. No DevTools, gravar um carregamento e identificar eventos de "Layout Shift" e seus causadores (geralmente imagens sem `width`/`height`). * **Exemplo**: O PSI indica `

` como o LCP element, contribuindo com 3.2s para o LCP total de 4.5s. Além disso, várias imagens de galeria na página não possuem dimensões explícitas. 2. **Conversão para Formatos Modernos e Compressão Otimizada**: * **Ferramenta**: Squoosh.app, `cwebp` (CLI), `imagemin` (Node.js) ou CDNs de imagem. * **Ação**: Converter `main-shoe.jpg` (1.8MB, 1600x1200px) para WebP com qualidade 75 (`cwebp -q 75 main-shoe.jpg -o main-shoe.webp`). Para navegadores com suporte a AVIF, gerar uma versão `main-shoe.avif`. * **Exemplo**: `main-shoe.webp` com 250KB. 3. **Dimensionamento Responsivo com `srcset` e `sizes`**: * **Ação**: Gerar múltiplos tamanhos da imagem otimizada para diferentes resoluções de tela e densidades de pixel. * **Exemplo (HTML)**: ```html

``` * **Nota**: `width` e `height` são **fundamentais** para reservar o espaço e evitar CLS. `fetchpriority="high"` e `loading="eager"` são para a imagem LCP. 4. **Lazy Loading Estratégico e Priorização**: * **Ação**: Para imagens *abaixo da dobra* (não LCP), usar `loading="lazy"`. * **Exemplo**: ` Item relacionado

`. Isso economiza recursos, carregando-as apenas quando se tornam visíveis. 5. **Integração com CDN de Imagens**: * **Ferramenta**: Cloudinary, Imgix, AWS CloudFront, Cloudflare. * **Ação**: Configurar o CDN para servir as imagens. Utilizar as funcionalidades do CDN para otimização automática (redimensionamento, compressão, formato ideal) via URL. * **Exemplo**: Mudar `src="/img/product/main-shoe.webp"` para `src="https://cdn.exemplo.com.br/img/product/main-shoe.webp?w=1600&h=1200&f=webp&q=75"`. ### Workflow 2: Otimização de Recursos Bloqueadores de Renderização (CSS e JavaScript) Este workflow aborda a remoção de recursos que impedem a renderização inicial da página e a interatividade, melhorando o First Contentful Paint (FCP), LCP e as métricas de interatividade (FID/TBT). **Passos Detalhados:** 1. **Análise de Recursos Bloqueadores e Cobertura**: * **Ferramenta**: PageSpeed Insights (seção "Eliminar recursos que bloqueiam a renderização") e Chrome DevTools (aba "Coverage"). * **Ação**: No DevTools, carregar `https://www.exemplo.com.br/` e analisar a aba "Coverage" para identificar o percentual de CSS e JS não utilizado em `style.css` (78% não utilizado) e `scripts.js` (65% não utilizado). 2. **Extração e Injeção de Critical CSS**: * **Ferramenta**: `critical` NPM package, PurgeCSS, ou geradores online. * **Ação**: Usar `critical` para extrair o CSS necessário para o conteúdo acima da dobra da página inicial. * **Exemplo (HTML)**: ```html ``` * **Nota**: `media="print"` com `onload="this.media='all'"` é uma técnica para carregar CSS de forma não bloqueadora. 3. **Adiamento (Defer) e Carregamento Assíncrono (Async) de JavaScript**: * **Ação**: Identificar scripts que não são cruciais para a renderização inicial e adicionar os atributos `defer` ou `async`. * **Exemplo**: * Analytics: `` * Widgets de chat: `` * Carrosséis de imagem: `` * **Dica**: `defer` mantém a ordem de execução e espera o HTML ser parseado; `async` executa assim que o script é baixado, sem garantia de ordem. 4. **Minificação e Compressão de Recursos**: * **Ação**: Garantir que todos os arquivos CSS, JavaScript e HTML sejam minificados (removendo espaços em branco, comentários) e servidos com compressão GZIP ou Brotli. * **Ferramenta**: `uglify-js` (JS), `cssnano` (CSS), ou módulos de servidor (mod_deflate para Apache, gzip para Nginx). * **