14 Regras Para Melhorar O Desempenho Do Seu Website

desempenho do seu website

14 Regras Para Melhorar O Desempenho Do Seu Website

Neste artigo vamos discutir os principais aspectos a ter em conta quando falamos em melhorar o desempenho de websites. A maior parte destes aspectos centram-se principalmente no trabalho de Steve Souders, um web-guru com um currículo invejável.

Steve Souders trabalhou em grandes empresas como Yahoo e Google. No final deste artigo, o leitor será capaz de compreender a diferença entre fazer um site bonito inquietantemente lento e não-responsivo e um site bonito, mas que também é rápido e escalável. Poderá encontrar mais informações sobre a maior parte dos aspectos aqui abordados em http://stevesouders.com/hpws.

Apesar da otimização do back-end ser crítica por razões de diminuição de custos de hardware e redução dos consumos de energia, quando uma página web precisa de otimização em termos de tempo de resposta, a melhor solução é melhorar o front-end. Normalmente, numa página web tradicional cerca de 80-90% do tempo de carregamento é utilizado para o processamento da página a partir do código HTML fornecido. Ao aperceber-se disto, Steve Souders desenvolveu um conjunto de 14 regras. Quando aplicadas a sites normais, estas 14 regras têm o poder de reduzir os tempos de carregamento em cerca de 25-50%.

A seguinte imagem apresenta o tempo de carregamento dos componentes de um conhecido website português, www.rtp.pt.

melhorar o desempenho do seu website

 

Como podemos ver, o tempo de carregamento do código HTML é apenas cerca de 10%. Todo o tempo restante é usado no carregamento do restante conteúdo, bem como na renderização da informação e na execução de scripts.


Melhorando o desempenho do seu website

Se não tomar as devidas precauções quando construir o seu site, poderá acabar por fornecer um serviço lento.

Como tempo é dinheiro, oferecer um serviço lento, não é apenas aborrecido para os visitantes, mas vai fazê-lo perder assinantes, potenciais clientes e consequentemente, dinheiro.

Quando uma pessoa entra no site pela primeira vez, os primeiros segundos são críticos para captar a atenção e convencê-la a ficar mais um pouco ou a voltar no futuro.

Se o seu site demora muito tempo a carregar, a maioria das pessoas desiste e abandona-o. Mesmo antes de ter tido oportunidade de lhes mostrar o valor do seu serviço. “Um atraso de um segundo pode resultar em 7% menos conversões, 11% menos visualizações de páginas, ou mesmo uma diminuição de 16 por cento na satisfação do cliente" [2].

Para melhorar o desempenho do seu website e otimizar a experiência do utilizador, fique atento às seguintes 14 regras.

 

Regra 1 - Fazer menos pedidos HTTP

Esta regra é simples e direta. Deve fazer menos pedidos HTTP. Não deve comprometer o seu conceito base. No entanto, também não deve perder desempenho devido a uma má concepção de projeto.

Existem várias soluções para este problema, entre elas o uso de mapas de imagem ou Sprites CSS que lhe permitem associar vários urls com uma única imagem. Desta forma, não vai precisar fazer um pedido para cada pequena imagem que deseja usar no seu website. Em vez disso, será capaz de mapeá-los a partir de uma folha de imagem global.

A utilização de imagens em linha é uma boa prática: utilizar o esquema de URI de dados para incorporar imagens directamente dentro de páginas da web. URIs de dados são projetados para incorporar itens de dados pequenos como dados "imediatos", como se eles fossem referenciados externamente. Usando imagens em linha poupa pedidos HTTP a mais para objectos referenciados externamente.

Finalmente, também é importante combinar scripts e folhas de estilo. Ao combinar JS e CSS num único arquivo, o número de solicitações HTTP é reduzido e o tempo de resposta ao usuário final é aumenta significativamente.

 

Regra 2 - Usar uma Content Delivery Network

As Content Delivery Networks, como Akamai, estão disponíveis em qualquer parte do mundo. Este tipo de tecnologia tem revolucionado a maneira como a internet funciona. Ao invés de hospedar o seu site num único servidor, quando utiliza uma Content Delivery Network, pode distribuir os seus arquivos de conteúdo e carga entre vários sistemas, proporcionando bibliotecas JavaScript, HTML, CSS, tipos de letra e outros ativos da maneira mais rápida e confiável para todos os utilizadores.

Existem várias razões para dar preferência ao uso de Content Delivery Networks, a velocidade do site é apenas uma deles. Estas redes são na maioria das vezes propulsoras de desempenho. No entanto, serão mais eficazes quando se trata de um site público com algum tipo de conteúdo estático.

