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
- 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.
- 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).
- 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.
- 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.
- 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.
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:
- 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
<img src="/img/product/main-shoe.jpg"> 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.
- 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.
- 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):
<picture>
<source srcset="/img/product/main-shoe.avif 1600w,
/img/product/main-shoe-medium.avif 900w,
/img/product/main-shoe-small.avif 450w" type="image/avif">
<source srcset="/img/product/main-shoe.webp 1600w,
/img/product/main-shoe-medium.webp 900w,
/img/product/main-shoe-small.webp 450w" type="image/webp">
<img src="/img/product/main-shoe.jpg"
srcset="/img/product/main-shoe-small.webp 450w,
/img/product/main-shoe-medium.webp 900w,
/img/product/main-shoe.webp 1600w"
sizes="(max-width: 480px) 450px,
(max-width: 1024px) 900px,
1600px"
alt="Tênis principal do produto"
width="1600" height="1200"
fetchpriority="high"
loading="eager">
</picture>
- 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.
- Lazy Loading Estratégico e Priorização:
- Ação: Para imagens abaixo da dobra (não LCP), usar
loading="lazy".
- Exemplo:
<img src="/img/product/related-item.webp" alt="Item relacionado" loading="lazy" width="300" height="200">. Isso economiza recursos, carregando-as apenas quando se tornam visíveis.
- 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:
- 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).
- 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):
<head>
<style>
/* Conteúdo do Critical CSS extraído */
body{font-family:'Roboto',sans-serif;margin:0;color:#333}
.header{background:#fff;padding:15px 20px;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.hero-section{background-color:#f8f8f8;padding:60px 20px;text-align:center}
h1{font-size:2.5em;color:#007bff}
/* ... estilos essenciais para o viewport inicial ... */
</style>
<!-- Carregar o CSS completo de forma assíncrona -->
<link rel="stylesheet" href="/css/main.css" media="print"
<noscript><link rel="stylesheet" href="/css/main.css"></noscript>
<!-- ... outros elementos do head ... -->
</head>
- Nota:
media="print" com onload="this.media='all'" é uma técnica para carregar CSS de forma não bloqueadora.
- 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:
<script src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y" async></script>
- Widgets de chat:
<script src="/js/chat-widget.js" defer></script>
- Carrosséis de imagem:
<script src="/js/swiper.min.js" defer></script>
- 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.
- 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).
1---2name: site-speed-optimization3description: Site Speed Optimization — Skill especializada para site speed optimization4license: MIT5---67# Site Speed Optimization89Esta 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.1011---1213## Keywords1415Core 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.1617---1819## Quick Start20211. **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.222. **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).233. **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.244. **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.255. **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.2627---2829## Core Workflows3031### Workflow 1: Otimização Avançada de Imagens para Core Web Vitals3233Este 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.3435**Passos Detalhados:**36371. **Identificação de Imagens LCP Candidatas e Causas de CLS**:38 * **Ferramenta**: PageSpeed Insights ou Chrome DevTools (aba "Performance" com "Web Vitals" habilitado).39 * **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`).40 * **Exemplo**: O PSI indica `<img src="/img/product/main-shoe.jpg">` 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.412. **Conversão para Formatos Modernos e Compressão Otimizada**:42 * **Ferramenta**: Squoosh.app, `cwebp` (CLI), `imagemin` (Node.js) ou CDNs de imagem.43 * **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`.44 * **Exemplo**: `main-shoe.webp` com 250KB.453. **Dimensionamento Responsivo com `srcset` e `sizes`**:46 * **Ação**: Gerar múltiplos tamanhos da imagem otimizada para diferentes resoluções de tela e densidades de pixel.47 * **Exemplo (HTML)**:48 ```html49 <picture>50 <source srcset="/img/product/main-shoe.avif 1600w,51 /img/product/main-shoe-medium.avif 900w,52 /img/product/main-shoe-small.avif 450w" type="image/avif">53 <source srcset="/img/product/main-shoe.webp 1600w,54 /img/product/main-shoe-medium.webp 900w,55 /img/product/main-shoe-small.webp 450w" type="image/webp">56 <img src="/img/product/main-shoe.jpg"57 srcset="/img/product/main-shoe-small.webp 450w,58 /img/product/main-shoe-medium.webp 900w,59 /img/product/main-shoe.webp 1600w"60 sizes="(max-width: 480px) 450px,61 (max-width: 1024px) 900px,62 1600px"63 alt="Tênis principal do produto"64 width="1600" height="1200"65 fetchpriority="high"66 loading="eager">67 </picture>68 ```69 * **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.704. **Lazy Loading Estratégico e Priorização**:71 * **Ação**: Para imagens *abaixo da dobra* (não LCP), usar `loading="lazy"`.72 * **Exemplo**: `<img src="/img/product/related-item.webp" alt="Item relacionado" loading="lazy" width="300" height="200">`. Isso economiza recursos, carregando-as apenas quando se tornam visíveis.735. **Integração com CDN de Imagens**:74 * **Ferramenta**: Cloudinary, Imgix, AWS CloudFront, Cloudflare.75 * **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.76 * **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"`.7778### Workflow 2: Otimização de Recursos Bloqueadores de Renderização (CSS e JavaScript)7980Este 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).8182**Passos Detalhados:**83841. **Análise de Recursos Bloqueadores e Cobertura**:85 * **Ferramenta**: PageSpeed Insights (seção "Eliminar recursos que bloqueiam a renderização") e Chrome DevTools (aba "Coverage").86 * **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).872. **Extração e Injeção de Critical CSS**:88 * **Ferramenta**: `critical` NPM package, PurgeCSS, ou geradores online.89 * **Ação**: Usar `critical` para extrair o CSS necessário para o conteúdo acima da dobra da página inicial.90 * **Exemplo (HTML)**:91 ```html92 <head>93 <style>94 /* Conteúdo do Critical CSS extraído */95 body{font-family:'Roboto',sans-serif;margin:0;color:#333}96 .header{background:#fff;padding:15px 20px;box-shadow:0 2px 4px rgba(0,0,0,.1)}97 .hero-section{background-color:#f8f8f8;padding:60px 20px;text-align:center}98 h1{font-size:2.5em;color:#007bff}99 /* ... estilos essenciais para o viewport inicial ... */100 </style>101 <!-- Carregar o CSS completo de forma assíncrona -->102 <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'">103 <noscript><link rel="stylesheet" href="/css/main.css"></noscript>104 <!-- ... outros elementos do head ... -->105 </head>106 ```107 * **Nota**: `media="print"` com `onload="this.media='all'"` é uma técnica para carregar CSS de forma não bloqueadora.1083. **Adiamento (Defer) e Carregamento Assíncrono (Async) de JavaScript**:109 * **Ação**: Identificar scripts que não são cruciais para a renderização inicial e adicionar os atributos `defer` ou `async`.110 * **Exemplo**:111 * Analytics: `<script src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y" async></script>`112 * Widgets de chat: `<script src="/js/chat-widget.js" defer></script>`113 * Carrosséis de imagem: `<script src="/js/swiper.min.js" defer></script>`114 * **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.1154. **Minificação e Compressão de Recursos**:116 * **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.117 * **Ferramenta**: `uglify-js` (JS), `cssnano` (CSS), ou módulos de servidor (mod_deflate para Apache, gzip para Nginx).118 * **
kursku