/Front-End-Performance-Checklist

🎮 O único checklist de performance front-end que roda mais rápido que os outros

MIT LicenseMIT


Front-End Performance Checklist

  Checklist de Performance Front-End  

🎮 O único checklist de performance front-end que roda mais rápido que os outros.

Apenas uma regra simples: "Faça o design e programe pensando em performance"

      PRs são bem vindas         Gitter           Licence MIT  

  Como usar • Contribuir • Product Hunt

Outros Checklists:
🗂 Checklist de Front-End • 💎 Checklist de Design Front-End

Índice

  1. HTML
  2. CSS
  3. Fontes
  4. Imagens
  5. JavaScript
  6. Servidor (em progresso)
  7. Frameworks JS (em progresso)

Introdução

Performance é um assunto gigante, mas nem sempre é um assunto de "back-end" ou "admin": também é uma responsabilidade do Front-End. O Checklist de Performance Front-End é uma lista extensa de elementos que você deve conferir ou ao menos estar ciente como um desenvolvedor Front-End e aplicar em seu projeto (pessoal ou profissional).

Como usar?

Para cada regra, você vai encontrar um parágrafo explicando por que essa regra é importante e como você pode aplicá-la. Para entender melhor, você encontrará links que te direcionarão a 🛠️ ferramentas, 📖 artigos ou 📹️mídias que complementam o checklist.

Todos os itens no Checklist de Performance Front-End são essenciais para alcançar o melhor resultado de performance mas você encontrará um indicador para te auxiliar a eventualmente priorizar algumas regras perante outras. Existem 3 níveis de prioridade / impacto:

  • Baixo significa que o item tem pouco impacto e prioridade no seu projeto.
  • Médio significa que o item tem médio impacto e prioridade no seu projeto. Você não deve evitar resolver esse item.
  • Alto significa que o item tem alto impacto e prioridade no seu projeto. Você não pode evitar seguir a regra e aplicar as correções apropriadas.

Ferramentas de performance

Lista de ferramentas que você pode usar para testar ou monitorar o seu website ou aplicação:

Referências

HTML

html

  • HTML Minificado: medium O código HTML está minificado, comentários, white spaces e novas linhas são removidas dos arquivos de produção.

    Por que:

    Remover todo o espaço desnecessário, comentarios e quebras reduz o tamanho do seu HTML e acelera o tempo de carregamento do seu site e obviamente reduz o peso do download para o usuário.

    Como:

    ⁃ A maioria dos frameworks possuem plugins para facilitar a minificação das páginas web. Você pode usar uma porção de módulos do NPM que farão o trabalho pra você automaticamente..

  • Remover comentários desnecessários: low Garanta que os comentários serão removidos de suas páginas.

    Por que:

    Comentários não são úteis para o usuário e portanto devem ser removidos dos arquivos de produção. Um caso em que você manteria comentários poderia ser quando precisa manter a origem para uma biblioteca.

    Como:

    ⁃ Na maior parte do tempo, comentários podem ser removidos com um plugin de minificação HTML.

  • Remover atributos desnecessários: low Atributos Type como type="text/JavaScript" ou type="text/css" não são mais necessários e devem ser removidos.

    <!-- antes do HTML5 -->
<script type="text/JavaScript">
    // código JavaScript
</script>

<!-- Hoje -->
<script>
    // código JavaScript
</script>

    Por que:

    Atributos Type não são necessários já que o HTML5 supõe text/css e text/JavaScript por padrão. Código inutilizado deve ser removido quando não forem usados no seu website ou aplicação por deixarem as páginas mais pesadas.

    Como:

    ⁃ Certifique-se de que todas as tags <link> e <script> não têm nenhum atributo type.

  • Sempre coloque as tags de css antes das de JavaScript: high Certifique-se de que o seu CSS sempre é carregado antes de ter código JavaScript.

    <!-- Não recomendado -->
<script src="jquery.js"></script>
<script src="foo.js"></script>
<link rel="stylesheet" href="foo.css"/>

<!-- Recomendado -->
<link rel="stylesheet" href="foo.css"/>
<script src="jquery.js"></script>
<script src="foo.js"></script>

    Por que:

    Ter o CSS antes do JavaScript posibilita um melhor download paralelo que torna o tempo de renderização do navegador mais rápido.

    Como:

    ⁃ Certifique-se que as tags <link> e <style> no <head> sempre vêm antes de qualquer <script>.

  • Reduza a quantidade de iframes: high Somente use iframes se não há nenhuma outra possibilidade técnica. Evite tanto quanto o possível utilizar iframes.

