Desenvolvimento

5 set, 2011

Acelere o carregamento de páginas: técnicas incomuns de aumento de velocidade de sites – Parte 04

Publicidade

Artigo traduzido com permissão do autor, Manuel Lemos: Accelerate Web Pages Automatically using Google Mod_PageSpeed: Unusual Site Speedup Techniques Part 4

***

Este artigo é o último da série que trata de técnicas não usuais para o aumento de velocidade de sites. Os outros artigos podem ser
acessados aqui, aqui e aqui.

Introdução

Se existe uma empresa que sempre foi obcecadacom a velocidade do acesso a páginas web, essa empresa é o Google.

O mecanismo de busca de páginas do Google foi simplesdesde o início. Diferente de seus competidores, as páginas de busca do Google
não tinham propaganda ou nenhum outro tipo de decoração desnecessária.

Muitos anos atrás, Marissa Mayer, a vice-presidente doGoogle para produtos de busca e experiência do usuário, explicou que as
mudanças nos aspectos dos resultados das páginas de busca do Google resultaram
em uma queda significante no número de usuários que esperavam pelo resultado.

A
necessidade de velocidade do Google

Ao longo dotempo, o Google demonstrou uma grande obsessão em otimizar a velocidade no
fornecimento das páginas do seu site, uma vez que isso afeta diretamente a
receita de seu negócio.

Recentemente, a empresa investiu em encorajar osdesenvolvedores de sites a deixar seus sites mais rápidos também. Por exemplo,
no ano passado, o Google anunciou que a velocidade do site se tornou um dos fatores que influenciavam o
ranking das páginas listadas nos resultados de sua busca.

Quanta velocidade de fato influenciaria osresultados? Não temos ideia. Mas só o fato de eles terem feito esse anúncio
motivou muitos desenvolvedores de site a focar em otimizar suas páginas web.

Ironicamente, dois dos fatores mais importantes queatrasam o carregamento das páginas é o uso do Google Analytics e do Google
AdSense. Parece que o departamento de busca do Google se esqueceu de avisar aos
departamentos do Analytics e do AdSense antes de fazer tal anúncio. As pessoas
de busca do Google definiram uma nova regra que desencoraja o uso do Analytics e
do AdSense.

Na verdade, paraser preciso, alguns meses antes do anúncio, o Google Analytics lançou uma versão assíncrona das tags HTML, em que você precisa inserir suas páginas para rastrear os
visitantes do seu site. Eles anunciaram isso apenas no seu blog, nem o Google
parecia ter notado a mudança. De qualquer maneira, a razão pela qual o Google
quer encorajar os desenvolvedores a otimizar seu site não é evidente, uma vez
que a velocidade de outros sites geralmente não afeta a receita do Google,
pelo menos não necessariamente.

Meu palpite é que o Google está preocupado em deixara experiência web melhor para os usuários em geral. Deixar a web melhor
provavelmente irá motivar os usuários a se tornarem mais interessados em
aplicações web em geral (incluindo as aplicações web pagas do Google), como uma
alternativa para as aplicações tradicionais que não são web.

Extensão
PageSpeed do Firefox

Uma das iniciativas na qual o Google investiu para ajudaros desenvolvedores web a deixarem seus sites mais rápidos foi o Page Speed.

Basicamente o Page Speed é uma extensão paraFirefox que é capaz de avaliar uma página web carregada para determinar
aspectos que podem ser modificados com o intuito de melhorar a sua velocidade
de carregamento. 

O Page Speed não roda sozinho. É uma extensão da extensão Firebug do Firefox. Na verdade, o Page Speed não é uma ideiaoriginal. É bem parecido com o YSlow, que também é uma extensão do
Firefox. Ambos são extensões do Firebug para executar testes de
performance e fazer recomendações sobre aspectos das páginas que podem ser
melhorados.

O YSlow analiza o pedido atual da página em váriosaspectos e dá uma nota para sua página que pode ir de A (melhor) a F (pior). Ele analisa JavaScript, CSS, imagens, conteúdo recuperado, pedidos
HTTP do servidor e cookies da página.

O Page Speed também analisa os pedidos da sua páginae dá uma nota de 0% (pior) a 100% (melhor). Ele também dá conselhos, da mesma
maneira que o YSlow, mas os agrupa de uma maneira diferente.

MóduloMod_PageSpeed para Apache

O YSlow e o Page
Speed são ótimas extensões que todo desenvolvedor web deveria ter em mãos. Eles
ajudam a guiar os esforços que são necessários para otimizar suas páginas web e
as deixar mais rápidas. No entanto, eles necessitam de um bom conhecimento
técnico e um certo tempo para mudar o código do seu site para oferecer páginas
mais velozes.

