A performance em uma aplicação web é crucial para a experiência do usuário. Um site lento pode resultar em menor engajamento, pior SEO e até perda de receita. Por isso, performance e eficiência são temas recorrentes no dia a dia de um desenvolvedor. No entanto, ao tentar resolver esses problemas, muitas das vezes esquecemos o essencial. Se tem algo que aprendi, é que, na maioria das vezes, as otimizações mais simples são as que causam o maior impacto.
Com isso em mente, neste artigo elaborei algumas dicas para tornar sua aplicação web mais rápida e eficiente.
Evite iframes
Evite ao máximo a utilização de iframes, utilize apenas quando não houver outra solução viável. Além de impactar negativamente o desempenho, eles podem prejudicar a acessibilidade e a usabilidade da aplicação. Além disso, conteúdos dentro de iframes não são indexados por mecanismos de busca, o que pode afetar o SEO. Sempre que possível, busque outras alternativas técnicas como o uso de APIs ou a incorporação direta do conteúdo na página.
Arquivos CSS
Minifique o CSS
Sempre escolha arquivos CSS minificados para um melhor desempenho do site. Um arquivo CSS menor e otimizado reduzirá o tempo de carregamento da página, o que melhorará a experiência do usuário. Além disso, a minificação economizará largura de banda, reduzindo custos operacionais para empresas, diminuindo e otimizando o uso de recursos.
Evite Bloqueios no Carregamento
Alguns arquivos CSS podem atrasar a renderização da página, pois o navegador precisa processá-los antes de exibir o conteúdo. Para evitar esse bloqueio, utilize técnicas como preload, que permite que o navegador carregue os estilos antecipadamente, sem interromper a exibição da página.
Exemplo de como implementar o preload:
<link rel="preload" href="styles.css" as="style">
Utilize CSS Crítico Inline para o inicio do carregamento.
O CSS crítico, também conhecido como "above the fold", é o conjunto de estilos necessários para renderizar a parte visível da página no primeiro carregamento. Incorporá-lo diretamente no HTML antes da chamada principal do CSS pode acelerar a exibição do conteúdo e melhorar a experiência do usuário.
Para obter os melhores resultados, minifique o CSS crítico e insira-o dentro de uma tag <style></style> no cabeçalho da página. Isso reduz o tempo de renderização ao evitar requisições adicionais ao servidor.
Abuse do CSS
Evite utilizar imagens desnecessárias para efeitos em sua pagina. O CSS hoje já possui recursos de sobra para adicionar efeitos como, sombras, gradientes e bordas. Utilizar o css ao invés de imagens estáticas vai ser muito mais leve e benéfico para o desempenho de sua aplicação.
Arquivos JavaScript
Minifique o JavaScript
Assim como o CSS é importante minificar os arquivos *.js, assim os espaços, comentários e quebras de linha desnecessárias serão removidos, reduzindo o tamanho desses arquivos e melhora o tempo de carregamento.
Evite bloqueios causados por JavaScript
O JavaScript bloqueia a análise sintática normal do documento HTML, então quando o analisador alcança uma tag <script> (particularmente dentro do <head>), ele para e executa o script antes de continuar. Para evitar esse tipo de situação utilize atributos como o async ou defer para evitar os bloqueios desnecessários. Caso seu script não seja necessário dentro do <head>, carregue os scripts no final do body, sendo assim outra precaução para evitar os bloqueios. Mas é uma boa prática sempre usar esses atributos para evitar qualquer problema de desempenho.
Exemplos:
<script async src="script.js"></script>
<script defer src="script.js"></script>
Dicas:
- Use
asyncquando o script não depender de outros. - Use
deferquando houver dependências entre scripts.
Otimização de Imagens
Imagens podem ser uma das coisas que mais afetam negativamente o desempenho se não forem otimizadas corretamente.
Utilize o formato adequado
Evite utilizar imagens JPEG, PNG e principalmente formatos como Base64, priorize o formato WebP, que é moderno e oferece compressão superior ao JPEG e PNG sem perder qualidade. Imagens vetoriais (SVG) também é um excelente formato, perfeito para ícones, logos e gráficos vetoriais.
Ferramentas como o Lighthouse ajudam a identificar imagens que podem ser convertidas para formatos mais eficientes.
Comprima suas Imagens
Como nem sempre imagem WebP vão ser opções viáveis para sua aplicação você pode optar por comprimir suas imagens ao invés de alterar o formato.
Imagens comprimidas carregam mais rápido e consomem menos dados.
Dicas:
- Valide o tamanho e formato da imagem para o usuário não fazer upload de imagens muito grandes ou de formatos incompatíveis, (“Acredite se quiser, mas sempre vai ter um usuário desavisado tentando fazer o upload de um PSD”).
- Utilize uma ferramenta de compressão, antes de enviar a imagem para o servidor ao qual ela vai ficar armazenada.
- Defina um nível de compressão abaixo de 85% para manter um equilíbrio entre qualidade e tamanho.
- Para comprimir imagens utilize ferramentas como TinyPNG ou ImageOptim.
Utilize CDN
Atualmente uma página web minimamente otimizada já faz a utilização de uma CDN (Content Delivery Network), sendo utilizada para armazenar arquivos estáticos, como imagens, CSS, JavaScript e vídeos.
O objetivo ao utilizar uma CDN é reduzir a distância física entre o servidor e o usuário final, permitindo um carregamento mais rápido do conteúdo. Caso queira saber um pouco mais, a Cloudflare possui um excelente artigo sobre CDN.
Reflexões
Na rotina de um desenvolvedor é muito comum precisar tomar decisões envolvidas por trade-offs, sabendo que ganhar em um aspecto pode significar perder em outro, ou seja, não existe uma solução perfeita para todos os problemas, nem sempre ter uma aplicação 100% otimizada vai ser o melhor; sempre há um custo envolvido, seja em termos de desempenho, escalabilidade, tempo de desenvolvimento ou facilidade de manutenção.
Em resumo, ser um bom desenvolvedor vai além de apenas escrever um código eficiente, mas também incluem entender esses trade-offs e saber tomar melhores decisões, além de várias outras habilidades.
Conclusão
Otimização e performance vai muito além das dicas deste artigo, no entanto, pequenas mudanças como compressão de imagens, minificação de código junto com a uso de CDN podem fazer uma grande diferença na velocidade e eficiência do seu site.
Caso queira avaliar o desempenho do seu site, existem excelentes ferramentas como PageSpeed Insights e WebPageTest
Top comments (0)