Dicas/ Dicas e truques/ Google/ HTML 5/ HTML5 / CSS3/ Web 2.0

Coloque seu site ou aplicativo web no modo turbo

rocket launch

Se você é fanático por performance e tem acesso shell/root ao seu servidor, vai aqui uma dica muito importante para optimizar todas as páginas que você serve para seus leitores/usuários.

Se seus serviços forem sob o teto do servidor Apache HTTP, então você precisa conhecer urgente o mod_pagespeed que acelera o processo de carregamento do aplicativo/sites a níveis de grandes sites como Google.com e facebook.com

Só para você ter uma idéia, meu site com todas as técnicas que abordei em meu arquivo .htaccess ele beirava os 6.5s para carregar por completo para você leitor. Depois que eu ativei o mod_pagespeed o tempo passou para 1.65s e o melhor de tudo isso, banda e processos foram economizados.

O que o mod_pagespeed faz na verdade?

Ele basicamente optimiza tudo que você deixou para depois e acabou esquecendo de fazer ou simplesmente não deu tempo devido a pressão sofrida no trabalho para liberar uma release.

Então através de filtros pré-definidos via String na sua configuração o mod_pagespeed cria diretivas de rápido acesso permitindo que você faça performance à baixo nível no servidor.

O mod_pagespeed é um santo remédio, porém você deve usa-lo com cautela, já que boa parte de seus filtros ainda são experimentos e nunca se sabe o que poderá causar de ruim para sua aplicação.

 

Pagespeed e derivados

Existem outros módulos no apache que é importante frizar bem para que você não continue achando que o pagespeed é o único salvador da pátria, outros módulos foram usados em meu problema, porém o pagespeed de fato teve um ganho muito mais considerado deixando ele agir sobre os arquivos estáticos.

Módulos que também usei e que são necessários para o pagespeed rodar.

Mod – rewrite

Mod – headers

Mod – deflate

 

Esses módulos podem ser instalados perfeitamente em seu servidor Apache usando os seguintes comandos.

 

Instalando o módulo rewrite.

a2enmod Nome_do_Modulo

 

O comando a2enmod, basicamente diz, Apache2 habilite modulo X, se você quiser ver todos os módulos habilitados em seu servidor Apache, basta ir em cd /etc/apache2/mods-enabled/

e dar um ls

 

Como instalar em um servidor Ubuntu/CentOS/Debian/Fedora

Baixe o módulo pagespeed diretamente aqui, links estão do lado direito.

Uma vez que você escolheu o pacote correto para sua distribuição linux, use o comando wget para baixar o pacote.

root@li437-29:~# wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_amd64.deb

 

Como eu tenho um sistema operacional Ubuntu 64 bits usei o pacote acima.

Uma vez que o download completou, basta executar os seguintes comandos se você estiver no Ubuntu.

dpkg -i mod-pagespeed-*.deb
apt-get -f install

Se estiver no CentOS ou Fedora, execute

yum install at  (if you do not already have 'at' installed)
rpm -U mod-pagespeed-*.rpm

 

Depois disso, só habilitar o pagespeed no Apache, usando o comando a2enmod

a2enmod pagespeed

Pronto, seu módulo pagespeed está habilitado e pronto para executar, agora basta configurar os filtros que vem nele para melhorar o desempenho.

Por padrão o módulo é desabilitado justamente por que você precisa configura-lo antes de sair usando, afinal o Google não quer que seu site saia fora do ar antes mesmo de você coloca-lo em modo turbo.

Para isso, abra o arquivo de configuração do pagespeed que fica na pasta /etc/apache2/mods-enabled e use um editor que você esteja confortável em usar, eu uso o Vim, tem gente que gosta de outros e por ai vai. Para abrir é simples, vi pagespeed.conf

O arquivo vem basicamente assim.

# Turn on mod_pagespeed. To completely disable mod_pagespeed, you
# can set this to "off".
ModPagespeed on
 
# Direct Apache to send all HTML output to the mod_pagespeed
# output handler.
AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER text/html
 
# If you want mod_pagespeed process XHTML as well, please uncomment this
# line.
# AddOutputFilterByType MOD_PAGESPEED_OUTPUT_FILTER application/xhtml+xml
 
# The ModPagespeedFileCachePath and
# ModPagespeedGeneratedFilePrefix directories must exist and be
# writable by the apache user (as specified by the User
# directive).
ModPagespeedFileCachePath "/var/mod_pagespeed/cache/"
ModPagespeedGeneratedFilePrefix "/var/mod_pagespeed/files/"
 
# Override the mod_pagespeed 'rewrite level'. The default level
# "CoreFilters" uses a set of rewrite filters that are generally
# safe for most web pages. Most sites should not need to change
# this value and can instead fine-tune the configuration using the
# ModPagespeedDisableFilters and ModPagespeedEnableFilters
# directives, below. Valid values for ModPagespeedRewriteLevel are
# PassThrough, CoreFilters and TestingCoreFilters.
#
# ModPagespeedRewriteLevel PassThrough
 
# Explicitly disables specific filters. This is useful in
# conjuction with ModPagespeedRewriteLevel. For instance, if one
# of the filters in the CoreFilters needs to be disabled for a
# site, that filter can be added to
# ModPagespeedDisableFilters. This directive contains a
# comma-separated list of filter names, and can be repeated.
#
# ModPagespeedDisableFilters rewrite_images
 
# Explicitly enables specific filters. This is useful in
# conjuction with ModPagespeedRewriteLevel. For instance, filters
# not included in the CoreFilters may be enabled using this
# directive. This directive contains a comma-separated list of
# filter names, and can be repeated.
#
ModPagespeedEnableFilters rewrite_javascript,rewrite_css
ModPagespeedEnableFilters collapse_whitespace,elide_attributes
 
