Blog

Acelerando o seu site com o novo add-on de CDN via CloudFlare

Acelerando o seu site com o novo add-on de CDN via CloudFlare

Acesse os tópicos

Um recurso bastante solicitado pela comunidade de usuários da Umbler, já está disponível: Add-on de CDN via CloudFlare. Velocidade no carregamento de sites, otimização de conteúdo e recursos de segurança são apenas algumas das vantagens desse add-on. Recomendado para todos os tipos de página, é, sem dúvida, um serviço que não pode faltar em seu site. Saiba porque.

Antes de tudo: o que é CDN?

Imagine que seu site está hospedado em São Paulo (BRA) e um usuário visita sua página em Los Angeles (EUA). Cada uma das solicitações feitas pelo usuário tem de fazer uma longa viagem (dos Estados Unidos para o Brasil e, logo após, o caminho inverso). Se seu site contém cerca de 150 objetos (entre imagens, CSS, JS e outros), o navegador do usuário que o acessa terá de fazer 150 requisições individuais ao seu servidor para que todos os conteúdos sejam entregues e exibidos corretamente. Geralmente, a latência (velocidade de deslocamento de uma informação de um ponto a outro) entre esses dois países inicia em 180 milisegundos. Considerando que o tempo de carregamento dentro do próprio país pode atingir uma média de 20 milisegundos, trata-se de uma latência elevada, e que ainda pode ser ampliada, para usuários que acessam a página via 3G, por exemplo.

Em resumo: sua página terá um tempo de carregamento muito maior, resultando em uma experiência pouco agradável para o usuário (e no abandono do site) e até mesmo prejudicando seu ranqueamento em mecanismos de busca, como o Google.

A boa notícia é que essa inconveniência pode ser facilmente resolvida com o uso de CDN.

CDN (Content Delivery Network) é uma rede de distribuição de conteúdo, uma espécie de intermediário entre o visitante e o provedor de hospedagem. Atuando como um proxy reverso, repassa o tráfego de rede recebido para um conjunto de servidores. O que faz, basicamente, é o cache dos arquivos estáticos de um site (imagens, CSS, JavaScript) e a entrega desses arquivos através de uma rede de servidores espalhados pelo mundo.

Sem CDN, toda vez que alguém visita um site, é feita uma requisição ao servidor para a exibição desses arquivos. Se o usuário está alocado a uma grande distância, o tempo de carregamento será maior – o que acarretará em uma pior experiência, como no cenário apresentado anteriormente. Com CDN, reduz-se a carga em seu servidor principal primário e aumenta-se a velocidade de carregamento de suas páginas, enviando-as a seus visitantes a partir do proxy mais próximo a eles. Se um site está hospedado na França e alguém o acessa da Nova Zelândia, por exemplo, a requisição para o carregamento de conteúdo estático será feita em um servidor mais próximo ao usuário, no caso, em Auckland (e não em Paris).
O que é CDN
O objetivo principal de uma CDN é garantir alta disponibilidade e desempenho de sites, entregando informações em tempo ágil – não somente textos, imagens e scripts, mas também arquivos para download, aplicações e streamings. Além do armazenamento de conteúdos em cache e distribuição a partir do servidor mais próximo ao usuário, CDNs são responsáveis pelo balanceamento da carga do servidor, utilizando switches de conteúdo, para ampliar sua capacidade e proporcionar mais confiabilidade. Por manter a carga distribuída em uma rede de servidores, mesmo que um deles falhe, a estabilidade da página é garantida.

Para o usuário, o uso de CDN é totalmente transparente – a não ser que a URL entregue a ele não seja a que foi solicitada. Para quem implementa essa tecnologia, os ganhos são diversos:

  • Redução da perda de pacotes e largura da banda;
  • Diminuição de latência, time-out e jitter;
  • Espelhamento e proteção de arquivos;
  • Otimização da entrega de conteúdos ao vivo;
  • Melhoria da experiência do usuário;
  • Aumento da disponibilidade global;

Apesar da tecnologia CDN já ser usada há algum tempo, principalmente para grandes sites, em termos de performance, é comum que a maioria dos serviços desse tipo seja bastante caro e difícil de configurar. É nesse contexto que surge a CloudFlare.

