Como Criar Um Site Bem Otmizado

Como criar um site bem otimizado?
1
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
2
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
3
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.
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
TEMPO DE ACESSO
acessar sites que demoram minutos para serem
carregados ou acessar aqueles onde o conteú-
do está escondido debaixo de várias páginas de
Nossa intenção, neste material, é mostrar como
texto e botões inúteis. Um site com essas carac-
podemos ganhar tempo no carregamento de
terísticas fatalmente será abandonado pelos seus
um site. O que desejamos é diminuir o tempo de
usuários, tornando-o irrelevante.
acesso. O tempo de acesso é, literalmente, o tem-
po gasto para que a página e seus elementos re-
Também temos que lembrar do aumento do uso
lacionados (CSS, Javascript, vídeos, imagens, etc.)
de dispositivos móveis para a navegação Web.
sejam carregados e formatados pelo navegador.
Tablets e, principalmente, smartphones são cada
Logo, quanto menor o tempo de acesso, maior
vez mais usados para acesso à rede. Temos aí mais
será a velocidade de carregamento.
um bom motivo para pensar em otimizar o nosso
site para que ele ofereça uma boa experiência
Isto é inclusive prejudicial para o posicionamento
para o usuário, tanto em usabilidade quanto em
do site em rankings de buscadores. Por exemplo,
velocidade. Um usuário satisfeito é um usuário
na classificação feita pelo Google, a velocidade
que retorna ao site e o promove gratuitamente,
de carregamento é muito importante: o Google
comentando sobre a qualidade do seu serviço, e
gera índices das páginas do site, e se ele levar
sobre o seu acesso rápido.
muito tempo, indexará menos páginas. Logo, um
Finalmente, pode soar como exagero, mas os mi-
website que é lento para carregar não prejudica
crossegundos economizados fazem diferença no
somente a experiência do usuário, mas também
tráfego do site: quando mais rápido, maior será o
prejudica a sua posição nos resultados dos sites
tráfego.
de busca.
5
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
6
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
7
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,
8
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.
9
Outro muito conhecido é o WP Super Cache. Ele

• Alguns plugins tem integração com serviços de produz arquivos HTML estáticos, a partir do con-
CDN, o que permite que o desempenho seja teúdo gerenciado pelo CMS. Logo, quando o usuá-
maior, assim como um desejável aumento em rio acessar o site, ele receberá uma página HTML
segurança. já formatada e preparada para ser aberta pelo na-
vegador. Este plugin também é muito conhecido e
• E é necessário que estatísticas sejam feitas, usado.
para que saibamos o ganho que tivemos no de-
sempenho do nosso site, e onde podemos mexer O Comet Cache é um plugin que faz um cache do
para obtermos melhor ganho. 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
Vamos então falar sobre alguns plugins: 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;
Plugins de cache para o pré-carregamento para o DNS, entre outras carac-

terísticas. Ele tem uma versão paga, com caracterís-
WordPress ticas exclusivas.
O primeiro deles é o W3 Total Cache. Este plugin Não podemos deixar de citar o WP Rocket. Este
tem diversos recursos: cache do navegador, cache plugin também funciona como um cache para o seu
da página, minificação, integração com serviços de site, de forma sofisticada: segundo os desenvolve-
CDN, entre outros. Este é um plugin muito conheci- dores, eles empregam 80% das boas práticas para
do e respeitado. performance na Web de forma automática. Ele faz
cache das páginas e dos seus conteúdos; faz o pré-
10
-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
11
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: primeiro diminua 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.
12
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.
13
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;
14
• 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; tanto para serem executadas no computador quan-
to online, para que seja possível reduzir o número
• WebP é um novo formato de imagem proposto de cores usadas na imagem e assim reduzir seu ta-
pelo Google, que é feito e pensado para websi- manho.
tes.
É possível fazer isto usando um software para edi-
Existem diferenças. Por exemplo, tanto PNG quan- tar as imagens, como Adobe Photoshop, Gimp, Kri-
to GIF mantém a fidelidade da imagem (principal- ta ou outra ferramenta. Mas existem ferramentas
mente quanto a cores), o que o formato JPEG não específicas, que facilitam o nosso trabalho. Uma de-
mantém (afinal, ele é um formato de compressão las é o Smush It. Ele é uma extensão para o navega-
com perda). O formato PNG suporta transparência dor Firefox que faz a ponte com o site e automatiza
com canal alpha, e tem 2 “subformatos”. Em um, o o processo.
máximo de cores suportadas é 256 (8 bits). Este é o Outra opção é o site ImageOptim, que contém vá-
PNG8. No outro, 16.777.216 cores (24 bits), que é rias ferramentas para diferentes sistemas operacio-
o PNG24. Pode ser interessante converter as ima- nais (Linux, Mac OS X e Windows) que podem fazer
gens do PNG24 para o PNG8, e usar JPEG quando o serviço de otimização das imagens para você. O
é mais vantajoso em termos de tamanho. ImageOptim também tem um serviço online e pago,
para otimização de imagens.
Softwares e serviços Ainda podemos citar o site JPEGmini, que contém

