Como melhorar a velocidade de carregamento do meu site hospedado na Amazon?

Recentemente, disponibilizamos um site para acesso aos usuários na internet. Mas tem um detalhe, o servidor onde esse site está hospedado encontra-se no Norte da Vigínia, Estados Unidos. Entretanto, a maior parte dos usuários do nosso site está aqui no Brasil. Será que essa distância geográfica tem algum impacto no desempenho do site?

Bom, vamos ver que sim testando o tempo de carregamento das nossas páginas em uma ferramenta chamada WebPageTest. Simular primeiro um acesso para um usuário que está próximo do nosso servidor lá nos Estados Unidos e outro para alguém que está aqui no Brasil, e depois comparar os resultados.

Na sequência, vamos ver uma forma de reduzir o tempo de carregamento do nosso site para usuários que fazem o acesso estando mais distantes do nosso servidor. Deixando esse tempo praticamente igual ao de quem acessa de uma região próxima aos servidores.

Simulando Acesso de Usuário próximo ao Servidor

O primeiro passo no WebPageTest é conferir se você está na aba de Testes Avançados, que é justamente onde conseguiremos mudar a localidade do usuário, a fim de ver como seria o acesso a partir de diferentes localidades.

Home da ferramenta WebPageTest.

Informamos então a url que queremos testar. Em Test Location, vamos manter a localização Dulles que já é na região da Virgínia onde está o nosso servidor.

Escolher a região do teste no WebPageTest.

Em Advanced Settings > Connection temos condições de escolher o tipo de conexão, onde vamos manter a cabeada mesmo para obtermos uma melhor performance em ambos os testes. Em Number of Tests to Run, vamos pedir para realizar o teste uma única vez. E marcar a opção Capture Vídeo, que é importante para que a ferramenta faça uma captura do carregamento. Assim podemos ver quanto tempo leva até que nosso site carregou completamente e está pronto para o uso.

Deixaremos também marcada a opção First View Only, pois a partir da primeira requisição, o usuário já pode ter informações cacheadas em seu navegador e assim essa diferença de localidade não é mais tão impactante porque ele já terá dados localmente. O nosso foco aqui é o primeiro acesso. Por fim, clicamos em Start Test.

Escolher configurações avançadas e inicializar teste.

O teste foi realizado e, no lado direito da página de resultados, temos a opção Filmstrip View para vermos como foi o carregamento da página no decorrer do tempo.

Resultado do teste de carregamento no WebPageTest para um usuário de Dulles.

Veja que até zero ponto três segundos, a tela do usuário estava em branco. E entre zero ponto quatro e meio segundo, a página foi totalmente carregada.

Filmstrip com o tempo de carregamento do site para um acesso de Dulles.

Simulando Acesso do Brasil

Agora vamos abrir outra aba no navegador, repetir o teste para um usuário que está aqui no Brasil, e depois comparar com o primeiro.

Manteremos as mesmas configurações do WebPageTest, trocando somente a localidade do usuário.

Veja a diferença: a tela do usuário ficou em branco até a marca de 1 segundo e terminou de carregar em 1.6 segundo. Mais do que o triplo do tempo em relação ao usuário da Virgínia. Preste atenção na proporção e não no tempo absoluto porque a nossa página é pequena, mas já dá para ter um parâmetro: acessada do Brasil, a nossa página pode levar três vezes mais tempo para carregar em relação a um acesso da Virgínia.

Filmstrip com o início do carregamento do site para um acesso do Brasil.Filmstrip com o término do carregamento do site para um acesso do Brasil.

Um dos motivos pelo qual temos essa diferença seria por conta da questão geográfica, o servidor com o site está nos Estados Unidos e com isso, quando um usuário dessa região fizer o acesso, a requisição deverá passar por menos pontos intermediários, levando assim menos tempo do que uma requisição do usuário do Brasil.

O nosso site é pequeno e em termos absolutos 1.6 segundo não é muito tempo. Mas temos que ter em mente que quando ele crescer e se tornar uma aplicação, aquela proporção de um para três tende a se manter ou aumentar.

Segundo o Google, 53% dos usuários abandonam um site se a página demora mais que 3 segundos para carregar, e o tempo de carregamento também é um fator de ranqueamento para SEO.

Se tivéssemos uma aplicação rodando, eu até diria que essa demora pudesse ser em parte causada por queries pouco performáticas sendo executadas em nosso banco de dados.

Como o que temos é somente um site estático, com HTML, CSS3, Javascript e as imagens estão otimizadas, com certeza um dos fatores para essa diferença é a geolocalização. O que faz todo sentido, pois quanto mais distante estiver o servidor que formos acessar, maior é o tempo para que a nossa requisição chegue até ele e maior vai ser também o tempo de resposta para recebermos o conteúdo que estamos requisitando.

CloudFront

Vamos resolver isso através do CloudFront, um serviço da Amazon que vai ser capaz de buscar os arquivos do nosso site no Servidor de Origem que está no norte da Virgínia, e fazer a distribuição para os diversos Pontos de Presença da própria Amazon espalhados pelo mundo. Assim, quando o usuário fizer o acesso, será roteado para o Ponto de Presença que estiver mais próximo dele.

Mapa de Pontos de Presença do CloudFront AWS.