Esse é o ponto em que acredito que o Mod_PageSpeed pode te ajudara economizar tempo e eventualmente diminuir a barreira do conhecimento técnico
necessário para colocar os esforços de otimização em prática.

Basicamente o Mod_PageSpeed é um módulo para oservidor web Apache 2.2. Ele consegue analisar automaticamente cada página que
é oferecida, e executar algumas das otimizações recomendadas na hora.

Isso significa que em vez de ter que mudar aspáginas do seu site ou o código dos seus scripts, você deve apenas instalar
essa extensão do servidor web e ele irá fazer todas as mudanças necessárias nos
headers de resposta HTML, CSS, JavaScript e HTTP para disponibilizar suas páginas de uma maneira otimizada.

Seria quase o mesmo de mudar de fato o código do seusite para executar essa otimização, exceto que você não precisa mudar nada no
seu código.
Digo que é quase o mesmo porque, na verdade, o
Mod_PageSpeed ainda não executa todos os tipos de otimização sugeridos pelo
Page Speed. Vou fornecer uma visão geral sobre o que o Mod_PageSpeed é capaz de
otimizar no seu lançamento atual:

  • Optimização do caching: configure
    os headers HTTP para que eles gerem conteúdo estático, de modo que CSS,
    imagens e JavaScript não expirem depois de um longo período de tempo. Isso
    significa que, uma vez que o usuário acessa as páginas do seu site, seu
    browser recupera quaisquer CSS, imagens e JavaScript e os armazena no seu
    cache. Na próxima vez em que o usuário retornar ao site, as páginas irão
    carregar mais rápido porque o browser não terá que recarregar o conteúdo
    estático do servidor, pois ele será lido a partir dos arquivos em cache
    locais.
  • Minimize os tempos de ida e volta: cada
    página pode pedir para que o browser execute uma série de pedidos HTTP
    para o servidor. Muitas vezes alguns tipos de pedidos poderiam ser
    evitados se a definição do conteúdo da página fosse repensada. Isso pode
    ser feito de várias maneiras, como combinando diferentes JavaScript, CSS e
    arquivos de imagens, evitando acessos para servidores que apenas
    redirecionam para outras páginas, e outros métodos menos triviais.
  • Minimize a sobrecarga dos pedidos: parte
    do tempo que a página demora para carregar é gasto carregando pedidos HTTP
    para o servidor. O tamanho desses pedidos é geralmente pequeno, mas pode
    se tornar grande se você não se preocupar com certos detalhes. Um desses
    detalhes é o tamanho dos cookies que o seu site envia. Todo
    pedido enviado para o servidor manda todos os cookies repetidamente. Se os
    cookies forem realmente necessários, tudo bem, mas às vezes eles não precisam
    ser tão grandes. Algumas aplicações dão muito valor ao cookies. Se você utiliza
    sessões do lado do servidor, você poderia mover os valores dos cookies em
    variáveis de sessões. Para
    piorar o problema, todos os pedidos por imagens, CSS e JavaScript
    também  incluem cookies configurados
    para o mesmo domínio sob o mesmo caminho da URL. Além de reduzir o tamanho
    do cookies, você pode mover o conteúdo estático para um sub-domínio
    separado e colocar os cookies no domínio principal que sirvam as páginas
    web. Atualmente,
    o Mod_PageSpeed não te ajuda com isso, uma vez que as medidas que você
    precisa tomar devem ser de acordo com a aplicação.
  • Minimize o Payload: O Payload é a quantidade de dados que o servidor envia para carregar toda a
    página no browser. Existem muitas maneiras de reduzir os dados que são
    enviados sem afetar o conteúdo da página. Por exemplo, você pode usar
    compressão PHP, compactar HTML, CSS, JavaScript e imagens, ou até
    atrasar o carregamento de elementos lentos de servidores externos, como
    publicidade e widgets, como demonstrado no artigo anterior de aceleração
    do carregamento de páginas

  • Otimize a renderização do browser: Outro
    aspecto que afeta a performance geral do carregamento de uma página é
    quão rápido o browser consegue renderizá-la. Isso se refere à estrutura do
    documento HTML e aos estilos CSS usados para definir como exibir a página. De
    vez em quando, lemos a respeito de discussões sobre, por exemplo, se você deveria
    usar tabelas para definir o layout da página ou não. O fato é que o uso de
    tabelas nos browsers atuais dificilmente afeta a renderização da página
    porque os browsers são inteligentes o suficiente para começar a renderizá-las antes do carregamento da definição das tabelas se necessário. Existem
    outros, talvez insuspeitos, aspectos das páginas que afetam a
    velocidade de renderização, como por exemplo, a sintaxe CSS que define
    quais elementos da página são combinados por cada definição de estilo CSS. Atualmente,
    o Mod_PageSpeed não fornece nenhum tipo de otimização automática de regras
    ineficientes do CSS, porque este não é um assunto trivial. Às vezes depende
    do que o web designer quis alcançar com certos estilos CSS combinando
    regras. Mas
    o Page Speed já oferece informações úteis sobre quais regras são muito
    ineficientes e devem ser reescritas, para que os web designers possam ver
    o que pode ser feito para deixar as regras mais eficientes enquanto
    preservam o layout principal da página.

