Como-criar-um-site-bem-otimizado

Prévia do material em texto

Como criar um site bem otimizado?
1
Como criar um site bem otimizado?
2
SUMÁRIO
Introdução ........................................................................................................................................................................................... 4
Por que otimizar um site? ............................................................................................................................................................. 5
Tempo de acesso .............................................................................................................................................................................. 5
Como é feita a medição? .................................................................................................................................................. 6
Alguns números a respeito ............................................................................................................................................. 6
O que é possível fazer a respeito? ............................................................................................................................................ 7
Primeiros passos.................................................................................................................................................................. 7
O que é cache? ...................................................................................................................................................................... 7
Tipos de cache ...................................................................................................................................................................... 8
WordPress ............................................................................................................................................................................. 8
Técnicas empregadas por plugins de cache do 
WordPress ............................................................................................................................................................................. 9
Plugins de cache para o WordPress ........................................................................................................................ 10
Outros fatores que podem melhorar o desempenho de um site .............................................................. 11
Diminuição no tamanho das requisições feitas ................................................................................................. 11
Compressão na transmissão de dados .................................................................................................................. 11
Redução do tamanho do conteúdo (minificação) .............................................................................................. 12
Imagens: otimização, redimensionamento e formato .................................................................................... 13
Remoção de conteúdo desnecessário .................................................................................................................... 13
Transformações na imagem – Qualidade ............................................................................................................. 13
Transformações na imagem – Resolução.............................................................................................................. 14
Transformações na imagem - Cores ........................................................................................................................ 14
Uso de outros formatos de imagens ....................................................................................................................... 14
Softwares e serviços disponíveis na Web............................................................................................................. 15
Redução de cookies ......................................................................................................................................................... 16
União de código ................................................................................................................................................................ 16
Ajustes no código HTML .............................................................................................................................................. 16
Ordem no código da página ........................................................................................................................................ 17
Automatização ................................................................................................................................................................... 17
E do lado do servidor? ................................................................................................................................................................. 18
O que é um proxy?............................................................................................................................................................ 18
Por que usar proxies reversos? .................................................................................................................................. 18
Varnish ................................................................................................................................................................................... 20
Nginx ...................................................................................................................................................................................... 20
Como criar um site bem otimizado?
3
Uso de CDN ........................................................................................................................................................................ 21
Outras otimizações, de hardware e software..................................................................................................... 21
Tipo de servidor ................................................................................................................................................................ 22
Processador ........................................................................................................................................................................ 23
Quantidade de memória do servidor...................................................................................................................... 23
Discos rígidos ..................................................................................................................................................................... 24
Sistema operacional ........................................................................................................................................................ 24
Servidor Web ..................................................................................................................................................................... 25
Algumas ferramentas de diagnóstico ..................................................................................................................... 26
Ferramentas dos navegadores .................................................................................................................................. 26
Extensões dos navegadores ........................................................................................................................................ 27
Sites ........................................................................................................................................................................................ 27
O que a Hostnet oferece? .........................................................................................................................................................29
Planos de hospedagem: ................................................................................................................................................. 29
Fit (econômica) .................................................................................................................................................................. 29
Premium Cloud ................................................................................................................................................................. 30
Private Cloud ..................................................................................................................................................................... 30
CDN ........................................................................................................................................................................................ 31
Ponto de Troca de Tráfego Brasileiro (PTT) ........................................................................................................ 31
Servidores de DNS em Cluster ................................................................................................................................. 32
Conclusão ......................................................................................................................................................................................... 32
INTRODUÇÃO
O objetivo deste e-book é ajudar ao leitor a otimizar o seu site. Otimização de sites pode ser enten-
dida como o conjunto de estratégias traçadas para que seu site seja melhor localizado nos resulta-
dos de sites de busca, como o Google.
Mas otimização também é a alteração dos recursos do site, de forma que ele seja transferido e 
aberto mais rapidamente. Em tempos atuais, onde tudo flui na velocidade da luz, desempenho é 
fundamental, não só para o seu negócio, mas também para o seu website.
Como criar um site bem otimizado?
5
POR QUE OTIMIZAR 
UM SITE?
Ninguém gosta de perder tempo. E nos tempos 
atuais, não basta ter conteúdo, material disponí-
vel e de qualidade, custo baixo (ou zero)… Tam-
bém é fundamental ter um site que seja otimiza-
do, tanto na usabilidade quanto na velocidade. 
Algo muito irritante é ter que investir tempo para 
acessar sites que demoram minutos para serem 
carregados ou acessar aqueles onde o conteú-
do está escondido debaixo de várias páginas de 
texto e botões inúteis. Um site com essas carac-
terísticas fatalmente será abandonado pelos seus 
usuários, tornando-o irrelevante.
Também temos que lembrar do aumento do uso 
de dispositivos móveis para a navegação Web. 
Tablets e, principalmente, smartphones são cada 
vez mais usados para acesso à rede. Temos aí mais 
um bom motivo para pensar em otimizar o nosso 
site para que ele ofereça uma boa experiência 
para o usuário, tanto em usabilidade quanto em 
velocidade. Um usuário satisfeito é um usuário 
que retorna ao site e o promove gratuitamente, 
comentando sobre a qualidade do seu serviço, e 
sobre o seu acesso rápido.
Finalmente, pode soar como exagero, mas os mi-
crossegundos economizados fazem diferença no 
tráfego do site: quando mais rápido, maior será o 
tráfego. 
TEMPO DE ACESSO
Nossa intenção, neste material, é mostrar como 
podemos ganhar tempo no carregamento de 
um site. O que desejamos é diminuir o tempo de 
acesso. O tempo de acesso é, literalmente, o tem-
po gasto para que a página e seus elementos re-
lacionados (CSS, Javascript, vídeos, imagens, etc.) 
sejam carregados e formatados pelo navegador. 
Logo, quanto menor o tempo de acesso, maior 
será a velocidade de carregamento. 
Isto é inclusive prejudicial para o posicionamento 
do site em rankings de buscadores. Por exemplo, 
na classificação feita pelo Google, a velocidade 
de carregamento é muito importante: o Google 
gera índices das páginas do site, e se ele levar 
muito tempo, indexará menos páginas. Logo, um 
website que é lento para carregar não prejudica 
somente a experiência do usuário, mas também 
prejudica a sua posição nos resultados dos sites 
de busca.
Como criar um site bem otimizado?
6
Hoje em dia, o uso de dispositivos móveis para acessar sites é muito comum, e por diversos fatores, o aces-
so é mais lento. Se o site tiver um carregamento mais demorado, aumentará a chance do usuário desistir 
de acessar esse conteúdo.
Então, alguns especialistas apontam que o tempo de carregamento ideal de um site é de até 3 segundos, 
mesmo ainda sendo tolerável levar até 5 segundos nesse processo. Se ultrapassar esse limite, seu site tem 
um problema de desempenho que deve ser resolvido.
Como é feita a medição?
Existem diversos serviços disponíveis na Internet que medem o desempenho de um site, tanto no carrega-
mento quanto na formatação dele, em diferentes navegadores, em diferentes plataformas. Nesse e-book, 
iremos falar deles e sobre como podemos melhorar esses números.
Alguns números a respeito
Para deixar mais claro, seguem algumas informações importantes que nos ajudam a entender os motivos 
pelos quais a otimização de um site é fundamental: 
• Segundo uma pesquisa feita pela empresa de hospedagem Akamai junto com a consultoria Forrester 
Research, 40% dos visitantes não esperam mais do que 3 segundos pelo carregamento de uma página. 
Se o site não carregar, eles abandonam esse site;
• O Google descobriu que perde até 20% do seu tráfego quando sua página leva 500 ms (0,5 s) a mais 
para ser apresentada;
• Em uma experiência controlada, o mesmo Google decidiu que a página de resultado de buscas deveria 
aumentar, de 10 para 30 resultados. Logo, houve um aumento no tempo de carregamento, de 400 para 
900 milissegundos. Com isto, o tráfego das buscas caiu em 20%;
• O Yahoo analisou seu portal, e descobriu que 500 milissegundos (ms) a mais na abertura do seu site 
Como criar um site bem otimizado?
7
gera uma queda de 9% no tráfego;
• A Fundação Mozilla decidiu otimizar sua landing page, e conseguiu diminuir o tempo de carregamento 
em 2,2 s. Isto permitiu um aumento no número de downloads do seu principal produto, o navegador 
Firefox, em até 15%. Ou seja, um ganho de mais de 60 milhões de cópias por ano;
• A otimização, de forma a ganhar 100 ms (0,1 s) no carregamento, permitiu que a gigante do varejo 
Amazon ganhasse 1% em vendas;
• A Microsoft mostrou que 2s a mais de latência no Bing diminuíram o faturamento em 4,3%;
• Existem pesquisas publicadas em revistas científicas que mostram relações entre tempo de acesso e 
pressão arterial. Ou seja, sites lentos aumentam a pressão sanguínea dos usuários.
O QUE É POSSÍVEL FAZER A RESPEITO?
Bem, depois disto tudo, o que concluímos é que devemos otimizar nosso site, de forma a gastar menos 
tempo no processo de download e formatação. Quanto mais rápido, melhor. O objetivo desse material, 
então, é apresentar algumas soluções que podem ser interessantes para facilitar seu processo.
Primeiros passos
Seu objetivo é diminuir o volume de dados que são enviados do servidor onde seu site está hospedado 
para o navegador do cliente. Menos dados resultam numa transmissão de dados mais curta, menos tráfego 
gerado e menos tempo consumido.
O que é cache?
O cache (ou buffer) é um recurso amplamente usado computação, e consiste em armazenar uma cópia da 
informação em uma memória que responde mais rapidamente. Assim, quando essa informação for solici-
tada, será fornecida esta cópia que está nessa memória mais rápida. Assim, todo o conjunto ganhará em 
Como criar um site bem otimizado?
8
performance. 
No caso de sites, o uso de cache poupa processamento e consultas aos bancos de dados, e são muito usa-
dos para conteúdos que são acessados com frequência. O cache é armazenado para que outros clientes 
acessem esse conteúdo mais rapidamente, economizando tempo e uso desnecessário do hardware do 
servidor.
Tipos de cache
Existem diversos tipos de cache em uso no computador. No processador,por exemplo, existem até 3 níveis 
de cache: L1, L2 e L3, cada um com as suas características específicas. Existe também cache para a memó-
ria ou mesmo o cache de disco - que cada disco rígido contém; o cache do navegador, também conhecido 
como “Arquivos Temporários de Internet”; e tantos outros. Todo tipo de cache tem por função acelerar o 
desempenho, seja da máquina, da aplicação ou do site. E com isto, o tempo de resposta diminui.
Nos sites, podemos usar caches pelo lado do servidor, caches pelo lado do website ou ambos. O cache pelo 
lado do servidor funciona fornecendo conteúdo estático, ou seja, que não sofre alterações. A maioria das 
imagens e dos vídeos são desse tipo de conteúdo. Assim, o servidor avisa ao navegador do cliente que não 
é preciso baixar certos conteúdos sempre que for feito o acesso: ele usa a mesma imagem várias vezes. 
Já no caso do cache pelo lado do website, o software que gerencia este website salva o resultado de alguns 
conteúdos mais comuns. Assim, mesmo que outro cliente acesse a mesma página, esse resultado não será 
refeito, pois ele já está no cache.
Normalmente, é preciso instalar um plugin de cache no software gerenciador de conteúdo. Software como 
WordPress; Magento; Joomla; Drupal e muitos outros têm extensões (plugins) capazes de gerar esse ca-
che de forma automática, e também podem ser configurados.
WordPress
A maior parte dos sites no mundo são gerenciados por um Sistema de Gerenciamento de Conteúdo (CMS). 
E entre eles, o WordPress se destaca como o mais usado. Entre as inúmeras características do Wordpress, 
Como criar um site bem otimizado?
9
temos uma sólida arquitetura de plugins (extensões), que permitem que as capacidades do CMS sejam 
estendidas.
Então, veremos inicialmente o que podemos fazer, lançando mão de plugins disponíveis para esse CMS.
Técnicas empregadas por plugins de cache do 
WordPress
O WordPress tem uma quantidade imensa de plugins. São mais de 55 mil plugins disponíveis, com dife-
rentes propósitos. E existem vários plugins para otimização de sites. Aqui, iremos falar de alguns deles, 
mas antes vamos nos deter em algumas características muito importantes:
• Cache de página: o plugin cria e gerencia versões estáticas das páginas mais acessadas de um site. 
Logo, quando o usuário acessar essa página, não será necessário processá-la; o serviço já terá sido 
feito. Alguns permitem que você inclusive fixe um prazo para que o cache expire. Outros podem fazer 
cache de feeds RSS, RDF e Atom. 
• A minificação é basicamente uma “faxina” no código HTML, CSS e JavaScript, removendo caracte-
res desnecessários, espaços em branco e outros conteúdos. Assim, o tamanho dos arquivos diminui.
• Compressão HTTP: o plugin combina todos os arquivos para formarem um arquivo só, maior, do que 
vários arquivos pequenos. A sobrecarga é maior quando enviamos vários arquivos menores, ao invés 
de um arquivo grande. 
• O cache do banco de dados é tão importante quanto o cache de página. O WordPress faz requisi-
ções ao banco de dados, e vez por outra são as mesmas requisições. Logo, o plugin monta um cache 
dessas requisições, e quando o WordPress precisa, ela já está pronta. Isto diminui o uso do hardware, 
e acelera o desempenho como um todo.
• Manipulação de cabeçalhos: sempre que o navegador for acessar uma página, ele irá primeiro con-
sultar a sua área de arquivos temporários para ver se o site já está ali, salvo. Se sim, ele entrega o 
conteúdo que ali está, ao invés de acessar o site. O plugin pode mexer nos cabeçalhos das páginas, de 
forma a instruir o navegador a preservar esse conteúdo temporário por mais tempo.
Como criar um site bem otimizado?
10
• Alguns plugins tem integração com serviços de 
CDN, o que permite que o desempenho seja 
maior, assim como um desejável aumento em 
segurança.
• E é necessário que estatísticas sejam feitas, 
para que saibamos o ganho que tivemos no de-
sempenho do nosso site, e onde podemos mexer 
para obtermos melhor ganho.
Vamos então falar sobre alguns plugins:
Plugins de cache para o 
WordPress
O primeiro deles é o W3 Total Cache. Este plugin 
tem diversos recursos: cache do navegador, cache 
da página, minificação, integração com serviços de 
CDN, entre outros. Este é um plugin muito conheci-
do e respeitado.
Outro muito conhecido é o WP Super Cache. Ele 
produz arquivos HTML estáticos, a partir do con-
teúdo gerenciado pelo CMS. Logo, quando o usuá-
rio acessar o site, ele receberá uma página HTML 
já formatada e preparada para ser aberta pelo na-
vegador. Este plugin também é muito conhecido e 
usado.
O Comet Cache é um plugin que faz um cache do 
site como um todo. Página, post, categoria, link, ima-
gem… Tudo vai pro cache gerado por ele. É possível, 
por exemplo, estipular um tempo de vida para o ca-
che – e depois, os arquivos são apagados. Também 
é possível fazer cache de feeds RSS, gerar estatís-
ticas, usar CDN em conjunto com o Comet Cache, 
entre outras coisas. Seu foco está na simplicidade. 
O LiteSpeed Cache tem por objetivo ser uma solu-
ção tudo-em-um, unindo um cache do lado do servi-
dor a um conjunto de otimizações, que serão feitas 
do lado do cliente. Entre elas temos a minificação de 
HTML,JavaScript e CSS; geração de CSS de forma 
automática, caso seja necessário; gerência do cache 
do navegador; otimização para o banco de dados; 
pré-carregamento para o DNS, entre outras carac-
terísticas. Ele tem uma versão paga, com caracterís-
ticas exclusivas.
Não podemos deixar de citar o WP Rocket. Este 
plugin também funciona como um cache para o seu 
site, de forma sofisticada: segundo os desenvolve-
dores, eles empregam 80% das boas práticas para 
performance na Web de forma automática. Ele faz 
cache das páginas e dos seus conteúdos; faz o pré-
Como criar um site bem otimizado?
11
-carregamento dos arquivos; reduz o número de requisições HTTP e emprega compressão de dados, com 
fins de diminuir a largura de banda utilizada (e o tempo de download); entre outras coisas. O WP Rocket 
tem uma versão gratuita e outra mais completa, paga.
Por último, vamos citar o WP Fastest Cache. Este plugin se propõe a ser o mais simples de todos, com 
uma configuração simples e rápida, permitindo fazer cache para usuários que estão conectados ao CMS 
e a usuários de dispositivos móveis; criação de cache de forma automática; ajuste do tempo de vida para 
conteúdos específicos; suporte a CDN e SSL, entre muitos outros.
Podemos citar outros plugins como o Breeze, o Autoptimize, o Hyper Cache e outros. Estes acima estão 
entre os mais bem avaliados, e mais usados.
Outros fatores que podem melhorar o 
desempenho de um site
Não basta usar plugins de cache no Wordpress para aumentar o desempenho. Diversos outros fatores 
interferem na performance do site, sendo gerenciado pelo WordPress ou não. Vamos ver alguns:
Diminuição no tamanho das requisições feitas
Uma coisa é certa: o tempo de acesso diminuirá se for possível diminuir o número de requisições feitas ao 
servidor Web. Se o servidor Web trabalhar menos, ele responderá mais rápido, e o cliente ganhará tempo. 
Existem diversas maneiras de diminuir esse tempo, e algumas das técnicas veremos abaixo.
Compressão na transmissão de dados
A maioria (senão todos) dos navegadores pode receber dados compactados. Mais especificamente, com-
pactados segundo o algoritmo gzip. Só que, para isso, o servidor Web tem que ter essa opção habilitada. 
Ao habilitar, todo o conteúdo que tem forma de texto (código HTML, PHP, os arquivos CSS, o código em 
Como criar um site bem otimizado?
12
JavaScript, etc.) é comprimido pelo servidor antes de ser enviado para o cliente. Com isto, é possível 
diminuir o tráfego de dados em até 50%.
Redução do tamanho do conteúdo (minificação)
Minificar o conteúdo é reduzir o tamanho do arquivo-texto, de forma que ele ocupe menos espaço. O 
processo de minificação não exclui a compactação do arquivo, mas o complementa: primeirodiminua o 
tamanho do arquivo texto, depois compacte-o. Haverá um ganho extra de espaço. 
O ideal é que todo código seja bem documentado, com comentários, indentação, nomes de variáveis 
bem legíveis, etc. Mas para quem interessa na execução, que é o navegador Web, isto pouco ou nada 
interessa. Logo, se for possível tornar o arquivo-texto menor, mesmo que perdendo em legibilidade mas 
mantendo a funcionalidade, é o que queremos atingir. 
Existem algumas ferramentas que podem ser usadas para realizar a minificação de diversas partes do 
código:
JavaScript: temos o Google Closure Compiler (criação da própria Google) e o UglifyJS2.
CSS: podemos indicar o Less.js, feito em JavaScript.
HTML: o projeto HTML Compressor é muito útil, fechando tags desnecessárias, removendo tabula-
ções e espaços em branco.
Como criar um site bem otimizado?
13
Imagens: otimização, redimensionamento e formato
As imagens são arquivos salvos em formatos como JPG, PNG, WebP ou em alguns casos, GIF. Todos 
esses formatos já são compactados, ou seja: compactar uma imagem já compactada teria um ganho de 
espaço muito pequeno, e uma perda de tempo muito grande. Não compensa. Mas é possível ganhar es-
paço otimizando as imagens a serem usadas, e isto é fundamental - em média, metade dos bytes de uma 
página Web são imagens. Então, vamos a algumas opções:
Remoção de conteúdo desnecessário
Os editores de imagens salvam, dentro dos arquivos JPG (mas também pode ser em PNG), informações 
a respeito da imagem. Logo, data e hora em que a imagem foi gerada; qual foi o editor gráfico usado; se foi 
uma foto, detalhes como foco, abertura da lente, câmera usada, entre outros. A estes metadados, chama-
mos de EXIF. Para colocar uma imagem no ar, pouco ou nenhuma dessas informações seria necessário. 
Se pudermos removê-los, ganhamos espaço. 
Transformações na imagem – Qualidade
Alguns formatos de imagem permitem trabalhar com o que chamamos de ajuste de qualidade. Por qua-
lidade, entenda que é um ajuste para a compressão com perda. Esses formatos permitem que você des-
carte material contido no formato original, de forma que não haja perda perceptível de qualidade. 
Logo, você ajusta para um valor desejável de qualidade (por exemplo, 75% para uma imagem no formato 
JPEG) e com isto, parte dessa informação será descartada pelo editor de imagens, quando salvar a ima-
gem. E com isto, o tamanho do arquivo diminui. Agora, se você usar um valor muito baixo para a qualida-
de, é certo que o editor descartará informação demais, e será perceptível que a imagem perdeu muita 
qualidade e está degradada.
O profissional que trabalha com as imagens deve escolher a qualidade mais apropriada para o que será 
exibido na tela. Se usar uma qualidade muito alta, o arquivo ficará grande e será desnecessário; se usar 
uma qualidade muito baixa, o arquivo ficará bem menor, mas a imagem estará muito degradada. Atingir 
esse equilíbrio, para cada imagem, não é nada fácil.
Como criar um site bem otimizado?
14
Transformações na imagem – Resolução
No código HTML, é possível deixar que o navegador do cliente redimensione as imagens, diminuindo ou 
aumentando seu tamanho. Isto é possível setando tags como width e height, tanto no HTML quanto no 
CSS. Este é um princípio que deve ser evitado a todo custo.
A tarefa de redimensionar a imagem acaba caindo para que o navegador o faça. E com isso, temos perda 
de tempo. Logo, recomenda-se que esse redimensionamento seja feito pelo próprio designer, adequando 
as imagens no tamanho exato que serão colocadas na tela.
Transformações na imagem - Cores
É possível também manipular as imagens, de forma a diminuir a quantidade de cores nas imagens sem 
perder a legibilidade e ter um ganho em desempenho.
Por exemplo, o olho humano não consegue distinguir mais do que alguns milhões de cores, mas muitas 
imagens têm uma resolução cromática maior do que o olho humano percebe. Logo, é desnecessário traba-
lhar com tantas cores. 
Mesmo assim, existem situações em que um número reduzido de cores resolve o problema. Uma imagem 
com poucas cores, mas as cores certas, atende ao site e o impacto no tamanho é bem menor.
Uso de outros formatos de imagens
Existem basicamente quatro formatos de imagens a serem usados na Web: JPEG, PNG, GIF e WebP. To-
dos eles têm vantagens e desvantagens, e cada um se aplica a um caso específico:
• Os arquivos no formato JPEG são ideais para variações contínuas de cor. Logo, fotografias são melho-
res apresentadas nesse formato, tanto que hoje em dia, qualquer câmera digital ou smartphone salva 
as fotos tiradas nesse formato;
Como criar um site bem otimizado?
15
• O formato PNG é usado para variações discre-
tas de cor. Indicado para imagens com um núme-
ro finito de cores, que não variam tanto, como 
logotipos, gráficos simples, etc;
• O formato GIF é antigo, e foi suplantado pelo 
PNG. Hoje em dia, a melhor justificativa para 
usar o formato GIF seria lançar mão do uso dele 
para animações simples, por exemplo;
• WebP é um novo formato de imagem proposto 
pelo Google, que é feito e pensado para websi-
tes.
Existem diferenças. Por exemplo, tanto PNG quan-
to GIF mantém a fidelidade da imagem (principal-
mente quanto a cores), o que o formato JPEG não 
mantém (afinal, ele é um formato de compressão 
com perda). O formato PNG suporta transparência 
com canal alpha, e tem 2 “subformatos”. Em um, o 
máximo de cores suportadas é 256 (8 bits). Este é o 
PNG8. No outro, 16.777.216 cores (24 bits), que é 
o PNG24. Pode ser interessante converter as ima-
gens do PNG24 para o PNG8, e usar JPEG quando 
é mais vantajoso em termos de tamanho.
Softwares e serviços 
disponíveis na Web
Bem, depois de discorrermos sobre imagens, tere-
mos que manipulá-las para economizar espaço. A 
boa notícia é que existem diversas ferramentas, 
tanto para serem executadas no computador quan-
to online, para que seja possível reduzir o número 
de cores usadas na imagem e assim reduzir seu ta-
manho.
É possível fazer isto usando um software para edi-
tar as imagens, como Adobe Photoshop, Gimp, Kri-
ta ou outra ferramenta. Mas existem ferramentas 
específicas, que facilitam o nosso trabalho. Uma de-
las é o Smush It. Ele é uma extensão para o navega-
dor Firefox que faz a ponte com o site e automatiza 
o processo.
Outra opção é o site ImageOptim, que contém vá-
rias ferramentas para diferentes sistemas operacio-
nais (Linux, Mac OS X e Windows) que podem fazer 
o serviço de otimização das imagens para você. O 
ImageOptim também tem um serviço online e pago, 
para otimização de imagens.
Ainda podemos citar o site JPEGmini, que contém 
algoritmos avançados que podem diminuir a qua-
lidade das imagens no formato JPEG, mesmo sem 
perder as características da percepção humana. O 
resultado são imagens visualmente idênticas, mas 
com tamanho muito menor – em alguns casos, me-
nos da metade.
Como criar um site bem otimizado?
16
E por último, mas não menos importante, existiu um projeto na Internet, com o bem-humorado nome de 
Bandwidth Conservation Society (“Sociedade de Conservação da Largura de Banda”) que trazia informa-
ções sobre manipulação de imagens, de forma a reduzir seu tamanho.
Redução de cookies
A cada requisição feita e recebida, um cookie é enviado pelo servidor para o cliente e outro é enviado de 
volta ao servidor. Os cookies são pequenos arquivos que são trocados entre os clientes e os servidores. 
Normalmente, o navegador do cliente recebe vários cookies ao longo da navegação. O ideal é que haja 
menos cookies sendo trafegados. 
Uma maneira de diminuir é reduzir a quantidade de informação agregada nos cabeçalhos dos arquivos 
HTML. Assim, menos cookies serão enviados e recebidos. Outra maneira é tentar agregar essa informa-
ção, de forma que menos cookies sejam enviados por vez. Por último, há a sugestão de que alguns conteú-
dos estáticos sejam servidos sem fazer o envio e o recebimento de cookies.União de código
Ainda no processo de diminuir o número de requisições, uma maneira de ganhar tempo é reduzir o nú-
mero de arquivos envolvidos, tanto JavaScript quanto CSS. Concentrar tudo em menos arquivos reduz a 
quantidade de requisições. Não é uma tarefa fácil, mas é possível e os ganhos são perceptíveis.
Ajustes no código HTML
Ajustes no cabeçalho das páginas são muito úteis: por exemplo, o tempo de “vida” daquele conteúdo no 
cache do navegador pode ser ajustado a partir do cabeçalho da página. Você pode então aumentar esse 
tempo e os recursos que são estáticos (como imagens) já estarão salvos no cache do navegador do cliente. 
Quando ele retornar à página, boa parte do conteúdo já estará no seu computador, e não será necessário 
receber esse conteúdo novamente. Menos tempo gasto, mais rapidez para abrir a página.
Como criar um site bem otimizado?
17
Ordem no código da página
• Enxugue o design da página: evite usar fontes externas; não use Flash; não use imagens externas; não 
se prenda aos detalhes rebuscados, mas foque em velocidade.
• Especifique o tamanho das imagens: quando colocar uma imagem, coloque também as medidas (al-
tura e largura). Assim, o navegador já irá reservar o espaço certo na página para que aquela imagem 
entre ali. Se isto não é feito, a imagem é posicionada em seu lugar e todo o resto da página é “empur-
rado” para os lados e para baixo. Além de levar mais tempo, isto gera uma sensação de lentidão no 
usuário, além de ser uma péssima prática de usabilidade.
• Coloque CSS no início, e JavaScript no fim: ambos bloqueiam a renderização e a formatação da pá-
gina. Como o CSS descreve como a página estará (são folhas de estilo), coloque-o no início. O JavaS-
cript, por sua vez, será interpretado pelo navegador, e bloqueará a renderização da página naquele 
ponto, até que seja concluído. Se o JavaScript estiver no início, você terá uma página em branco até 
que o JavaScript seja interpretado. Mais uma péssima prática de usabilidade, e a sensação de lenti-
dão passada ao usuário.
Automatização
Automatizar significa tornar um processo repetitivo em algo que o computador poderá realizar. Logo, 
uso de plugins que diminua o tamanho de scripts JavaScript e CSS, otimize as imagens, entre outras fun-
ções, é uma ótima prática. Se este procedimento não for automatizado, será logo deixado de lado.
Como criar um site bem otimizado?
18
E DO LADO DO SERVIDOR?
Existem otimizações que também podem ser feitas do lado do servidor. É possível fazer uso de certos re-
cursos, de forma que ganhamos tempo no acesso aos sites. Mas primeiro, precisamos explicar o que é um 
proxy.
O que é um proxy?
Numa rede de computadores, um proxy (que pode ser traduzido como “procurador”, ou “representante”), 
é um servidor (ou seja, um computador dedicado ou uma aplicação) que faz o papel de intermediário entre 
o(s) cliente(s) e outros servidores. 
Quando um cliente quer acessar um conteúdo de um site, ele faz a solicitação de acesso ao proxy, que, por 
sua vez, faz a conexão com o servidor. Um proxy web, por exemplo, faz cache de requisições frequentes de 
páginas web dentro de uma rede de computadores. Ele tem um espaço em disco para armazenar essas re-
quisições: caso outro usuário faça a solicitação do mesmo conteúdo posteriormente, o proxy web avalia se 
é necessário baixar para o seu cache uma nova cópia da página e entregá-la ou não. Isso traz incrementos 
no desempenho da rede como um todo.
Um proxy reverso é um servidor de rede que está instalado “na frente” de um ou mais servidores Web. As-
sim, todas as requisições feitas a esse servidor Web passa primeiro pelo proxy. Caso seja uma requisição 
que está no cache dele, esta será a que o servidor Web receberá. Caso não tenha, o proxy reverso encami-
nha a requisição ao servidor Web. Por exemplo, esse proxy reverso pode ser usado para balancear a carga 
de um conjunto de servidores Web e diminuir o tempo de acesso de sites.
Por que usar proxies reversos?
Há momentos em que nem os proxies Web, nem os plugins de cache do WordPress resolvem. Nessas 
horas é preciso melhorar o desempenho, e os proxies reversos são soluções bem aceitas, pelo lado da em-
presa de hospedagem. Vamos ver alguns problemas que um plugin de cache para o Wordpress pode ter, e 
o que um proxy reverso pode contornar:
Como criar um site bem otimizado?
19
• Gargalo gerado pela otimização do site - quando mais usuários conectando-se ao site simultaneamen-
te, mais o servidor terá que trabalhar, gerando versões estáticas do mesmo site para armazenar no 
cache gerado pelo plugin. No final das contas, o ganho de performance é bem pequeno em períodos de 
carga muito grande. E em contrapartida, o servidor terá uma sobrecarga maior.
• Problemas com o sistema de arquivos – dependendo do sistema de arquivos usado no servidor, o plu-
gin de cache é impactado de forma negativa. O desempenho cai quando tem que gravar/apagar/mudar 
muitos arquivos de uma vez. Logo, pode nem ter cache ou ter um cache mal-formado (com links que-
brados, por exemplo). Um proxy reverso evita isso, pois os dados ficam armazenados na memória do 
servidor.
• Incompatibilidade de plugins – devido às diferentes maneiras com as quais os dados podem ser re-
montados, é possível que alguns plugins de cache incorram em incompatibilidades. No caso do proxy 
reverso, apenas elementos individuais estão no cache. Assim, eles estarão compatíveis com plugins e 
conteúdo dinâmico.
• Configurações no servidor Web – alguns plugins de cache necessitam de configurações específicas no 
servidor Web. Como o proxy reverso opera antes do servidor Web, não há necessidade de alterar as 
configurações.
• Compressão ineficiente – a maioria dos plugins compacta as páginas, para enviá-las ao navegador do 
usuário (o cliente). Mas ainda existem navegadores que não suportam esses algoritmos de compres-
são. É uma minoria bem pequena, mas existe. O proxy reverso pode entregar versões compactadas da 
página para os navegadores que suportam compressão, e versões descompactadas para os navegado-
res que não suportam.
• Tolerância às falhas – caso ocorra um problema no servidor Web, o proxy reverso continua entregando 
páginas para os usuários, o que permite que o administrador tenha tempo de consertar o problema e 
recolocar o servidor Web de volta no ar.
Como criar um site bem otimizado?
20
Varnish
O Varnish é um proxy reverso muito eficiente. Ele é capaz de acelerar o desempenho por um fator de 
300 a 1000 vezes, dependendo da arquitetura de servidores. Diferente de outros proxies, como o Squid, 
o Varnish sempre teve por foco ser um proxy reverso do protocolo HTTP. Cerca de 5% dos 10 mil maio-
res sites da Internet o usam na infraestrutura. Entre eles, podemos citar: Wikipedia, Facebook, Twitter, 
Reddit, Vimeo, entre outros. Ele também é bem flexível, principalmente devido à sua linguagem de confi-
guração, VCL, que permite escrever regras que determinam como as requisições de entrada serão trata-
das. O Varnish permite que suas funcionalidades sejam estendidas com o uso de módulos (os VMODs), 
e tem integração com o Wordpress.
O Varnish atende muito bem às necessidades por ele lidar de forma positiva com escalabilidade: o de-
sempenho dele não cai, mesmo que haja mais usuários fazendo requisições. Existem também as vanta-
gens que já citamos anteriormente, a respeito dos proxies reversos. O Varnish é uma solução sólida e 
eficiente, entre os proxies reversos, para diminuir o tempo de acesso dos sites.
Nginx
O Nginx (lê-se “engine X”) é um software que pode ser usado como servidor Web, proxy reverso ou ca-
che. Ele é rápido, leve, seu código é aberto e tem possibilidades de configuração para melhor performan-
ce. Ele trabalha com o conceito de “event-based web server”, diferente do Apache (o servidor Web mais 
usado do mundo), que é baseado no conceito “process-based server”. Alguns dos sites que usam o Nginx 
são: a Wikipédia, o Facebook(algumas partes), o GitHub, o Hulu, o Netflix, entre outros.
O Nginx tem algumas limitações, como não poder usar arquivos .htaccess. Os arquivos .htaccess são 
usados para configurações do próprio usuário, como limitar o acesso a um site, quais são as páginas de 
erro, URLs amigáveis, entre outros. Logo, o Nginx não tem suporte ao uso dos arquivos .htaccess.
Como proxy, o Nginx pode funcionar junto o Apache. Ele opera em primeiro plano, e todas as requisições 
Web passarão primeiro pelo Nginx. Assim, o Nginx funcionará como um proxy reverso, e os arquivos 
estáticos estarão com ele, deixando pro Apache o processamento de conteúdo dinâmico.
Como criar um site bem otimizado?
21
Uso de CDN
A sigla CDN significa Content Delivery Network 
ou Rede de Entrega de Conteúdo. A CDN é uma 
rede de distribuição de informação, cujo objetivo 
é entregar conteúdo Web de forma mais rápida a 
usuários geograficamente dispersos.
Uma rede CDN é composta de servidores espa-
lhados geograficamente por toda a Terra, com o 
conteúdo a ser acessado sendo replicado e dis-
tribuído por todas essas máquinas. O cliente é 
direcionado para o servidor que contém aquele 
conteúdo e tem condições de respondê-lo mais 
rapidamente. A ideia é que o cliente receba o 
conteúdo do servidor mais próximo dele. Desta 
forma, temos menos gasto com largura de banda 
e o acesso aos conteúdos do site será mais rápido. 
As CDNs são usadas principalmente para distri-
buir conteúdo que gera um grande consumo de 
banda passante. O conteúdo é inicialmente re-
metido do servidor original para outros servido-
res ao redor do mundo, conforme haja demanda. 
Assim, o acesso é feito a partir do servidor mais 
próximo (com menos intervalos, ou hops), do 
cliente, economizando tempo e dinheiro.
Uma outra vantagem clara das CDNs é a segu-
rança contra ataques do tipo DDoS (Negação de 
Serviço Distribuída). Este tipo de ataque é carac-
terizado por um número de requisições recebi-
das por um servidor muito acima do limite. Todo 
servidor é preparado para receber um certo nú-
mero de requisições em um instante de tempo. 
Mas se ele recebe um número de requisições 
muito maior, os sites hospedados nesse servidor 
tornam-se indisponíveis, pois toda a largura de 
banda está sendo consumida por esse ataque.
Quando estamos usando uma CDN, esse núme-
ro anormal de requisições são distribuídos pelos 
servidores que compõem a CDN e contém cópias 
do site que está sofrendo ataque. Assim, o ataque 
é diluído por vários servidores, o que minimiza os 
efeitos desse tipo de ameaça. Além disso, dificil-
mente o ataque atingirá o servidor original, que 
contém os dados originalmente armazenados.
Outras otimizações, de 
hardware e software
Falamos muito a respeito de software, mas faz-
-se necessário tratarmos de hardware também, e 
de outras camadas, como o próprio servidor Web 
adotado. Vamos então discorrer sobre esses pon-
tos.
Como criar um site bem otimizado?
22
Tipo de servidor
O tipo de servidor faz diferença no desempenho do 
site. Existem três tipos básicos:
• Hospedagem compartilhada: este é o tipo mais 
comum, onde muitos sites compartilham o mes-
mo servidor. A relação custo-benefício é muito 
atraente, pois o custo do servidor é rateado por 
todos os clientes com sites hospedados nessa 
mesma máquina.
• Hospedagem na nuvem (cloud): esta é uma 
hospedagem compartilhada com algumas van-
tagens. Como os computadores estão inter-
ligados, e temos o que chamamos de imagem 
única do sistema - quem vê o serviço rodando 
estando do lado “de fora” da rede, não percebe 
quantos servidores estão envolvidos, ou quais 
deles deram defeito. Para os usuários, é visto 
como se fosse apenas um único servidor. É certo 
que várias dessas máquinas falham, requerem 
manutenção e são substituídas. Mas o sistema 
permanece em funcionamento.
• Servidor Privado Virtual (VPS): aqui, o cliente 
obtém mais recursos e mais liberdade para tra-
balhar, já que o provedor cede a ele uma máqui-
na virtual. Esta máquina virtual é um software 
que executa programas como se fosse um com-
putador real (virtualização). Essa máquina vir-
tual é uma “duplicata eficiente e isolada de uma 
máquina real”, uma cópia feita em software de 
• um sistema físico. Então, o VPS é um computa-
dor virtual, onde é possível fazer quase tudo do 
seu jeito, mas com um custo menor do que se 
fosse uma hospedagem dedicada. Ele funciona 
como se fosse um servidor dedicado, mas hos-
pedado em um ambiente compartilhado.
• Hospedagem dedicada: sem sombra de dúvidas 
este é o serviço mais caro a ser oferecido, pois 
o servidor físico é totalmente dedicado a você. 
Além de contratar o servidor (que está instala-
do em um datacenter), é necessário saber que é 
preciso alguémpara gerenciar o mesmo. Isto re-
quer um profissional qualificado, principalmen-
te por causa de questões como segurança.
Cada tipo de servidor tem suas vantagens e desvan-
tagens. Por isso, cada um pode afetar o tempo de 
acesso do seu site. E para otimizá-lo, é fundamental 
saber como está o tempo de resposta dele. Para isto, 
existem várias ferramentas de análise para medir a 
performance, que serão tratadas posteriormente 
aqui.
Como criar um site bem otimizado?
23
Processador
O processador é o centro do computador. A CPU, ou 
UCP (Unidade Central de Processamento) é quem 
processa os dados, transformando-os em informa-
ção. A tecnologia de processadores avançou muitís-
simo desde os primeiros processadores. O conceito 
vem desde o século XIX, com Charles Babbage e sua 
Máquina Diferencial. Mas houve um grande impul-
so com o surgimento dos primeiros microproces-
sadores, sendo que o primeiro foi o Intel 4004, em 
1972. Hoje temos processadores de vários núcleos, 
capazes de executar diversas tarefas simultanea-
mente. A gerência dessas tarefas e dos núcleos do 
processador recai sobre o sistema operacional.
A hospedagem de um site é uma tarefa que requer 
muito mais uso dos dispositivos de entrada e saída 
(como discos rígidos e memória) do que o processa-
dor propriamente dito. Há pouco processamento e 
muito acesso aos discos rígidos, tanto para a gerên-
cia do site quanto para as requisições dos bancos de 
dados. Logo, a hospedagem de um site não requer 
muito uso do processador, se compararmos com a 
memória ou os discos rígidos.
No entanto, um processador lento impacta negati-
vamente na performance do servidor, e consequen-
temente, na performance do site. A maior parte das 
hospedagens de sites hoje em dia são compartilha-
das, o que significa que temos vários sites hospe-
dados no mesmo servidor. E todos esses sites re-
cebem requisições de acesso, que são gerenciadas, 
em última análise, pelo processador. Um servidor 
que recebe muitas requisições e faz muitos acessos 
aos bancos de dados, requer um processador mais 
rápido.
Quantidade de memória 
do servidor
O servidor, como qualquer computador, possui me-
mória RAM. Essa memória é aquela que é usada para 
o armazenamento dos programas (como os que ge-
renciam o seu site) e dos dados que compõem o seu 
site. A memória desse servidor pode influenciar na 
performance do seu site. 
Se o seu site é gerenciado pelo WordPress, saiba 
que ele tem um limite de memória para execução. 
Isto significa que cada site gerenciado por ele pode 
usar uma certa quantidade de memória, até um limi-
te estabelecido. Isto pode ser modificado, fazendo 
uma alteração no arquivo wp-config.php, do Wor-
dPress.
Também é possível que seja necessário aumentar o 
Como criar um site bem otimizado?
24
limite de memória usado pela linguagem PHP. O Wordpress é um Sistema Gerenciador de Conteúdos, 
escrito nessa linguagem. Logo, a edição deve ocorrer no arquivo php.ini.
Mas não é nada aconselhável ir mexendo nesses parâmetros antes de falar com o seu provedor de hospe-
dagem.
Outra maneira é simples, apesar de onerar: coloca-se mais bancos de memória noservidor, aumentando 
sua memória total. Normalmente, como não somos nós os donos dos servidores, e sim o provedor de hos-
pedagem, o que podemos fazer é sugerir à empresa que isto seja feito.
Discos rígidos
Os discos rígidos armazenam todos os dados e informações do servidor. Se o disco rígido (ou HD) não esti-
ver otimizado, o seu site terá uma perda de performance. Hoje em dia existem os HDD (Hard Disk Drive), 
os SSD (Solid State Drive) e os HDSD (discos híbridos). O SSD é mais eficiente em relação ao HDD: não 
tem partes móveis, é bem mais rápido do que um HDD, mas também é bem mais caro. 
Os discos híbridos são HDs que possuem uma memória Flash interna, de forma que os dados mais aces-
sados ficam nessa memória. Assim, conteúdos mais usados são acessados mais rapidamente. Esta foi uma 
maneira de melhorar o desempenho dos HDs sem ter tanto impacto no preço.
Se você deseja otimizar ao máximo, avalie qual tecnologia de disco rígido é usada no seu provedor de hos-
pedagem. Uma tecnologia melhorada impactará na performance de seu servidor.
Sistema operacional
O sistema operacional usado também influencia a performance. Como podemos ver até aqui, é todo um 
conjunto, não basta simplesmente alterar em um ponto ou dois, temos que levar tudo em conta. 
O sistema operacional mais usado em servidores Web é o GNU/Linux, nas suas diferentes distribuições. O 
Linux é um sistema operacional padrão Unix, é um software livre, tem o seu código aberto e está presente 
em inúmeras aplicações:
Como criar um site bem otimizado?
25
• Supercomputadores: todos os 500 supercomputadores mais rápidos do mundo usam Linux.
• Celulares: o sistema operacional Android tem 77% do mercado mundial de smartphones, e ele é um 
sistema baseado em Linux.
• Mainframes: o Linux detém cerca de 33% do mercado de sistemas operacionais para computadores de 
grande porte.
• Servidores web: o Linux detém aproximadamente 66,6% desse mercado.
• Dispositivos embarcados: 30% desse mercado está nas mãos do Linux.
• Desktops e laptops: o Linux, em suas variações, detém um mercado de 2%. O Windows detém 88% 
desse mercado.
Vemos que o “sistema do pinguim” (como o Linux é conhecido) é um vencedor. Apesar de perder no campo 
dos desktops, ele é vitorioso em todos os outros.
Uma das inúmeras vantagens do Linux é a sua capacidade de customização. Então, é possível alterar e 
customizar o sistema, de forma que ele se adeque melhor às suas necessidades. E um Linux otimizado fun-
ciona mais rápido, o que faz com que o tempo de acesso a um site caia.
Servidor Web
O servidor Web é o software que gerencia requisições feitas usando o protocolo HTTP (parte da arqui-
tetura TCP/IP), e as responde usando o mesmo protocolo. As requisições são feitas por clientes (na sua 
maioria, os navegadores Web, como Firefox, Chrome e outros), e o servidor é que responde. 
Essas respostas são páginas Web, compostas de documentos em HTML (a linguagem de marcação de 
páginas com hipertexto, usada para descrever a página que você verá), imagens, vídeos, sons, entre muitos 
outros. 
O software servidor Web mais usado no mundo todo é o Apache, que também é um software livre como o 
Como criar um site bem otimizado?
26
Linux. O Apache é responsável pela gerência de 41% dos sites ativos, segundo a pesquisa da Netcraft, para 
junho de 2018. Pode ser executado sobre servidores Windows, Linux ou outros sistemas operacionais.
Outro software servidor Web que tem crescido em popularidade é o Nginx, que também é software livre 
e é mais focado em performance. Ele é rápido, leve e tem no momento, 22% do mercado de sites ativos, se-
gundo a mesma pesquisa. O Nginx pode ser usado sob os sistemas operacionais Windows, Linux e outros, 
assim como o Apache.
A Microsoft tem também o seu servidor Web, o IIS (Internet Information Services). Este está presente em 
cerca de 7% dos sites ativos da Web (segundo a mesma pesquisa citada anteriormente), e é um software 
proprietário, sendo executado apenas sob o sistema operacional Windows.
O desempenho do servidor Web impacta diretamente no tempo de acesso do site. É ele que irá fornecer as 
páginas, receber as páginas processadas pelas linguagens de programação (como PHP, Python ou outras), 
repassar as requisições aos bancos de dados, entre muitas outras atribuições. Logo, um software servidor 
que seja eficiente, ajuda e muito na performance.
Algumas ferramentas de diagnóstico
Existem diversas ferramentas de diagnóstico para analisar o desempenho de um site. Veremos aqui algu-
mas delas.
Ferramentas dos navegadores
Os próprios navegadores contam com painéis de monitoramento. Não é preciso instalar nenhuma exten-
são no navegador para fazer uso desses recursos. Veremos então algumas dessas ferramentas:
• No Firefox, havia anteriormente o Firebug, uma extensão para o navegador da Fundação Mozilla que 
permitia analisar o código HTML, os scripts JavaScript, os arquivos CSS, entre outros. Hoje, o Firebug 
foi incorporado ao Firefox. Para acessar, basta procurar pela opção Developer. 
Como criar um site bem otimizado?
27
• No Google Chrome, temos o Chrome Developer Tools, já também embutido no navegador.
• No navegador Opera, temos o Dragonfly, que é uma ferramenta de depuração e de desenvolvimento 
já integrada.
• No Microsoft Edge, temos o Microsoft Edge Developer Tools. Este, em particular, está disponível como 
um aplicativo na Microsoft Store.
Extensões dos navegadores
Os painéis e ferramentas citadas acima são principalmente para depuração e desenvolvimento, não são 
especificamente focados em desempenho. Logo, é possível lançar mão de extensões, tanto para Mozilla 
Firefox quanto para o Google Chrome, com o objetivo de analisar o desempenho de um site.
Podemos então começar citando o YSlow. Esta extensão está disponível para Chrome, Firefox, Opera, 
Apple Safari e outros. Ela pode apresentar relatórios completos, mostrando problemas de performance, 
além de dicas para melhorá-las. Ela também pode classificar o site segundo algumas regras, além de apre-
sentar estatísticas de acesso. Ele é baseado nas regras de desempenho estabelecidas pelo portal Yahoo.
Já o PageSpeed era uma extensão desenvolvida pelo próprio Google, mas hoje em dia foi substituída por 
uma versão online, que iremos falar mais abaixo.
Sites
Existem sites que podem ser usados para fazer uma análise do desempenho do seu website. Vamos a al-
guns:
• O Google Analytics é um serviço gratuito, oferecido pelo Google, para levantar estatísticas de visi-
tação de um site. O mesmo pode ser usado para guardar estatísticas a respeito do desempenho do 
site. Isto pode ser útil para obter resultados de mais de uma fonte. Podemos então cruzar os dados do 
Google Analytics com outras fontes para efeitos de comparação.
Como criar um site bem otimizado?
28
• O Google Page Speed Insights é outro serviço gratuito oferecido pelo Google, cujo objetivo é a ava-
liação de desempenho de um site em geral. Logo, ele informa o desempenho real de uma página para 
computadores e dispositivos móveis (como smartphones e tablets). Ele ainda traz sugestões para apri-
moramento da página.
• O Google Webmaster Tools mostra informações sobre a performance do site em comparação com os 
outros sites indexados pelo Google. Logo, ele tem recursos para SEO (Search Engine Otimization, ou 
Otimização para Sites de Busca) e outros também, que ajudam você a melhorar o seu site para os seus 
usuários e para o Google.
• O GTMetrix é um site de análise, que investiga o site e faz recomendações sobre otimização da perfor-
mance. Com ele é possível agendar testes diários, semanais ou mensais; configurar alertas específicos 
para certas condições de um site (como queda no desempenho, por exemplo); analisar o mesmo site 
também para dispositivos móveis; gerar um vídeo com o carregamento da página para ver os gargalos 
de performance; entre outros.
• O Pingdom WebSite Speed Test é um site criado para avaliar o desempenhodo seu site. A partir de 
vários servidores espalhados pelo mundo, ele faz tentativas de acesso pra ver se a página está ou não 
fora do ar. Além disso, ele pode monitorar a performance do servidor e alertar se o site estiver fora por 
um certo tempo. Este é um serviço pago, com os 14 primeiros dias gratuitos.
• Outro site que pode ser usado para análise é o Test My Site. Esse site também pertence ao Google, 
mas seu foco é, a princípio, a medição do desempenho em dispositivos móveis. 
• O View Like Us é um site que exibe como um site é exibido em diferentes dispositivos: Computado-
res de mesa (e notebooks), smartphones e tablets, e em diferentes tamanhos e resoluções. É possível 
personalizar o tamanho dizendo qual será a resolução no qual o site será gerado. É uma ferramenta útil 
para pegar algum erro de layout da página antes da publicação.
• O WebPage Analyzer é mais uma ferramenta de teste de desempenho de sites. Em particular, esta é 
uma ferramenta que é muito simples de usar: basta colocar a URL da página na caixa de texto e a ferra-
menta calculará o tamanho da página, composição e tempo de acesso total, ainda exibindo os tempos 
de acesso para cada elemento, além de um resumo de cada tipo de componente. No final, ele traz um 
conjunto de sugestões para a otimização do seu site.
Como criar um site bem otimizado?
29
• Outra ferramenta online é o site WebPageTest.org, usado em diversas situações. Ele permite testar a 
navegação do site em diferentes navegadores, como do Internet Explorer 6 até o 10, Google Chrome 
e Mozilla Firefox; gera imagens, gráficos, vídeos comparativos para gerar as estatísticas usadas nessa 
apresentação. Ela permite testar do IE6 ao IE10, além de Chrome e Firefox. Ele faz o teste com nave-
gadores reais, em diferentes partes do mundo, com o objetivo de obter um resultado mais próximo do 
real; ele também permite que você escolha de onde você irá acessar o site, e com qual navegador; gera 
screenshots, gráficos, grava vídeos comparativos e provê uma análise com dicas de otimização.
O QUE A HOSTNET OFERECE?
 
