Otimize seu site com SSL, CDN, HTTP2 e Brotli via Cloudflare

PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO

E aí turma, hoje vou falar de otimização de sites utilizando vários recursos que vão dar aquela força no desempenho e segurança, tudo gratuitamente através dos serviços da Cloudflare, uma das gigantes mundiais em tecnologia.

Este post é para qualquer pessoa que tenha um site de qualquer tipo: ecommerce; blog; institucional. Não é necessário conhecimento técnico, apenas acesso ao gerenciador do domínio.

O objetivo do tutorial é fazer na prática, então vou utilizar o site da Sport Riders, que é uma empresa referência em motos de alta cilindrada, e aplicar HTTPS, CDN, HTTP2, ALPN e Brotli, sem mexer no código ou no servidor.

Muitos serviços de hospedagem já oferecem conexão segura gratuita, HTTP2 e vários outros recursos que vamos ver aqui. Você pode então entrar em contato com seu serviço e pedir que habilitem os recursos ou então seguir esse tutorial e fazer através da Cloudflare de um jeito bem fácil e rápido.

Utilizando a Cloudflare ou outra empresa de CDN, você simplifica todo o processo, pois o tráfego do seu site vai passar por essa nova camada e os recursos podem ser habilitados através de um painel de controle. Vamos ver então como fazer isso!

CDN, HTTP, HTTPS, SPDY, HTTP2, SSL, TLS, ALPN e Brotli

Antes da gente começar, quero falar rapidinho sobre os recursos que vamos usar, pra você ficar por dentro da importância de cada um e deixar seu site com mais segurança e melhor desempenho.

Se preferir, tem o vídeo completo sobre Como otimizar seu site com SSL, CDN, HTTP2 e Brotli via Cloudflare aqui! Aproveite para assinar o canal e ficar por dentro das novidades em vídeo.

SSL (Secure Sockets Layer) é um protocolo de segurança que permite criptografar os dados de um site que são enviados e recebidos pelo servidor. É o famoso cadeado que fica do lado do endereço, que também recebe HTTPS no lugar do HTTP.

TLS (Transport Layer Security) é o sucessor do SSL e possui o mesmo objetivo, mas com algumas diferenças técnicas.

HTTP (Hypertext Transfer Protocol) é o protocolo que permite a comunição e troca de dados entre navegador e servidor, fazendo com que um site possa ser acessado e renderizado na tela com textos, imagens e vídeos, por exemplo.

SPDY é um protocolo de rede desenvolvido pelo Google com o objetivo de acelerar a entrega de conteúdo na web. O processo é feito modificando o tráfego HTTP, reduzindo a latência e melhorando a segurança de sites.

HTTP2 é o sucessor do HTTP e foi desenvolvido baseado no SPDY, com o objetivo de carregar páginas Web utilizando mais recursos que melhoram segurança, desempenho e outros fatores.

ALPN (Application-Layer Protocol Negotiation) é uma extensão TLS capaz de negociar qual protocolo deve ser tratado por uma conexão segura de maneira que seja mais eficiente, evitando viagens de ida e volta adicionais.

Brotli é um algoritmo de compactação criado pela Google, capaz de tornar os arquivos de um site até 30% menores comparando com a compactação GZIP.

Um site na internet possui um número IP difícil de decorar, e um domínio (www.seusite.com.br) funciona como um nome. O DNS (Domain Name System) permite fazer esse mapeamento de domínio para o IP de forma transparente.

CDN (Content Delivery Network) é uma rede de distribuição de conteúdo com servidores espalhados pelo mundo. Um site que utiliza CDN possui os arquivos em cache, que são fornecidos pelo servidor mais próximo da requisição, reduzindo latência e aumentando a disponibilidade.

Cloudflare é uma empresa que fornece uma CDN e serviços de segurança da Internet, localizados entre o visitante e o provedor de host do usuário da Cloudflare.

Seu site está otimizado?

A palavra otimizado é relacionada com objetivo, então, qual o objetivo do seu site? Vender? Captar leads? Acesso Mobile? Otimizar seu site é potencializar o que for possível para atingir seu objetivo!

Se o objetivo do seu site é vendas, você precisa otimizar vários pontos: usabilidade; arquitetura da informação; design; UX; comunicação; entre vários outros. Mas o que importa ter tudo isso em um site sem conexão segura, com desempenho ruim e segurança questionável? É aí que entra a otimização técnica!

Otimizar a parte técnica do seu site vai garantir mais desempenho, segurança, acessibilidade, disponibilidade, entre outros fatores que afetam diretamente a experiência do usuário e a forma com que seu site é localizado (Google) e consequentemente a visibilidade, que quer dizer ter mais ou menos clientes.

