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
widtheheighta 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.
📖 Leia a fonte original: r/ClaudeAI
👀 See Also
Guia prático de configuração e instalação para o agente de IA auto-hospedado OpenClaw
OpenClaw é um agente de IA auto-hospedado que se integra a aplicativos de mensagens e mantém memória persistente através de um sistema baseado em arquivos. Recomendações importantes de configuração incluem começar com a interface de terminal, conectar apenas um canal de mensagens inicialmente e configurar adequadamente o arquivo SOUL.md para personalidade e regras de segurança.
Otimizando a Configuração do OpenClaw: Padrões Práticos e Insights
Usuários do OpenClaw compartilham padrões eficazes de configuração, como usar cron para tarefas agendadas e criar subagentes especializados, para aprimorar funcionalidade e custo-benefício.
Como Reivindicar e Estender Créditos da API da Anthropic Usando o Roteador do Manifest
Uma postagem no Reddit detalha os passos para reivindicar até US$ 200 em créditos gratuitos da API da Anthropic e configurar o roteador do Manifest para direcionar automaticamente os prompts para modelos mais baratos, como o Haiku, para tarefas simples, estendendo a vida útil dos créditos de um mês para vários meses.
Guia Prático para Hospedar Seu Primeiro LLM
Uma postagem no Reddit descreve motivos para hospedar LLMs localmente, incluindo privacidade para dados sensíveis, previsibilidade de custos para cargas de trabalho de agentes, melhorias de desempenho ao eliminar viagens de ida e volta de API e personalização por meio de métodos de ajuste fino como LoRA e QLoRA.