Qualidade

# ImageMagick — redimensiona e converte a pasta toda
magick mogrify -resize 1200x -quality 80 -format webp *.jpg

# Sharp (Node) — mais rápido e melhor qualidade
npx @squoosh/cli --avif '{"quality":75}' --resize '{"width":1200}' fotos/*.jpg

# conferir o resultado
ls -lh *.webp

<img
  src="hero-1200.webp"
  srcset="hero-600.webp 600w,
          hero-1200.webp 1200w,
          hero-1920.webp 1920w"
  sizes="(max-width: 700px) 100vw, 1200px"
  width="1200" height="800"
  alt="Sala de estar reformada com marcenaria clara e iluminação embutida"
  fetchpriority="high">

<!-- a imagem da hero: aparece de cara, tem que vir primeiro -->
<img src="hero.webp" width="1200" height="800" alt="..." fetchpriority="high">

<!-- tudo que está abaixo da dobra -->
<img src="obra-3.webp" width="800" height="600" alt="..."
     loading="lazy" decoding="async">

img { max-width: 100%; height: auto; display: block; }

/* quando a área tem tamanho fixo e a foto precisa preencher */
.card__foto { aspect-ratio: 4 / 3; object-fit: cover; }

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="800" alt="..." fetchpriority="high">
</picture>

<!-- e o outro uso: foto DIFERENTE por tamanho de tela -->
<picture>
  <source media="(max-width: 700px)" srcset="hero-vertical.webp">
  <img src="hero-horizontal.webp" width="1600" height="900" alt="...">
</picture>

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180x180 -->

<meta property="og:title" content="Vanessa Carvalho · Arquitetura em Campo Grande">
<meta property="og:description" content="Projetos de interiores e reforma de apartamento, do projeto à entrega.">
<meta property="og:image" content="https://site.com.br/og.jpg"><!-- 1200x630 -->
<meta property="og:url" content="https://site.com.br/">
<meta name="twitter:card" content="summary_large_image">

<!-- inacessível: o leitor de tela não sabe o que é nada disso -->
<div class="topo"><div class="menu">...</div></div>
<div class="titulo-grande">Arquitetura em Campo Grande</div>
<div class="botao" onclick="abrir()">Orçamento</div>

<!-- acessível: mesma aparência, estrutura declarada -->
<header><nav aria-label="Principal">...</nav></header>
<main>
  <h1>Arquitetura em Campo Grande</h1>
  <button type="button">Orçamento</button>
</main>
<footer>...</footer>

/* NUNCA faça isso — é o crime número um de acessibilidade */
*:focus { outline: none; }

/* faça isso: um foco visível que combina com o site */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* e o pulo do gato para site com cabeçalho fixo */
html { scroll-padding-top: 90px; }

<a class="pular" href="#conteudo">Pular para o conteúdo</a>

.pular { position:absolute; left:-9999px; }
.pular:focus { left:8px; top:8px; z-index:999; background:#fff;
               padding:10px 14px; border:2px solid currentColor; }

<!-- inútil -->
<img src="img1.jpg" alt="imagem">
<img src="img1.jpg" alt="foto reforma apartamento campo grande arquitetura">

<!-- útil -->
<img src="sala.jpg" alt="Sala integrada com cozinha, marcenaria clara e
     bancada de madeira maciça separando os ambientes">

<!-- decorativa: alt vazio, de propósito -->
<img src="textura.svg" alt="">

<!-- imagem que É um link -->
<a href="/"><img src="logo.svg" alt="Vanessa Carvalho, página inicial"></a>