Quando uma solicitação é feita pelo usuário, o servidor mais próximo desse usuário é determinado dinamicamente para utilização, otimizando assim a velocidade de entrega. Em relação às desvantagens quando se lida com esta tecnologia, o principal problema é o elevado custo e o aumento da complexidade do processo de implementação do website.

 

Regra 3 - Adicionar um cabeçalho de expiração

Outro truque simples para melhorar o desempenho do seu website é simplesmente adicionar um cabeçalho de expiração.

Cabeçalhos de expiração dizem ao browser se ele deve carregar o conteúdo do servidor a partir da internet ou a partir da sua cache. Com uma implementação de tempo de expiração distante para os conteúdos, o browser dará preferência pelo conteúdo presente na cache, desta forma reduzindo o número de pedidos e, consequentemente, o tempo de carregamento da página [3].

 

Regra 4 - Componentes Gzip

Quase todos os sites modernos implementam algum tipo de compressão. Isso é útil quando aplicado a texto ( HTML, JavaScript, JS ), uma vez que as imagens ( normalmente PNG ) já estão comprimidas. O resultado da compressão é uma notável poupança de largura de banda. Deste modo o site torna-se mais responsivo.
Utilizar compressão aumenta ligeiramente o uso da CPU, no entanto, este não é um grande problema, uma vez que o ponto mais fraco é, na maioria das vezes, a fraca conexão à internet e não a falta de poder de processamento.

“The reason gzip works so well in a web environment is because CSS files and HTML files use a lot of repeated text and have loads of whitespace. Since gzip compresses common strings, this can reduce the size of pages and style sheets by up to 70%!“[4]

 

Regra 5 - Colocar folhas de estilo no topo

Deve sempre colocar CSS na parte superior da página. Colocar folhas de estilo no cabeçalho do documento não só melhora os tempos de carregamento da página, também evita que o browser tenha de re-desenhar a página quando as folhas de estilo são adquiridas. Alguns browsers bloqueiam rendering, a fim de evitar ter de desenhar os elementos da página se os seus estilos sofreram alterações. Isto pode levar a que o utilizador veja uma página em branco.

 

Regra 6 - Colocar scripts na parte inferior da página

Os scripts devem ser colocados na parte inferior da página, de forma a garantir que outros recursos não bloqueiem até que o script seja executado. Quando o navegador estiver a executar um script irá bloquear downloads paralelos, mesmo se eles estiverem disponíveis num host diferente.

 

Regra 7 - Evitar expressões CSS

Esta regra costumava ser uma regra importante, no entanto os browsers modernos já não permitem este tipo de expressões. Apesar de terem alguns beneficios, as expressões CSS tinham um grande problema: eram avaliadas com muito mais frequência do que a maioria de nós pensa. As expressões CCS eram avaliadas não apenas quando a página era renderizada ou redimensionada, mas também quando era deslizada, ou mesmo se o rato fosse movido.

 

Regra 8 - Utilizar JavaScript e CSS de fontes externas

Código CSS e JS in-line é mais agradável visualmente e tem a vantagem de reduzir o número de solicitações HTTP. No entanto, quando é carregado a partir de fontes externas tem a vantagem de ser armazenado em cache e não precisa de ser carregado de cada vez que o utilizador recarregar a página. É importante considerar o threshold entre ter um número menor de pedidos e ter código que pode ser armazenado em cache de forma a tirar o máximo partido do website. No entanto, a maior parte das vezes é melhor ter alguns pedidos adicionais, a fim de tornar o conteúdo suceptível de ser armazenado em cache.

 

Regra 9 - Reduzir Pesquisas de DNS

O Domain Name System mapeia nomes de host para endereços IP. Quando digita uma URL no seu navegador, um servidor DNS contactado pelo browser devolve o endereço IP do respectivo hostname. Como qualquer serviço, DNS tem um preço em termos de tempo.

O browser não consegue ir buscar qualquer informação ao site até que a pesquisa de DNS esteja concluída.
Para qualquer recurso a ser transferido na sua página, o browser tem de procurar o IP correto. É necessária pelo menos uma solicitação para cada domínio na sua página web, pelo que deverá tentar utilizar poucos hostnames diferentes ou ter conteúdo espalhado por diversos servidores.

 

Regra 10 - Minimizar JavaScript

Há uma série de razões pelas quais comprimir os seus arquivos javascript é uma boa ideia.
O JS comprimido tem tempos de carregamento mais pequenos para os usuários e reduz o consumo de largura de banda do seu site. Para além disso, também estará a reduzir o número de pedidos HTTP ao servidor se combinar vários arquivos JavaScript num único arquivo compactado, reduzindo assim a carga do servidor e permitindo que mais visitantes acedam ao seu site.

Comentários e espaços em branco não são necessários para o funcionamento do javascript, removê-los irá reduzir o tamanho do arquivo e acelerar os tempos de execução de script.

Arquivos javascript comprimidos são ideais para ambientes de produção , já que normalmente reduzem o tamanho do arquivo em 30-80% . A maior parte da redução de tamanho do arquivo é conseguido através da remoção de comentários e espaços em branco, extras que não são necessários para os visitantes.

 

Regra 11 - Evitar redirecionamentos

É importante evitar redirecionamentos desnecessários. Eles desencadeiam um ciclo de pedido-resposta HTTP adicional e atrasam o rendering da página. Considerando o melhor cenário, cada redirecionamento irá adicionar uma única ida e volta, e, no pior dos casos, pode resultar em vários pedidos-resposta adicionais para executar a pesquisa de DNS, handshake TCP e negociação TLS além do ciclo de pedido-resposta HTTP adicional. Obviamente alguns redirecionamentos são necessários, mas tente evitar a sua utilização excessiva e livre-se dos desnecessários.

 

Regra 12 - Remover Scripts duplicados

Regra simples, directa e eficaz. javascript e CSS duplicados criam pedidos adicionais e fazem o browser perder tempo em operações inúteis que serão avaliadas multiplas vezes. Se os scripts estão duplicados, não trazem nada de benéfico ao seu website e acabam por limitar o desempenho. Livre-se deles.

 

Regra 13 - Configurar ETags

ETags são identificadores únicos atribuídos a uma versão específica de um determinado recurso num servidor web. ETags são um dos vários mecanismos que o protocolo HTTP fornece para a validação da cache Web, permitindo que um cliente possa fazer solicitações condicionais.

O principal problema das ETags é que elas podem não coincidir quando um browser recebe o componente original de um servidor e depois faz um pedido GET condicional que vai para um servidor diferente. Isso é comum em sites que usam um clustering. Para sites em que o conteúdo está distribuido por vários servidores, ETags podem causar recursos idênticos para não sejam armazenados em cache, degradando o desempenho. Deve configurá-las adequadamente, ou mesmo considerar livrar-se delas.

 

Regra 14 - Permitir que AJAX seja armazenado em cache

Tecnologias como o AJAX têm-nos fornecido algumas das aplicações web e recursos mais impressionantes. Elas fornecem um feedback confiável para o usuário por causa da solicitação de informações de forma assíncrona a partir do servidor back-end.

Mas AJAX não garante que o usuário não precisará esperar o JavaScript assíncrono e respostas XML para retornar e, por vezes, este tempo de espera pode ser enorme.

É muito importante para otimizar AJAX solicitação/respostas , mas também para armazená-lo em cache. Desta forma, não será necessário pedir a mesma coisa ao servidor repetidas vezes.

 

Conclusões

Apesar de simples, quando combinadas, estas regras têm o poder de acelerar consideravelmente o tempo de carregamento de um website. Algumas delas são muito fáceis de implementar e trazem grandes melhorias em termos de tempo de resposta, outras podem levar a horas de luta e podem acabar por sair caras e não trazer um aumento consistente em termos de desempenho. Cabe a si a procurar o equilíbrio entre custo e desempenho.

Agora vá em frente e utilize estas regras para melhorar o desempenho do seu website!

 

Referências:

[1] - High Performance Web Sites: Essential Knowledge for Front-End Engineers, Steve Souders, September 18, 2007

[2] - How Your Website Loses 7% of Potential Conversions, in https://www.clickz.com/clickz/column/2097323/website-loses-potential-conversions, 14 de April 2016.

[3] - YSlow: Add Expires headers, in https://gtmetrix.com/add-expires-headers.html, 14 de April 2016.

[4] - Enable gzip compression, in: https://gtmetrix.com/enable-gzip-compression.html, 14 de April 2016.

Outras:

15 Easy Ways To Speed Up WordPress, in http://www.sparringmind.com/speed-up-wordpress, disponível em 14 de April 2016.

7 Reasons to use a Content Delivery Network, in http://www.sitepoint.com/7-reasons-to-use-a-cdn, disponível em 14 de April 2016.

5 Benefits of a CDN, in https://www.cdnetworks.com/blog/5-benefits-of-a-cdn, disponível em 14 de April 2016.

Analyze your site’s speed and make it faster, https://gtmetrix.com, disponível em 14 de April 2016.

Etags revisited, http://www.websiteoptimization.com/speed/tweak/etags-revisited, disponível em 14 de April 2016.

Web Site Optimization: Maximum Website Performance, http://www.websiteoptimization.com, disponível em 14 de April 2016.