Desenvolvimento· Construindo o ClipLeve · parte 4
Como levei o LCP do ClipLeve de 9,9 s para menos de 1,5 s.
O diagnóstico do PNG pesado no topo, a migração para Astro em Workers e a reconstrução do site com 100 de pontuação e calculadoras úteis.
O site antigo do ClipLeve levou 9,9 s para atingir o LCP e recebeu 70 em desempenho no Lighthouse para celular. Para um aplicativo cujo propósito é tornar arquivos leves e rápidos de compartilhar, manter um site lento na primeira dobra contradizia a própria proposta do produto.
A solução foi reconstruir o site do zero com Astro e publicá-lo em um Worker da Cloudflare. Com ajustes objetivos de entrega e eliminação de peso desnecessário, o LCP despencou para uma faixa entre 0,9 e 1,3 s na produção, com nota 100 em todas as categorias de medição.
Um PNG de 1,7 MB sem cache destruía o carregamento no celular
O diagnóstico do Lighthouse apontou o culpado imediatamente. O Largest Contentful Paint, que mede o tempo para exibir o maior conteúdo visível na tela, sofria com uma única imagem no topo da página. Era um arquivo PNG de 1,7 MB, servido diretamente pelo provedor antigo sem qualquer política de cache eficiente.
O PNG de 1,7 MB servido sem cache foi apontado como a causa do LCP de 9,9 s no teste.
A experiência era inaceitável. Quando alguém pesquisa como comprimir um arquivo de vídeo pelo celular, a tolerância para páginas pesadas é nula. Bastava uma imagem mal dimensionada para destruir a percepção técnica do produto.
A arquitetura em Astro e Worker entrega páginas estáticas sem atrito
A reconstrução utilizou Astro gerando apenas arquivos estáticos, servidos diretamente na borda por um Worker da Cloudflare. Como o ClipLeve não possui formulários de contato nem exige banco de dados no site, não havia justificativa técnica para carregar processamento dinâmico em cada visita.
O novo título da página passou a destacar o valor central de forma objetiva: “Comprima seus vídeos no iPhone sem arriscar os originais”.
Ao rodar o Lighthouse na produção após o deploy, a versão em inglês da página inicial, um guia temático e uma das calculadoras alcançaram 100 nas quatro notas avaliadas: desempenho, acessibilidade, boas práticas e SEO. Nessas páginas, o LCP no celular ficou entre 0,9 e 1,3 s.
O catálogo de conteúdo cresceu com guias e calculadoras úteis
A reconstrução também ampliou a quantidade de páginas indexáveis. O site saltou de 8 para 29 páginas indexáveis, divididas entre páginas principais, 17 guias práticos e 2 calculadoras interativas.
A principal ferramenta adicionada foi a calculadora de tamanho de vídeo, desenvolvida com o modelo matemático do próprio aplicativo nativo. Ela usa o modelo do próprio app para estimar o tamanho de um vídeo.
Para que os guias fossem práticos e confiáveis, os limites de envio das plataformas de mensagem foram conferidos em fontes oficiais em 30 de outubro de 2026:
- Discord gratuito: limite máximo de 20 MB por arquivo.
- WhatsApp no iPhone: envios de mídia com até 100 MB em resolução 720p ou 64 MB em resolução 480p, além de documentos de até 2 GB.
- Outlook.com: limite fixo de 25 MB para anexos de mensagens.
Esses limites dão contexto para quem precisa preparar um vídeo para envio.
As URLs legadas foram preservadas com redirecionamento temporário
Uma reformulação estrutural de site nunca pode ignorar os endereços já publicados. No caso do ClipLeve, o aplicativo já disponível na App Store já usava links com terminação .html.
Se essas páginas retornassem erro após a mudança para rotas amigáveis, usuários reais do aplicativo ficariam desamparados ao buscar os termos legais ou o canal de suporte. O site novo configurou um redirecionamento automático com código HTTP 307 para cada um desses arquivos, direcionando a navegação para os novos endereços sem a extensão.
O código 307 indica um redirecionamento temporário e mantém o método da requisição. As URLs antigas continuam respondendo com segurança e sem quebras para o usuário final.
Um portão de qualidade no build impede que regressões cheguem ao ar
Velocidade conquistada precisa ser defendida a cada deploy. Para evitar que alterações futuras introduzam imagens pesadas sem otimização ou quebrem páginas de suporte, integrei um portão automático de qualidade ao processo de compilação.
O site ganhou um portão automático de qualidade no build.
O portão ajuda a conferir a qualidade a cada build; as notas medidas não garantem o resultado de medições futuras. O roteiro detalhado de como configurei essa publicação na infraestrutura de borda está explicado no post sobre migrar site para Cloudflare Workers.