/* texto sobre foto: nunca confie na foto */
.hero { position: relative; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.15));
}
.hero__texto { position: relative; z-index: 1; color: #fff; }

<!-- errado: parece botão, mas não recebe Tab nem responde a Enter -->
<div role="button" onclick="enviar()">Enviar</div>

<!-- certo -->
<button type="button" onclick="enviar()">Enviar</button>

<!-- botão sem texto visível -->
<button aria-label="Abrir menu"><svg aria-hidden="true">...</svg></button>

<!-- diferenciar navs quando há mais de uma -->
<nav aria-label="Principal">  <nav aria-label="Rodapé">

<!-- estado que muda -->
<button aria-expanded="false" aria-controls="painel">Dúvidas</button>

<!-- decoração que o leitor deve ignorar -->
<span aria-hidden="true">→</span>

<!-- mensagem que aparece depois e precisa ser anunciada -->
<p role="status">Mensagem enviada.</p>

$$('img').filter(i => !i.hasAttribute('alt'))          // imagem sem alt
$$('a').filter(a => !a.textContent.trim() && !a.getAttribute('aria-label'))
$$('input').filter(i => !i.labels?.length && !i.getAttribute('aria-label'))
document.querySelectorAll('h1').length                  // deve ser 1
$$('button').filter(b => !b.textContent.trim() && !b.getAttribute('aria-label'))

<!-- 1. avise o navegador antes mesmo de ele achar a imagem -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

<!-- 2. nunca lazy na hero, sempre prioridade alta -->
<img src="hero.webp" fetchpriority="high" width="1200" height="800" alt="...">

<!-- 3. conexão antecipada com o que vem de fora -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

/* 1. imagem sem dimensão → sempre width e height no HTML */
img, video { max-width: 100%; height: auto; }

/* 2. área que recebe conteúdo depois → reserve o espaço antes */
.mapa { aspect-ratio: 16 / 9; }
.depoimentos { min-height: 320px; }

/* 3. fonte que troca e muda a altura do texto */
@font-face {
  font-family: 'Bricolage';
  src: url(...) format('woff2');
  font-display: swap;
  size-adjust: 100%;      /* ajuste fino para a fonte de reserva ocupar o mesmo espaço */
}

/* 4. banner/aviso que empurra a página → sobreponha, não empurre */
.aviso-cookie { position: fixed; bottom: 0; left: 0; right: 0; }

// 1. scripts de terceiro NUNCA bloqueando
<script src="analytics.js" defer></script>

// 2. evento que dispara muito precisa de freio
window.addEventListener('scroll', debounce(minhaFuncao, 100), { passive: true });

// 3. trabalho pesado sai do caminho da interação
btn.addEventListener('click', () => {
  mostrarResultado();                    // o que o usuário precisa ver AGORA
  requestIdleCallback(() => registrar()); // o resto espera a folga
});

// 4. animar só transform e opacity — o resto força recálculo de layout

@font-face {
  font-family: 'Inter';
  src: url('/fontes/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;  /* só latim — corta metade do arquivo */
}

// registra o LCP real de cada visitante — sem biblioteca
new PerformanceObserver((lista) => {
  const ultimo = lista.getEntries().at(-1);
  console.log('LCP:', Math.round(ultimo.startTime), 'ms', ultimo.element);
}).observe({ type: 'largest-contentful-paint', buffered: true });

<label for="nome">Nome</label>
<input id="nome" name="nome" type="text" required
       autocomplete="name" minlength="3">

<label for="fone">WhatsApp</label>
<input id="fone" name="fone" type="tel" required
       autocomplete="tel" inputmode="numeric"
       placeholder="(67) 99999-9999">

<label for="email">E-mail</label>
<input id="email" name="email" type="email"
       autocomplete="email" inputmode="email">

<label for="msg">O que você precisa?</label>
<textarea id="msg" name="msg" rows="4" maxlength="500"></textarea>

function mascaraTelefone(v) {
  v = v.replace(/\D/g, '').slice(0, 11);
  if (v.length <= 10) return v.replace(/(\d{0,2})(\d{0,4})(\d{0,4})/,
      (_, a, b, c) => (a ? '(' + a : '') + (b ? ') ' + b : '') + (c ? '-' + c : ''));
  return v.replace(/(\d{2})(\d{5})(\d{0,4})/, '($1) $2-$3');
}

function mascaraCPF(v) {
  return v.replace(/\D/g, '').slice(0, 11)
          .replace(/(\d{3})(\d)/, '$1.$2')
          .replace(/(\d{3})(\d)/, '$1.$2')
          .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
}

document.querySelector('#fone').addEventListener('input', (e) => {
  e.target.value = mascaraTelefone(e.target.value);
});

const cep = document.querySelector('#cep');

cep.addEventListener('blur', async () => {
  const valor = cep.value.replace(/\D/g, '');
  if (valor.length !== 8) return;

  try {
    const r = await fetch(`https://viacep.com.br/ws/${valor}/json/`);
    const d = await r.json();
    if (d.erro) { avisar('CEP não encontrado'); return; }

    document.querySelector('#rua').value    = d.logradouro;
    document.querySelector('#bairro').value = d.bairro;
    document.querySelector('#cidade').value = d.localidade;
    document.querySelector('#uf').value     = d.uf;
    document.querySelector('#numero').focus();   // manda o foco para o que falta
  } catch {
    avisar('Não consegui buscar o CEP. Preencha o endereço manualmente.');
  }
});

<!-- campo isca: pessoa não vê, robô preenche -->
<div aria-hidden="true" style="position:absolute;left:-9999px">
  <label>Não preencha este campo
    <input type="text" name="website" tabindex="-1" autocomplete="off">
  </label>
</div>

<script>
const inicio = Date.now();

form.addEventListener('submit', (e) => {
  // 1. a isca foi preenchida? é robô
  if (form.website.value) { e.preventDefault(); return; }
  // 2. preencheu tudo em menos de 3 segundos? é robô
  if (Date.now() - inicio < 3000) { e.preventDefault(); return; }
});
</script>

<label for="fone">WhatsApp</label>
<input id="fone" name="fone" type="tel" required
       aria-describedby="erro-fone" aria-invalid="false">
<p id="erro-fone" class="erro" role="alert"></p>

<script>
function marcarErro(campo, mensagem) {
  const alvo = document.querySelector('#erro-' + campo.name);
  alvo.textContent = mensagem;                    // role="alert" faz anunciar
  campo.setAttribute('aria-invalid', 'true');
}
</script>

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const texto = `Olá! Sou ${form.nome.value}.
Preciso de: ${form.servico.value}
Bairro: ${form.bairro.value}`;
  location.href = 'https://wa.me/5567999999999?text=' + encodeURIComponent(texto);
});

