De 88 a 100 PSI: Claude Code para Optimização Front-End

Um desenvolvedor usou o Claude Code como parceiro de depuração e implementação para elevar a pontuação mobile do PageSpeed Insights de seu site de 88 para 100 (um template de artigo foi de 74 para 100). O post no r/ClaudeAI detalha o fluxo de trabalho prático — não uma correção única, mas uma série de intervenções direcionadas.

Principais Otimizações Alcançadas

• Imagens responsivas + srcset: Claude identificou que a imagem hero mobile era maior que o necessário, gerou variantes responsivas e adicionou atributos srcset.
• Pré-carregamento do LCP: Adicionou um pré-carregamento responsivo para a imagem LCP usando <link rel="preload" as="image" imagesrcset="...">.
• Correção de reflow forçado: Substituiu um listener de scroll no cabeçalho (que causava layout forçado ao rolar) por IntersectionObserver.
• Auditoria de fontes: Identificou quais pesos de fonte estavam realmente em uso e removeu os não utilizados.
• Dimensões de imagem em tempo de build: Adicionou atributos width e height a imagens markdown no momento da build para eliminar mudanças de layout.
• Remoção de pré-carregamento de fontes em páginas de artigo: Contra-intuitivo, mas eficaz — fontes pré-carregadas competiam com a imagem hero por largura de banda em mobile limitado. Como as fontes usavam font-display: swap, remover os pré-carregamentos permitiu que a imagem LCP carregasse mais rápido.

Padrão de Prompt Eficaz

O desenvolvedor descobriu que o Claude Code funciona melhor com tópicos de diagnóstico específicos. Em vez de prompts vagos, alimente-o com descobertas do PSI e peça o menor patch seguro. Exemplo de padrão: forneça a descoberta do PageSpeed Insights, peça ao Claude para inspecionar o componente relevante e solicite uma correção mínima em vez de uma refatoração ampla.

Julgamento Humano Ainda é Necessário

Algumas otimizações pareciam agressivas demais visualmente — o autor aumentou novamente a qualidade do logotipo enquanto mantinha 100. Imagens abaixo da dobra e trade-offs de estilo exigiram decisões humanas. O Claude Code acelerou a iteração, mas o desenvolvedor ainda precisou equilibrar desempenho, acessibilidade e qualidade de design.

Artigo Completo

O autor publicou uma versão técnica mais longa com mudanças específicas de CWV e números de antes/depois em goodrich.digital.