algoritmos avançados que podem diminuir a qua-
disponíveis na Web lidade das imagens no formato JPEG, mesmo sem
perder as características da percepção humana. O
Bem, depois de discorrermos sobre imagens, tere- resultado são imagens visualmente idênticas, mas
mos que manipulá-las para economizar espaço. A com tamanho muito menor – em alguns casos, me-
boa notícia é que existem diversas ferramentas, nos da metade.
15
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.
16
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.
17
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:
18
• 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.
19
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.
20
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.
servidor é preparado para receber um certo nú-

Uma rede CDN é composta de servidores espa-
mero de requisições em um instante de tempo.
lhados geograficamente por toda a Terra, com o
Mas se ele recebe um número de requisições
conteúdo a ser acessado sendo replicado e dis-
muito maior, os sites hospedados nesse servidor
tribuído por todas essas máquinas. O cliente é
tornam-se indisponíveis, pois toda a largura de
direcionado para o servidor que contém aquele
banda está sendo consumida por esse ataque.
conteúdo e tem condições de respondê-lo mais
rapidamente. A ideia é que o cliente receba o
Quando estamos usando uma CDN, esse núme-
conteúdo do servidor mais próximo dele. Desta
ro anormal de requisições são distribuídos pelos
forma, temos menos gasto com largura de banda
servidores que compõem a CDN e contém cópias
e o acesso aos conteúdos do site será mais rápido.
do site que está sofrendo ataque. Assim, o ataque
é diluído por vários servidores, o que minimiza os
As CDNs são usadas principalmente para distri-
efeitos desse tipo de ameaça. Além disso, dificil-
buir conteúdo que gera um grande consumo de
mente o ataque atingirá o servidor original, que
banda passante. O conteúdo é inicialmente re-
contém os dados originalmente armazenados.
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 Outras otimizações, de
cliente, economizando tempo e dinheiro.
hardware e software
Uma outra vantagem clara das CDNs é a segu-
Falamos muito a respeito de software, mas faz-
rança contra ataques do tipo DDoS (Negação de
-se necessário tratarmos de hardware também, e
Serviço Distribuída). Este tipo de ataque é carac-
de outras camadas, como o próprio servidor Web
terizado por um número de requisições recebi-
adotado. Vamos então discorrer sobre esses pon-
das por um servidor muito acima do limite. Todo
tos.
21
Tipo de servidor • 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
O tipo de servidor faz diferença no desempenho do
fosse uma hospedagem dedicada. Ele funciona
site. Existem três tipos básicos:
como se fosse um servidor dedicado, mas hos-
pedado em um ambiente compartilhado.
• Hospedagem compartilhada: este é o tipo mais
comum, onde muitos sites compartilham o mes-
• Hospedagem dedicada: sem sombra de dúvidas
mo servidor. A relação custo-benefício é muito
este é o serviço mais caro a ser oferecido, pois
atraente, pois o custo do servidor é rateado por
o servidor físico é totalmente dedicado a você.
todos os clientes com sites hospedados nessa
Além de contratar o servidor (que está instala-
mesma máquina.
do em um datacenter), é necessário saber que é
preciso alguémpara gerenciar o mesmo. Isto re-
• Hospedagem na nuvem (cloud): esta é uma
quer um profissional qualificado, principalmen-
hospedagem compartilhada com algumas van-
te por causa de questões como segurança.
tagens. Como os computadores estão inter-
ligados, e temos o que chamamos de imagem
Cada tipo de servidor tem suas vantagens e desvan-
única do sistema - quem vê o serviço rodando
tagens. Por isso, cada um pode afetar o tempo de
estando do lado “de fora” da rede, não percebe
acesso do seu site. E para otimizá-lo, é fundamental
quantos servidores estão envolvidos, ou quais
saber como está o tempo de resposta dele. Para isto,
deles deram defeito. Para os usuários, é visto
existem várias ferramentas de análise para medir a
como se fosse apenas um único servidor. É certo
performance, que serão tratadas posteriormente
que várias dessas máquinas falham, requerem
aqui.
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
22
Processador que recebe muitas requisições e faz muitos acessos

