() translation by (you can also view the original English article)
Bem vindo ao terceiro tutorial sobre otimizar o Google Page Speed. Para os que não sabem, Google PageSpeed é uma ferramenta grática que verifica a performance e usabilidade de um site para mobile e desktop. É muito importante porque o Google a usa para determinar elementos chave do nosso ranking SEO, como quão alto apareceremos nos resultados.
Assim, é ssabido que é importante ter uma boa PageSpeed, embora haja algum debate sobre isso. Por exemplo, a velocidade da página do The New York Times está 60~68 de 100.
No primeiro episódio, mostramos como melhorar a PageSpeed de um tema criado por um provedor de temas falido, Como Melhorar no Google PageSpeed (Envato Tuts+). No fim, fizemos a PageSpeed dos dispositivos mobile ir de 70 e desktop para 86.
No segundo episódio, fizemos um blog focado em criação de sites e customizamos o código do WordPress para alcançar 100 no PageSpeed tanto mobile quanto desktop. Veja Otimizando Google PageSpeed para 100 no WordPress (Envato Tuts+).
E fomos bem sucedido nisso, por um tempo:
Hoje, mostraremos um pouco mais sobre otimização do Pagespeed com uma alternativa menos conhecida, o módulo PageSpeed do próprio Google. Podemos instalá-lo para Apache ou nginx.
PageSpeed pode ser integrado ao servidor Apache ou Ngnix para otimizar, automaticamente, seu site. — Google
Antes de começarmos, sempre tentando participar das dicussões nos comentários. Quaisquer dúvidas ou sigestão de tópico, basta deixar um comentário ou contatar via Twitter via @reifman. Temos interesse em experiências do WordPress e PageSpeed.
Mantendo uma PageSpeed Favorável
Se o blog fosse prioritário, talvez não tivesse sido tão complicado manter o código otimizado para o PageSpeed jpa que plugins e temas do WordPress atualizaram. Mas não é assim. E, francamente, manter esse trabalho consome muito tempo.
Sempre queremos atualizações com um único clique.
Google Não Recompensa Por Nota Alta no PageSpeed
Também percebemos que após mudar de tema e otimizar a PageSpeed até 100, o tráfego diminuiu e manteve-se baixo. Certemente, o tema responsivo teve alguma coisa a ver, mas o Google nunca recompensou por obter 100 no PageSpeed.
Similarmente, como discutido no Instalando AMP no WordPress, AMP foi criado para chamar atenção de editores de grandes mídias, mas não faz muita coisa para os pequenos. Google não gerou tráfego extra ao blog após prover suporte ao AMP.
Então, decidimos mudar o foco do PageSpeed e mudar para um tema que ajudasse usuários a navegar o site mais facilmente. Também desinstalamos AMP.
Testando o Módulo Google PageSpeed
Pareceu a oportunidade exata para desabilitar o JavaScript e CSS customizado e experimentar o módulo do Google PageSpeed, que funciona a nível de servidor, trabalhando por nós.
Sobre o Módulo Google PageSpeed
Basicamente, o Módulo Google PageSpeed automatiza várias otimizações de performance que o PageSpeed busca. E está disponível para servidores de código aberto, como Apache e nginx.
O Módulo Pagespeed comprime e combina arquivos inclusos, como JavaScript e CSS, e também substitui imagens por arquivos comprimidos e progressivos (.webp).
Capturas do PageSpeed Antes da Instalação
Após instalar o novo tema, pegamos as capturas da PageSpeed anterior. Tinhamos 83 para desktop:
E um péssimo 64 para mobile:
Instalando o Módulo PageSpeed
Para esse tutorial, guiaremos a instalação para o Apache. Google dá instrução para instação com nginx também.
O módulo PageSpeed não está incluso no diretório de pacotes do Ubuntu, então precisamos instalá-lo diretamente via wget:
1 |
$ wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb
|
2 |
--2016-10-02 15:10:54-- https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb
|
3 |
Resolving dl-ssl.google.com (dl-ssl.google.com)... 74.125.22.136, 74.125.22.91, 74.125.22.190, ... |
4 |
Connecting to dl-ssl.google.com (dl-ssl.google.com)|74.125.22.136|:443... connected. |
5 |
HTTP request sent, awaiting response... 200 OK |
6 |
Length: 7009850 (6.7M) [application/x-debian-package] |
7 |
Saving to: ‘mod-pagespeed-stable_current_amd64.deb’ |
8 |
|
9 |
100%[=========================================================================>] 7,009,850 38.6MB/s in 0.2s |
10 |
|
11 |
2016-10-02 15:10:54 (38.6 MB/s) - ‘mod-pagespeed-stable_current_amd64.deb’ saved [7009850/7009850] |
Então, usemos dpkg para instalar o módulo:
1 |
$ sudo dpkg -i mod-pagespeed-*.deb |
2 |
Selecting previously unselected package mod-pagespeed-stable. |
3 |
(Reading database ... 668500 files and directories currently installed.) |
4 |
Preparing to unpack mod-pagespeed-stable_current_amd64.deb ... |
5 |
Unpacking mod-pagespeed-stable (1.11.33.2-r0) ... |
6 |
Setting up mod-pagespeed-stable (1.11.33.2-r0) ... |
7 |
Enabling module pagespeed. |
8 |
To activate the new configuration, you need to run: |
9 |
service apache2 restart |
Por fim, apt-get -f install para resolver as dependências:
1 |
$ sudo apt-get -f install |
2 |
[sudo] password for ...: |
3 |
Reading package lists... Done |
4 |
Building dependency tree |
5 |
Reading state information... Done |
6 |
The following packages were automatically installed and are no longer required: |
7 |
ca-certificates-java default-jre default-jre-headless fonts-dejavu-extra |
8 |
gconf-service gconf-service-backend gconf2 gconf2-common icedtea-6-jre-cacao |
9 |
icedtea-6-jre-jamvm icedtea-netx icedtea-netx-common java-common |
10 |
java-wrappers libasyncns0 libatk-wrapper-java libatk-wrapper-java-jni |
11 |
...
|
12 |
...
|
13 |
openjdk-7-jre openjdk-7-jre-headless sound-theme-freedesktop |
14 |
ttf-dejavu-extra tzdata-java |
15 |
Use 'apt-get autoremove' to remove them. |
16 |
0 upgraded, 0 newly installed, 0 to remove and 0 not upgraded. |
Então, reiniciemos o servidor Apache:
1 |
$ sudo service apache2 restart |
2 |
* Restarting web server apache2
|
Arquivos de Suporte da CDN
Nós temos uma publicação patrocinada Acelerando a Entrega de Conteúdo com KeyCDN e ainda a usamos. Se usamos CDN em nossos sites, precisaremos informar o módulo PageSpeed sobre ela.
Eis como visualizar e editar o arquivo de configuração do módulo:
1 |
$ sudo nano /etc/apache2/mods-available/pagespeed.conf |
E aqui a configuração básica:
1 |
<IfModule pagespeed_module> |
2 |
# Turn on mod_pagespeed. To completely disable mod_pagespeed, you
|
3 |
# can set this to "off".
|
4 |
ModPagespeed on |
5 |
|
6 |
# We want VHosts to inherit global configuration.
|
7 |
# If this is not included, they'll be independent (except for inherently
|
8 |
# global options), at least for backwards compatibility.
|
9 |
ModPagespeedInheritVHostConfig on |
10 |
Todos os sites funcionarão com ele por padrão. Mas é preciso adicionar os subdomínios da CDN manualmente:
1 |
# ModPagespeedDomain
|
2 |
# authorizes rewriting of JS, CSS, and Image files found in this
|
3 |
# domain. By default only resources with the same origin as the
|
4 |
# HTML file are rewritten. For example:
|
5 |
#
|
6 |
# ModPagespeedDomain cdn.myhost.com
|
7 |
#
|
8 |
# This will allow resources found on https://cdn.myhost.com to be
|
9 |
# rewritten in addition to those in the same domain as the HTML.
|
10 |
#
|
11 |
# Other domain-related directives (like ModPagespeedMapRewriteDomain
|
12 |
# and ModPagespeedMapOriginDomain) can also authorize domains.
|
13 |
#
|
14 |
# Wildcards (* and ?) are allowed in the domain specification. Be
|
15 |
# careful when using them as if you rewrite domains that do not
|
16 |
# send you traffic, then the site receiving the traffic will not
|
17 |
# know how to serve the rewritten content.
|
18 |
ModPagespeedDomain c?.jeffreifman.com |
As CDS são c1-, c2-, c3- e c4- .jeffreifman.com, então usei o coringa ? para referirmo-nos ao todas as quatro.
Então, claro, devemos reiniciar o Apache de novo, como feito antes.
Revisando os Resultados do Módulo PageSpeed
Podemos verificar o código fonte do site para ver se o módulo PageSpeed está funcionando. Eis um exemplo do topo da página em JeffReifman.com:
1 |
<!DOCTYPE html>
|
2 |
<html lang="en-US" prefix="og: http://ogp.me/ns#"> |
3 |
<head>
|
4 |
<meta charset="UTF-8"> |
5 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
6 |
<link rel="profile" href="http://gmpg.org/xfn/11"> |
7 |
<link rel="pingback" href="http://jeffreifman.com/xmlrpc.php"> |
8 |
<script type="text/javascript" |
9 |
src="http://jeffreifman.com/wp-content/cache/minify/568f4.js.pagespeed.jm.7B4hJGmADB.js"> |
10 |
</script>
|
Note que a URL do src é, agora:
568f4.js.pagespeed.jm.7B4hJGmADB.js
Eis uma imagem maior, colocada manualmente (por acaso, uma das minhas propagandas ) que ele converte para .webp:
1 |
<img src="http://c3.jeffreifman.com/wp-content/uploads/2016/10/ |
2 |
xssd-virtual-servers-300x250.jpg.pagespeed.ic.g1foLP8khJ.webp"
|
Tudo isso acontece automaticamente.
Mudanças Desapontadoras no PageSpeed
No geral, os resultados com uso do módulo PageSpeed foram desapontadores. Ganhamos 4 pontos no desktop e 8 pontos no mobile.
Eis a pontuação posterior para desktop:
Eis a pontuação posterior para mobile:
Resumindo
Sendo administradores de sistema, o módulo Google PageSpeed pode ser bem útil. É bem configurável e podemos customizá-lo de diversas formas para um melhor impacto. Contudo, para o desenvolvedor padrão, temos dúvidas da eficácia.
- O ganho de performance básico foi limitado
- Customização extra é bem complexa
- Ganhos no PageSpeed não geram aumento de tráfego de mecanismos de busca diretamente (se é que aumentam)
Gostamos que o Google oferece o módulo e que é feito para trabalhar em sistemas complexos, mas seu impacto no dia-a-dia de adminstradores de sistemas auto-didatas é limitado.
Quaisquer dúvidas, deixem-nas nos comentários. Ou contacte-nos através do Twitter via @reifman. Veja também outros tutoriais na página de autor da Envato Tuts+, como o Clonando WordPress no Linux (em 90 segundos). Também encorajamos ver outras duas séries: Como Programar Com Yii2 e Construindo sua Startup com PHP.
Links Relacionados
