Introdução:

Alguns dias atrás eu fiz um artigo sobre otimização, e foi bem recebido pela a comunidade. Hoje, estou aqui para continuar com uma parte 2 deste artigo, que se eu me recordo bem, eu prometi.

Caso você tenha interesse em ver a parte 1, aqui está o link: Dicas de otimização ( Front-end )

Antes de citar de forma mais profundamente o que cada técnica faz, eu irei falar em qual situação ela se enquadra melhor e suas desvantagens e vantagens, além de citar alguns tecnologias (se existirem) que ajudem no processo.

Assim como no primeiro, as dicas são voltadas mais para o Front-end, mas algumas dicas servem para ambos os casos, como o Back-end. Sem mais delongas:

inline-critcal CSS (above-the-fold content)

Esta técnica já foi um dia muito comum, e ainda hoje pode quebrar o galho em projetos simples que não tem como objetivo expandir suas funcionalidades, principalmente seu layout.

Use quando:

Estive fazendo um site simples (apenas HTML, CSS e JavaScript)

Para testar por curiosidade

Quando tiver o intuito de criar uma experiência mais suave para o usuario

Essa técnica consiste em adicionar o CSS crítico diretamente no HTML. Por quê isso? Simple: adicionando o CSS crítico diretamente no HTML, os estilos são carregados assim que o HTML também é carregado, proporcionando uma visualização do layout principal mais rápido.

Todo o CSS que não é crítico pode ser feito de forma assíncrona tranquilamente, assim como a maioria dos sites utilizam hoje em dia.

Vantagens:

Conteúdo principal é visualizado de maneira mais rápida pelo o usuário, assim proporcionando uma experiência mais agradável, e diminuindo as chances do usuário desistir de acessar seu site (afinal quem não curte um site rápido)

Desvantagens:

Nem tudo são flores! Apesar dos benefícios, também existe uma desvantagem crucial a ser conhecida aqui:

O CSS crítco é baixado toda vez que a página recarrega. Por quê isso? O CSS incluído diretamente no HTML não pode ser armazenado em cache, diferentemente do CSS assícrono (CSS em um arquivo separado)

Uso é muito grave? Para sites simples, talvez nem tanto. Se seu layout não é muito grande e você aplicou a técnica diretinho (apenas o CSS necessário mesmo no HTML), não deve fazer tanta diferença.

Reduzindo a complexidade do CSS:

Quando usar:

Sempre

Em qualquer projeto

Parece obvio para os mais experientes, mas os iniciantes tendem a errar muito neste quisito... A técnica por trás é simples demais, basta reduzir seu CSS.

Para fazer isso, basta analisar seu código CSS e se perguntar: "Esse estilo é realmente necessário?" Fazendo isso, você diminui o CSS apenas para o mínimo necessário, consequentemente diminuindo o tamanho do CSS, aumentado a velocidade e etc...

Busque sempre reutilizar estilos, e nunca repeti-los!

JavaScript assíncrono

Quando usar:

Sempre que possível (no JSX perde a necessidade, de certa forma)

Pare de usar JavaScript diretamente no seu HTML! Sempre importe ele usando a tag <script src="seu arquivo"></script>. Adicione ele no final do seu arquivo HTML, caso queira adicionar ele no ínicio, utilize o parâmetro defer

<!doctype html>
<head>
    <script src="seu arquivo" defer ></script>
</head>
<body>
 ...
</body>
</html>

Assim, quando você baixar o HTML, não vai vir todo o scritp no pacote de vez, e sim baixado de forma assíncrona!

Matenha a quantidade de Cookies menor que 20

Quando usar:

Sempre

Em todos os projetos

Lidar com cookies é nossa obrigação como programadores. Porém, nem todos abordam de maneira inteligente... Quanto mais cookies, menos desempenho!

Tente manter seus cookies menores que 20, eu recomendo no máximo uns 15 cookies, apenas! Fazendo isso reduz as requisições, ajuda na velocidade do site e o melhor de tudo, otimiza a manutanção posteriormente!

Além disso, mantenha seus cookies menores que 3800 bytes. Acho que nem preciso dizer o motivo... Mas se resta dúvidas: Quando mais bytes o cookie carrega, mais tempos as requisições levam e consequentemente uma experiência menos suave!

Conclusão:

Essa são algumas das otimizações de hoje. São menos que o primeiro, por questões pessoais (no time). Espero que gostem! Se possível, trarei uma parte 3.

[ Conteúdo ] Dicas de otimização parte 2