[ Conteúdo ] Dicas de otimização ( Front-end )
Introdução
Estamos cansados de saber que otimização é extremamente necessário para o desenvolvimento seja no front-end ou back-end (em outras áreas também). Porém muita gente apenas fica codando sem pensar em otimizações, mesmo sabendo sua importância... Podemos ver vários e vários sites e posso citar principalmente os do governo que pegou nota 30 no page speed insights da última vez que eu fiz o teste (cerca de 1 mês atrás).
Então estou aqui para citar algumas técnicas que eu aplico na prática e funciona muito bem. Todas eu fui testando e estudando pesquisando mais afundo sobre.
Sempre abro um repositório privado apenas fins de testes com técnicas que otimização.
Evite Iframes
Essa aqui é umas das maiores otimizações em um site que você pode fazer. Iframes consome tanto da sua otimização que eu arriscaria a estimativa de 1 a 2 segundos só para aparecer algo na tela do usuário. Definitivamente evite o uso de Iframes o máximo possível!
Mimifique seu CSS
Conforme vamos estilizando páginas, o nosso CSS vai aumentando infinitamente... E algumas pessoas gostam de adicionar espaços para separar uma propriedade de outra o que reduz a otimização. Segue algumas dicas que eu tenho pra você:
Minificação: A minificação é o processo de remover espaços em branco, comentários e outras formatações desnecessárias do código CSS, reduzindo assim o tamanho do arquivo. Isso ajuda a diminuir o tempo de carregamento da página. Assim permite que seu site respire mais livre.
Concatenação: A concatenação envolve a combinação de múltiplos arquivos CSS em um único arquivo. Isso reduz o número de solicitações HTTP necessárias para carregar uma página, o que pode melhorar significativamente o tempo de carregamento, especialmente em sites com muitos arquivos CSS. Essa aqui é tão boa para otimização quanto para organização. Modularizar seu CSS é essencial para ambos os casos!
Ah e outra, remova estilos redundantes. Alguns estilos como color são herdados de pais para filhos! Tem que pensar para escrever estilos também!.
CSS non-blocking
CSS non-blocking refere-se à prática de carregar arquivos CSS de forma assíncrona ou de maneira que não bloqueie o processamento do navegador ao carregar uma página da web. Isso quer dizer que carregar uma parte essencial do CSS de forma que não comprometa o carregamento da página.
Segue algumas dicas:
Carregamento assíncrono: Em vez de carregar o CSS de forma síncrona, onde o navegador precisa esperar até que o arquivo CSS seja completamente baixado e processado antes de continuar a renderização da página, você pode usar técnicas de carregamento assíncrono. Isso permite que o navegador baixe o CSS em paralelo com outros recursos da página, acelerando assim o tempo de carregamento. Uma dica é utilizar algumas ferramentas que auxiliam neste processo. Acredite, a diferença é gigante!
CSS crítico inline: Uma técnica comum é incluir o CSS crítico diretamente na parte superior da página HTML (isso para pessoas que não utilizam JSX), dentro de tags <style>. Esse CSS crítico geralmente contém estilos essenciais para a renderização inicial da página, como formatação básica e estilos de layout. Enquanto isso, o restante do CSS pode ser carregado de forma assíncrona ou diferida para garantir que não bloqueie a renderização inicial da página.
CSS incorporado:
Evitar o uso excessivo de CSS incorporado ou inline pode ajudar na otimização do desempenho de um site de várias maneiras:
Redução do peso da página: CSS incorporado ou inline aumenta o tamanho do HTML de uma página, já que o código CSS é incluído diretamente no arquivo HTML. Isso pode resultar em páginas maiores, o que pode aumentar o tempo de carregamento, especialmente em conexões de internet mais lentas ou em dispositivos móveis.
para quem não lembra o que é estilos incorporados:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de CSS Incorporado</title>
<style>
/* CSS incorporado */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
p {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Exemplo de CSS Incorporado</h1>
<p>Este é um exemplo simples de como usar CSS incorporado em um documento HTML.</p>
<p>O CSS está definido dentro da tag <style> no cabeçalho do documento.</p>
</body>
</html>
Ah mais você disse no tópico anterior que podia... Lembre-se está tecnica é somente para coisas essencias e isso se você não estiver usando um framework como tailwindcss. Jamais crie páginas inteiras somente com CSS incorporado.
Comprima sua imagem e escolha um formato
Imagens é algo realmente trabalhoso de lidar no Front-end, principalmente imagens externas que vem de algum endpoint. Portanto, sempre que possível, comprima as imagems ao máximo possível. Existem ferramentas online e gratuitas que fazem isso. Outra dica é escolher o formato ideal para o site. Esqueça jpeg imediamtamente. Esse formado é muito pesado, apesar da boa qualidade. Use png e somente em casos que não pode ser diferente... o formato ideal e moderno é webp. Se você usa Next.js, internamente suas imagens são convertidas para webp, mas não pule essas etapas mesmos assim.
Mimifique seu JavaScript
Mimificar o JavaScript é um processo obrigatório para uma melhor otimização. A quantidade de coisas que fazemos com JavaScript não é brincadeira... é javaScript para todo lado. Portanto mimifique ele ao máximo. Use ferramentas que ajudam neste processo como webpack.
Busque utilizar HTTPS (extra)
Embora o uso de HTTPS possa adicionar uma sobrecarga mínima de processamento ao servidor e ao navegador devido à criptografia, os avanços na tecnologia têm minimizado essa diferença. Além disso, os benefícios em termos de segurança e confiança superam em muito qualquer leve impacto de desempenho.
Essa é uma otimização voltada mais para o SEO que eu recomendo bastante, e um aviso para não deixar de usar https pela a quantidade mínima de desempenho extra adicionada.
Matenha o peso do seu site < 1000kb
O ideal mesmo é 500kb. Eu vi isso em um artigo gringo que infelizmente não me recordo mais onde encontrei e portanto não posso compartilhar o link. Achei muito interessante pois antes minhas páginas batiam cerca de 1800kb até 2000kb! Isso é um absurdo. Ao ter como objetivo um tamanho < 1000kb, minhas páginas melhoraram muito. Algumas ferramentas que você pode utilizar para medir:
Google Chrome DevTools: Abra o Google Chrome, acesse a página que deseja verificar e clique com o botão direito do mouse em qualquer lugar da página. Selecione "Inspeccionar" para abrir o painel DevTools. No painel DevTools, vá para a guia "Network" e recarregue a página. Aqui você pode ver o tamanho total da página e o peso individual de cada recurso (HTML, CSS, JavaScript, imagens, etc.).
PageSpeed Insights: O PageSpeed Insights, uma ferramenta gratuita fornecida pelo Google, permite que você avalie o desempenho da sua página da web em dispositivos móveis e desktops. Ele fornece uma análise detalhada, incluindo o tamanho total da página e sugestões para melhorar o desempenho.
WebPageTest: O WebPageTest é outra ferramenta poderosa e gratuita que permite testar o desempenho de uma página da web. Ele fornece métricas detalhadas, incluindo o tamanho total da página e o tempo de carregamento em diferentes navegadores e dispositivos.
Além disso mantenha seus sites com um tempo de carregamento menor que 3 segundos e o tempo do primeiro bity menor que 1 segundo.
Reduza a quantidade de requests http:
Reduzir o número de solicitações feitas por um navegador a um servidor web usando o protocolo HTTP ajuda e muito na otimização!
Redução do tempo de carregamento: Cada solicitação HTTPS adiciona sobrecarga ao processo de carregamento de uma página da web, pois envolve a troca de informações entre o navegador do usuário e o servidor. Ao minimizar o número de solicitações HTTPS, você reduz o tempo total necessário para carregar a página. Formas de evitar isso seria pensar se realmente precisa fazer um request a mais. Se um Request já não serve para várias coisas que você deseja. Pense bem.
Além disso tente manter as requesições com o mesmo protocolo pois facilita a comunicação consequentemente melhorando a otimização.
Defina seus armazenamentos em cache de forma estratégica:
Configurar o cache apropriadamente é crucial para otimizar um site, pois pode reduzir o tempo de carregamento da página e o uso de largura de banda do servidor. Aqui estão algumas práticas recomendadas para configurar o cache e como elas ajudam na otimização do site:
Cache de navegador: O cache do navegador permite que os recursos estáticos (como imagens, CSS e JavaScript) sejam armazenados localmente no computador do usuário. Isso significa que, quando um usuário acessa uma página pela segunda vez, o navegador pode carregar esses recursos do cache local, em vez de fazer novas solicitações ao servidor. Para configurar o cache do navegador, você pode definir cabeçalhos de resposta HTTP apropriados, como Cache-Control e Expires, para indicar ao navegador por quanto tempo os recursos devem ser armazenados em cache.
Conclusão:
Ainda existem muitas outras técnicas para otimizar um site. Possívelmente faria uma parte 2 algum dia.