Automatizando desempenho web com mod_pagespeed

Um dos melhores investimentos que qualquer equipe de desenvolvimento pode fazer é uma ferramenta melhor e a automação de fluxos de trabalho comuns. Várias melhores práticas de desempenho web são os principais candidatos para esse tipo de automação: minification, pré-processamento, concatenando e spriting ativos, otimização de imagens, e assim por diante.

Uma maneira de conseguir isso é através de uma etapa de compilação antes de cada deploy, que funciona desde que você controle todos os ativos e o processo de liberação. Mas, e se seu produto for uma plataforma na qual o novo conteúdo está sendo carregado, substituído, e modificado em tempo real por seus usuários? É aí que uma otimização proxy ou um servidor web inteligente pode fazer maravilhas – sem a etapa de compilação necessária, mas você ainda pode garantir uma experiência otimizada para os visitantes. Como você cria um proxy desse tipo?

Apache e PageSpeed Optimization Libraries

mod_pagespeed é um módulo open source do Apache projetado para automatizar todas as boas práticas de performance web: minification, inlining, spriting, otimização de imagens, concatenar arquivos, sharding, e a lista continua. Anteriormente, a equipe anunciou a versão 1.0 do módulo, que inclui mais de 40 filtros de otimização, e uma base de instalação de mais de 120 mil sites – um marco legal.

Acontece que o mod_pagespeed em si é alimentado por outro projeto open-source: PageSpeed Optimization Libraries (PSOL), que é um framework de servidor independente e uma coleção de classes C++ para a otimização de páginas web e seus ativos associados. Para entender como o PSOL e o Apache trabalham em conjunto, primeiro vale a pena dar uma rápida olhada na arquitetura do Apache de alto nível:

Cada pedido servido pelo Apache segue o mesmo fluxo de trabalho. Em primeiro lugar, um ou mais filtros de entrada podem ser aplicados: autenticação, segurança filtros de segurança (mod security), conferir ou modificar os cabeçalhos de entrada, e assim por diante. Em seguida, um ou mais handlers levam a solicitação de entrada e geram uma saída: um handler PHP pode interceptar todas as solicitações que terminam com .php, ou uma solicitação pode ser proxy para um servidor de aplicativos remoto ou local (mod_proxy). Finalmente, uma vez que os bytes de saída estiverem disponíveis, um ou mais filtros de saída podem ser aplicados: compressão (mod_deflate), cabeçalhos de saída, e assim por diante. O Apache fornece APIs bem definidas para cada uma das etapas, o que permite uma arquitetura de plugin muito poderosa.

Otimização em tempo real com mod_pagespeed

Para otimizar o conteúdo servido pelo Apache, o mod_pagespeed instala um filtro de saída que procura conteúdo HTML. Quando um arquivo HTML é detectado, é analisado pelo stream, e uma variedade de filtros pode ser aplicada para a saída: o filtro mais simples pode remover espaços em branco não utilizados ou citações e comentários desnecessários, e os filtros mais complexos podem reescrever o HTML, alterando a ordem de recursos, ou substituindo inteiramente os recursos!

<!-- original source -->
<link rel="stylesheet" type="text/css" href="styles/yellow.css">
<link rel="stylesheet" type="text/css" href="styles/blue.css">
<link rel="stylesheet" type="text/css" href="styles/big.css">
<link rel="stylesheet" type="text/css" href="styles/bold.css">

<!-- rewritten resource -->
<link rel="stylesheet" type="text/css"
href="styles/yellow.css+blue.css+big.css+bold.css.pagespeed.cc.HASH.css">

<div>Hello, mod_pagespeed!</div>

No exemplo acima, o mod_pagespeed detectou que estamos exigindo múltiplos recursos CSS a partir do mesmo host e o substituiu com um arquivo CSS combinado. O nome do arquivo construído fornece uma série de informações:

Fazer a concatenação dos recursos em um único arquivo é fácil, mas o mod_pagespeed vai muito além, já que permite que você personalize o tamanho mínimo e máximo para cada ativo, e também fornece um md5sum do ativo otimizado – para fazer isso, ele tem que realmente buscar e processar cada um dos arquivos. O md5sum no nome do arquivo é a peça fundamental que permite a otimização transparente: sempre que um dos arquivos for alterado, o nome do arquivo do asset otimizado será atualizado automaticamente. Isso também permite que o ativo otimizado seja servido com um vencimento no futuro.

Otimizando assets com handler PageSpeed

Uma vez que o filtro de saída reescreve o código HTML com urls bem otimizadas, é aí que o handler personalizado PageSpeed entra em jogo: ele inspeciona a URL para os ativos recebidos, e intercepta todos os recursos .pagespeed.. Como vimos no exemplo de CSS acima, a própria URL diz ao handler tudo o que ele precisa saber para gerar o asset otimizado.

De modo semelhante, os links de imagens são reescritos pelo filtro de saída e processados pelo handler. Só que o filtro de imagem possui muito mais otimizações built-in: ele pode redimensionar imagens em tempo real para as dimensões especificadas, remove metadados não utilizados e até mesmo recomprimir e recodificar imagens para diferentes formatos. Servir um PNG que é melhor codificado como um JPEG? O handler tentará a conversão e servir o JPEG se houver uma diferença significativa de tamanho de arquivo. Você também pode especificar uma meta de qualidade de imagem personalizada para reduzir ainda mais o tamanho delas.

O melhor de tudo, porque a otimização de imagem é feita com informações sobre o cliente, o servidor pode escolher dinamicamente o formato ideal – o Chrome e o Opera suportam WebP, o que produz aumento de 30% sobre o JPEG, então um visitante do Firefox pode receber um JPEG, enquanto que um do Chrome ou do Opera pode receber um ativo WebP menor.

Eficiência e desempenho

Executar otimização de ativos em tempo real toma recursos do servidor. Para resolver isso, o mod_pagespeed envia um cache para recursos otimizados a fim de garantir que cada ativo seja otimizado apenas uma vez. Além disso, todas as otimizações são feitas de forma assíncrona a partir da solicitação, o que significa que o primeiro pedido não é penalizado em termos de desempenho – o primeiro visitante pode receber o ativo não otimizado, mas o resto será cumprido fora do cache.

No geral, é uma arquitetura simples e inteligente, mas é também definitivamente uma com diferentes tipos de componentes móveis. Obter todos os detalhes de implementação, toggles, e flags de configuração de forma correta não é uma tarefa fácil. Se você está curioso para aprender mais sobre essa história, a arquitetura e os mecanismos por trás do mod_pagespeed, confira o episódio GDL com Joshua Marantz, o líder técnico do projeto no Google:

Automatizando o desempenho Web

Uma das melhores características do projeto mod_pagespeed é que a funcionalidade principal foi extraída nas bibliotecas independentes do PSOL. O módulo do Apache é simplesmente uma implementação de servidor específico para a arquitetura do Apache, e se você tiver um servidor personalizado, então pode aproveitar todo o trabalho duro e os filtros existentes construídos pela equipe, incorporando o PSOL em seu próprio projeto.

Na verdade, EdgeCast Networks integrou o PSOL e o mod_pagespeed em seu produto CDN no início do ano e, mais recentemente, a equipe PageSpeed iniciou uma implementação experimental do módulo ngx_pagespeed para o servidor nginx. Se você for um usuário nginx, ou um desenvolvedor, vale a pena dar uma olhada e contribuir. Seria muito bom ver o módulo PageSpeed disponível em todos os servidores populares!

Fonte: http://imasters.com.br/tecnologia/redes-e-servidores/automatizando-desempenho-web-com-mod_pagespeed

Deixe um comentário