Medindo o desempenho: Lighthouse e Core Web Vitals

Lighthouse é a ferramenta padrão para medir o desempenho da web. Execute-o no Chrome DevTools (na aba Lighthouse) ou pela CLI (npx lighthouse https://yoursite.com). Ao avaliar a Arquitetura de Ilhas, execute o Lighthouse em páginas representativas antes e depois da migração para quantificar os ganhos de forma objetiva.

LCP mede quando o maior elemento de conteúdo visível termina de ser renderizado. A Arquitetura de Ilhas melhora o LCP porque o servidor envia HTML totalmente renderizado imediatamente — o navegador não precisa esperar o JavaScript renderizar o conteúdo. Uma imagem principal ou um título que seria o LCP é exibido a partir da resposta HTML inicial.

Em uma SPA React, o LCP costuma atrasar porque o navegador precisa baixar e executar JavaScript antes que o React renderize o elemento LCP. Com a Arquitetura de Ilhas, o conteúdo do LCP está no HTML inicial, portanto a execução do JavaScript não bloqueia o LCP. Esse é um dos benefícios mensuráveis mais significativos.

O tempo total de bloqueio mede por quanto tempo a thread principal fica bloqueada por tarefas de JavaScript com duração superior a 50 ms. A hidratação de uma SPA React grande pode gerar centenas de milissegundos de TBT. A Arquitetura de Ilhas reduz drasticamente o TBT porque o JavaScript executado é proporcional ao número de ilhas, não ao tamanho da página.

O deslocamento cumulativo do layout mede a estabilidade visual — ou seja, o deslocamento dos elementos enquanto a página é carregada. O conteúdo renderizado por JavaScript pode causar mudanças no layout quando o React renderiza e altera as dimensões. O HTML renderizado no servidor pela Arquitetura de Ilhas evita mudanças de layout relacionadas à hidratação, porque o layout inicial vem de HTML estático que não muda durante a hidratação.

O atraso da primeira entrada (agora substituído pela interação até a próxima pintura, INP) mede a rapidez com que a página responde às interações do usuário. A arquitetura de ilhas melhora o INP porque cada ilha tem um pequeno pacote JavaScript focado. As interações dentro de uma ilha são executadas rapidamente porque não há uma grande árvore do React pela qual seja necessário agendar trabalho.

Uma comparação típica para uma página de blog: uma SPA React completa pode obter uma pontuação de 45 a 65 no Lighthouse para dispositivos móveis (TBT: 800 ms, LCP: 3,2 s). O mesmo conteúdo como um site Astro com uma única ilha React pode obter uma pontuação de 90 a 98 (TBT: 80 ms, LCP: 1,1 s). As melhorias são mais expressivas em páginas com muito conteúdo e interatividade limitada.

A Arquitetura de Ilhas não é a escolha certa para aplicações altamente interativas, como painéis, editores de código ou ferramentas colaborativas. Essas aplicações têm componentes que compartilham estado constantemente e são renderizados novamente em conjunto — a sobrecarga da comunicação entre ilhas eliminaria os ganhos de desempenho e acrescentaria complexidade arquitetural.

A Arquitetura de Ilhas é excelente para sites com muito conteúdo e interatividade distribuída: blogs (leitura de conteúdo, com uma ação ocasional de curtir ou comentar), documentação (leitura da documentação, com uma busca ocasional ou um botão para copiar código), páginas de destino (principalmente estáticas, com uma ilha para o formulário de newsletter) e páginas de produtos de comércio eletrônico (imagens e descrição estáticas, com uma ilha para adicionar ao carrinho).

O Google usa as Métricas Essenciais da Web (LCP, INP, CLS) como sinais de classificação. Melhorar essas métricas com a Arquitetura de Ilhas beneficia diretamente a classificação nas buscas. Um site que aumenta sua pontuação no Lighthouse para dispositivos móveis de 55 para 92 ao adotar a Arquitetura de Ilhas obtém simultaneamente benefícios para a experiência do usuário e para o SEO.

Equipes que migram de uma SPA React com Next.js para Astro em sites de marketing e documentação relatam padrões consistentes: as cargas de JavaScript diminuem de 70% a 90%, as pontuações de desempenho em dispositivos móveis aumentam de 20 a 40 pontos e os custos de hospedagem no servidor diminuem, porque os arquivos estáticos são servidos de uma CDN sem a sobrecarga de renderização no servidor a cada solicitação.

Por que a Arquitetura de Ilhas reduz drasticamente o tempo total de bloqueio (TBT)?

A Arquitetura de Ilhas melhora todas as Métricas Essenciais da Web: o LCP se beneficia do HTML renderizado no servidor, o TBT diminui porque a quantidade de JavaScript é proporcional à interatividade, o CLS é reduzido por layouts estáveis renderizados no servidor e o INP melhora com pacotes pequenos e focados das ilhas. As pontuações do Lighthouse para páginas com muito conteúdo melhoram drasticamente. O padrão não é adequado para aplicações altamente interativas, mas é excelente para blogs, documentação, páginas de destino e comércio eletrônico.