# 8 maneiras de melhorar a performance de um site

> Acelere seu site com 8 técnicas front-end comprovadas. Aprenda otimização de imagens, minificação de código e redução de requisições HTTP. Melhore agora!

URL: https://dpw.dev/miscelanea/8-maneiras-de-melhorar-a-performance-de-um-site/  
Publicado em: 2010-06-14  
Categoria: miscelanea  
Tags: performance  
Autor: Tárcio Zemel

Existem, literalmente, centenas de maneiras para **aumentar a performance de um site**. Os métodos variam e alguns, obviamente, são mais eficientes que outros. As três áreas principais que você pode trabalhar são: hardware (servidor web), otimização de scripts server-side (PHP, Python, Java, etc) e performance do front-end. Este artigo se concentra no terceiro ponto: **performance do front-end**.

> Artigo baseado em [10 Ways to Improve Your Web Page Performance](http://sixrevisions.com/web-development/10-ways-to-improve-your-web-page-performance/).

## Inspecione suas páginas para encontrar os culpados

É muito útil inspecionar suas página web para encontrar componentes desnecessários ou componentes que podem ser otimizados. Esse tipo de inspeção geralmente envolve uma ferramenta como o [Firebug](http://getfirebug.com/) (mas existem [outras ferramentas](http://sixrevisions.com/tools/faster_web_page/)) para determinar quais os componentes (imagens, arquivos CSS, documentos HTML, arquivos javascript, etc) estão sendo solicitados pelo usuário, quanto tempo levam para carregar e o quão grandes são (tamanho em KB). Regra geral, deve-se mantê-los tão pequenos quanto possível (até [25KB](http://developer.yahoo.com/performance/rules.html#under25) é uma boa meta).

A aba "Rede" do Firebug pode ajudá-lo a caçar os arquivos que "atolam" o site. No exemplo acima, tem-se uma visão geral de todos os componentes da página, incluindo: o que é, onde está, o quão grande é e quanto tempo demorou para carregar.

## Salve as imagens no formato correto

Se o site possui várias imagens, é essencial aprender sobre os diferentes formatos e qual é o ideal para cada imagem. Há três formatos comuns para imagens na web: JPG, GIF e PNG. Em geral, deve-se usar JPG para fotos realistas com gradações suaves e tons de cores (degradês) e GIF ou PNG para imagens com cores sólidas (tais como gráficos e logotipos).

Para mais informações a esse respeito, leia o artigo sobre [como otimizar imagens para web - guia de otimização de imagens](/miscelanea/como-otimizar-imagens-web-internet/).

## Minimize seu CSS e javascript

Minimização é o processo de remoção de caracteres desnecessários (tais como tabulações, espaços comentários do código fonte, etc) a partir do código fonte para **reduzir o tamanho do arquivo**. Por exemplo:

```scss
.classe {
color: #ffffff;
line-height: 20px;
font-size: 9px;
}

```

Pode ser "convertido" para:

```scss
.classe{color:#fff;line-height:20px;font-size:9px;}

```

E não se preocupe: não é preciso reformatar o código manualmente! Há uma infinidade de ferramentas gratuitas à disposição para minimizar arquivos CSS e javascript. Para CSS, é possível encontrar várias ferramentas no artigo sobre [ferramentas e recursos para desenvolvimento web](/indicacoes/ferramentas-e-recursos-para-desenvolvimento-web/); para javascript, algumas opções são [/packer/](http://dean.edwards.name/packer/), [JSMIN](http://www.crockford.com/javascript/jsmin.html "JSMIN, The JavaScript Minifier"), [YUI Compressor](http://developer.yahoo.com/yui/compressor/) e [JavaScript Code Improver](http://jcay.com/id-190119110113039.html). Lembre-se: uma boa _minify tool_ é aquela que permite reverter o processo de minimização.

## Combine arquivos CSS e javascript para fazer menos requisições HTTP

Para cada componente necessário para renderizar uma página web, é criada uma solicitação HTTP no servidor. Então, se você tiver cinco arquivos CSS para uma página, serão necessários, pelo menos, 5 requisições HTTP separadas. Ao combinar arquivos, é possível reduzir a sobrecarga de solicitações HTTP necessárias para gerar uma página web.

Confira o **recomendadíssimo** artigo de Niels Leenheer sobre como combinar arquivos CSS e JS usando PHP (pode ser adaptado para outras linguagens). [SitePoint](http://www.sitepoint.com/) discute um [método similar para "empacotar" CSS e javascript](http://www.sitepoint.com/blogs/2007/04/10/faster-page-loads-bundle-your-css-and-javascript/) - eles conseguiram reduzir o tempo de resposta em 76% em relação ao tempo original!

## Use sprites CSS

CSS Sprite é uma combinação de imagens menores em uma imagem grande. Para mostrar a imagem correta, é preciso ajustar os valores da propriedade CSS background-position. Combinando várias imagens desta forma, é possível reduzir os pedidos HTTP (e reduzir requisições HTTP é um importantíssimo passo rumo à **melhora de performance e desempenho de um site**).

É possível fazer Sprites CSS manualmente, mas há uma ferramenta online chamada [CSS Sprite Generator](http://www.connectedinternet.co.uk/2008/01/15/tweaking-your-sites-performance-to-the-max/) que dá a opção de fazer upload de imagens para serem combinados em um único sprite, gerando o código CSS (os valores de background-position) para renderizar as imagens.

## Use compressão server side para diminuir o tamanho dos arquivos

Fazendo uma analogia, compactar objetos da página via _server side_ é semelhante a zipar um arquivo grande para enviar por e-mail: você (servidor web) zipa um retrato grande da família (o componente da página) e envia por e-mail para seu amigo (o browser) que, por sua vez, descompacta o arquivo zip para ver a imagem. Os métodos de compressão mais comuns são **Deflate** e **gzip**.

Se o site está sendo executado em servidor próprio dedicado ou há um serviço de [VPS](http://pt.wikipedia.org/wiki/VPS) e a compactação não está ativada, confira este guia sobre [como instalar mod\_gzip no Apache](http://schroepl.net/projekte/mod_gzip/install.htm). Se não for o caso, entre em contato com seu servidor de hospedagem e peça instruções sobre como ativar a compactação server side.

## Evite CSS e javascript incorporado e inline

Por padrão, CSS externo e arquivos javascript são armazenados em _cache_ pelo browser do usuário. Se esse usuário sai do site, ainda sim ele possui o javascript e CSS em sua máquina; então, da próxima vez em que retornar ao site, não haverá necessidade de baixar esses arquivos novamente. Se há um monte de CSS e JavaScript no documento HTML (_inline_ ou _incorporado_), não é possível se valer do benefício de _cache_ do navegador. Portanto, sempre que possível, dê preferência ao uso de folhas de estilo e scripts externos.

## Utilize serviços terceirizados para seus componentes e recursos

Aliviar um pouco o site de componentes e recursos, utilizando serviços de terceiros, reduz enormemente o trabalho do seu servidor web. O princípio é que a "carga total" é compartilhada com outro(s) servidor(es).

É possível usar o [Feedburner](http://www.feedburner.com/fb/a/home) para gerenciar feeds, [Flickr](http://flickr.com/) para as imagens (apesar de algumas [implicações de uso](http://www.blogherald.com/2008/02/04/the-dangers-of-offloading-images/)), [Google AJAX Libraries API](http://code.google.com/apis/ajaxlibs/) para servir estruturas javascript populares (como Mootools, jQuery e Dojo), dentre outros.

E você, tem alguma dica de **como melhorar a performance de um site**?

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml