{"id":77273,"date":"2019-06-17T00:00:00","date_gmt":"2019-06-17T00:00:00","guid":{"rendered":"https:\/\/rockcontent.com\/br\/2019\/06\/17\/como-melhorar-a-velocidade-de-carregamento\/"},"modified":"2019-06-17T00:00:00","modified_gmt":"2019-06-17T00:00:00","slug":"como-melhorar-a-velocidade-de-carregamento","status":"publish","type":"post","link":"https:\/\/pingback.com\/br\/resources\/como-melhorar-a-velocidade-de-carregamento\/","title":{"rendered":"Os 11 passos essenciais para otimizar ainda mais a velocidade do seu site"},"content":{"rendered":"\n

Correr contra o tempo j\u00e1 faz parte da nossa rotina. Olhar para o rel\u00f3gio d\u00e1 aquela ansiedade: n\u00e3o vai dar para fazer todas as tarefas do dia. Nesse contexto, compreende-se que ningu\u00e9m seja tolerante com a baixa velocidade de um site<\/a><\/strong>, n\u00e3o \u00e9?<\/p>\n\n\n\n

Diante da correria que vivem em seu dia a dia, os consumidores querem experi\u00eancias na internet<\/a> que n\u00e3o os fa\u00e7am perder tempo \u2015 e, muito menos, perder a paci\u00eancia! Por isso, agilizar o carregamento das p\u00e1ginas deve estar no topo das estrat\u00e9gias de marketing digital<\/a>.<\/p>\n\n\n\n

Mas ser\u00e1 que a velocidade \u00e9 uma prioridade para os sites? Segundo levantamento do Google<\/a>, a m\u00e9dia de carregamento das p\u00e1ginas em dispositivos m\u00f3veis \u2015 cada vez mais essencial na jornada de compra \u2015 \u00e9 de 15 segundos. Esse tempo parece uma eternidade diante da constata\u00e7\u00e3o de que 53% dos visitantes mobile abandonam um site quando ele demora mais que 3 segundos para carregar<\/strong>.<\/p>\n\n\n\n

E voc\u00ea j\u00e1 parou para pensar quanto dinheiro um carregamento demorado desperdi\u00e7a? Esse valor j\u00e1 foi estimado<\/a>: o varejo online perde cerca de 1.73 bilh\u00e3o de libras por ano em vendas globais. Com esses n\u00fameros, fica claro que voc\u00ea precisa pensar na velocidade do seu site!<\/p>\n\n\n\n

Agora, se voc\u00ea precisa de uma ajuda nisso, acompanhe este artigo. Vamos trazer algumas ferramentas \u00fateis para avaliar a velocidade das suas p\u00e1ginas e dicas para tornar o seu site mais veloz. Confira!<\/p>\n\n\n\n

\"Stage<\/a><\/figure>\n\n\n\n

5 ferramentas para medir a velocidade do site<\/h2>\n\n\n\n

O Google<\/a> est\u00e1 empenhado em tornar a internet mais veloz<\/strong>. O gigante das buscas entende muito bem o comportamento dos usu\u00e1rios e sabe qual experi\u00eancia eles esperam.<\/p>\n\n\n\n

N\u00e3o \u00e9 por acaso que, l\u00e1 em 2010, o buscador j\u00e1 passou a incluir a velocidade de carregamento como um dos fatores de rankeamento<\/a>. E, em 2018, esse crit\u00e9rio foi expandido para as buscas mobile<\/a>.<\/p>\n\n\n\n

Para contribuir com os sites que querem melhorar a sua velocidade, o Google criou algumas ferramentas que auxiliam no diagn\u00f3stico das p\u00e1ginas e apontam as corre\u00e7\u00f5es que podem ser feitas. A seguir, vamos mostrar quais s\u00e3o elas, al\u00e9m de outros recursos gratuitos para isso.<\/p>\n\n\n\n

1. PageSpeed Insights<\/h3>\n\n\n\n

Essa \u00e9 a ferramenta mais conhecida de teste de velocidade de p\u00e1ginas<\/strong>. O PageSpeed Insights<\/a> \u00e9 um recurso gratuito, voltado para desenvolvedores, oferecido pelo Google.<\/p>\n\n\n\n

\"PageSpeed<\/figure>\n\n\n\n

Para us\u00e1-lo, \u00e9 bem simples: basta inserir a URL que voc\u00ea deseja testar (pode ser qualquer site, inclusive da concorr\u00eancia). Ent\u00e3o, a plataforma faz uma an\u00e1lise e apresenta uma pontua\u00e7\u00e3o de 0 a 100 para o desempenho no desktop e no mobile.<\/p>\n\n\n\n

O diagn\u00f3stico mostra tamb\u00e9m o tempo que levou para os elementos do site carregarem e quais a\u00e7\u00f5es voc\u00ea pode tomar para melhorar a velocidade. Quanto mais pr\u00f3ximo de 100, melhor: menos itens voc\u00ea tem para corrigir.<\/p>\n\n\n\n

2. Lighthouse<\/h3>\n\n\n\n

Lighthouse<\/a> \u00e9 um software de c\u00f3digo aberto oferecido pelo Google e usado para auditar sites da web. Ele pode ser executado como ferramenta de linha de comando ou como uma extens\u00e3o do Google Chrome<\/a> (com uma interface mais amig\u00e1vel).<\/p>\n\n\n\n\"report

Fonte: Google<\/figcaption>\n\n\n\n

Ele analisa n\u00e3o apenas a velocidade, mas tamb\u00e9m todos os aspectos de qualidade do site. <\/p>\n\n\n\n

Para isso, voc\u00ea deve inserir a URL que deseja auditar para que a plataforma apresente uma pontua\u00e7\u00e3o e dicas de melhorias para cada um destes quesitos: performance, acessibilidade, melhores pr\u00e1ticas, SEO e Progressive Web Apps<\/a>.<\/p>\n\n\n\n

3. Chrome User Experience Report<\/h3>\n\n\n\n

O Chrome User Experience Report<\/a> tamb\u00e9m \u00e9 uma ferramenta do Google voltada para desenvolvedores que serve para avaliar a experi\u00eancia do usu\u00e1rio no site. <\/p>\n\n\n\n

Diferentemente das outras ferramentas, essa exige um pouco mais de conhecimento t\u00e9cnico para mexer nos c\u00f3digos. <\/p>\n\n\n\n

A ferramenta coleta dados reais de usu\u00e1rios do Google Chrome e apresenta os dados m\u00e9dios dos sites da web, inclusive sobre a velocidade do site. Assim, os desenvolvedores podem comparar seu desempenho com a m\u00e9dia e avaliar quais pontos precisam melhorar.<\/p>\n\n\n\n

LEIA TAMB\u00c9M<\/strong>
Confira tudo que voc\u00ea precisa para criar o site da sua empresa<\/a><\/strong>
 Saiba o que \u00e9 banco de dados e a import\u00e2ncia dele para o seu site<\/a><\/strong>
 Crie um blog para o seu neg\u00f3cio usando o Stage<\/a><\/strong><\/p>\n\n\n\n

4. GTmetrix<\/h3>\n\n\n\n

GTmetrix<\/a> \u00e9 uma ferramenta bastante conhecida para medir a velocidade dos sites. Depois de analisar a p\u00e1gina que voc\u00ea indicar, a plataforma apresenta uma pontua\u00e7\u00e3o percentual para a velocidade, o tempo de carregamento e tamanho total da p\u00e1gina, al\u00e9m de mostrar as m\u00e9dias de mercado como compara\u00e7\u00e3o. <\/p>\n\n\n\n

\"GTmetrix\"<\/figure>\n\n\n\n

Em seguida, voc\u00ea pode ver as recomenda\u00e7\u00f5es de ajustes para melhorar a velocidade de carregamento.<\/p>\n\n\n\n

5. Pingdom<\/h3>\n\n\n\n

Pingdom<\/a> tamb\u00e9m \u00e9 uma das ferramentas mais populares de testes em sites, especialmente dentro da comunidade WordPress. A desvantagem \u00e9 que ela \u00e9 paga, embora ofere\u00e7a um per\u00edodo gratuito de 14 dias.<\/p>\n\n\n\n

\"Pingdom\"<\/figure>\n\n\n\n

Apesar disso, a plataforma \u00e9 bastante completa. As an\u00e1lises s\u00e3o realizadas em diferentes partes do mundo e informam sobre a disponibilidade, a velocidade de carregamento das p\u00e1ginas e o desempenho das principais transa\u00e7\u00f5es do site. <\/p>\n\n\n\n

Al\u00e9m disso, a ferramenta aponta as oportunidades de melhorias e envia alertas quando aparece algum problema.<\/p>\n\n\n\n

11 hacks para melhorar a velocidade do seu site<\/h2>\n\n\n\n

Voc\u00ea j\u00e1 deve ter testado o seu site nessas ferramentas, n\u00e3o \u00e9? E talvez voc\u00ea n\u00e3o tenha obtido uma pontua\u00e7\u00e3o muito satisfat\u00f3ria.<\/p>\n\n\n\n

Mas n\u00e3o precisa se desesperar: uma pontua\u00e7\u00e3o 100\/100 nessas ferramentas n\u00e3o deve ser uma obsess\u00e3o. Sabe por qu\u00ea?<\/p>\n\n\n\n

Elas fazem testes com algumas limita\u00e7\u00f5es. O PageSpeed Insights, por exemplo, realiza a an\u00e1lise com base em uma conex\u00e3o 3G e em um servidor com localiza\u00e7\u00e3o desconhecida. Esses fatores podem proporcionar uma vis\u00e3o diferente da realidade dos seus visitantes<\/strong>.<\/p>\n\n\n\n

Al\u00e9m disso, otimizar todos os elementos do site para alcan\u00e7ar a pontua\u00e7\u00e3o m\u00e1xima pode ser imposs\u00edvel, j\u00e1 que s\u00e3o muitas vari\u00e1veis envolvidas. E, muitas vezes, melhorar um ponto pode prejudicar outro \u2015 ent\u00e3o, pensando na experi\u00eancia do usu\u00e1rio, pode ser melhor deixar como est\u00e1.<\/p>\n\n\n\n

Ainda assim, os relat\u00f3rios dessas ferramentas s\u00e3o bons indicativos de como anda a sa\u00fade do seu site<\/strong>.<\/p>\n\n\n\n

Ent\u00e3o, se voc\u00ea n\u00e3o est\u00e1 vendo bons resultados, vamos apresentar agora alguns hacks para acelerar a velocidade do seu site. Eles foram baseados nas principais recomenda\u00e7\u00f5es das ferramentas que citamos acima. <\/p>\n\n\n\n

Acompanhe!<\/p>\n\n\n\n

1. Ative a compacta\u00e7\u00e3o do Gzip<\/h3>\n\n\n\n

Gzip \u00e9 um formato de compress\u00e3o de arquivos do site. Ou seja, ele reduz o tamanho dos arquivos enviados pelo seu servidor<\/strong> e o tempo de transfer\u00eancia, com taxas de at\u00e9 90% de compress\u00e3o nos arquivos maiores. Essa \u00e9 uma das medidas mais eficientes para reduzir o tempo de carregamento das p\u00e1ginas.<\/p>\n\n\n\n

Todos os navegadores<\/a> atuais s\u00e3o compat\u00edveis com esse formato e processam a compacta\u00e7\u00e3o automaticamente quando o usu\u00e1rio acessa um site. Voc\u00ea s\u00f3 precisa garantir que o servidor esteja configurado para disponibilizar os arquivos comprimidos quando o usu\u00e1rio solicitar.<\/p>\n\n\n\n

Alguns servidores fazem isso automaticamente. Neste site<\/a>, voc\u00ea pode testar se a compacta\u00e7\u00e3o do Gzip j\u00e1 est\u00e1 funcionando no seu site. Se n\u00e3o estiver, existem diversos plugins de cache para WordPress que ativam a compacta\u00e7\u00e3o de Gzip.<\/p>\n\n\n\n

\"Ative<\/figure>\n\n\n\n

Um deles \u00e9 o WP Fastest Cache<\/a>, que mostra uma simples caixa de sele\u00e7\u00e3o com tudo o que voc\u00ea pode configurar, inclusive a compacta\u00e7\u00e3o do Gzip.<\/p>\n\n\n\n

2. Reduza o tamanho das imagens<\/h3>\n\n\n\n

As imagens impactam bastante no peso e no carregamento de um site<\/strong>. De acordo com o HTTP Archive<\/a>, em maio de 2019, elas eram respons\u00e1veis por mais da metade dos bytes de um site. Otimiz\u00e1-las, ent\u00e3o, pode ser um dos primeiros passos para melhorar a velocidade do site.<\/p>\n\n\n\n

Vamos come\u00e7ar pela redu\u00e7\u00e3o do tamanho. Para isso, voc\u00ea pode usar um plugin de otimiza\u00e7\u00e3o de imagens para WordPress<\/a>, como o Optimus<\/a> e o Tinypng<\/a>.<\/p>\n\n\n\n

\"tinypng<\/figure>\n\n\n\n

Esses aplicativos reduzem os kilobytes das imagens (sem perder a qualidade) e eliminam todas as informa\u00e7\u00f5es sup\u00e9rfluas que programas de edi\u00e7\u00e3o podem salvar com o arquivo. Eles permitem executar essas a\u00e7\u00f5es automaticamente, durante o upload, nas imagens que forem inclu\u00eddas, mas tamb\u00e9m naquelas j\u00e1 existentes no site. <\/p>\n\n\n\n

3. Utilize formatos de \u00faltima gera\u00e7\u00e3o para as imagens<\/h3>\n\n\n\n

Outra a\u00e7\u00e3o importante para otimizar as imagens \u00e9 usar os formatos mais atualizados de arquivos, como JPEG 2000, JPEG XR e WebP.<\/a> Eles costumam ter uma compacta\u00e7\u00e3o melhor, mantendo a qualidade<\/strong>, em compara\u00e7\u00e3o com JPEG e PNG. Isso reduz o consumo de dados de rede de celular e a acelera o carregamento.<\/p>\n\n\n\n

Nos aplicativos Optimus e Imagify \u00e9 poss\u00edvel fazer a convers\u00e3o autom\u00e1tica para WebP. Esse formato \u00e9 suportado nos navegadores Chrome e Opera e, em m\u00e9dia, t\u00eam um tamanho 25-34% menor que JPG<\/a>.<\/p>\n\n\n\n

4. Fa\u00e7a upload das imagens no tamanho que ser\u00e3o usadas<\/h3>\n\n\n\n

Se voc\u00ea vai usar uma imagem no tamanho 313×235, por exemplo, por que inclu\u00ed-la no site no tamanho 640×480? <\/p>\n\n\n\n

Deixar que o site fa\u00e7a esse redimensionamento via HTTP ou CSS<\/a> tamb\u00e9m pode atrasar o carregamento, sabia? Al\u00e9m disso, a imagem vai ocupar mais espa\u00e7o sem necessidade, j\u00e1 que ela ser\u00e1 usada em tamanho menor.<\/p>\n\n\n\n

Portanto, salve a imagem nas dimens\u00f5es em que ela ser\u00e1 usada no site. Assim, o servidor n\u00e3o perde tempo com o redimensionamento, nem espa\u00e7o com uma imagem que poderia ser mais leve.<\/p>\n\n\n\n

5. Adie o carregamento de imagens fora da tela<\/h3>\n\n\n\n

At\u00e9 as imagens que n\u00e3o aparecem na tela prejudicam o tempo de carregamento das p\u00e1ginas, sabia? Mas, se o visitante n\u00e3o est\u00e1 visualizando, voc\u00ea pode adiar o carregamento delas<\/strong>, n\u00e3o \u00e9?<\/p>\n\n\n\n

\u00c9 isso que acontece quando as imagens v\u00e3o aparecendo \u00e0 medida que voc\u00ea rola uma p\u00e1gina. Isso significa que o desenvolvedor usou o recurso de lazy load<\/em> (carregamento lento) para as imagens ocultas da tela. Assim, elas s\u00f3 s\u00e3o carregadas quando o usu\u00e1rio chega at\u00e9 elas com a rolagem.<\/p>\n\n\n\n

Esse recurso pode ser configurado com os plugins para WordPress: Lazy Load<\/a> ou Lazy Load by WP Rocket<\/a>. As duas op\u00e7\u00f5es s\u00e3o bem simples de usar.<\/p>\n\n\n\n

6. Minifique HTML, CSS e Javascript<\/h3>\n\n\n\n

Quando um desenvolvedor cria os c\u00f3digos de um site, \u00e9 comum incluir quebras de linha, espa\u00e7os em branco e coment\u00e1rios. Essas informa\u00e7\u00f5es n\u00e3o influenciam no conte\u00fado que o usu\u00e1rio v\u00ea, mas elas est\u00e3o l\u00e1 ocupando espa\u00e7o e podem aumentar o tempo de carregamento.<\/p>\n\n\n\n

Por isso, as ferramentas costumam recomendar a elimina\u00e7\u00e3o desses caracteres sup\u00e9rfluos<\/strong>. \u00c9 isso que se faz ao \u201cminificar\u201d os c\u00f3digos HTML, CSS e Javascript<\/a>, para que eles fiquem mais leves.<\/p>\n\n\n\n

Mas n\u00e3o \u00e9 preciso fazer todo esse trabalho c\u00f3digo por c\u00f3digo, ok? Existem aplicativos gratuitos para isso, como o W3 Total Cache<\/a> e o Autoptimize<\/a>. Mas, mesmo usando um aplicativo confi\u00e1vel, \u00e9 sempre importante guardar um backup dos arquivos por seguran\u00e7a.<\/p>\n\n\n\n

7. Elimine recursos que impedem a renderiza\u00e7\u00e3o<\/h3>\n\n\n\n

Render-blocking (bloqueio de renderiza\u00e7\u00e3o) \u00e9 um assunto recorrente quando se fala em acelerar o carregamento das p\u00e1ginas. Por\u00e9m, \u00e9 um tema um pouco mais complexo, por isso vamos explicar melhor agora.<\/p>\n\n\n\n

Geralmente, c\u00f3digos de Javascript e CSS for\u00e7am os navegadores a atrasarem a leitura das p\u00e1ginas em HTML, para que elas apare\u00e7am para os usu\u00e1rios com os estilos definidos. Afinal, voc\u00ea n\u00e3o quer que as suas p\u00e1ginas percam todo o apelo visual que voc\u00ea escolheu, n\u00e3o \u00e9?<\/p>\n\n\n\n

Por\u00e9m, isso pode ser um problema quando atrapalha o carregamento das p\u00e1ginas com conte\u00fados que sequer est\u00e3o sendo vistos pelos usu\u00e1rios. <\/p>\n\n\n\n

Isso significa que o Javascript e o CSS est\u00e3o atrasando desnecessariamente o site ao bloquear a exibi\u00e7\u00e3o de conte\u00fados que est\u00e3o \u201cabaixo da dobra\u201d, ou seja, que o usu\u00e1rio ainda n\u00e3o viu.<\/p>\n\n\n\n

Para resolver isso, voc\u00ea pode determinar que os recursos de Javascript e CSS carreguem de forma ass\u00edncrona<\/strong>. Assim, \u00e9 poss\u00edvel apresentar rapidamente o conte\u00fado principal e adiar o carregamento de elementos desnecess\u00e1rios para a experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n\n

Isso pode ser feito, por exemplo, com o plugin Async Javascript<\/a> (apenas para Javascript) ou o Speed Booster Pack<\/a> (para Javascript e CSS).<\/p>\n\n\n\n

8. Crie AMPs<\/h3>\n\n\n\n

Accelerated Mobile Pages (AMPs)<\/a> \u00e9 um projeto de c\u00f3digo aberto encabe\u00e7ado pelo Google para atingir aquele objetivo de tornar a web mais veloz.<\/p>\n\n\n\n

As p\u00e1ginas criadas com essa tecnologia carregam instantaneamente em dispositivos m\u00f3veis<\/strong>. <\/p>\n\n\n\n

Embora tenham o mesmo conte\u00fado das p\u00e1ginas originais, elas eliminam elementos desnecess\u00e1rios e t\u00eam um desenvolvimento mais leve e simples, o que acelera a velocidade do site.<\/p>\n\n\n\n

Para criar AMPs do seu site, voc\u00ea pode usar o plugin AMP for WP<\/a>, que permite construir as p\u00e1ginas a partir de diversos templates mobile, sem necessidade de mexer em c\u00f3digos.<\/p>\n\n\n\n

9. Evite redirecionamentos m\u00faltiplos<\/h3>\n\n\n\n

Muitas vezes, o redirecionamento<\/a> \u00e9 necess\u00e1rio para que o usu\u00e1rio n\u00e3o caia em uma p\u00e1gina inexistente do site. Ali\u00e1s, essa \u00e9 uma das recomenda\u00e7\u00f5es de SEO<\/a> para n\u00e3o frustrar o visitante e mostrar ao buscador qual \u00e9 a p\u00e1gina principal que deve ser indexada.<\/p>\n\n\n\n

Por\u00e9m, redirecionamentos em excesso sobrecarregam o servidor<\/strong>. Eles desencadeiam um ciclo adicional de requisi\u00e7\u00f5es e atrasam o carregamento.<\/p>\n\n\n\n

Digamos que, para chegar \u00e0 vers\u00e3o mobile do seu site, existam dois redirecionamentos: <\/p>\n\n\n\n