Sobre a CloudFlare

Criada em 2009, a CloudFlare está sediada na Califórnia, Estados Unidos. Projetada para ampliar a velocidade de carregamento, garantir a segurança e aprimorar a inteligência de websites, é vista atualmente como a melhor solução em CDN do mercado. Trata-se de um serviço híbrido, onde diversas funcionalidades estão integradas, além da distribuição de conteúdo, como a otimização de páginas e recursos de proteção. Também é conhecida como CDN pure-play, bastante distinta em nível cultural e de desenvolvimento, já que oferece um serviço totalmente focado. Além de uma interface intuitiva, fácil configuração e ótima documentação, a CloudFlare disponibiliza seus principais recursos de forma gratuita (sem restrição de tempo) e conta com 76 datacenters estrategicamente posicionados ao redor do mundo.
servidores CloudFlare
Mesmo que todos os tipos de sites possam se beneficiar dos serviços CloudFlare, é possível destacar alguns tipos, cujo CDN pode fazer toda a diferença: sites lentos e com alta utilização de servidor; sites com pico de tráfego motivado por datas sazonais ou campanhas de marketing; e-commerces e sites empresariais; blogs em WordPress ou com alta vulnerabilidade de segurança; sites com alto risco de invasão ou de ataques DDoS. Ao ativar a CloudFlare, sites desses tipos, além de carregarem mais rápido, com redução de carga de servidor (podendo chegar a 60%) e praticamente zero configuração, permanecem online mesmo com alta carga de requisições e estão plenamente seguros contra ameaças de segurança e tráfegos maliciosos. Todas essas vantagens estão baseadas em uma tríade de recursos: velocidade, segurança e inteligência.
Com e Sem CloudFlare

Recursos de velocidade

Por padrão, a CloudFlare realiza cache automático de conteúdos estáticos (CSS, JavaScript e imagens), mas também é possível personalizar recursos de cache por página, individualmente. Considerando, hoje, que as páginas web são constituídas por widgets, plugins, Ad servers e extensões social media, todos baseados em JavaScript, a otimização de páginas torna-se fundamental para um carregamento mais veloz. A partir dessa necessidade, a CloudFlare, além de consolidar várias requisições de rede em um só pedido, realiza carregamentos de JavaScript de maneira assíncrona e não sequencial (Rocket Loader) – o que acelera bastante o carregamento do site. Com relação a imagens, oferece, ainda, recursos como Polish, com remoção de metadados e compressão de JPEGs, Mirage, com otimização de carregamento de arquivos de imagem em diferentes dispositivos.

Recursos de segurança

Ameaças na web são constantes e podem vir, principalmente, através de bots e atividades maliciosas, comentários de spam, roubo de conteúdo, coleta de endereços de email, injeção de SQL, ataques de cross-site scripting e de DDoS. É comum, porém, que a maioria das soluções para garantir a segurança de um site sejam caras e/ou difíceis de serem implementadas. Nesse contexto, a CloudFlare fornece uma camada de segurança contra uma ampla gama de ataques, impedindo mais de 90% deles, ao bloqueá-lo antes que atinja o servidor de origem da página.

Entre os recursos estão SSL criptografado, TLS 1.2 Only, IP Firewall, Web Application Firewall, OWASP ModSecurity, Browser Integrity Check, Advanced DDoS Protection e User Challenges. Utilizando dados de ameaça de uma extensa variedade de fontes, a CloudFlare avalia a reputação de cada visitante online e executa automaticamente uma verificação de pedidos para seu site. Uma vez que a CloudFlare identifica a presença de um novo ataque, por exemplo, passa a bloqueá-lo, tanto para o site em específico, quanto para toda a comunidade CloudFlare. Isso significa que, quanto mais tempo você utilizar CloudFlare, melhor a proteção. Além de tudo isso, o usuário pode, ainda, selecionar o nível de proteção desejada diretamente em seu painel de controle.

Recursos de inteligência

