Correr na esteira, caminhar no parque, cortar o chocolate. Essas são algumas das medidas tomadas por quem quer perder uns quilinhos. Mas o que fazer quando seu site está acima do peso? Isso mesmo, sites muito pesados, que demoram para carregar, acabam comprometendo a experiência do visitante e precisam entrar em uma dieta urgente.
O Google já anunciou que a velocidade de um site é um dos principais critérios de posicionamento nos resultados de buscas. Em outras palavras, um site pesado tem poucas chances de aparecer no topo.
Veja os seguintes exemplos práticos. Quando a locadora de filmes online Netflix aumentou o carregamento das suas páginas de 13% a 25%, a taxa de rejeição do site caiu pela metade. A Shopzilla, loja virtual americana, acelerou a velocidade do site em cinco segundos e, consequentemente, a taxa de conversão cresceu 12%.
Convencido de que essa história de perder peso merece muita atenção? Então, conheça quais são os principais erros que sobrecarregam a página de um site e veja como consertá-los:
Alicerce ideal
O problema todo começa logo na construção do site. Muitas vezes, os webdesigners se preocupam só com o visual do site e deixam o fator velocidade de lado. Excesso de botões gráficos na barra lateral e imagens muito grandes, por exemplo, tornam o site mais pesado. As animações em flash é outro grande vilão. Elas até podem ter um efeito legal, mas demoram para carregar (além de não funcionarem bem em todas as plataformas móveis).
Imagens ideais
Dê muita importância para as imagens que vão ilustrar o seu site. Primeiro, você sempre deve definir a altura e largura. Sem esses atributos, o navegador do visitante é obrigado a calcular o tamanho da imagem, tornando o carregamento mais lento.
Os formatos PNG e JPEG trazem uma série de informações desnecessárias para o usuário deixando as fotos bem pesadas. Você pode comprimir as imagens até um ponto em que elas ainda fiquem visíveis ao visitante. Uma dica prática é transformar todos os arquivos PNG-24 em PNG-8 e todos arquivos JPEGs em JPEGs progressivos.
Códigos HTML
Se a seu site contém muitas páginas e arquivos grandes, prefira carregar o CSS na tag <link> e o Javascript no atributo “scr” da tag <script>. Fazendo isso, você melhora a organização do seu código e possibilita que o CSS e o Javascript fiquem armazenados no cache do navegador.
Ainda dentro dos códigos HTML, opte por colocar as folhas de estilo no topo da página, ou seja, na tag <head>. Dessa forma, a página é renderizada progressivamente, o que causa uma sensação de carregamento mais rápido. Por sua vez, os scripts devem ser colocados no rodapé.
CSS
Para acelerar o download e tempo de execução, é preciso comprimir seu CSS por meio de uma ferramenta automatizada. Se você quer incluir uma folha de estilo externa, prefira usar a tag <link> ao invés da propriedade @import dentro da tag <style>.
Javascript
Quando você precisa carregar códigos de terceiros, como um vídeo do YouTube ou mesmo aqueles botões do Facebook e do Twitter, por exemplo, faça isso de forma assíncrona. Assim, você evita que o carregamento da sua página trave.
Combinar vários arquivos JavaScript em um só é outra prática positiva para a sua página carregar mais rápido. Isso porque cada arquivo exige uma requisição HTTP e o navegador não consegue lidar com vários downloads paralelos.
E nada de deixar a dieta do seu site para segunda-feira. O ideal é começá-la o quanto antes!