Advertisement
  1. Code
  2. WordPress

Instalando o Módulo Google PageSpeed

Scroll to top
Read Time: 7 min
This post is part of a series called Improving Google PageSpeed.
Optimizing Google PageSpeed to 100 in WordPress

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

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:

Google PageSpeed Module - Page Insights at 100 for Mobile and DesktopGoogle PageSpeed Module - Page Insights at 100 for Mobile and DesktopGoogle PageSpeed Module - Page Insights at 100 for Mobile and Desktop

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:

Google PageSpeed Module - Before Test 83 for Desktop PageSpeedGoogle PageSpeed Module - Before Test 83 for Desktop PageSpeedGoogle PageSpeed Module - Before Test 83 for Desktop PageSpeed

E um péssimo 64 para mobile:

Google PageSpeed Module - Before Test 64 for Mobile PageSpeedGoogle PageSpeed Module - Before Test 64 for Mobile PageSpeedGoogle PageSpeed Module - Before Test 64 for Mobile PageSpeed

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:

Google PageSpeed Module - After Test 87 for Desktop PageSpeedGoogle PageSpeed Module - After Test 87 for Desktop PageSpeedGoogle PageSpeed Module - After Test 87 for Desktop PageSpeed

Eis a pontuação posterior para mobile:

Google PageSpeed Module - After Test 72 for Mobile PageSpeedGoogle PageSpeed Module - After Test 72 for Mobile PageSpeedGoogle PageSpeed Module - After Test 72 for Mobile PageSpeed

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.