⬆ Topo

CSS

css

  • Minificação: high Todos os arquivos CSS está minificado, comentários, white spaces e novas linhas são removidas dos arquivos de produção.

    Por que:

    Quando os arquivos CSS são minificados, o conteúdo é carregado mais rapidamente e menos dados são enviados ao cliente. É importante sempre minificar os arquivos CSS em produção.Isso é benéfico para o usuário e também para negócios que desejam dimminuir o custo de banda e reduzir o uso de recursos.

    Como:

    ⁃ Use ferramentas para minificar seus arquivos automaticamente antes ou durante o build ou deploy.

  • Concatenação: medium Arquivos CSS são concatenados em um único arquivo (Nem sempre é válido para HTTP/2).

    <!-- Não recomendado -->
<script src="foo.js"></script>
<script src="ajax.js"></script>

<!-- Recomendado -->
<script src="combined.js"></script>

    Por que:

    Se ainda estiver usando HTTP/1, você talvez precise concatenar seus arquivos, é menos indicado se o seu servidor usa HTTP/2 (é necessário testar).

    Como:

    ⁃ Use uma ferramenta online ou algum plugin antes ou durante o build ou deploy do seu projeto para concatenar arquivos. ⁃ Certifique-se, claro, que a concatenação não quebre o seu projeto.

  • Não-obstrusivo: high Arquivos CSS precisam ser não-obstrusivos para prevenir que o DOM demore de carregar .

    <link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="global.min.css"></noscript>

    Por que:

    Arquivos CSS podem bloquear o carregamento da página e atrasar a renderização da sua página. Usar preload pode carregar os arquivos CSS antes que o navegador comece a mostrar o conteúdo da página.

    Como:

    ⁃ Você precisa adicionar o atributo rel com o valor preload e incluir as="style" no elemento <link>.

  • Tamanho das classes CSS: low O tamanho das suas classes pode causar (baixo) impacto nos seus arquivos HTML e CSS (eventualmente).

    Por que:

    Até mesmo os impactos de performance podem ser contestados, tomar uma decisão sobre a estratégia de nomenclatura do seu projeto pode ter um impacto não trivial na manutenção das suas folhas de estilo. Se estiver usando BEM, em alguns casos, você pode acabar com classes que possuem mais caracteres do que precisam. É sempre importante escolher com sabedoria os nomes e namespaces.

    Como:

    ⁃ Definir um limite em termos de número de caracteres pode ser interressante para algumas pessoas, mas garantir que você desmembrou o seu website em componentes pode ajudar a reduzir a quantidade de classes (e declarações) e o tamanho das suas classes.

  • CSS inutilizado: medium Remova seletores CSS inutlizados.

    Por que:

    Remover seletores CSS inutilizados pode reduzir o peso dos seus arquivos e acelerar o carregamento dos seus assets.

    Como:

    ⁃ ⚠️ Sempre verifique se o framework de CSS que você quer usar já não possui código de reset/normalize. Às vezes você pode não precisar de tudo que está incluído no arquivo de reset/normalize.

  • CSS incorporado ou inline: high Evite usar CSS incorporado ou inline dentro do seu <body> (não válido para HTTP/2)

    Por que:

    Uma das principais razões é que é boa prática separar conteúdo de design. Também te ajuda a ter um código mais sustentável e mantém o seu site aceesível. Mas com relação a performance, é simplesmente por diminuir o peso do arquivo das suas páginas HTML e tempo de carregamento.

    Como:

    ⁃ Sempre use folhas de estilo externas ou incorpore o CSS no seu <head> (e siga as outras regras de performance).

  • Analise a complexidade das folhas de estilo: high Analisar as suas folhas de estilo pode te ajudar a encontrar problemas, redundâncias e seletores CSS duplicados.

    Por que:

    Às vezes você pode ter redundancias ou erros de validação no seu CSS, analisar os arquivos CSS e remover essas complexidades pode te ajudar a acelerar os arquivos CSS (já que seu navegador vai ler mais rápido).

    Como:

    ⁃ O seu CSS deve estar organizado, Pré-processadores CSS podem te ajudar com isso. Algumas ferramentas online listadas acima também podem te ajudar a analisar e corrigir o seu código.

⬆ Topo

Fontes

fonts

⬆ Topo

Imagens

images

  • Use imagens vetorizadas em favor de raster/bitmap: medium Prefira usar iamgem vetorizada em vez de bitmap (quando possível).

    Por que:

    Imagens vetorizadas (SVG) costumam ser mais leves que bitmap e SVGs são responsivos e redimencionam perfeitamente. Essas imagens podem ser animadas e modificadas com CSS.

⬆ Topo

JavaScript

JavaScript

  • Minificação de JS: high Todos os arquivos JavaScript estão minificados, comentários, white space e novas linhas foram removidas dos arquivos de produção (válido mesmo se usando HTTP/)

    Por que:

    Remover os espaços desnecessários, comentários e quebras reduz o tamanho dos seus arquivos JavaScript e acelera o carregamento das páginas do seu site e obviamente reduz o peso de download para o usuário.

    Como:

    ⁃ Use as ferramentas online recomendadas abaixo para minificar os seus arquivos automaticamente antes ou durante o seu build ou deploy.

  • Nenhum JavaScript no meio: medium (Só vale para website) Evite ter multiplos códigos JavaScript incorporados no meio do body. Reagrupe seu código JavaScript dentro de arquivos externos, no <head> ou no fim da sua página (antes do </body>).

    Por que:

    Incorporar código JavaScript diretamente no <body> pode tornar a página lenta já que será carregado enquando o DOM é construído. A melhor opção é usar arquivos externos com async ou defer para evitar bloquear o DOM. Outra opção é colocar alguns scripts no <head>.

    Como:

    ⁃ Certifique-se de que todos os seus arquivos são carregados usando async ou deferP e escolha sabiamente o código que será inserido no`.

  • JavaScript sem bloqueio: high Arquivos JavaScript são carregados assincronamente utilizando atributo async ou deferidos com o atributo defer.

    <!--  Atributo Defer -->
<script defer src="foo.js">

<!-- Atributo Async -->
<script async src="foo.js">

    Por que:

    JavaScript bloqueia o parse normal de um documento HTML, então quando o parser encontra uma tag <script> (especialmente se está dentro do <head>), ele para para buscar e executa-la. Adicionar async ou defer é altamente recomendado se seus scripts estão localizados no topo da sua página mas menos importante se estiverem logo antes da tag </body>. Mesmo assim é boa prática usar esses atributos para evitar problemas de performance.

    Como:

    ⁃ Coloque o atributo async (se o script não depende de outros scripts) ou defer (se o script depende de outro ou é necessário para outro script). ⁃ Se tiver scripts pequenos, considere deixar inline acima dos scripts assíncronos.

  • Bibliotecas JS Otimizadas e Atualizadas: medium todas as bibliotecas JavaScript utilizadas no seu projeto são necessárias (dê preferência para JavaScript Puro para funcionalidades simples), atualizadas para a ultima versão e não sobrecarregam o seu JavaScript com métodos desnecessários.

    Por que:

    Na maior parte do tempo, versões mais novas têm otimizações e correções de segurança. Você deve usar o código mais otimizado para acelerar o seu projeto e garantir que não vai deixar seu website ou aplicação lento com plugins destualizados.

    Como:

    ⁃ Se o seu projeto usa pacotes NPM, npm-check é uma biblioteca interessante para atualizar suas bibliotecas.

⬆ Topo

Servidor

server-side

  • Minimize Requisições HTTP: high Sempre se certifique que todos os arquivos requisitados são essenciais para o seu site ou aplicação.

  • Use uma CDN Para entregar seus ativos: medium Use uma CDN para entregar mais rápido seu conteúdo pelo mundo.

  • Entregue arquivos com o mesmo protocolo: high Evite entregar arquivos de fontes usando HTTP se seu site usar HTTPS.

  • Entregue arquivos existentes: high Evite solicitar arquivos que não podem ser acessados (404).

  • Defina corretamente os cabeçalhos de cache HTTP: high Defina cabeçalhos HTTP para evitar voltas custosas entre o seu navegador e o servidor.

  • Compressão GZIP está ativada: high

⬆ Topo

Frameworks JS e Performance

Vue

React

Traduções

O Checklist de Performance Front-End também deseja estar disponível em outras línguas!

Contribuir

Abra um issue ou um PR para mandar sugestões, alterações ou inclusões.

Suporte

Se tiver qualquer dúvida ou sugestão, mande sua dúvida pelo Gitter or Twitter:

Author

Criado com ❤️ por David Dias em @influitive 🇨🇦

Traduzido para português (brasil) por Fernando Malaman

Contribuintes

Esse projeto existe graças à todas as pessoas que contribuem. [Contribua].

Licensa de Uso

MIT

Todos os ícones fornecidos por Icons8

⬆ Topo