A Hostnet, como provedor de hospedagem interessado no suces-
so dos seus clientes, implementa vários recursos com o objetivo de 
entregar o conteúdo com mais celeridade, usando menos largura de 
banda e com o menor tempo de acesso possível. A satisfação dos nos-
sos clientes é um dos nossos principais objetivos.
Veremos então algumas características dos planos oferecidos pela Hostnet.
Planos de hospedagem:
Fit (econômica)
O Plano Fit é uma solução na medida para quem quer economizar e vai colocar a mão na massa para criar 
o seu próprio site usando o construtor Webfácil ou HTML. 
Start Cloud
O plano Start Cloud é indicado para sites (como blogs ou lojas virtuais) que estão começando na Internet, 
Como criar um site bem otimizado?
30
possuem grande visitação, porém não consomem muitos recursos do servidor. Além do espaço em disco, 
banco de dados e tráfego ilimitado, é possível usar o Instalador de Aplicativos da Hostnet.
Em termos de otimização, o plano Start Cloud oferece o cache gerado pelo sistema de gerenciamento de 
conteúdo (como o Wordpress, por exemplo), assim como o cache gerado pelo processador da linguagem 
PHP (linguagem amplamente usada para a criação de softwares, como o Wordpress). 
Caso seja necessário, sugerimos que o cliente instale um plug-in de cache no CMS para aproveitar melhor 
os recursos, além de seguir os passos apresentados nesse e-book.
Premium Cloud
O plano Premium Cloud, em essência, é idêntico ao plano Start Cloud; a diferença entre ambos encontra-
-se no tipo de manutenção. Enquanto no plano Start Cloud temos uma manutenção básica, no plano Pre-
mium Cloud a manutenção é especializada para clientes sem conhecimento técnico ou que não querem se 
preocupar com atualização das plataformas e plug-ins.
Logo, nossa equipe técnica está preparada para prestar o devido suporte, inclusive na otimização do site, 
com a instalação de plug-ins, uso de caches, entre outros.
Private Cloud
Os planos Private Cloud seguem o modelo de VPS (Servidores Privados Virtuais). Um VPS é uma máquina 
virtual, gerenciada por um hipervisor, que pode ser devidamente configurada de acordo com as necessi-
dades do plano para o qual o cliente irá operar. Esta é uma solução mais econômica do que um servidor 
dedicado, por consumir uma fração dos recursos do segundo. Com isto, o custo cai sensivelmente. Ao 
mesmo tempo, o cliente tem plena liberdade de fazer o uso que quiser com o seu VPS, dentro dos limites 
estabelecidos.
Dessa forma, o cliente pode fazer quase tudo do seu jeito, mas com um custo menor do que se fosse uma 
hospedagem dedicada. O VPS é um servidor dedicado, hospedado em um ambiente compartilhado.
Então, os planos Private Cloud são planos que oferecem Servidores Privados Virtuais. São indicados para 
Como criar um site bem otimizado?
31
projetos de alto desempenho, que necessitam de flexibilidade para crescer, parametrização avançada e 
facilidade no gerenciamento. A Hostnet gerencia o servidor, e você gerencia seu site. Em plano Private (1 
a 6) temos uma quantidade de memória, processamento, tráfego mensal e espaço em disco disponível para 
site e para e-mail. Quanto maior o plano, mais recursos estarão disponíveis.
Finalmente, nessa categoria de planos, além de soluções como as apresentadas acima, a Hostnet oferece 
o nginx como proxy reverso e cache, com o objetivo de acelerar o acesso ao conteúdo. Oferecemos aos 
nossos clientes a melhor solução disponível no mercado para acelerar o acesso a conteúdos na Web. E isto 
não acelera só o desempenho do site, mas também economiza recursos para o cliente da Hostnet: graças 
ao nginx, o cliente consumirá menos recursos de CPU e memória do plano Private Cloud contratado.
CDN
A Hostnet mantém uma parceria comercial com a Cloudflare, que é uma empresa que é referência mun-
dial em fornecimento de serviços de CDN. A Hostnet é o primeiro provedor no Brasil e disponibilizar CDN 
para todos os seus clientes. O uso de uma CDN permite aumentar o desempenho e a segurança de nossos 
clientes. Todos os sites hospedados na Hostnet já utilizam a CDN por padrão, porém é possível fazer um 
upgrade no plano da CDN em caso de necessidade.
Ponto de Troca de Tráfego Brasileiro (PTT)
Os Pontos de Troca de Tráfego são concentradores (hubs) onde provedores podem conectar seus servi-
dores, facilitando o tráfego de informações. Estes PTTs garantem a conexão segura, rápida e confiável para 
os usuários.
Isto impacta diretamente no desempenho de um site: não basta termos um site otimizado, se o caminho 
até ele é lento e tortuoso. Quando mais rápido for o acesso, melhor. E a Hostnet, interessada em forne-
cer o melhor serviço para os seus clientes, tem seus servidores ligados aos principais PTTs da Internet 
brasileira. Dessa forma, teremos menos nós intermediários (hops) entre o cliente e o servidor onde está 
hospedado o site. Assim, o acesso aos sites torna-se mais rápido, pois o percurso é sensivelmente menor.
Como criar um site bem otimizado?
32
Servidores de DNS em Cluster
Os servidores de DNS da Hostnet operam em um sistema de cluster. Isto significa que um conjunto de ser-
vidores trabalha em grupo para realizar a tarefa de balancear a carga dos servidores para uma distribuição 
equilibrada no processamento dos dados. 
São dois conjuntos independentes com seis servidores em cada cluster. Eles operam nas regiões das Cos-
tas Leste e Oeste dos Estados Unidos, Europa e na região do Oceano Pacífico, na Ásia. Dessa forma, temos 
uma melhor distribuição no globo.
Assim, além de termos mais segurança, ganhamos em desempenho na resolução de nomes. O DNS é uma 
parte fundamental no acesso de um site: É ele que traduz o nome de domínio de um site em um endereço 
IP, que será usado pelo cliente para contatar o servidor, que tem esse endereço IP. E quanto mais rápido 
essa resolução acontecer, melhor.
Nunca esqueça do principalem um site, que é o conteúdo. Um site é relevante se tem conteúdo relevante. 
Adianta nada um site com desempenho admirável e um conteúdo dispensável: ele será um site rápido, mas 
irrelevante. Nunca desprezes este que é o mais importante de todos os fatores para o sucesso de um site. 
A otimização de sites é ao mesmo tempo arte e ciência: diversos parâmetros devem ser vistos e revistos, 
e muitos fatores influenciam no bom desempenho. Como vimos nesse e-book, há muitas possibilidades 
para que o devido refino possa ser feito. Os ganhos são claros, e compensam o esforço. 
Nossos votos de sucesso!
CONCLUSÃO
CRIE UM SITE OU UMA LOJA 
EM WORDPRESS
FALE COM UM 
DE NOSSOS ESPECIALISTAS 
Nós somos especialistas em soluções para a 
Internet e podemos te ajudar! 
LOJA PRONTA E SITE 
PRONTO
• DESIGN MODERNO
• FORMULÁRIO PARA CONTATO
• RESPONSIVO
• OTIMIZADO PARA O GOOGLE
Tenha um site ou uma loja sob medida 
para o seu negócio. 
A Hostnet possui unidades em diversas regiões do Brasil. Nossos franqueados 
estão habilitados a prestar uma assessoria digital completa, que vai desde a 
criação do site, infraestrutura de Internet (hospedagem + domínio), marketing 
digital, e-mail marketing e automação de marketing. 
Acesse o endereço e localize uma unidade especializada próximo de você: 
http://hostnet.com/unidades
Como criar um site bem otimizado?
34
REDAÇÃO
Ricardo Jurczyk Pinheiro
REVISÃO
Kauê Linden, Lisane Monteiro, Mabel Antunes
DIAGRAMAÇÃO 
Daniel Fernandez
IMAGENS
freepik.com
istockphoto.com
E-BOOK
COMO CRIAR UM SITE BEM OTIMIZADO
Mais e-books em
www.hostnet.com.br
REALIZAÇÃO