{"id":2161,"date":"2016-05-02T09:34:21","date_gmt":"2016-05-02T12:34:21","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=2161"},"modified":"2019-03-16T03:00:58","modified_gmt":"2019-03-16T06:00:58","slug":"como-aumentar-a-velocidade-do-seu-blog-ou-site-wordpress-com-cdn-amazon-cloudfront-e-w3-total-cache","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/como-aumentar-a-velocidade-do-seu-blog-ou-site-wordpress-com-cdn-amazon-cloudfront-e-w3-total-cache\/","title":{"rendered":"Como aumentar a velocidade do seu blog ou site WordPress com CDN Amazon CloudFront e W3 Total Cache"},"content":{"rendered":"

A lentid\u00e3o em um website pode ser ocasionado por diversos motivos. Desde a m\u00e1 otimiza\u00e7\u00e3o do c\u00f3digo e imagens que comp\u00f5em a p\u00e1gina como a escolha de um host de m\u00e1 qualidade ou um plano de hospedagem muito aqu\u00e9m do que seu site precisa. N\u00e3o fique triste, h\u00e1 solu\u00e7\u00e3o e o nome dessa solu\u00e7\u00e3o \u00e9 CDN.<\/p>\n

Mas o que muitos n\u00e3o sabem \u00e9 que quando se usa WordPress \u00e9 poss\u00edvel reduzir consideravelmente a lentid\u00e3o de carregamento do site.<\/p>\n

Para que isso seja poss\u00edvel ser\u00e1 necess\u00e1rio o uso de um Plugin de Cache. Mas afinal de contas, o que s\u00e3o os caches?<\/p>\n

Cache \u00e9 um recurso de armazenamento de arquivos de um website. O Cache pode estar no servidor ou at\u00e9 mesmo em seus browses. J\u00e1 percebeu que quando voc\u00ea entra em um site, ele demora mais para carregar do que da pr\u00f3xima vez que entrar nesse mesmo site?<\/p>\n

Isso ocorre pelo simples fato do seu navegador armazenar os arquivos est\u00e1ticos como imagens, html, etc… Dessa forma, das pr\u00f3ximas vezes que voc\u00ea entrar no site, ao inv\u00e9s da requisi\u00e7\u00e3o ser no servidor onde o site est\u00e1 hospedado ela ser\u00e1 em seu pr\u00f3prio navegador, exibindo de forma mais r\u00e1pida os arquivos que foram armazenados nele.<\/p>\n

Se voc\u00ea quer fazer um teste, v\u00e1 at\u00e9 as configura\u00e7\u00f5es do seu navegador e limpe todo cache, hist\u00f3rico, etc… Ver\u00e1 que na pr\u00f3xima navega\u00e7\u00e3o, os sites parecer\u00e3o mais lentos e as imagens carregar\u00e3o mais devagar. Isso por que no primeiro acesso, as requisi\u00e7\u00f5es s\u00e3o do servidor onde o site est\u00e1 hospedado.<\/p>\n

Existem recursos em hosts como o\u00a0varnish cache que j\u00e1 oferecem um sistema altamente eficaz para cacheamento de todo seu site.<\/p>\n

Sites din\u00e2micos<\/h2>\n

Com o surgimento dos sites din\u00e2micos, ou seja, sites que se conectam e armazenam dados em banco de dados, a lentid\u00e3o se tornou maior. A cada vez que voc\u00ea acessa uma p\u00e1gina, o conte\u00fado que \u00e9 exibido nela estar\u00e1 sendo impresso atrav\u00e9s da conex\u00e3o que o site tem com o banco de dados e suas tabelas onde o conte\u00fado fica armazenado.<\/p>\n

Por esse motivo, sites “est\u00e1ticos”, ou seja, sem conex\u00e3o com banco de dados carregam mais r\u00e1pidos, j\u00e1 que n\u00e3o precisam dessa requisi\u00e7\u00e3o.<\/p>\n

E para amenizar isso, muitos sistemas de otimiza\u00e7\u00e3o incluem o banco de dados em cache otimizando sua requisi\u00e7\u00e3o.<\/p>\n

O que \u00e9 CDN?<\/h2>\n

Content Delivery Network (Rede de Distribui\u00e7\u00e3o de Conte\u00fado em tradu\u00e7\u00e3o livre para o portugu\u00eas), ou carinhosamente CDN \u00e9 um recurso que permite aproximar a requisi\u00e7\u00e3o do usu\u00e1rio a um servidor mais perto. Ficou confuso? Explico!<\/p>\n

Quando voc\u00ea hospeda um site em um host em que seu servidor fique situado nos Estados Unidos, a requisi\u00e7\u00e3o desse site para que reside longe desse servidor ser\u00e1 maior do que a requisi\u00e7\u00e3o de quem reside pr\u00f3ximo a esse servidor.<\/p>\n

Portanto, de forma bem simplificada, quem reside mais perto de onde seu site est\u00e1 hospedado tem uma requisi\u00e7\u00e3o mais r\u00e1pida, ocasionando assim em um carregamento de site mais r\u00e1pido tamb\u00e9m.<\/p>\n

O que o CDN faz \u00e9 basicamente\u00a0regionalizar o armazenamento dos dados, facilitando o acesso a eles de computadores de diferentes partes do planeta.<\/p>\n

Elas hospedam um determinado conte\u00fado em servidores espalhados em v\u00e1rias partes, permitindo dessa forma a distribui\u00e7\u00e3o de conte\u00fado de forma eficaz independente de onde o acesso \u00e9 realizado.<\/p>\n

\"cdn\"
(Fonte da imagem: Divulga\u00e7\u00e3o\/Akamai)<\/figcaption><\/figure>\n

Redu\u00e7\u00e3o de tempo e de custos<\/h2>\n

As CDNs fazem sucesso n\u00e3o s\u00f3 porque agilizam a transfer\u00eancia de dados entre os servidores e o seu computador, mas tamb\u00e9m porque s\u00e3o solu\u00e7\u00f5es mais baratas do que manter uma estrutura pr\u00f3pria para fazer o servi\u00e7o, especialmente se o p\u00fablico-alvo do site est\u00e1 espalhado em diversas regi\u00f5es do mundo \u2014 ou de um grande pa\u00eds, como Brasil.<\/p>\n

Amazon CloudFront<\/h2>\n

Amazon CloudFront \u00e9 uma rede de entrega de conte\u00fado (CDN) oferecido pela Amazon Web Services. Nesse artigo, iremos integrar seu blog WordPress com a Amazon CloudFront atrav\u00e9s do Plugin W3 Total Cache<\/a>.<\/p>\n

O primeiro passo \u00e9 criar uma conta na Amazon AWS<\/a>. Dentro do DashBoard, voc\u00ea ter\u00e1 uma s\u00e9rie de servi\u00e7os da Amazon, coo o CloudFront.<\/p>\n

\"CloudFront1\"<\/p>\n

Por\u00e9m, antes de acessar o servi\u00e7o, voc\u00ea deve criar um usu\u00e1rio com a devida permiss\u00e3o para uso do recurso. O que eu recomendo \u00e9 voc\u00ea criar um usu\u00e1rio e senha \u00fanicos para esta utiliza\u00e7\u00e3o. Para isso, no topo do site \u00e0 direita superior, acesse Security Credencials.<\/a><\/p>\n

\"CloudFront2\"<\/p>\n

Ao acessar a \u00e1rea de credenciais, ao lado direito clique sobre “Users” e posteriormente, “Create New Users”.<\/p>\n

\"CloudFront3\"<\/p>\n

Como dito anteriormente, de prefer\u00eancia crie um usu\u00e1rio \u00fanico para o uso da CDN.<\/p>\n

\"CloudFront4\"<\/p>\n

Em nosso exemplo, criei um usu\u00e1rio chamado “blogcdn”. Clique em “Create”. Em seguida, voc\u00ea dever\u00e1 clicar sobre “Show User Security Credentials” para ter acesso \u00e0s credenciais deste usu\u00e1rio criado.<\/p>\n

Mas cuidado. Anote essas credenciais em um local seguro e n\u00e3o compartilhe com ningu\u00e9m, se poss\u00edvel.<\/p>\n

\"CloudFront5\"<\/p>\n

Tanto a\u00a0Access Key ID<\/strong> quanto Secret Access Key<\/strong> ser\u00e3o usadas para configurar o W3 Total Cache, portanto, guarde-as em um editor de textos, de prefer\u00eancia ou fa\u00e7a o download das chaves clicando no bot\u00e3o “Download Credentials” que fica no canto inferior direito da tela.<\/p>\n

\"CloudFront6\"<\/p>\n

Agora que voc\u00ea j\u00e1 criou um usu\u00e1rio e tem as chaves de seguran\u00e7a, vamos come\u00e7ar? N\u00e3o! Precisamos agora dar a permiss\u00e3o do servi\u00e7o de CloudFront ao usu\u00e1rio criado.<\/p>\n

Para isso clique em “Close”, no canto direito inferior, pr\u00f3ximo ao bot\u00e3o de download das credenciais. Voc\u00ea ver\u00e1 que a lista com os usu\u00e1rios criados aparecer\u00e3o na tela.<\/p>\n

\"CloudFront7\"<\/p>\n

Clique sobre o nome do usu\u00e1rio criado e na pr\u00f3xima tela, clique na aba “Permissions”.<\/p>\n

\"CloudFront8\"<\/p>\n

Agora, clique sobre o bot\u00e3o “Attach Policy”.<\/p>\n

\"CloudFront9\"<\/p>\n

Na pr\u00f3xima tela, no campo de busca, voc\u00ea digitar\u00e1 o termo ‘CloudFront”. Note que\u00a02 vers\u00f5es dos servi\u00e7os aparecem em tela. Uma apenas para leitura e outra para acesso total. Selecione as duas op\u00e7\u00f5es e clique no bot\u00e3o “Attach Policy” no canto direito inferior da tela.<\/p>\n

\"CloudFront10\"<\/p>\n

Pronto! A partir de agora seu usu\u00e1rio criado tem acesso total ao servi\u00e7o CloudFront.<\/p>\n

\"CloudFront11\"<\/p>\n

Agora que criamos o usu\u00e1rio, vamos criar a distribui\u00e7\u00e3o. Volte para a home do console da Amazon AWS e clique sobre o servi\u00e7o de CloudFront.<\/p>\n

\"CloudFront19\"<\/p>\n

Na pr\u00f3xima tela, clique em “Create Distribution”.<\/p>\n

\"CloudFront20\"<\/p>\n

Na pr\u00f3xima etapa, clique em “Get Started’, no guia Web.<\/p>\n

\"CloudFront21\"<\/p>\n

Na pr\u00f3xima etapa, n\u00e3o se assuste. Apenas preencha\u00a0apenas o campo do nome da distribui\u00e7\u00e3o, de prefer\u00eancia com o seu site.<\/p>\n

\"22\"<\/p>\n

O campo “Origin Path” \u00e9 criado automaticamente a partir do “Origin Domain Name”.<\/p>\n

Posteriormente, des\u00e7a a tela at\u00e9 o fim e clique sobre o bot\u00e3o “Create Distribution”.<\/p>\n

A distribui\u00e7\u00e3o estar\u00e1 habilitada, mas ficar\u00e1 “Em progresso” por uns 15 minutos.<\/p>\n

\"CloudFront23\"<\/p>\n

Clique sobre essa distribui\u00e7\u00e3o criada, clicando sobre o link da coluna “ID”, ou seja, em nosso exemplo clicamos sobre “ER1E47GM7TQMB”.<\/p>\n

Voc\u00ea entrar\u00e1 nas configura\u00e7\u00f5es da distribui\u00e7\u00e3o.<\/p>\n

Anote o prefixo do dom\u00ednio da distribui\u00e7\u00e3o criada, pois iremos precisar mais a frente.<\/p>\n

\"CloudFront24\"<\/p>\n

Resumo da \u00f3pera at\u00e9 aqui!<\/h2>\n

Criamos um usu\u00e1rio, baixamos as credenciais e demos permiss\u00e3o a este usu\u00e1rio para uso do servi\u00e7o de CloudFront da Amazon. Agora, vamos efetuar a configura\u00e7\u00e3o do servi\u00e7o integrado ao Plugin W3 Total Cache.<\/p>\n

Primeiramente, baixe o plugin neste link<\/a> e instale-o.<\/p>\n

O Plugin possui muitas configura\u00e7\u00f5es interessantes, mas recomendo que sua configura\u00e7\u00e3o seja feita com bastante cuidado, pois qualquer configura\u00e7\u00e3o incorreta poder\u00e1 causar s\u00e9rios problemas em seu site.<\/p>\n

Ap\u00f3s instalar o Plugin, ao lado direito, clique sobre “Performance” e posteriormente em “General Settings”.
\n\"CloudFront12\"<\/p>\n

 <\/p>\n

Nas configura\u00e7\u00f5es de “Page Cache”, marque “Enable”.<\/p>\n

\"CloudFront14\"<\/p>\n

Role mais a tela e v\u00e1 at\u00e9 “Brose cache”. Habilite a op\u00e7\u00e3o.<\/p>\n

\"CloudFront15\"<\/p>\n

Logo abaixo de “Browse Cache”, vamos habilitar o servi\u00e7o de CDN\u00a0para o plugin e selecionar o servi\u00e7o de CloudFront.<\/p>\n

\"CloudFront16\"<\/p>\n

Mas aten\u00e7\u00e3o! Muita aten\u00e7\u00e3o nessa hora. Em “CDN Type”, escolha o “Amazon CloudFront” do “Origin Pull\/mirror”, conforme imagem abaixo.<\/p>\n

\"CloudFront17\"<\/p>\n

Ap\u00f3s habilitar a CDN e escolher o tipo, salve as configura\u00e7\u00f5es clicando em “Save all settings”.<\/p>\n

Agora, volte ao item “Performance” no menu ao lado e v\u00e1 at\u00e9 o item “CDN”.<\/p>\n

\"CloudFront13\"<\/p>\n

Um pouco mais abaixo, em “configuration”, n\u00f3s iremos iniciar a integra\u00e7\u00e3o com a distribui\u00e7\u00e3o que criamos na Amazon CloudFront. \u00c9 agora que a brincadeira vai come\u00e7ar de verdade :p<\/p>\n

\"CloudFront18_2\"<\/p>\n

    \n
  1. Insira a Access Key ID que voc\u00ea copiou ou salvou da Amazon.<\/li>\n
  2. Insira a Secret Key<\/li>\n
  3. A origin aparecer\u00e1 automaticamente depois de configurar a CDN\u00a0por aqui, portanto assim que voc\u00ea salvar as configura\u00e7\u00f5es, o endere\u00e7o do seu site aparecer\u00e1 l\u00e1.<\/li>\n
  4. Nesse campo, voc\u00ea ter\u00e1 que inserir o prefixo do dom\u00ednio dessa distribui\u00e7\u00e3o criada. Vimos isso durante a cria\u00e7\u00e3o da distribui\u00e7\u00e3o, conforme imagem abaixo:<\/li>\n<\/ol>\n

    \"CloudFront24\"<\/p>\n

    PS: Insira apenas o prefixo.<\/p>\n

    5. Voc\u00ea pode criar em seu host um apontamento CNAME para um subdom\u00ednio, ou seja, algo como cdn.seusite.com.br ou static.seusite.com.br. Para isso, configure esse apontamento ou redirecionamento direto em seu host ou abra um chamado para que seu host efetue essa configura\u00e7\u00e3o. O apontamento dever\u00e1 ser n\u00e3o apenas para o prefixo do dom\u00ednio da distribui\u00e7\u00e3o, mas sim para todo ele, conforme exemplo abaixo:<\/p>\n

    d1ya6xvwacpff8.cloudfront.net > cdn.seusite.com.br<\/p>\n

    Dessa forma, as imagens do site, por exemplo abrir\u00e3o dessa forma: http:\/\/cdn.seusite.com.br\/wp-content\/uploads\/2016\/01\/logo1.png ao inv\u00e9s dessa forma:\u00a0http:\/\/d1ya6xvwacpff8.cloudfront.net\/wp-content\/uploads\/2016\/01\/logo1.png.<\/p>\n

    Feito tudo isso, clique em salvar configura\u00e7\u00f5es, abra seu site e abra as imagens em uma nova janela para se certificar de que ele j\u00e1 encontra-se configurado com CDN da Amazon CloudFront.<\/p>\n

    Abra\u00e7os e at\u00e9 a pr\u00f3xima!<\/p>\n","protected":false},"excerpt":{"rendered":"

    A lentid\u00e3o em um website pode ser ocasionado por diversos motivos. Desde a m\u00e1 otimiza\u00e7\u00e3o do c\u00f3digo e imagens que comp\u00f5em a p\u00e1gina como a escolha de um host de m\u00e1 qualidade ou um plano de hospedagem muito aqu\u00e9m do que seu site precisa. N\u00e3o fique triste, h\u00e1 solu\u00e7\u00e3o e o nome dessa solu\u00e7\u00e3o \u00e9 […]<\/p>\n","protected":false},"author":83,"featured_media":3524,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[291],"tags":[],"class_list":["post-2161","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/2161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/83"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=2161"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/2161\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/3524"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=2161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=2161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=2161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}