aos bancos de dados, requer um processador mais
rápido.
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.
Quantidade de memória
A hospedagem de um site é uma tarefa que requer
muito mais uso dos dispositivos de entrada e saída
do servidor
(como discos rígidos e memória) do que o processa-
O servidor, como qualquer computador, possui me-
dor propriamente dito. Há pouco processamento e
mória RAM. Essa memória é aquela que é usada para
muito acesso aos discos rígidos, tanto para a gerên-
o armazenamento dos programas (como os que ge-
cia do site quanto para as requisições dos bancos de
renciam o seu site) e dos dados que compõem o seu
dados. Logo, a hospedagem de um site não requer
site. A memória desse servidor pode influenciar na
muito uso do processador, se compararmos com a
performance do seu site.
memória ou os discos rígidos.
No entanto, um processador lento impacta negati-
Se o seu site é gerenciado pelo WordPress, saiba
vamente na performance do servidor, e consequen-
que ele tem um limite de memória para execução.
temente, na performance do site. A maior parte das
Isto significa que cada site gerenciado por ele pode
hospedagens de sites hoje em dia são compartilha-
usar uma certa quantidade de memória, até um limi-
das, o que significa que temos vários sites hospe-
te estabelecido. Isto pode ser modificado, fazendo
dados no mesmo servidor. E todos esses sites re-
uma alteração no arquivo wp-config.php, do Wor-
cebem requisições de acesso, que são gerenciadas,
dPress.
em última análise, pelo processador. Um servidor
Também é possível que seja necessário aumentar o
23
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 no servidor, 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:
24
• 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
25
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.
26
• 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.
27
• 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 desempenho do 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.
28
• 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,
29
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
30
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.
31
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.
CONCLUSÃO
Nunca esqueça do principal em 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!

32
CRIE UM SITE OU UMA LOJA
EM WORDPRESS
Nós somos especialistas em soluções para a
Internet e podemos te ajudar!
LOJA PRONTA E SITE

PRONTO
Tenha um site ou uma loja sob medida
para o seu negócio.
• DESIGN MODERNO
• FORMULÁRIO PARA CONTATO
• RESPONSIVO
• OTIMIZADO PARA O GOOGLE
FALE COM UM
DE NOSSOS ESPECIALISTAS
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
REALIZAÇÃO
E-BOOK
COMO CRIAR UM SITE BEM OTIMIZADO
REDAÇÃO
Ricardo Jurczyk Pinheiro
REVISÃO
Kauê Linden, Lisane Monteiro, Mabel Antunes
DIAGRAMAÇÃO
Daniel Fernandez
IMAGENS
freepik.com
istockphoto.com
Mais e-books em
www.hostnet.com.br
34

Como Criar Um Site Bem Otmizado

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Como Criar Um Site Bem Otmizado

Enviado por

Direitos autorais:

Formatos disponíveis

Como criar um site bem otimizado?

POR QUE OTIMIZAR

Como é feita a medição?

Alguns números a respeito

gera uma queda de 9% no tráfego;

• A Microsoft mostrou que 2s a mais de latência no Bing diminuíram o faturamento em 4,3%;

O QUE É POSSÍVEL FAZER A RESPEITO?

Técnicas empregadas por plugins de cache do

Outro muito conhecido é o WP Super Cache. Ele

O LiteSpeed Cache tem por objetivo ser uma solu-

Plugins de cache para o pré-carregamento para o DNS, entre outras carac-

Outros fatores que podem melhorar o

Diminuição no tamanho das requisições feitas

Compressão na transmissão de dados

Redução do tamanho do conteúdo (minificação)

JavaScript: temos o Google Closure Compiler (criação da própria Google) e o UglifyJS2.

CSS: podemos indicar o Less.js, feito em JavaScript.

Imagens: otimização, redimensionamento e formato

Remoção de conteúdo desnecessário

Transformações na imagem – Qualidade

Transformações na imagem – Resolução

Transformações na imagem - Cores

Uso de outros formatos de imagens

• O formato PNG é usado para variações discre-

• O formato GIF é antigo, e foi suplantado pelo

Softwares e serviços Ainda podemos citar o site JPEGmini, que contém

Ajustes no código HTML

Ordem no código da página

Por que usar proxies reversos?

• Configurações no servidor Web – alguns plugins de cache necessitam de configurações específicas no

servidor é preparado para receber um certo nú-

Tipo de servidor • um sistema físico. Então, o VPS é um computa-

• Servidor Privado Virtual (VPS): aqui, o cliente

Processador que recebe muitas requisições e faz muitos acessos

• Supercomputadores: todos os 500 supercomputadores mais rápidos do mundo usam Linux.

• Servidores web: o Linux detém aproximadamente 66,6% desse mercado.

• Dispositivos embarcados: 30% desse mercado está nas mãos do Linux.

Algumas ferramentas de diagnóstico

Ferramentas dos navegadores

• 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

Extensões dos navegadores

O QUE A HOSTNET OFERECE?

A Hostnet, como provedor de hospedagem interessado no suces-

Veremos então algumas características dos planos oferecidos pela Hostnet.

Ponto de Troca de Tráfego Brasileiro (PTT)

Servidores de DNS em Cluster

Nossos votos de sucesso!

LOJA PRONTA E SITE

• FORMULÁRIO PARA CONTATO

• OTIMIZADO PARA O GOOGLE

A Hostnet possui unidades em diversas regiões do Brasil. Nossos franqueados

Acesse o endereço e localize uma unidade especializada próximo de você:

COMO CRIAR UM SITE BEM OTIMIZADO

Você também pode gostar