Em meio a transição de endereços IPv4 para IPV6 e a incompatibilidade entre eles, a CloudFlare garante a disponibilidade IPv6 mesmo para clientes que acolham o IPv4, de forma automática e sem necessidade de investimento de hardware. Outro recurso interessante, em termos de inteligência, é o Analytics CloudFlare, que apresenta estatísticas claras sobre todos os visitantes de seu site, requisições, largura da banda, ameaças e ranqueamento em mecanismos de busca. Há também a possibilidade de intregração entre a CloudFlare e apps como Google Analytics, New Relic Browser, Pingdom, entre outros.

Por que utilizar CloudFlare?

Otimizar a velocidade de carregamento de sua página é um requisito muito importante, principalmente para a experiência de navegação, tempo de permanência do usuário e, claro, maior garantia de conversões – sejam elas quais forem. Uma pesquisa do KISSMetrics revelou que, ainda que não seja fator principal para rankeamento em mecanismos de busca, o tempo de carregamento é a razão mais considerada para o abandono de um site. Em acessos mobile, então, esse fator é crucial, já que influenciará totalmente no pacote de dados do usuário.

Para exemplificar um dos principais benefícios da CloudFlare, que é justamente a velocidade de sites, fizemos testes utilizando a ferramenta TraceRoute, a partir de três posições geográficas distintas. O site utilizado para testes está hospedado na Umbler, em um datacenter localizado em São Paulo (BRA), e foi desenvolvido em WordPress. Quando acessada, essa página realiza 27 requisições HTTP ao servidor e a soma de todas essas requisições totaliza o download de 540.70KB de conteúdo.

Em um primeiro teste, sem CDN, obtivemos os seguintes resultados de latência:
traceroute sem cdn

traceroute sem cdn 2

traceroute sem cdn 3
Podemos perceber que, como o conteudo do site está hospedado no Brasil, independente da origem da requisição, esta sempre acaba sendo redirecionada para o país. Entretanto, diversas consultas são realizadas em outros continentes, a fim de descobrir onde está o conteudo desejado pelo usuário.

Habilitamos, então, os serviços CloudFlare para esse site. Desse modo, o endereço não aponta diretamente para seu servidor. Agora, quando acessamos a página, a requisição é redirecionada para a CloudFlare.

Realizamos novos testes o os resultados de tempo de carregamento do site são outros:
traceroute com cdntraceroute com cdn 2traceroute com cdn 3
O tempo de carregamento do site sem CloudFlare, que era de 7.41s, passou para 5.45s, com CloudFlare.

O cálculo para obter velocidade no acesso, em diversos pontos no mundo, é simples: quanto mais perto o conteudo está, mais rapidamente estará disponível para o usuário. Considerando a grande quantidade de servidores CloudFlare, a velocidade dessa entrega é ainda mais rápida – e, claro, essa é apenas uma das tantas vantagens de ativar os serviços CloudFlare.

CloudFlare na Umbler: como ativar?

Na Umbler, você pode ativar os recursos da CloudFlare através de seu painel, em “Add-ons”. São quatro tipos de plano disponíveis: Free, Mobile, Plus e Firewall. Os valores dos planos pagos, que variam entre R$6 e R$60 mensais, são cobrados diretamente em reais. Já no plano Free, os benefícios são bastante interessantes, como largura de banda e visualizações de página ilimitadas, CDN e Threat Blocking. No plano Mobile, além dessas funções, também está incluso o recurso Mirage, para otimização e redução do tamanho de imagens. O plano Plus garante como adicionais os recursos de Polish, para compressão de JPEGs e remoção de metadados de imagens; suporte SSL, com certificados ativados facilmente, sem necessidade de configuração pelo usuário; e SPDY, tecnologia de multiplexação para transferência de dados por um único canal. E, o plano Firewall, inclui, ainda, aplicação web firewall (WAF), que protege contra ameaças online, bloqueando ataques no início da rede e exibindo relatórios em tempo real.

Acesse o painel de controle de seu site, habilite o add-on CloudFlare e escolha o plano ideal para cada uma de suas páginas.
AddOn CloudFlare Umbler
Tem algum outro recurso que você queira ver na Umbler? Você pode ajudar a escolher as próximas features a serem implementadas: é só clicar aqui e votar 😉
Banner CDN

Compartilhe esse conteúdo

Termos de Serviço  Política de Uso  Política de Privacidade