/* 1. 100vh não é a altura visível — a barra do navegador come um pedaço */
.hero { min-height: 100vh; }      /* corta conteúdo no iPhone */
.hero { min-height: 100svh; }     /* certo: small viewport height */

/* 2. campo com fonte menor que 16px faz a página dar zoom sozinha ao focar */
input, select, textarea { font-size: 16px; }

/* 3. rolagem com inércia dentro de caixa */
.rolavel { -webkit-overflow-scrolling: touch; }

/* 4. área segura do notch e da barra inferior */
.rodape-fixo { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

/* 5. Safari antigo ignora gap em flex — teste antes de depender */
/* 6. position: sticky quebra se algum pai tem overflow: hidden */

// imagens que não carregaram
$$('img').filter(i => !i.complete || i.naturalWidth === 0)

// links vazios, quebrados ou ainda em "#"
$$('a').filter(a => !a.getAttribute('href') || a.getAttribute('href') === '#')

// links externos sem rel de segurança
$$('a[target="_blank"]').filter(a => !a.rel.includes('noopener'))

// metadados essenciais
({
  titulo: document.title,
  descricao: document.querySelector('meta[name=description]')?.content,
  og: document.querySelector('meta[property="og:image"]')?.content,
  h1: $$('h1').map(h => h.textContent.trim()),
  semAlt: $$('img').filter(i => !i.hasAttribute('alt')).length
})

grep -ri "lorem\|TODO\|FIXME\|localhost" *.html      # sobras de desenvolvimento
grep -o 'href="[^"]*\.html"' *.html | sort -u        # todos os links internos
grep -o 'src="[^"]*"' *.html | sort -u               # todos os arquivos referenciados

import { chromium } from 'playwright';

const SITE = 'https://site-do-cliente.com.br';
const b = await chromium.launch();
const p = await (await b.newContext({ viewport: { width: 390, height: 800 } })).newPage();

const erros = [];
p.on('pageerror', e => erros.push('JS: ' + e.message));
p.on('response', r => { if (r.status() >= 400) erros.push(r.status() + ' ' + r.url()); });

await p.goto(SITE, { waitUntil: 'networkidle' });

const r = await p.evaluate(() => ({
  titulo:   document.title,
  h1:       document.querySelectorAll('h1').length,
  zap:      [...document.querySelectorAll('a[href*="wa.me"]')].length,
  semAlt:   [...document.querySelectorAll('img:not([alt])')].length,
  overflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
}));

if (r.h1 !== 1)        erros.push('deveria ter exatamente 1 h1, tem ' + r.h1);
if (r.zap === 0)       erros.push('nenhum link de WhatsApp na página');
if (r.semAlt > 0)      erros.push(r.semAlt + ' imagens sem alt');
if (r.overflow > 0)    erros.push('rolagem horizontal a 390px');

console.log(r);
console.log(erros.length ? erros : 'tudo certo');
await b.close();