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: Browser Diet Estilo no início e JS no fim < > html < > head < = > meta charset "UTF-8" < > title </ > title <!-- CSS no início--> < = = = > link rel "stylesheet" href "/css/siteCSS.css" media "all" </ > head < > body < > p </ > 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: http://lesscss.org/ https://sass-lang.com/ https://browserdiet.com/ https://webpack.js.org/
