Existem diversos pontos que devem ser levados em consideração no desenvolvimento de um website, sendo um dos mais importantes o tempo de carregamento. Mesmo com o aumento do uso da banda larga e da velocidade das conexões em dispositivos móveis, as pessoas não gostam de esperar mais que oito segundos. Quando não são atendidos, buscam em outros sites o que procuram. Existem também outros dois fatores que forçam a otimização de sites: posicionamento no Google e o crescente do uso de redes de dados móveis, como os smartphones e tablets.
Veja algumas ferramentas online que avaliam a velocidade de um site e dicas a respeito de como deixar seu site mais rápido:
- Super-ping
Oferece teste de ping on-line gratuito rápido de vários locais em todo o mundo. Geralmente o site pode ter um tempo de carregamento menor quando o cliente está mais próximo do servidor, e vice-versa. Se a maioria dos seus usuários (isso dá para descobrir pelo Google Analytics) está no Brasil, é importante que o servidor esteja no país ou em algum lugar da América. Veja no final do post alguns links para ajudar a saber o IP do seu site, localização geográfica do servidor, as rotas feitas a partir de diferentes cidades do mundo, etc.
Avaliam individualmente os elementos que fazem parte do site, oferecendo recomendações e dando prioridades.
Avalia diversos pontos de rapidez e acessibilidade do site, tanto para celular como desktop. Também alterações a serem efetuadas e como realizá-las. Dentre os pedidos mais comuns, estão:
– Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda
Centralize todas as suas funções JavaScript que não são usadas pelo documento antes do evento onload em um arquivo JS separado e os códigos CSS em outro arquivo separado, permitindo uma agilidade maior no carregamento. Se o código for pequeno, prefira colocá-lo diretamente no arquivo da página. Por fim, para evitar que o JavaScript bloqueie o carregamento da página, faça o carregamento dos scripts de forma assíncrona através da seguinte tag (sem as barras invertidas):
<\script async defer src="meu-arquivo.js"><\/script>
Evite também conteúdos em Flash ou Quicktime que rodem automaticamente quando a página é carregada – deixe que iniciem apenas quando o botão Play é pressionado. Algumas definições e dicas de plugin estão no site Seo Hacker.
Ainda quanto à instrução “elimine recursos que impedem a renderização”, você pode instalar os plugins Async JavaScript e Autoptimize para habilitar a otimização de JavaScript e CSS (fonte: kinsta). Também é possível pré-carregar alguns fontes através das “auto-optimizações extras” colocando as URLS completas (exceto domínio) das fontes no campo “Pré carregue requisições específicas”.
– Compactar CSS, HTML e JS
Reduza o tamanho do seu código removendo os espaços em branco. Remova-os manualmente ou utilize alguns programas específicos para compactação que funcionam online, como por exemplo, o CleanCSS que otimiza o seu código CSS e o YUI Compressor desenvolvido pela Yahoo! Developer Network para a redução do código javascript. Evite páginas com muito conteúdo HTML, dividindo-o em páginas menores e linkando-as entre si. Widgets, tabelas e códigos desnecessários devem ser evitados, assim como um design muito pesado.
– Otimizar imagens
Existem formas de reduzir o tamanho dos arquivos de imagens sem afetar significativamente a qualidade visual. Geralmente a visualização da imagem na página exige poucos pixeis, sendo desnecessário um arquivo muito grande. É possível executar a otimização básica em qualquer programa de edição de imagens, como o GIMP, ou também utilizar ferramentas específicas para a compactação, como jpegoptim e o OptiPNG (instaláveis através do “apt-get” no Linux). Veja mais no link Edição de imagens no Linux.
Use GIFs/PNGs para imagens muito pequenas ou simples e JPGs para todas as imagens com estilo fotográfico – não use BMPs ou TIFF. Também não use muitas figuras em uma só página. Defina as dimensões da imagem no código HTML: coloque largura (width) e altura (height) das imagens para que o browser identifique esta informação mais rapidamente. Uma técnica, conhecida como CSS Sprite, agrupa várias imagens em uma única imagem e depois a manipula através do CSS.
O formato aberto de imagens webP é desenvolvido pelo Google e fornece compressão sem perdas e perdas superiores para imagens na web. No entanto, ainda existem navegadores que não são compatíveis e o WordPress não considera seu upload em uma galeria como uma imagem. Assim, se quiser usá-lo, pode-se instalar um plugin, como o WebP Express, para criar regras de redirecionamento e criação de novos arquivos nesse formato (tanto novos uploads como conversão em massa dos antigos). (fonte: blog Michael Campos)
– Aproveitar cache do navegador
Consiste em definir uma data de validade nos cabeçalhos de HTTP para recursos estáticos, instruindo o navegador a carregar os recursos baixados anteriormente a partir do disco local, não através da rede. Uma forma comum de fazer isso é usar as Meta Tags Expires, Pragma e Cache-control no cabeçalho do documento ou gerá-las com o PHP – veja exemplo a seguir:
<!-- reconhecida pelo HTTP 1.1 --> <!-- reconhecida por todas as versões do HTTP -->
header("Expires: " . date(DATE_RFC822,strtotime("30 day")));
header("Cache-Control: private, max-age=10800, pre-check=10800");
header("Pragma: private");
Uma forma melhor seria através da edição do arquivo .htaccess em servidores Linux (veja tópico mais abaixo). Por exemplo, define-se arquivos estáticos para o cache por 24 horas da seguinte forma:
<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$"> Header set Cache-Control "max-age=28800"
Veja mais opções de Como aproveitar o cache do navegador clicando no link.
– Ativar compactação e Priorizar o conteúdo visível
Muitos servidores compactam arquivos no formato gzip antes de enviá-los para download, seja chamando um módulo de terceiros ou utilizando rotinas incorporadas. Isso pode reduzir a quantidade de tempo exigida para fazer o download dos recursos necessários para processar o site. Para ativá-la, use o mod_deflate no Apache ou o HttpGzipModule no Nginx. Para ativar a compressão de dados usando o Gzip, edite o arquivo .htaccess – veja o que deve ser configurado programa/biblioteca que utiliza o algoritmo deflate clicando no link. Caso o PHP tenha habilitado o Zlib Compression (geralmente aparece como opção no CPanel em alguns serviços de hospedagem), é possível utilizar essa forma de compactação incluindo as duas linhas no arquivo header.php antes do HTML (veja também no link anterior).
– Evitar redirecionamentos da página de destino
Os redirecionamentos desencadeiam um ciclo adicional de solicitação-resposta HTTP e adicionam tempo de latência no envio de dados.
– Reduzir o tempo de resposta do servidor
Aparece quando o tempo de resposta do servidor é superior a 200 ms. Existem vários fatores que podem influenciar nisso, como lógica lenta do aplicativo, consultas lentas ao banco de dados, falta de recursos do CPU e até localização do servidor. Escolha um bom servidor de hospedagem de sites que disponha de hardware adequado e infraestrutura de rede e energia corretas.
CloudFlare
De modo geral, a CloudFlare é um conjunto de serviços de proteção e otimização de sites. Dentre seus recursos, estão: Proteção contra ataques DoS e DDoS; CDN (rede de distribuição de conteúdo); Criptografia de dados e emissão de certificados SSL (HTTPS); Firewall para aplicações web; Otimização de imagens; Balanceamento de carga; Regras customizadas de cache e redirecionamento.
De maneira simplificada, a rede de servidores do CloudFlare se coloca “na frente” do servidor de hospedagem, ou seja, entre o usuário e o servidor. Para configurá-lo, você precisa criar uma conta gratuita na plataforma e preencher algumas informações básicas. O blog Tudo sobre hospedagem tem um post bem detalhado sobre a inscrição e uso da plataforma no link.
Existe um plugin oficial do CloudFlare para WordPress que permite uma boa integração e também forçar uma remoção e atualização do cache – veja um passo a passo no link.
Caso seu site apresente o erro ERR_SSL_VERSION_OR_CIPHER_MISMATCH ao ser acessado, isso pode ter a ver com o Cloudflare. Visando resolver esse problema, a Cloudflare foi desativada e reinstalado o SSL no servidor. O site voltou ao ar normalmente após a propagação de DNS. No entanto, mesmo após alguns dias, não foi possível religar a Cloudflare. No painel de controle do servidor, aparecia a mensagem “Could not get Cloudflare SSL verification status. Please enable Universal SSL setting.” No painel da Cloudflare, já estava ativado o SSL universal. Mesmo desativando e reativando, reinstalando a Cloudflare e com o SSL correto e funcionando, ainda não era possível religar a Cloudflare no servidor pois aparecia o erro “Cloudflare cannot be enabled while the SSL certificate is not verified. Cloudflare SSL certificate verification could take up to 2-6 hours”.
Isso foi resolvido somente após a empresa responsável pela hospedagem adicionar a Autoridade de Autoridade de Certificação DNS (CAA) da DigiCert – além da Let’s Encrypt que já existia. A inclusão pode ser verificada através do comando “dig SEUSITE.com.br caa +short”. Quando o CAA estiver ativo, deve-se acessar o paniel da Cloudflare para desativar/reativar o SSL Universal (dentro de SSL/TLS – Certificados de borda) por garantia. Para verificar se a Cloudflare está ativa, verifique nas abas “visão geral” e “análise”.
Caso seu site apresente o erro ERR_CERT_COMMON_NAME_INVALID ao ser acessado, você pode acessar o cPanel do serviço de hospedagem e reinstalar o SSL (desinstalar e instalar). Isso já aconteceu por aqui após a migração do site entre servidores, com mudança de número de IP.
Arquivo htaccess
Os arquivos ASCII “htaccess” servem de orientação/leitura pelo servidor Apache nas hospedagens da plataforma Linux. Um arquivo, contendo uma ou mais diretrizes de configurações, é colocado em um diretório em particular, e as diretrizes se aplicam para aquele diretório e todos os seu subdiretórios subsequentes. Devem ser usados em casos onde os provedores de conteúdo do site precisem fazer mudanças na configuração do servidor por diretório, mas não tem acesso root ao sistema do servidor. “.htaccess” é a extensão do arquivo, e por começar por ponto, permanece oculto em listagens comuns de arquivos.
Talvez seja necessário mudar as permissões do arquivo usando CHMOD para 644 ou (RW- R– R–), permitindo que o arquivo seja utilizável pelo servidor, mas impede que ele seja editável/executável por um navegador e comprometer seriamente a sua segurança. Incluindo/editando linhas específicas, é possível definir permissões de acesso e autenticação de páginas e diretórios, bloquear usuários por IP, redirecionamento, controlar como o servidor irá reagir quando uma página web não é especificada (listagem de arquivos), respostas de erros customizadas (muda a página a ser mostrada quando um erro ocorre no lado do servidor, por exemplo HTTP 404 Not Found), cache control, etc.
Veja mais sobre o Apache e gerenciamento de acesso e sobre o arquivo htaccess na documentação do Apache clicando nos respectivos links.
Atualização 2023 – LiteSpeed Cache
O plugin LiteSpeed Cache permite trabalhar diversos aspectos para aumentar a velocidade do site. Dentre as ações, estão: configurações de arquivos de configuração, criação de cache, ligação com Cloudflare, otimização de banco de dados, eliminação de revisões de posts, otimização de páginas, otimização de imagens e visualização das imagens em WEBP. Veja mais na documentação e nesse artigo da Hostinger sobre sua instalação e confirguração básica.
Para finalizar, mais alguns links interessantes:
- Descubra a localização geográfica do seu servidor pelo IP – IP Location (também serve para ver seu IP na internet)
- Descubra a localização geográfica do servidor de um site pelo seu link – site24x7 (tem outras funcionalidades, como traceroute)
- Ver se o site está fora do ar ou se o problema é só no seu computador – Is up?
- Medir sua velocidade de conexão – Sistema de Medição de Tráfego na Internet
- 26 técnicas de otimização de Sites – Caelum
- Crie facilmente arquivos .htaccess online – .htaccessEditor
- Guia .htaccess
- Ultimate .htaccess Guide
Ótimo post!
Bem útil pra mim. =)
Que bom que ajudou, essa é a ideia 🙂 E o Google também quer uma internet mais rápida, pra levar adiante os planos de conquistar o … digo, os planos dela 😛
Sem dúvida, um post incrível. Especialmente no que diz respeito ao SEO. E obrigado por fornecer os links importantes, relacionados ao IP e outros fatores relacionados ao SEO.