Hackernoon logoDicas para ter um “bom” Front End by@altamir-dias

Dicas para ter um “bom” Front End

Vamos as Dicas: HTML, CSS e JS em arquivos separados. Facilitamos o processo de manutenção de nosso Front End. Facilidade em adotar ferramentar de transpilação of CSS (SASS e LESS) e Bundles (Webpack) E.2 — CSS no início e JS no fim do HTML.3 — Sempre minifique para produção.4 —Sempre bundling.5 —Imagem Sprites.
image
Altamir Dias Cassiano Hacker Noon profile picture

Altamir Dias Cassiano

System Analist

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:

image

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:

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.