Awesome

<h1 align="center"> <br> <img src="https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/master/images/logo-front-end-performance-checklist.jpg" alt="Front-End Performance Checklist" width="170"> <br> <br> Checklist de Performance Front-End <br> </h1> <h4 align="center">🎮 O único checklist de performance front-end que roda mais rápido que os outros.</h4> <p align="center">Apenas uma regra simples: "Faça o design e programe pensando em performance"</p> <p align="center"> <a href="http://makeapullrequest.com"> <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs são bem vindas"> </a> <a href="https://gitter.im/Front-End-Checklist/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link"> <img src="https://img.shields.io/badge/chat-on_gitter-008080.svg?style=flat-square" alt="Gitter"> </a> <a href="https://opensource.org/licenses/MIT"> <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="Licence MIT"> </a> </p> <p align="center"> <a href="#how-to-use">Como usar</a> • <a href="#contributing">Contribuir</a> • <a href="https://www.producthunt.com/posts/front-end-performance-checklist">Product Hunt</a> </p> <p align="center"> <span>Outros Checklists:</span> <br> 🗂 <a href="https://github.com/thedaviddias/Front-End-Checklist#---------front-end-checklist-">Checklist de Front-End</a> • 💎 <a href="https://github.com/thedaviddias/Front-End-Design-Checklist#front-end-design-checklist">Checklist de Design Front-End</a> </p>

Índice

HTML
CSS
Fontes
Imagens
JavaScript
Servidor (em progresso)
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:

significa que o item tem pouco impacto e prioridade no seu projeto.
significa que o item tem médio impacto e prioridade no seu projeto. Você não deve evitar resolver esse item.
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:

🛠 WebPagetest - Teste de Performance e Otimização de Websites
🛠 ☆ Dareboost: Teste de Velocidade para Website e Análise de Website (use o cupom WPCDD20 para ter -20%)
🛠 GTmetrix | Otimização de Velocidade e Performance de Website
🛠 PageSpeed Insights
📖 Pagespeed - A ferramenta e guia de otimização
📖 Torne a web mais rápida | Google Developers
📖 Sitespeed.io - Bem Vindo ao maravilhoso mundo da Performance da Web

Referências

HTML

html

HTML Minificado: 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..
- 🛠 Minifcador HTML | Minify Code
- 📖 Experiências com com Minficador HTML — Perfection Kills
Remover comentários desnecessários: 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.

🛠 remove-html-comments - npm

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

<script type="text/JavaScript">
    // código JavaScript
</script>


<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.
- 📖 A Tag de Script | CSS-Tricks
Sempre coloque as tags de css antes das de JavaScript: Certifique-se de que o seu CSS sempre é carregado antes de ter código JavaScript.
```

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


<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>.
- 📖 Ordenando seus estilos e scripts para o carregamento da página
Reduza a quantidade de iframes: 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: 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.
- 🛠 cssnano: Um minificador modular baseado no ecossistema PostCSS
- 🛠 @neutrinojs/style-minify - npm
Concatenação: Arquivos CSS são concatenados em um único arquivo (Nem sempre é válido para HTTP/2).
```

<script src="foo.js"></script>
<script src="ajax.js"></script>


