Lições dos frameworks React e Vue para Page Speed

Em nossa busca contínua pela velocidade da página, muitas vezes voltamos ao mesmo ponto. Apesar dos esforços das equipes de produto, marketing e crescimento para motivar as equipes de tecnologia, tarefas que poderiam melhorar o desempenho do site são frequentemente adiadas devido à necessidade de refatoração e, mesmo quando concluídas, nem sempre produzem resultados completos. Neste ciclo, é benéfico considerar algumas perspectivas perspicazes sobre como alcançar um desempenho real. Por exemplo, que lições podemos aprender com a velocidade do React.js e Vue.js ou de suas extensões SSR (renderização do lado do servidor), como Next.js e Nuxt.js, em comparação com outras plataformas? Não é hora de otimizar os MBs dos arquivos jQuery e CSS? Quando as grandes empresas que sacrificam seu desempenho na web para desenvolvedores front-end mal informados acordarão? Vamos abordar essas questões uma por uma.

Por que os sites baseados em Next.js e Nuxt.js são rápidos?

As plataformas Next e Nuxt, que são estruturas SEO-friendly construídas em React e Vue, destacam-se pela velocidade de desempenho. Mas por que essas plataformas são tão rápidas?

React.js e Vue.js são estruturas baseadas em componentes que dividem cada página em subcomponentes, conforme mostrado abaixo.

Vamos dar um exemplo real para ilustrar esse ponto: uma página de listagem de comércio eletrônico. Esta página de listagem pode ser considerada como tendo os seguintes subcomponentes:

• cabeçalho
• listagem
  • Listando informações de entrada
    • Título da página
    • Breadcrumb
    • Contagem de produtos
  • filtros
    • Filtro de categoria
    • Filtro de Preço
    • ...
  • Classificação
  • Cartões de produtos
    • Foto do produto
  • Detalhes do produto
    • Nome do produto
    • Preço do produto
      • Preço tachado
      • Preço de venda
    • Taxa de desconto
    • Informação da campanha
  • Paginação
  • Conteúdo da categoria
• Rodapé

Ao criar um aplicativo baseado em componentes com Nuxt.js, cada um desses componentes é codificado separadamente e incluído na página mestra. Por exemplo, considere um arquivo chamado ProductPhoto.js. Quaisquer que sejam as funções necessárias para fotos de produtos (carrossel, exibição de imagens responsivas, etc.), o código JS é escrito neste componente. Da mesma forma, apenas os arquivos CSS usados ​​por este componente são incluídos nele. Isso significa que apenas os arquivos exigidos por cada componente serão executados se o componente for usado.

Como esse processo é tratado atualmente na maioria das plataformas web?

Um arquivo script.js inclui código para tudo, desde membros, filtros e páginas de carrinho até o menu, que é executado em todas as páginas. O resultado? 

Sites com um Arquivo JS de 3 MB e CSS de 1.5 MB arquivo. O principal problema não é apenas o tamanho dos arquivos, mas o fato de que você não pode esperar que a CPU média de um dispositivo móvel Android execute milhares de linhas de código em milissegundos. Ao executar apenas o código necessário, você pode obter ganhos de desempenho.

Como eliminar recursos de bloqueio de renderização?

Hoje, 32% dos 1 milhão de principais sites usam a biblioteca de fontes Font Awesome, que tem em média cerca de 250 KB. Considerando que o carregamento assíncrono não é preferido devido ao efeito de movimento, pense em quantas fontes ficam visíveis na primeira tela de uma página quando ela é aberta no celular ou desktop. Um breve estudo em 50 plataformas diferentes encontrou uma média de 3.4 ícones usados ​​(mais comumente: carrinho, usuário, menu, notificação). Assim, para carregar apenas quatro ícones sem problemas, carregamos a biblioteca inteira.

Como as estruturas JS avançadas gerenciam isso? Ao importar apenas o formato SVG dos ícones utilizados no componente relevante, eliminando a necessidade de carregar fontes inteiras ou bibliotecas CSS.

O que o uso do Bootstrap vs. React JS nos diz?

A biblioteca Bootstrap JS tem uma participação de mercado de 26% em todos os sites do mundo, enquanto o uso do React é de cerca de 4%. Bootstrap é popular por sua flexibilidade e facilidade de uso, permitindo um desenvolvimento rápido. No entanto, essa flexibilidade tem um custo: funções JS gerais, ampla cobertura de código e funções para recursos que você talvez nunca use estão incluídas em seu projeto.

Então, vamos perguntar: o que significa um aumento de mais de 100% no uso do dos 10,000 principais aos 1,000 principais sites indicam? Mostra que os melhores estão aproveitando os detalhes para serem ainda melhores.

Em resumo, em vez de reescrever nossos sites com tecnologias como Próximo, Nuxt, Angular, React, Vue, etc., devemos entender o que essas tecnologias fazem de certo em termos de velocidade e aplicar essas práticas recomendadas aos nossos aplicativos da web.