O principal objetivo de um desenvolvedor , é otimizar um site o máximo possível, para atingir cada vez mais notoriedade. Apesar de muitos saberem que o site deve ser rápido e eficaz, poucos sabem como otimizá-lo da maneira simples e correta.
Otimizar o seu site não faz apenas com que os seus visitantes fiquem mais satisfeitos, mas acaba tornando o seu tempo de visita maior e consequentemente o seu posicionamento nas pesquisas do Google melhoram muito. Com um site recomendável e bem posicionado no Google, as visitas aumentarão consideravelmente.
Nesse artigo, não farei um guia detalhado e muito técnico sobre otimização de sites, mas passarei algumas dicas que, se seguidas da forma correta, podem te proporcionar ótimos resultados. Para medir o avanço da otimização, usaremos uma ferramenta do Google chamada PageSpeed Insights.
1- Imagens
Sites lotados de fotografias de qualidade impecável tornam a aparência da página muito mais profissional e atraente, porém, lembre-se que essas imagens podem e vão aumentar consideravelmente o tempo de carga do seu site.
Para otimizar suas imagens da melhor forma, você terá que comprimi-las.
Um ótimo serviço para comprimir fotos é o Optimizilla, um site simples onde você seleciona a imagem, escolhe os níveis de compressão e baixa a imagem comprimida. As imagens podem reduzir em até 70%, o que pode valer muito para aumentar a velocidade de carregamento do seu site.
Além disso, você também pode consultar o formato de seus arquivos. De um modo geral, o jpg será mais leve do que o png. A principal diferença está na transparência por trás da imagem: se for necessária transparência, o melhor é png, caso contrário, escolha o jpg.
Pode parecer muito óbvio para a maioria dos leitores, mas fique atento a otimização de imagens e coloque em prática para atingir ótimos resultados logo de cara.
2- Vídeo
Quando se trata de videos, o mais recomendado é deixar o trabalho para especialistas, mas existem algumas ferramentas que podem te ajudar bastante com a otimização dos mesmos.
O serviço Vimeo oferece uma excelente plataforma para hospedar vídeos onde seus eles serão adequados para conexões mais lentas e comprimidos para um melhor desempenho do site.
Outra boa opção é publicar o seu vídeo no Youtube e usar o youtube-dl para baixá-los novamente com a opção de configuração adequada para o seu site.
3- Minimização
Em muitas ocasiões, enquanto codificamos, deixamos muitos elementos que não são funcionais como: espaços em branco, caracteres de nova linha e assim por diante. Isso acaba tornando o arquivo mais denso e difícil de ser carregado.
A minimização se trata da remoção de caracteres desnecessários do código sem afetar sua funcionalidade, tornando o seu arquivo mais leve e dificultando a visibilidade de pontos fracos nos seus códigos.
O mais comum é utilizar Webpack ou Gulp como parte do processo de compilação, porém, pode necessitar um pouco de estudo para utilizá-los da forma correta. Se você estiver procurando por alternativas mais fáceis, o Google recomenda HTML-Minifier para HTML , CSSNano para CSS e UglifyJS para Javascript .
4- Content Delivery Network
A CDN ou “Rede de Distribuição de Conteúdo”, é uma rede de servidores que tem como objetivo fazer com que pessoas de lugares distantes consigam acessar o seu conteúdo reduzindo a latência. Um CDN permite que você aproveite servidores proxy localizados em todo o mundo, tornando o carregamento do seu conteúdo mais rápido.
Por exemplo: Se um morador dos Estados Unidos estiver abrindo uma imagem de um site cujo servidor é brasileiro, o tempo de carregamento é maior sem o uso do CDN.
Muitos podem achar sua utilização desnecessária, mas essa ferramenta pode trazer bons resultados para otimizar um site.
Os CDN mais populares são: CloudFront e CloudFlare.
5- Gzip
O gzip é um software de compactação de arquivos que a maioria dos navegadores aceita e que pode ser executado sem exigir que o usuário saiba que está acontecendo. Existem pacotes para adicionar compactação em seu código do servidor, o que permite que você adquira os benefícios do gzipping, utilizando apenas algumas linhas de código.
6- Browser-Caching
Muitas vezes pode acontecer de alguns recursos do seu site não estarem sendo armazenados em cache devido à falta de cabeçalho na resposta HTTP que está sendo enviado do seu servidor. Armazenar arquivos estáticos no cache do navegador é uma maneira muito eficiente de otimizar um site.
Tudo o que deve ser feito é adicionar um cabeçalho de controle de cache à sua resposta, dizendo que, após uma semana os recursos devem ser baixados novamente. Se você atualizar esses arquivos com mais freqüência, uma idade máxima mais curta pode ser uma boa ideia.
Exemplo (Express / Node):
res.append("Cache-Control", "max-age=604800000");res.status(200).json(response);
Se você é um desenvolvedor e está em busca de novas oportunidades, acesse a ProgramaThor, uma plataforma focada no recrutamento de programadores e se candidate às vagas que forem compatíveis com você.
Sobre o autor
Últimos artigos
Dicas19 Setembro, 2018Como escolher o notebook certo para programação
Dicas12 Setembro, 2018Como pensar igual um programador: dicas para solucionar problemas
Top5 Setembro, 2018Top 7 ferramentas de código aberto para desenvolvedores
Dicas29 Agosto, 201810 dicas para novos desenvolvedores