<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.
- 📖 HTTP: Otimizando a Entrega de Aplicações - Alta performance em Conexão do Navegador(O'Reilly)
- 📖 [Melhores Práticas de Performance na Era do HTTP/2](https://deliciousbrains.com/performance-best-practices-http2/
Não-obstrusivo: 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: 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.
- 🛠 classe longa vs curta · jsPerf
CSS inutilizado: 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.
- 🛠 UnCSS Online
- 🛠 PurifyCSS
- 🛠 PurgeCSS
- 🛠 Cobertura das Ferrramentas de Desenvolvedor do Chrome

CSS Crítico: O CSS crítico (ou "sobre a dobra") contém todo o CSS usado para renderizar a parte visível da página. ele é incorporado antes da chamada principal do seu CSS e entre <style></style> numa única linha (minificado se possível).

Por que:

Deixar o CSS crítico inline ajuda a acelerar a renderização de páginas web reduzindo o número de requisições ao servidor.

Como:

⁃ Gere o CSS crítico com ferramentas online ou usando um plugin como o que Addy Osmani desenvolveu.
- 📖 Entendendo o CSS Crítico
- 🛠 Critical por Addy Osmani no GitHub automatiza isso.
- 📖 Deixando o CSS crítico inline para ter melhor performance na web | Go Make Things
- 📖 Gerador de CSS de Caminho Crítico Critical - Priorize contéudo acima da dobra :: SiteLocity

CSS incorporado ou inline: 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).
- 📖 Observe as Melhores Práticas de CSS: Evite Usar Estilos CSS Inline
Analise a complexidade das folhas de estilo: 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

📖 A Book Apart, Guia de Bolso para Webfonts

Formato de Webfont: Você usa WOFF2 no seu projeto ou aplicação web.

Por que:

De acordo com o Google, a compressão do formato WOFF 2.0 oferece ganhos de 30% em média com relação ao WOFF 1.0. Portanto é bom usar WOFF 2.0, WOFF 1.0 como fallback e TFF.

Como:

⁃ Antes de comprar sua nova fonte garanta que o fornecedor te entregue o formato WOFF2. Se estiver usando uma fonte grátis, você pode usar o Font Squirrel para gerar todos os formatos que precisar.
Use preconnect para carregar suas fontes mais rápido:
```
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
```
Por que:

Quando você acessa um website, seu dispositivo precisa encontrar onde o o site está hospedado e a qual servidor ele precisa se conectar. Seu navegador precisou acessar um servidor DNS e esperar até a consulta completar antes de buscar os recursos (fontes, arquivos CSS...). Usar prefetch e preconnect permite ao navegador reduzir o tempo de carregamento da página.

Como:

⁃ Antes de usar prefetch nas suas webfonts, use o webpagetest para avaliar o seu site. ⁃ Procure por consultas DNS azul-petróleo e anote os hosts que são solicitados. ⁃ Coloque Prefetch nas fontes de dentro do seu <head> e eventualmente inclua esses hostnames que você deveria dar prefetch também.
Tamanho de Webfonts: O Tamanho das Webfonts não ultrapassa 300kb (com todas as variantes)

📖 Font Bytes - Peso das Páginas

⬆ Topo

Imagens

images

📖 Bytes de Imagens em 2018
Otimização de Imagens: Suas imagens são otimizadas, comprimidas sem impacto direto ao usuário final.

Por que:

Imagens otimizadas carregam mais rápido no navegador e consomem menos dados.

Como:

⁃ Tente usar efeitos do CSS3 quando possível (no lugar de imagens pequenas) ⁃ Quando possível use fontes no lugar de texto dentro de imagens ⁃ Use SVG ⁃ Use uma ferramenta e especifique uma taxa de compressão abaixo de 85
- 📖 Otimização de Imagens | Fundamentos da Web | Google Developers
- 🛠 TinyJPG – Comprima imagens JPEG inteligentemente

Formato de Imagens: Escolha o formato das suas imagens apropriadamente.

Por que:

Para certificar que as suas mensagens não deixam seu site lerdo, escolha o formato que terá o menor impacto

Como:

⁃ Use o Lighthouse para identificar quais imagens podem eventualmente usar formatos da próxima geração (como JPEG 2000m, JPEG XR ou WebP) ⁃ Compare formatos diferentes, algumas vezes usar PNG8 é melhor que PNG16, e outras não.

Use imagens vetorizadas em favor de raster/bitmap: 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.

Dimensões das Imagens: Defina atributos width e height nas <img> se o tamanho final da imagem exibida é conhecido.

Por que:

Se a altura e largura da imagem são definidos, o espaço necessário para a imagem é reservado quando a página é careregada. Mas sem esses atributos o navegador não sabe o tamanho da imagem, e não pode reservar o espaço apropriado para ela. Isso causa mudança no layout da página enquanto as imagens estão sendo carregadas.
Evite usar imagens Base64: Você pode chegar a converter iamgens muito pequenas para base64 mas na verdade isso não é uma melhor prática.
Atrasar o carregamento: As imagens são carregadas apenas quando seriam exibidas para o usuário (Um fallback noscript sempre é fornecido).

Por que:

Isso vai melhorar o tempo de resposta da página atual e evitar carregar imagens desnecessárias que o usuário pode não precisar.

Como:

⁃ Use o Lighthouse para ver quais imagens estão fora da tela. ⁃ Use um plugin JavaScript como o lazyload para carregar suas imagens.
Imagens responsivas: Certifique-se de entregar imagens que são próximas do tamanho da tela.

Por que:

Aparelhos pequenos não precisam de imagens maiores que a resolução deles. É recomendado ter várias versões de uma imagem em diferentes tamanhos.

Como:

⁃ Crie tamanhos de imagem diferentes para os aparelhos que você quer suportar. ⁃ Use srcset e picture para entregar várias versões de uma imagem.
- 📖 Imagens Responsivas - Aprenda desenvolvimento web | MDN

⬆ Topo

JavaScript

Minificação de JS: 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.
- 📖 uglify-js - npm
- 📖 Leitura rápida: Qual a diferença do HTTP/2? Ainda devemos minificar e concatenar?

Nenhum JavaScript no meio: (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<head>`.
- 📖 11 Dicas para Otimizar JavaScript e Melhorar o Tempo de Carregamento de Websites
JavaScript sem bloqueio: Arquivos JavaScript são carregados assincronamente utilizando atributo async ou deferidos com o atributo defer.
```

<script defer src="foo.js">


<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.
- 📖 Remova JavaScript que Bloqueia o Render
Bibliotecas JS Otimizadas e Atualizadas: 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.
- 📖 Talvez você não precise do jQuery
- 📖 JavaScript Puro para construir aplicações web poderosas

Confira o limite de tamanho das dependências: Faça questão de suar bibliotecas externas sabiamente, muitas vezes você pode usar uma biblioteca mais leve para ter a mesma funcionalidade.

Por que:

Talvez você queira usar um dos 745.000 pacotes que você pode encontrar no npm, mas você deve encontrar o melhor pacote para sua necessidade. Por exemplo, o MomentJS é uma biblioteca maravilhosa mas com muitos métodos que talvez você nunca use, é por isso que o Day.js foi criado. Ele pesa 2kB gz contra 16.4 kB do Moment.

Como:

⁃ Sempre compare e escolha a biblioteca melhor e mais leve para as suas necessidades. Você pode usar ferramentas como npm trends para comparar o número de downloads de pacotes NPM ou Bundlephobia para saber o tamanho das suas dependências.
Perfilamento JavaScript: Confira os problemas de performance dos seus arquivos JavaScript (e CSS também).

Por que:

A complexidade do JavaScript pode deixar a performance de execução lenta. Identificar esses possíveis problemas é essencial para oferecer a experieência de usuário mais polida.

Como:

⁃ Use a ferramenta Linha do Tempo nas Ferramentas de Desenvolvedor do Chrome para analisar os eventos de script e encontrar os que demoram demais.

⬆ Topo

Servidor

server-side

Peso da página < 1500 KB: (idealmente < 500 KB) Reduza o peso da sua página e recursos o máximo que puder.

Por que:

Idealmente você deve tentar alcançar < 500KB mas análises da web mostram que a média é por volta de 1500KB (até em mobile). Dependendo do sua audiência, conexão e aparelhos é importante reduzir tanto quanto possível o total de kilbytes para alcançar a melhor experiência de usuário possível.

Como:

⁃ Todas as regras do Checklist de Performance Front-End te ajudará a reduz ao máximo seus recursos e código.
- 📖 Peso da Página
- 🛠 Quanto Custa o meu Site?
Tempo de carregamento das páginas < 3 segundos: Reduza ao máximo o tempo de carregamento das suas páginas para entregar rapidamente o seu conteúdo aos usuários.

Por que:

Quanto mais rápido o seu site ou app mais for, menor é a probabilidade de bounces, em outras palavras você terá menos chance de perder o usuário ou futuro cliente. Várias pesquisas provam isso.

Como:

⁃ Use ferramentas online como Page Speed Insight ou WebPageTest para analisar o que pode estar te atrasando e use o Checklist de Performance Front-End para melhorar o tempo de carregamento.
Tempo até o primeiro byte < 1.3 segundos: Reduza ao máximo o tempo que o navegador espera até receber dados.
- 📖 O que é a espera (TTFB) no DevTools, e o que fazer sobre ela
- 📖 Monitorar os seus servidores com ferramentas grátis é facil

Tamanho dos cookies: Se estiver usando cookies certifique-se de que cada cookie não ultrapassa 4096 bytes e o seu domínio não possui mais de 20 cookies.

Por que:

cookies são trocados nos headers HTTP entre os servidores e navegadores. É importante manter o tamanho dos cookies o menor possível para reduzir o impacto no tempo de carregamento para o usuário.

Como:

⁃ Elimine cookies desnecessários.

Minimize Requisições HTTP: 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: Use uma CDN para entregar mais rápido seu conteúdo pelo mundo.

Entregue arquivos com o mesmo protocolo: Evite entregar arquivos de fontes usando HTTP se seu site usar HTTPS.
Entregue arquivos existentes: Evite solicitar arquivos que não podem ser acessados (404).
Defina corretamente os cabeçalhos de cache HTTP: Defina cabeçalhos HTTP para evitar voltas custosas entre o seu navegador e o servidor.
Compressão GZIP está ativada: