Dicas para ter um “bom” Front End

Apresentarei aqui algumas abordagens que ajudam( ou podem ajudar) no desempenho e qualidade de seu Front End. Estas ideias foram fundamentadas em minha experiência profissional e no curso de Arquitetura de Software. Serei mais sucinto possível. Qualquer dúvida entrem contato comigo.

Antes de entrar nas dicas

É importante antes de iniciar ter em mente o funcionamento da Web e da comunicação do HTTP. Pesquisem rapidamente sobre Three Way Handshake, renderização de conteúdo nos browser web. Responsabilidade do HTML, CSS e JS.

Vamos as Dicas

1 — Mantenha seu HTML, CSS e JS em arquivos separados;

1.1 — Facilitamos o processo de manutenção de nosso Front End;

1.2 — Conseguimos manter o princípio da responsabilidade única;

1.3 — Facilidade em adotar ferramentar de transpilação de CSS (SASS e LESS) e Bundles (Webpack).

Outros formas de utilizar os recurso no HTML: Inline e Embedded.

2 — CSS no início e JS no fim do HTML.

2.1 — Coloque o CSS no início para que a página não carregar inicialmente sem estilo e coloque o JS no final para que a página não se torne lenta em sua primeira resposta;

O fonte fica assim:

<html>
<head>
  <meta charset="UTF-8">
  <title>Browser Diet</title>

  <!-- CSS no início-->
  <link rel="stylesheet" href="/css/siteCSS.css" media="all">
</head>
<body>
  <p>Estilo no início e JS no fim</p>
  <!-- Outros conteúdos aqui -->
<!-- JS no final -->
  <script src="/js/siteJS.js"></script>
</body>
</html>

Indo mais além: uma outra abordagem é utilizar a requisição assíncrona para o JS. Isso faz com que a página não espera o retorno do arquivo para continuar a renderização. (<script async src=”siteJS.js”></script>)

3 — Sempre minifique para produção

Ele faz com que um texto legível para nós se torne uma versão menos verbosa e com isso realizar a diminuição dos arquivos( remoção de comentários, redução de nomes de variáveis, remoção de quebra de linhas, etc).

3.1 — Transporte de arquivos menores;

3.2 — Maior velocidade no carregamento pelo Browser;

3.3 — Menor carga de dados na rede e no servidor de aplicação;

Dica: pesquise por ferramentas de minificação.

4 —Sempre bundling para produção

O processo se resume em criar um (ou alguns) arquivos a partir de vários outros.

4.1 — Redução da quantidade de requisições HTTP ao servidor de aplicação;

4.2 — Melhoria desempenho da página web;

Ferramenta: (querido) Webpack.

5 —Imagem Sprites

“Cria uma imagem com todas dentro”.Observe o quadro abaixo, ele será a melhor explicação dessa técnica:

5.1 — Redução de requisições HTTP;

5.2 — Redução no tempo de carregamento do site;

Ferramenta: vale testar o processo com estas ferramentas https://css.spritegen.com/, https://www.toptal.com/developers/css/sprite-generator/.

6 — Remoção de metadados de imagens

As imagens possuem metadados que não influenciam na funcionalidade delas para os websites( modelo da câmera, data, local).

6.1 — Diminuição do tráfego na rede;

6.2 — Carregamento mais rápido das imagens;

Exemplo de ferramentas: https://www.verexif.com/en/, https://www.exifremove.com/.

E por fim

Existem muitos outras técnicas para melhorar suas páginas web, porém comece com estas pois elas resultarão em grande mudanças na organização e no desempenho do seu site.

Não existe bala de prata e além disso sempre vale analisar se para o projeto em questão o aumento da complexidade justifica os ganhos.

Referências: