Imagine um belo dia você decide pesquisar por preços de passagens aéreas para uma viagem importante. Você acessa o Google, insere a palavra-chave “passagens aéreas baratas” e um anúncio desperta a atenção. Ao acessar via dispositivo móvel, passam 5 segundos e nada da página abrir. O que você faria?
-
Opção A: voltaria para o resultado Google para buscar outro site;
-
Opção B: ficaria tão nervoso(a) que desistiria da busca e fecharia o navegador;
-
Opção C:desistiria por hora, mas voltaria a acessar o site depois;
-
Opção D: teria a maior paciência do mundo e aguardaria o carregamento da página;
Tenho certeza que a maioria dos leitores deste texto escolheriam as opções A e B, afinal, é frustrante um site demorar muito tempo para carregar.
Sabendo disso, há muitos anos que o Google avalia a velocidade de carregamento das páginas como fator de classificação nos resultados de busca. Em 17 de janeiro, o Google anunciou oficialmente que a velocidade de carregamento será critério de classificação à partir de julho de 2018. Faz jus, afinal, os usuários detestam lentidão e a experiência do usuário deve ser priorizada.
Como testar velocidade do site?
A velocidade de carregamento de um site é um dos fatores que contribuem para o ranqueamento nos motores de busca. Para testar a velocidade do seu site existem várias ferramentas disponíveis online, como Google PageSpeed Insights, o Pingdom ou o GTmetrix.
Como melhorar a velocidade de carregamento?
Melhorar o carregamento das páginas do seu site ou blog é fundamental para uma boa experiência do usuário, afinal, afeta direta ou indiretamente a taxa de conversão e também para as classificações orgânicas nos buscadores. Então chegou o momento de otimizar o seu site. Acompanhe algumas dicas valiosas.
Monitore a nota do Google Page Speed Insights e siga as instruções
O próprio Google disponibiliza uma ferramenta útil para diagnosticar eventuais problemas de carregamento das páginas do seu site.
Acesse o Google Page Speed Insights e insira o endereço URL da página que deseja avaliar.
Dica: avalie cada tipo de página. Muitos pensam que a nota e avaliações da página inicial valem para todo o site. Negativo. A velocidade de carregamento é avaliada por página, não por domínio.
Após alguns segundos, a ferramenta dará diversas informações, como nota média avaliada e sugestões para otimizar.
A caráter de exemplo, vamos analisar as informações a respeito de um site de companhia aérea.
A velocidade de carregamento foi considerada regular, entretanto, há alguns fatores que deixaram de ser eficientes e por isso o carregamento poderia ter sido mais rápido.
Com base nos históricos de navegação do navegador Chrome, o Google avalia duas categorias de otimização de velocidade de carregamento focado na experiência do usuário, o FCP e DCL. Vamos entender o que significam?
-
A métrica Primeira Exibição de Conteúdo (FCP, na sigla em inglês) mede quando um usuário vê uma resposta visual da página. Com respostas mais rápidas, há mais chances de manter os usuários envolvidos.
-
A métrica Carregamento do Conteúdo DOM (DCL, na sigla em inglês) mede quando o documento HTML foi carregado e analisado. Os tempos mais rápidos estão relacionados a taxas de rejeição baixas.
Agora vamos detalhar as principais possibilidades de otimização, fatores que mais geram confusões e dificuldades entre webmasters e donos de websites que desejam tornar o site mais rápidos.
Otimização de imagens - compactação
As imagens são as principais responsáveis pelos atrasos. O tamanho do arquivos em disco influenciam muito, pois quanto maior a imagem, mais tempo de download para concluir a abertura é necessário.
Recomenda-se tamanho máximo de 100KB por imagem, mas nem sempre é possível, por exemplo, as imagens de banner que têm dimensões maiores utilizam mais pixels.
Mas há uma maneira eficaz de diminuir o tamanho em disco das imagens sem interferir na qualidade das mesmas.
A minha indicação é utilizar a ferramenta Tinny PNG. É bem simples.
Acesse a ferramenta, faça upload das imagens a serem compactadas/otimizadas, execute a compactação. Em seguida, você poderá baixar as imagens compactadas para serem usadas ou substituídas no seu site.
Os arquivos ficam menores em tamanho em disco sem perder a qualidade visual.
Na simulação acima, uma imagem com 227KB em disco foi reduzida para 100KB, tamanho adequado para não atrasar carregamentos de páginas.
Aproveitamento de caches dos navegadores
Ao longo dos 7 anos de experiência em SEO, já encontrei até desenvolvedores que tiveram dificuldades para aplicar tal melhoria.
Aproveitamento de cache, em linguagem bem coloquial, nada mais é do que passar as instruções aos navegadores e buscadores a usarem cópias de arquivos presentes em pastas físicas disponíveis na hospedagem, o que otimizada o tempo de carregamento.
A busca de recursos na rede é lenta. O download pode exigir múltiplas viagens de ida e volta entre o navegador e o servidor, o que atrasa o processamento e pode bloquear a renderização do conteúdo da página, além de causar custos de dados para o visitante. Todas as respostas do servidor precisam especificar uma política de cache para ajudar o navegador a determinar em que situações é possível reutilizar uma resposta buscada previamente.
Em servidores Apache é possível determinar via .htaccess as validades de caches de cada tipo de arquivo do site.
Para quem trabalha com Wodpress há plugins que facilitam esse processo, como WP Total Cache, que além de habilitar o aproveitamento em cache já realiza a compactação de CSS e Java Script, por exemplo.
Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda
Outro fator que também gera muitas dúvidas e que influencia diretamente a performance do site.
É preciso entender como os navegadores se comportam. Antes de renderizar uma página, o navegador precisa buscar todas as partes indicativas de renderização do layout, estilos e efeitos, analisando a marcação HTML. Durante esse processo, sempre que o analisador encontrar um script ou CSS, ele tem que parar e executá-lo antes de continuar analisando o HTML.
É necessário evitar e minimizar o bloqueio de JavaScript, especialmente no caso de scripts externos que precisam ser buscados antes de serem executados. Os scripts necessários para renderizar o conteúdo da página podem ser inseridos in-line para evitar solicitações de rede extras, porém o conteúdo inserido precisa ser pequeno e executado rapidamente para ter um bom desempenho.
No caso de CSS é mais ou menos o mesmo princípio. Desenvolvedores têm o costume de criar vários arquivos CSS externos e alguns deles são pequenos, o que aumenta a demanda de busca pelos arquivos na rede, causando latência.
É necessário que os arquivos externos pequenos de CSS sejam inseridos in-line no HTML e no caso dos arquivos grandes é preciso inserir in-line a parte responsável por renderizar o conteúdo acima da dobra de página.
Meu site pode servir de exemplo sobre otimização do CSS. Se analisar o código fonte dele, gerado pelo Blogger (que é da Google), há apenas dois arquivos externos de CSS, o restante são in-line.
Compactar Java Script, CSS e HTML
Você sabia que espaços, linhas em branco e comentários aumentam o tamanho dos arquivos Java Script, CSS e HTML? É importante a compactação, ou melhor dizendo, eliminação de conteúdo desnecessário em tais arquivos. A depender do tamanho e da quantidade de arquivos, faz uma enorme diferença na velocidade de carregamento.
Utilize a ferramenta pingdom
Pingdom é uma ferramenta útil para avaliar o desempenho do site e gera relatório completo sobre a leitura de todos os arquivos e recursos do site, com apontamentos de questões críticas, quais arquivos lentos (entre JS, CSS, imagens, HTML etc), comportamento do servidor, entre outros aspectos.
Acesse o site da ferramenta, escolha qual servidor executar o teste.
Exemplo de resultado de um teste:
Opte por hospedagem dedicada e evite a hospedagem compartilhada
Posso dizer que este é um dos maiores responsáveis por provocar atrasos nos carregamentos de páginas.
Como o próprio nome diz, a hospedagem compartilhada utiliza dezenas ou milhares de sites no mesmo servidor. Isso reduz os custos, que são diluídos entre os clientes que compartilham o mesmo servidor,porém, em muitos casos, limita a memória RAM, o tempo de resposta para entrega de arquivos do site fica comprometido e o seu site poderá usar apenas parte dos recursos do servidor. Além, caso um site do servidor compartilhado seja atacado, os demais podem ser afetados, prejudicando usuários e posicionamentos nos buscadores.
Há casos de hospedagens mais baratas que oferecem memória RAM baixa e limite de acessos mensais ou simultâneos. Logicamente que com ações de SEO o tráfego tende a aumentar e a consequência, bem, o site começa a ficar lento e até entregar erros de servidor com muita frequência, isso quando não sai do ar a longo prazo.
Opte sempre por hospedagem dedicada, pois neste caso, o servidor será exclusivo para o seu site e a performance é melhor, com uma máquina exclusiva. A performance e o tempo de resposta são sempre melhores. Por outro lado, o custo é bem maior para manter o servidor dedicado.
Utilize o recurso AMP para otimizar carregamento nos dispositivos móveis
A AMP é sigla para a expressão em inglês Accelerated Mobile Pages (Páginas Móveis Aceleradas), um projeto que envolve o Google, LinkedIn, Twitter e Pinterest. O objetivo é criar um padrão de páginas HTML para que sejam carregadas mais rapidamente nos dispositivos móveis.
AMP é um conjunto de configurações no HTML que otimiza o carregamento das páginas nos dispositivos móveis. Sobre como aplicar AMP no seu site vale um artigo exclusivo sobre este assunto. Para começar, recomendo a leitura do artigo Top 10 de Implementação de AMP, escrito pela Elena Terenteva, publicado na SEM Rush em 11 de outubro de 2017. Leia também Como Funciona AMP, diretamente no site do projeto.
Basicamente, AMP otimiza o comportamento de Java Script, CSS, carregamento de recursos mais importantes, entre outros aspectos.
Espero que com essas informações fique claro quais são as possibilidades para otimizar a velocidade de carregamento do site. Todos ganham, usuários agradecem, os buscadores também!