Nesse artigo, continuaremos a apresentar boas práticas de SEO on-Page que um desenvolvedor front-end pode usar para melhorar o posicionamento de suas criações nos mecanismos de busca. Veremos o tempo de carregamento da página, a interferência do tamanho das Imagens, detalhes dos Arquivos JavaScript e CSS, Compressão com GZip, Aproveitar cache do navegador, Serviços de Content Delivery Network, Sitemaps, Ferramentas para Webmasters.

SEO - Boas práticas


No artigo anterior, paramos no uso de otimização de imagens. Continuando no assunto.

Tempo de Carregamento da Página

O Google entende que a velocidade do site é um grande fator de qualidade, pois para todos os usuários da Internet, sites mais rápidos possibilitam a leitura de mais conteúdo. Pesquisas demonstram que usuários em um site que responde lentamente às solicitações da web, seus visitantes gastam menos tempo dentro destes sites, enquanto em sites mais rápidos, não só o usuário sente mais interesse de continuar a navegação, mas também reduz os custos operacionais para o dono do site.


Loading ...

Para obter melhores rendimentos na velocidade do seu site é muito importante contar com boas ferramentas de medição desses resultados. O próprio Google criou uma ferramenta para que os webmasters pudessem avaliar o tempo de carregamento de seus sites, com um resultado detalhado que possibilita a melhoria de cada item, resultando numa melhor experiência de seus usuários.

O nome dessa ferramenta é Google Page Speed, e pode ser utilizada até como uma extensão do navegador Firefox. Além disso, há outras ferramentas que fazem medições que também devem ser avaliadas, entre elas, o Yslow, a ferramenta gratuita da Yahoo!, que também sugere caminhos para melhorar a velocidade do site. Existe uma ferramenta chamada Gtmetrix que unifica essas duas citadas anteriormente e ainda possibilita um acompanhamento semanal, enviado para uma conta de e-mail, permitindo que você monitore esse parâmetro continuamente.

Para o caso do Google Page Speed, sua página receberá uma avaliação até 100, indicando a necessidade que você terá para melhorar o tempo de carregamento de seu site. Além dessa avaliação, você receberá dicas de onde e como proceder para conseguir um tempo suficiente para que seus visitantes não desejem abandonar a navegação no seu site.

Vamos falar agora das boas práticas que você pode realizar para que seus resultados no Google Page Speed sejam os melhores possíveis.

Reduzindo o tamanho das Imagens

No resultado obtido com a ferramenta Gtmetrix, terá uma opção de visualizar o tempo de carregamento por arquivo, essa informação é obtida na aba Timeline do Gtmetrix. Será possível visualizar o tempo de carregamento para cada arquivo e o tamanho. E como estamos falando de imagens é importante utilizar aquelas que sejam do tamanho realmente necessário para o bom entendimento de seus clientes, para que o resultado final da página não seja muito pesado e lento.

Utilizar ferramentas de compressão de imagens como jpegtran, Jpegoptim, Smush.it do Yahoo! e OptiPNG é o caminho certo para se obter uma boa redução do peso das imagens. 

O Google Page Speed também dará boas dicas de como otimizar a página em termos de imagens. Uma das dicas é sempre exibir imagens dimensionadas, isto é, editar as imagens para que elas fiquem no tamanho correto no qual você deseja inserir no site, e não usando os atributos de redimensionamento pelo código. O Google também indica que especificar as dimensões, altura e largura, das imagens do site, permite um rendimento mais rápido da página.

Outra opção é combinar imagens com CSS Sprites, que também será avaliada pela ferramenta do Google. Utilizá-lo é, de certa forma, simples, bastando unificar as imagens da página em uma única nova imagem. Por exemplo, no menu abaixo, unificando todos os botões. 


...

Figura 5. Botões de um menu animado, agora unificados para uso do CSS Sprites.

Carregando cada imagem do menu demonstrado separadamente, resultaria em 6 requisições e 18kb no total, após a unificação em uma só imagem o tamanho cai para 14kb. Agora imagine isso para mais 10 imagens usadas em uma única página.

O código HTML necessário para o exemplo é realmente muito simples, podemos utilizar um menu em lista, colocando a imagem unificada como background, depois definir largura e altura fixa para cada item do menu. Assim, só aparecerá o Sprite ligado à imagem que será visível (Figura 6).


Botões com o Sprite definido.

Criar as propriedades CSS responsáveis pela mudança dos sprites usando "background-position", assim, fica definida a posição em que o background será exibido. Segue o código com as propriedades de mudança dos sprites para esse resultado.


CSS para a mudança dos sprites.

Arquivos JavaScript e CSS

O número e tamanho de arquivos estáticos do seu site como os JavaScript e CSS podem aumentar bastante o tempo de carga da sua página, por esse motivo, estes tipos de arquivos devem sempre ser colocados em versões reduzidas, não contendo comentários e espaços.

Parece uma economia sem sentido, reduzir arquivos em bytes de tamanho, mas lembre-se que além de ter uma fração de segundo mais rápida para a navegação do seu usuário, a falta dessas pequenas alterações serão notadas pelos mecanismos de busca, principalmente pelo Google, que vai ter isso como um critério para o bom posicionamento da sua página para as pesquisas. Basta lembrar que um melhor posicionamento significa mais tráfego para o site em desenvolvimento.

Para conseguir a otimização desses arquivos existem ótimas ferramentas como Closure Compiler, JSMin, CSSmin, YUI Compressor ou ainda a opção dada pela ferramenta do Google Page Speed, ao clicar no nome do arquivo, informa que será compactado. Segue uma ilustração de exemplo.


Ferramenta do Google Speed Page auxiliando na compactação de arquivos estáticos.

Outra dica importante do Google Page Speed para o tratamento de arquivos Java Scripts é o adiamento da análise desses arquivos. O próprio Google indica que, uma das formas mais simples para isso, seria apenas colocar as chamadas de todos os arquivos Java Scripts no rodapé do site, permitindo que, dessa forma, estes se tornem os últimos arquivos a serem baixados, não bloqueando o carregamento da página, como normalmente acontece quando posto no cabeçalho do site. Mas existe outro método tão interessante e simples como o anterior, carregando os scripts de forma assíncrona, basta inserir dois atributos na tag script, o async e defer, como no código abaixo.


A tag script com os atributos async e defer.

O atributo async informará ao navegador dos visitantes que o download do meu-arquivo.js deve ser feito de forma assíncrona, isto é, durante o processo de renderização da página, o script então será executado somente após o final de seu download. Já o atributo defer, possui uma função semelhante, porém o script será executado somente depois que o processo de renderização for concluído.

Compressão com GZip

Outra opção interessante, também indicado pelo Google, é utilizar a compressão das páginas do website com Gzip, possibilitando que as páginas sejam transferidas compactadas e depois descomprimidas ao chegar ao navegador do visitante. Essa opção normalmente é feita na configuração do servidor que hospeda os arquivos do website. Faça a solicitação ao seu suporte técnico e depois teste para verificar se o Gzip está realmente ativo, assim como o nível de compressão usado, para tal utiliza-se a ferramenta Gidnetwork.

Estamos com o artigo meio extenso, de novo, quando comparado com outros meus, por isso, encerramos por aqui. Continuaremos com esse assunto em um próximo artigo. Espero que tenha gostado. Curta e Compartilhe! Deixe seu comentário. Até o próximo artigo.

Fonte: Fighting Spam - Google, DEVMEDIA: Bruno Rodrigo Da Silva Souza.