Conclusão: devemos utilizar Mod_PageSpeed ou não?

O Mod_PageSpeed é definitivamente uma ótima ideia. Eu diria que éum tipo de mágica. É como ter um expert em otimização de páginas quase de
graça. Eu digo quase de graça porque existe algum custo associado ao seu uso. O
custo que falo é aquele em termos de uso exagerado da CPU para analisar pedidos
HTTP e páginas para rearranjá-los, de modo que as páginas sejam oferecidas de
uma maneira significativamente mais rápida.

Obviamente seria bem melhor se as páginas fossem geradas pelosscripts do seu site de uma maneira já otimizada. O fato é que a maioria de nossas
páginas não são tão otimizadas porque não sabemos tudo que é importante em
termos de velocidade quando desenvolvemos o código dos nossos sites.

Portanto, para sites já existentes, o uso do Mod_PageSpeed éprovavelmente a maneira mais rápida de acelerar as páginas do seu site, com a
vantagem de que ele praticamente não precisa de esforços de desenvolvimento.

Agora, se você me perguntar se eu irei usá-lo nos meus sites, devoconfessar que tenho algumas preocupações. Uma delas é que nada é perfeito.
Digo, todos os softwares têm bugs. Já é difícil lidar com os bugs do meu
software. Será ainda mais difícil lidar com bugs de um novo software que
adicionei ao meu servidor, que eu não desenvolvi e que na verdade não é
essencial.

Visto que esse é o primeiro lançamento estável do Mod_PageSpeed (no momento da produção deste artigo),espere que existam bastantes bugs que precisam ser corrigidos e que somente
irão acontecer depois que alguém os reportar. Então é melhor esperar um tempo
antes de abraçar essa solução como definitiva em um ambiente de produção.

Outro aspecto é que o Mod_PageSpeed não executa todos os tipos deotimização que o Page Speed recomenda. Algumas otimizações somente podem ser
feitas com conhecimento do contexto do seu site. Outras otimizações podem ser
feitas, mas ainda precisam de algumas mudanças no código.

Uma dessas otimizações é o uso de sprites, digo, o agrupamento devárias imagens comuns no site em uma única imagem sprite. Seria ótimo se o
Mod_PageSpeed conseguisse juntar essas imagens para mim em um sprite, mas
acredito que eu sei melhor do que ele quais imagens valem a pena serem
agrupadas em sprites.

Por outro lado, hoje em dia eu utilizo um web server com processosmúltiplos, nesse caso o ightttpd, para servir conteúdo estático. O
Mod_PageSpeed é designado para o Apache 2. Então, provavelmente é melhor que eu
gere os sprites manualmente, em vez de depender do Mod_PageSpeed para fazer
isso para mim.

Outra otimização que eu preciso fazer tem a ver com os cookies dosite. Há tempos eu tenho utilizado o domínio base do site para os cookies. O
problema é que ele inclui todos os sub-domínios, incluindo o sub-domínio usado
pelo servidor web de processos múltiplos, que têm o objetivo de servir conteúdo
estático, como imagens, CSS e JavaScript.

O conteúdo estático não precisa de fato de nenhum cookie, porqueos cookies são geralmente focados em identificar o usuário atualmente logado.
Então eu preciso repensar a estrutura dos domínios que utilizo para estabelecer
os cookies de um site.

E você? Se você for uma empresa de hospedagem, pode estartentado usar o Mod_PageSpeed agora em todos os sites dos seus consumidores.
Mas e se isso quebrar os sites deles por algum motivo que você não consegue prever?
Isso provavelmente irá gerar um pesadelo para o suporte. Por outro lado, tudo
pode funcionar bem, e você pode se beneficiar do aumento da velocidade no site
dos seus consumidores.

O que você acha? Você tem o objetivo de arriscar e usar oMod_PageSpeed nos seus sites ou não? Sinta-se à vontade para postar seus
comentários sobre essa questão.

?

Texto original disponível em http://www.phpclasses.org/blog/post/135-Accelerate-Web-Pages-Automatically-using-Google-ModPageSpeed-Unusual-Site-Speedup-Techniques-Part-4.html