# ModPagespeedDomain
# authorizes rewriting of JS, CSS, and Image files found in this
# domain. By default only resources with the same origin as the
# HTML file are rewritten. For example:
 
# ModPagespeedDomain cdn.myhost.com
#
# This will allow resources found on http://cdn.myhost.com to be
# rewritten in addition to those in the same domain as the HTML.
#
# Wildcards (* and ?) are allowed in the domain specification. Be
# careful when using them as if you rewrite domains that do not
# send you traffic, then the site receiving the traffic will not
# know how to serve the rewritten content.
 
# Other defaults (cache sizes and thresholds):
#
# ModPagespeedFileCacheSizeKb 102400
# ModPagespeedFileCacheCleanIntervalMs 3600000
# ModPagespeedLRUCacheKbPerProcess 1024
# ModPagespeedLRUCacheByteLimit 16384
# ModPagespeedCssInlineMaxBytes 2048
# ModPagespeedImageInlineMaxBytes 2048
# ModPagespeedCssImageInlineMaxBytes 2048
# ModPagespeedJsInlineMaxBytes 2048
# ModPagespeedCssOutlineMinBytes 3000
# ModPagespeedJsOutlineMinBytes 3000
 
# Bound the number of images that can be rewritten at any one time; this
# avoids overloading the CPU. Set this to 0 to remove the bound.
#
# ModPagespeedImageMaxRewritesAtOnce 8
 
# You can also customize the number of threads per Apache process
# mod_pagespeed will use to do resource optimization. Plain
# "rewrite threads" are used to do short, latency-sensitive work,
# while "expensive rewrite threads" are used for actual optimization
# work that's more computationally expensive. If you live these unset,
# or use values 
SetHandler mod_pagespeed_beacon
 
# Uncomment the following line if you want to disable statistics entirely.
#
# ModPagespeedStatistics off
 
# This page lets you view statistics about the mod_pagespeed module.
 
Order allow,deny
# You may insert other "Allow from" lines to add hosts you want to
# allow to look at generated statistics. Another possibility is
# to comment out the "Order" and "Allow" options from the config
# file, to allow any client that can reach your server to examine
# statistics. This might be appropriate in an experimental setup or
# if the Apache server is protected by a reverse proxy that will
# filter URLs in some fashion.
Allow from localhost
Allow from 127.0.0.1
SetHandler mod_pagespeed_statistics
 
# Page /mod_pagespeed_message lets you view the latest messages from
# mod_pagespeed, regardless of log-level in your httpd.conf
# ModPagespeedMessageBufferSize is the maximum number of bytes you would
# like to dump to your /mod_pagespeed_message page at one time,
# its default value is 100k bytes.
# Set it to 0 if you want to disable this feature.
ModPagespeedMessageBufferSize 100000
 
Allow from localhost
Allow from 127.0.0.1
SetHandler mod_pagespeed_message
 
Allow from localhost
Allow from 127.0.0.1
SetHandler mod_pagespeed_referer_statistics

O que você precisa habilitar primeiro é o módulo.

 ModPagespeed on

Depois configurar onde ele vai guardar os caches

  ModPagespeedFileCachePath            "/var/mod_pagespeed/cache/"
  ModPagespeedGeneratedFilePrefix      "/var/mod_pagespeed/files/"

Coloque em um diretório de sua preferência.

Com apenas isso, você já vai notar uma significante mudança no carregamento de seu site ou App em 50%. Tem muita configuração para você fazer através de filtros.

Os filtros que utilzei foram esses.

 ModPagespeedEnableFilters combine_css

O filtro combine_css já diz, tudo ele combina tudo que você tem de CSS em um único arquivo.

Outro filtro que usei foi o minificador de Javascript.

ModPagespeedEnableFilters rewrite_javascript

Em caso de você esquecer de minificar seu código javascript, ele faz automático para você.

Outro bastante importante é a configuração das imagens, elas tem um peso absurdo quando o negócio é carregamento.

Eu usei os seguintes filtros.

 ModPagespeedEnableFilters inline_images,recompress_images,resize_images

Peço para carregar todas as imagens em inline, tudo junto, comprima elas e faça um resize caso necessário.

 

Claro que os filtros que eu usei são específicos para meu caso, embora ele vá servir também para vocês na maioria dos casos, recomendo ler os pro e contras de qualquer filtro que você habilite na documentação do Google pageSpeed, que por sinal é bem completa.

E depois disso tudo? Como faço para testar?

Existem diversas ferramentas on-line que analisam o conteúdo do site para você e diz onde está errando, inclusive no próprio site do Page speed, o Google disponibiliza o Page speed Insights, detalhando tudo que você precisa saber para corrigir os erros e melhorar a performance do site.

O mais legal do Pagespeed Insights é a possibilidade de você testar o carregamento em Desktop e Mobile.

Outra ferramenta que fiz bastante uso em meu problema, foi o Full Page Test da Pingdom, para ver se realmente o Pagespeed tinha afetado a performance do site.
No Google Page Speed Insights meu site carregou em 680ms quase 1 segundo. No Pingdom os resultados foram mais reais digamos assim. Carregados em 1.65s.

Sem tudo isso do Pagespeed meu site estaria sendo carregado em meros 5 ou 6 segundos, isso por que boa parte de seu conteúdo é texto.

É isso, escrevei outro post de como eu consegui reduzir o consumo de memória do servidor servindos 50 visitas /segundo nesse blog depois que mudei para servidores novos.
Foi uma grande aventura configurar o Apache e o MySQL para reduzir o consumo de memória.

2 thoughts on “Coloque seu site ou aplicativo web no modo turbo

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *