# optimize
> Use when the user wants to optimize performance, improve PageSpeed score, check if the site is optimized, or before deploying to production. Covers images via CDN, critical CSS, defer, lazy loading, hero without animation, and Core Web Vitals.
- Author: Flávio Rafael Montenegro
- Repository: ahoydig/lp-marcela-clube-checkin
- Version: 20260127121338
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/ahoydig/lp-marcela-clube-checkin
- Web: https://mule.run/skillshub/@@ahoydig/lp-marcela-clube-checkin~optimize:20260127121338
---
---
name: optimize
description: Use when the user wants to optimize performance, improve PageSpeed score, check if the site is optimized, or before deploying to production. Covers images via CDN, critical CSS, defer, lazy loading, hero without animation, and Core Web Vitals.
---
# Skill: Optimize
Referência rápida para otimizações de performance. Meta: **Score 90+ no PageSpeed**.
Para instruções detalhadas, use o workflow `/otimizar`.
---
## Checklist Rápido
### Imagens (Maior Impacto)
```html
```
- [ ] TODAS usando Netlify CDN com `q=80`
- [ ] Todas com `width` e `height`
- [ ] Hero: `loading="eager"` + `fetchpriority="high"`
- [ ] Demais: `loading="lazy"`
- [ ] Imagens críticas com `aspect-ratio` no CSS
### Hero (LCP)
- [ ] Sem animação de ENTRADA (sem AOS, sem fade, sem opacity:0)
- [ ] Sem `data-aos` no hero
- [ ] Sem `transform: translateY()` inicial
- [ ] Renderiza instantaneamente
- [ ] Animações pós-load são permitidas
### CSS Crítico
```html
```
- [ ] Critical CSS inline no head (TUDO acima da dobra)
- [ ] drop-shadow da logo no critical CSS
- [ ] CSS restante com carregamento async
### JavaScript
```html
```
- [ ] Scripts no final do body
- [ ] Scripts não-críticos com `defer`
### Preconnects e DNS
```html
```
### Fontes
- [ ] Google Fonts com `display=swap`
- [ ] Preload da fonte principal (geralmente 700)
### Main Thread
```css
/* Seções below-fold */
.benefits, .testimonials, .faq, footer {
content-visibility: auto;
contain-intrinsic-size: 0 500px;
}
section {
contain: layout style;
}
```
- [ ] `content-visibility: auto` em seções below-fold
- [ ] `contain: layout style` em sections
- [ ] `contain-intrinsic-size` definido
---
## Preload de Recursos Críticos
```html
```
---
## Facebook Pixel Otimizado
```javascript
// Carregar apenas na interação ou após 4s
(function() {
var loaded = false;
function load() {
if (loaded) return;
loaded = true;
// código do pixel aqui
}
['scroll', 'click', 'touchstart'].forEach(e =>
window.addEventListener(e, load, { once: true, passive: true })
);
if ('requestIdleCallback' in window) {
requestIdleCallback(() => setTimeout(load, 4000));
} else {
setTimeout(load, 4000);
}
})();
```
---
## Problemas Comuns
| Problema | Causa | Solução |
|----------|-------|---------|
| LCP alto | Imagem hero grande ou sem CDN | Usar CDN com `w=` e `q=80` |
| CLS alto | Imagens sem dimensões | Adicionar `width` e `height` |
| Render blocking | CSS/JS no head | Mover para body ou usar `defer` |
| Fonts piscando | Falta display=swap | Adicionar `&display=swap` na URL |
| Hero lento | Animação de entrada | Remover AOS/fade do hero |
---
## Testando
1. **PageSpeed Insights**: https://pagespeed.web.dev/
2. **Meta**: 90+ em Performance
3. **Core Web Vitals**: LCP < 2.5s, FID < 100ms, CLS < 0.1
```
- [ ] TODAS usando Netlify CDN com `q=80`
- [ ] Todas com `width` e `height`
- [ ] Hero: `loading="eager"` + `fetchpriority="high"`
- [ ] Demais: `loading="lazy"`
- [ ] Imagens críticas com `aspect-ratio` no CSS
### Hero (LCP)
- [ ] Sem animação de ENTRADA (sem AOS, sem fade, sem opacity:0)
- [ ] Sem `data-aos` no hero
- [ ] Sem `transform: translateY()` inicial
- [ ] Renderiza instantaneamente
- [ ] Animações pós-load são permitidas
### CSS Crítico
```html
```
- [ ] Critical CSS inline no head (TUDO acima da dobra)
- [ ] drop-shadow da logo no critical CSS
- [ ] CSS restante com carregamento async
### JavaScript
```html
```
- [ ] Scripts no final do body
- [ ] Scripts não-críticos com `defer`
### Preconnects e DNS
```html
```
### Fontes
- [ ] Google Fonts com `display=swap`
- [ ] Preload da fonte principal (geralmente 700)
### Main Thread
```css
/* Seções below-fold */
.benefits, .testimonials, .faq, footer {
content-visibility: auto;
contain-intrinsic-size: 0 500px;
}
section {
contain: layout style;
}
```
- [ ] `content-visibility: auto` em seções below-fold
- [ ] `contain: layout style` em sections
- [ ] `contain-intrinsic-size` definido
---
## Preload de Recursos Críticos
```html
```
---
## Facebook Pixel Otimizado
```javascript
// Carregar apenas na interação ou após 4s
(function() {
var loaded = false;
function load() {
if (loaded) return;
loaded = true;
// código do pixel aqui
}
['scroll', 'click', 'touchstart'].forEach(e =>
window.addEventListener(e, load, { once: true, passive: true })
);
if ('requestIdleCallback' in window) {
requestIdleCallback(() => setTimeout(load, 4000));
} else {
setTimeout(load, 4000);
}
})();
```
---
## Problemas Comuns
| Problema | Causa | Solução |
|----------|-------|---------|
| LCP alto | Imagem hero grande ou sem CDN | Usar CDN com `w=` e `q=80` |
| CLS alto | Imagens sem dimensões | Adicionar `width` e `height` |
| Render blocking | CSS/JS no head | Mover para body ou usar `defer` |
| Fonts piscando | Falta display=swap | Adicionar `&display=swap` na URL |
| Hero lento | Animação de entrada | Remover AOS/fade do hero |
---
## Testando
1. **PageSpeed Insights**: https://pagespeed.web.dev/
2. **Meta**: 90+ em Performance
3. **Core Web Vitals**: LCP < 2.5s, FID < 100ms, CLS < 0.1