Use minha conexão com o Opus Growth para isso. Se você não encontrar a ferramenta de que precisa, procure entre as ferramentas do Opus Growth (com search_tools, se estiver na sua lista); se não conseguir acessar as ferramentas de forma alguma, não adivinhe, me avise.
Meu site
[endereço do site] no meu servidor Opus Growth (servidor
[nome do servidor], chave do site
[chave do site] se for um site adicional) foi criado com o kit de sites e está lento no celular. O kit carrega o Tailwind pelo Play CDN, que compila no navegador, as fontes pela Fontshare e as bibliotecas de animação pela jsDelivr, e gera o menu com JavaScript. Sem mudar a aparência do site, transforme tudo isso em arquivos compilados hospedados no meu próprio servidor. O objetivo: enquanto uma página carrega, o site não envia nenhuma requisição para fora do próprio domínio.
1. Linha de base. Anote a versão atual com site_versions. Execute core_web_vitals na página inicial e em
[página mais pesada] no celular e no desktop com resources=true. Coloque em uma tabela a pontuação de desempenho, o LCP, o CLS, o total de requisições, o tamanho total e as requisições que saem do seu domínio. Liste os arquivos HTML com site_list_files e extraia de cada página todas as tags `<script>` e `<link>`.
2. Mostre-me o plano e aguarde minha aprovação. Liste todos os arquivos que serão alterados ou adicionados.
3. Compile o Tailwind. Mova a configuração inline `tailwind.config` das páginas para `_src/tailwind.config.js`; defina content como `
["./*.html", "./**/*.html"]` e adicione qualquer arquivo JavaScript que ainda gere classes. Crie `_src/input.css` com as linhas `@tailwind base; @tailwind components; @tailwind utilities;` seguidas do conteúdo de assets/app.css. Execute `npx --yes tailwindcss@3 -c _src/tailwind.config.js -i _src/input.css -o assets/site.css --minify` com site_run_command. Dê ao arquivo um nome derivado do hash do conteúdo, por exemplo `assets/site.3f9a1c2b.css`, atualize o link em todas as páginas e apague o script do Play CDN e a configuração inline. Recompile depois de cada edição de HTML que altere classes, senão as novas classes ficam faltando no CSS.
4. Hospede as fontes você mesmo. Busque o CSS da Fontshare com uma requisição SEPARADA para cada família e peso, por exemplo `https://api.fontshare.com/v2/css?f[]=satoshi@400&display=swap`; vimos outras famílias voltarem quando várias famílias ou pesos eram pedidos de uma vez, então confira o nome da font-family retornada todas as vezes. Baixe os arquivos woff2 para `assets/fonts/`, escreva as regras `@font-face` com `font-display: swap` no topo de assets/app.css (o design-check procura tipografia distintiva ali) e faça o preload da fonte do corpo do texto e da fonte usada no título grande da primeira tela com `<link rel="preload" as="font" type="font/woff2" crossorigin>`. Apague os links `preconnect` e de stylesheet da Fontshare. Verifique se a licença da fonte permite hospedagem própria.
5. Regenere as imagens. Mova os arquivos JPG e PNG de origem para `_src/img/`. Instale o sharp fora da pasta do site: inicie `mkdir -p /data/_build && cd /data/_build && npm init -y && npm i sharp` com site_run_command e background=true, e acompanhe com site_command_status; se essa pasta não for gravável, explique o motivo. Com um script node, gere WebP (qualidade 72) e AVIF (qualidade 50) em larguras de 480, 800, 1200 e 1600 pixels para cada imagem. No HTML, envolva cada imagem em `<picture>`: um `<source type="image/avif" srcset sizes>` para AVIF, um `<img>` WebP como alternativa com seu próprio srcset e sizes, e a largura e a altura reais da imagem de origem. A imagem principal da primeira tela recebe `fetchpriority="high"` e não usa lazy; todas as outras recebem `loading="lazy" decoding="async"`. Escreva sizes de acordo com a largura que a imagem realmente ocupa.
6. Limpe os scripts. Se o site não tem animação, ou apenas ganchos decorativos como `data-reveal`, remova por completo GSAP, ScrollTrigger, SplitText, Lenis, Swiper, motion.js e o script inline que adiciona a classe `anim`, e apague as regras de Lenis e anim do app.css. Se a animação for realmente necessária, copie a biblioteca para `assets/vendor/`, carregue-a com `defer` apenas nas páginas que a usam e confirme que o conteúdo continua visível com `prefers-reduced-motion`. Transforme o menu e o rodapé em HTML estático com um script `chrome-stamp.mjs`: ele lê site.config.js, escreve entre os marcadores `<!-- chrome:nav:start -->`, `<!-- chrome:nav:end -->` e chrome:footer, monta o menu mobile com `<details>`, mantém os links com pelo menos 44 pixels de altura e usa parágrafos, não h4, para os títulos das colunas do rodapé. Depois remova chrome.js e a tag de script do site.config.js das páginas; site.config.js permanece apenas como arquivo de dados que os scripts leem.
7. Zere as requisições de terceiros. Com site_run_command, procure no HTML e no CSS valores de src e href que comecem com `https://`; mova para o site, ou remova, todo recurso fora do seu domínio, exceto links tel:, mailto: e wa.me. Coloque o favicon em `assets/img/` e faça o link em todas as páginas, senão o navegador solicita /favicon.ico e registra um 404 no console.
8. Cabeçalhos de cache. Execute site_headers com mode="list". Se nenhum arquivo em assets for substituído mantendo o mesmo nome (o nome do CSS leva um hash, as imagens ganham um novo nome quando mudam), mostre a prévia da linha `/assets/* Cache-Control: public, max-age=31536000, immutable` com confirm=false e aplique com confirm=true após a minha aprovação. Não peça Cache-Control para HTML; a plataforma já serve o HTML como no-cache.
9. Critérios e nova medição. Execute `node seo-stamp.mjs`, `node chrome-stamp.mjs`, o build do CSS, `node seo-check.mjs`, `node design-check.mjs` e `npx --yes html-validate "**/*.html"` nessa ordem e leve todos a zero erros. Verifique cada página com site_preview em larguras de 360, 390, 768 e 1440 pixels. Repita a medição core_web_vitals do passo 1 nas mesmas páginas e execute também seo_audit com runs=2 na página inicial. Se o desempenho no celular ficar abaixo de 95, encontre a causa nas listas de resources=true e corrija; a causa mais comum é o deslocamento de layout por causa de uma fonte de título sem preload.
Resultado: uma tabela de antes e depois (página, dispositivo, desempenho, LCP, CLS, número de requisições, total em KB, número de requisições de terceiros), a lista de arquivos adicionados e apagados, as linhas ativas de site_headers e uma breve nota sobre quais comandos reexecutar, e em que ordem, após a próxima edição. Se alguma etapa quebrar o site, volte à versão que você anotou com site_restore e me avise.