Criando uma Distribuição do CloudFront

No Painel de Console da Amazon, pesquisamos por CloudFront.

Pesquisa por CloudFront na área de serviços do console da AWS.

Queremos criar uma distribuição de conteúdo. Nada mais justo então do que clicar em Create Distribution.

Iniciar criação da distribuição do CloudFront.

Faremos a distribuição de um conteúdo web, então selecionamos a opção apropriada.

Selecionar método de entrega de conteúdo.

Origem dos Arquivos

Nesta etapa, fazemos as configurações de onde o CloudFront vai buscar nossos arquivos e como ele fará isso. Será da instância do nosso Servidor de Origem constante no EC2. Então vamos copiar o DNS Público dessa instância e colar no campo Origin Domain Name aqui do CloudFront. Depois pressionamos Tab e os demais campos e protocolos de comunicação são preenchidos automaticamente.

Endereço de instância EC2.Configurações de origem da distribuição do CloudFront.

Especificações de Acesso

Na etapa seguinte, especificamos como vai ser o acesso ao nosso site por parte do usuário final através do CloudFront. Em Viewer Protocol Policy, escolhemos se o acesso vai ser via HTTP ou pela forma segura, que é o protocolo HTTPS.

Comportamento do cache padrão do CloudFront.

Em Allowed HTTP Methods, escolhemos quais métodos/verbos HTTP vamos permitir que o usuário final execute ao nosso servidor. Por padrão, temos selecionados os métodos GET e HEAD porque o usuário precisa ir até o servidor e pegar o conteúdo do nosso site para poder visualizá-lo.

Você pode inclusive ver essas requisições sendo feitas ao servidor, acessando nas opções do navegador, as ferramentas do desenvolvedor. Na aba Network, em Headers, vemos os Request Methods.

Visualização de métodos http sendo executados ao servidor.

Caso a sua seja uma aplicação, em que o usuário precisa fazer login ou enviar dados em algum momento, precisa liberar o método POST. Nós vamos liberar somente o GET e o HEAD porque o nosso é um Site Estático.

Pontos de Presença

Na sequência, temos a possibilidade de especificar em quais Pontos de Presença distribuiremos nosso conteúdo.

Pontos de Presença onde o CloudFront entregará o conteúdo.

Temos a opção de fazermos somente a distribuição nos Estados Unidos, Canadá e Europa; Estados Unidos, Canadá, Europa e Ásia e a última opção que distribui o conteúdo para todos os Pontos de Presença. Como estamos no Brasil e vamos fazer um teste com esse usuário aqui em São Paulo, selecionaremos Use All Edge Locations.

Na sequência, já podemos Criar a Distribuição. Esse processo demora cerca de 20 a 30 minutos.

Distribuição do CloudFront em processo de deploy.

O processo de deploy do CloudFront foi finalizado. Então, se tudo deu certo, o CloudFront já deve ter distribuído os arquivos do nosso site para os diversos Pontos de Presença da Amazon espalhados pelo mundo.

Ao criar a distribuição, o CloudFront gera uma url padrão, através da qual podemos passar a acessar nosso site. Esse domínio encontra-se na coluna Domain Name da lista de distribuições.

Endereço para acesso do site através do CloudFront.

Vamos então abrir uma nova janela no navegador e colar o endereço na url.

Acesso do site no navegador através do endereço entregue pelo CloudFront.

Maravilha, está funcionando!

Acesso do Brasil Através do CloudFront

Vamos então fazer novamente aquela simulação de acesso a fim de verificarmos se obtivemos uma melhora na performance. Porém agora, acessando via CloudFront.

Abrimos então uma nova guia da ferramenta WebPageTest no navegador, e colamos agora o endereço entregue pelo CloudFront no campo destinado à url.

O restante das configurações, mantemos as mesmas da primeira simulação para um acesso de São Paulo feita acima.

Simular acesso do Brasil na ferramenta WebPageTest para testar velocidade de carregamento do site que está sendo entregue pelo CloudFront.

Ok, nosso teste foi finalizado. Vamos ver se temos uma melhora em relação ao teste anterior para um usuário localizado aqui no Brasil.

Essas são as imagens do teste anterior:

Filmstrip com o início do carregamento do site para um acesso do Brasil. Acesso diretamente ao Servidor de Origem EC2 que está na Virgínia.Filmstrip com o término do carregamento do site para um acesso do Brasil diretamente ao Servidor de Origem EC2 que está na Virgínia.

E abaixo, as do teste atual.

Filmstrip com o início do carregamento do site para um acesso do Brasil feito através do CloudFront ao Ponto de Presença mais próximo.Filmstrip com o término do carregamento do site para um acesso do Brasil feito ao Ponto de Presença da Amazon mais próximo.

Repare que tivemos uma melhora exatamente de 100% no tempo em que a tela do usuário ficou em branco até que o nosso site começou a carregar. Já o carregamento completo da nossa página usando o CloudFront se deu em menos de um segundo. Frente a 1.6 segundo no primeiro teste.

Então com o CloudFront na frente do nosso Servidor de Origem distribuindo os arquivos mais localmente, o tempo de carregamento do site, para acessos de qualquer parte do mundo, passa a ser praticamente igual a o de um usuário que está próximo ao nosso Servidor de Origem.

Ir para o topo