Desempenho de front-end 2021: vitórias rápidas

Publicados: 2022-03-10
Resumo rápido ↬ Vamos fazer 2021… rápido! Uma lista de verificação anual de desempenho de front-end com tudo o que você precisa saber para criar experiências rápidas na Web hoje, de métricas a ferramentas e técnicas de front-end. Atualizado desde 2016.

Índice

  1. Preparação: planejamento e métricas
  2. Definir metas realistas
  3. Definindo o Ambiente
  4. Otimizações de recursos
  5. Otimizações de compilação
  6. Otimizações de entrega
  7. Rede, HTTP/2, HTTP/3
  8. Teste e monitoramento
  9. Vitórias rápidas
  10. Tudo em uma página
  11. Baixe a lista de verificação (PDF, Apple Pages, MS Word)
  12. Tudo em uma página
  13. Baixe a lista de verificação (PDF, Apple Pages, MS Word)
  14. Assine nossa newsletter por e-mail para não perder os próximos guias.

Vitórias rápidas

Esta lista é bastante abrangente e concluir todas as otimizações pode demorar um pouco. Então, se você tivesse apenas 1 hora para obter melhorias significativas, o que você faria? Vamos resumir tudo em 17 frutas fáceis . Obviamente, antes de começar e depois de terminar, meça os resultados, incluindo a maior pintura com conteúdo e o tempo de interação em uma conexão 3G e a cabo.

  1. Meça a experiência do mundo real e estabeleça metas apropriadas. Procure ser pelo menos 20% mais rápido que seu concorrente mais rápido. Permaneça dentro do maior índice de conteúdo < 2,5 s, um atraso na primeira entrada < 100 ms, tempo para interação < 5 s em 3G lento, para visitas repetidas, TTI < 2 s. Otimize pelo menos para a primeira pintura de conteúdo e o tempo para interação.
  2. Otimize imagens com Squoosh, mozjpeg, guetzli, pingo e SVGOMG e sirva AVIF/WebP com um CDN de imagem.
  3. Prepare o CSS crítico para seus templates principais e insira-os no <head> de cada template. Para CSS/JS, opere dentro de um orçamento de tamanho de arquivo crítico de máx. 170 KB compactados (0,7 MB descompactados).
  4. Aparar, otimizar, adiar e carregar scripts com preguiça. Invista na configuração do seu bundler para remover redundâncias e verificar alternativas leves.
  5. Sempre auto-hospede seus ativos estáticos e sempre prefira auto-hospedar ativos de terceiros. Limite o impacto de scripts de terceiros. Use fachadas, carregue widgets na interação e cuidado com os snippets anti-flicker.
  6. Seja seletivo ao escolher uma estrutura. Para aplicativos de página única, identifique páginas críticas e veicule-as estaticamente, ou pelo menos pré-renderize-as e use hidratação progressiva no nível do componente e módulos de importação na interação.
  7. A renderização do lado do cliente por si só não é uma boa opção para desempenho. Pré-renderize se suas páginas não mudarem muito e adie a inicialização dos frameworks se puder. Se possível, use a renderização do lado do servidor de streaming.
  8. Exiba código legado apenas para navegadores legados com <script type="module"> e padrão de módulo/nomodule.
  9. Experimente reagrupar suas regras de CSS e teste o CSS no corpo.
  10. Adicione dicas de recursos para acelerar a entrega com dns-lookup , preconnect , prefetch , preload e prerender .
  11. Subconjunto de fontes da Web e carregue-as de forma assíncrona, e utilize font-display em CSS para uma primeira renderização rápida.
  12. Verifique se os cabeçalhos de cache HTTP e os cabeçalhos de segurança estão definidos corretamente.
  13. Ative a compactação Brotli no servidor. (Se isso não for possível, pelo menos certifique-se de que a compactação Gzip esteja habilitada.)
  14. Habilite o congestionamento TCP BBR desde que seu servidor esteja rodando no kernel Linux versão 4.9+.
  15. Habilite o grampeamento OCSP e IPv6, se possível. Sempre forneça um certificado DV grampeado OCSP.
  16. Habilite a compactação HPACK para HTTP/2 e mova para HTTP/3 se estiver disponível.
  17. Ativos de cache, como fontes, estilos, JavaScript e imagens em um cache de service worker.

Baixe a lista de verificação (PDF, Páginas da Apple)

Com esta lista de verificação em mente, você deve estar preparado para qualquer tipo de projeto de desempenho de front-end. Sinta-se à vontade para baixar o PDF pronto para impressão da lista de verificação, bem como um documento editável do Apple Pages para personalizar a lista de verificação de acordo com suas necessidades:

  • Baixe o PDF da lista de verificação (PDF, 166 KB)
  • Baixe a lista de verificação no Apple Pages (.pages, 275 KB)
  • Baixe a lista de verificação em MS Word (.docx, 151 KB)

Se você precisar de alternativas, também pode verificar a lista de verificação de front-end de Dan Rublic, a "Lista de verificação de desempenho da Web do designer" de Jon Yablonski e a lista de verificação de frontend.

Lá vamos nós!

Algumas das otimizações podem estar além do escopo do seu trabalho ou orçamento ou podem ser um exagero devido ao código legado com o qual você precisa lidar. Isso é bom! Use esta lista de verificação como um guia geral (e esperançosamente abrangente) e crie sua própria lista de questões que se aplicam ao seu contexto. Mas o mais importante é testar e medir seus próprios projetos para identificar problemas antes de otimizar. Felizes resultados de desempenho em 2021, pessoal!

Índice

  1. Preparação: planejamento e métricas
  2. Definir metas realistas
  3. Definindo o Ambiente
  4. Otimizações de recursos
  5. Otimizações de compilação
  6. Otimizações de entrega
  7. Rede, HTTP/2, HTTP/3
  8. Teste e monitoramento
  9. Vitórias rápidas
  10. Tudo em uma página
  11. Baixe a lista de verificação (PDF, Apple Pages, MS Word)
  12. Tudo em uma página
  13. Baixe a lista de verificação (PDF, Apple Pages, MS Word)
  14. Assine nossa newsletter por e-mail para não perder os próximos guias.

Um grande obrigado a Guy Podjarny, Yoav Weiss, Addy Osmani, Artem Denysov, Denys Mishunov, Ilya Pukhalski, Jeremy Wagner, Colin Bendell, Mark Zeman, Patrick Meenan, Leonardo Losoviz, Andy Davies, Rachel Andrew, Anselm Hannemann, Barry Pollard, Patrick Hamann, Gideon Pyzer, Andy Davies, Maria Prosvernina, Tim Kadlec, Rey Bango, Matthias Ott, Peter Bowyer, Phil Walton, Mariana Peralta, Pepijn Senders, Mark Nottingham, Jean Pierre Vincent, Philipp Tellis, Ryan Townsend, Ingrid Bergman, Mohamed Hussain SH, Jacob Groß, Tim Swalling, Bob Visser, Kev Adamson, Adir Amsalem, Aleksey Kulikov e Rodney Rehm por revisarem este artigo, bem como nossa fantástica comunidade que compartilhou técnicas e lições aprendidas com seu trabalho de otimização de desempenho para todos usarem . Você está realmente arrasando!