O site que será otimizado

Chegou a hora de otimizar seu site com conexão segura (SSL, TLS, HTTPS), HTTP2, CDN e compactação Brotli utilizando os serviços da Cloudflare, e tudo sem mexer no código do site.

Como disse no começo, vou usar o site sportriders.com.br para aplicar todos os recursos. É um site muito bem montado, de uma loja referência em motos de altas cilindradas, mas que já possui alguns anos na internet e por isso precisa de algumas otimizações.

Para verificar se o servidor do seu site suporta HTTP2 e Brotli, você pode usar as ferramentas http2-test e brotli-test da Key CDN.

Já para verificar se seu site está sendo carregado através de HTTP2, utilize o DevTools do Google Chrome. Basta entrar em Ferramentas do Programador, clicar em Network e depois recarregar a página.

Repare na coluna Protocol, que mostra o protocolo utilizado para carregar cada recurso. Se a coluna não aparecer, clique com o botão direito do mouse em qualquer título de coluna, e marque Protocol.

Já o teste para conexão segura é mais fácil, basta acessar o site e no começo do endereço colocar https. Se o site carregar normalmente, está tudo certo, já que hoje em dia vários serviços de hospedagem oferecem o certificado gratuitamente.

Para não ter problemas com conteúdo duplicado, faça redirecionamentos 301 de acessos HTTP para HTTPS, assim você padroniza as URLs, o que é bom para usuários e buscadores como o Google, por exemplo.

É possível aplicar os recursos de várias maneiras e de forma separada, para isso entre em contato com sua empresa de hospedagem, mas a maneira mais rápida e que você mesmo pode fazer é através das empresas de CDN, e uma delas é a Cloudflare.

Configurando o site na Cloudflare

O primeiro passo é acessar o site https://www.cloudflare.com/pt-br e criar uma conta.

Na sequência clique em Add Site para começar a configuração e informe o domínio.

A próxima etapa é sobre o plano, que neste caso vamos trabalhar com a FREE, que já garante a rede global CDN, proteção contra DDoS, certificado SSL compartilhado, HTTP2, compactação Brotli, entre outros recursos.

Depois de escolher o plano vem a parte de DNS e nela você tem que definir quais tipos de requisições do usuário passarão pela Cloudflare. As entradas serão automaticamente detectadas e por padrão você terá ativas as requisições para o site público, que são as que mais importam.

Você pode adicionar novas entradas e também ativar o Cloudflare para qualquer uma, mas cuidado que algumas entradas podem gerar problemas "quando filtradas", como a MX, por exemplo, que é responsável por emails.

Por fim temos a alteração dos nameservers, que vai fazer o tráfego do seu site passar pelos serviços da Cloudflare, selecionados anteriormente.

No caso deste tutorial, o domínio sportriders.com.br está sendo administrado pelo site Registro.Br, então basta acessar as propriedades do domínio e fazer as alterações necessárias.

No Cloudflare, o site ficará como pendente até que as alterações se propaguem pela internet, o que pode demorar alguns minutos ou horas, então basta aguardar para que o serviço fique ativo.

Habilitando SSL, HTTP2, Brotli, CDN, e muito mais

Com a configuração do seu site no Cloudflare, todos os recursos mencionados já são habilitados por padrão, mas outros não, e todos podem ser configurados.

No painel do Cloudflare, você pode configurar todos os recursos que estamos utilizando aqui no post, além de habilitar outros, que podem ser gratuitos ou pagos.

O certificado SSL, que vai garantir a conexão segura, fica na aba Crypto. Importante lembrar que esse recurso pode demorar 24 horas para ficar 100% ativo.

Aproveite também para habilitar o redirecionamento de URLs HTTP para HTTPS, usando os recursos Always Use HTTPS e Automatic HTTPS Rewrites, presentes na mesma página.

Já o recurso HTTP2 está disponível na aba Network e não permite a desativação.

A compactação Brotli está na aba Speed e fica junto com outros recursos interessantes de desempenho, como o Auto Minify, por exemplo, que permite reduzir o tamanho de arquivos JavaScript, CSS e HTML.

A CDN já fica ativa por padrão, pois esse é o principal objetivo da Cloudflare. Ao todo são 15 agrupamentos de recursos que podem ser gratuitos ou pagos, habilitados por padrão ou não.

Fique atento aqui no meu site que em breve vou colocar outros tutoriais, específicos para trabalhar com outros recursos da Cloudflare. E agora é com você! Faça no seu site hoje mesmo.