Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Instalando o Módulo Google PageSpeed

by
Difficulty:IntermediateLength:MediumLanguages:
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 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 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 PageSpeed

E um péssimo 64 para mobile:

Google 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:

Então, usemos dpkg para instalar o módulo:

Por fim, apt-get -f install para resolver as dependências:

Então, reiniciemos o servidor Apache:

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:

E aqui a configuração básica:

Todos os sites funcionarão com ele por padrão. Mas é preciso adicionar os subdomínios da CDN manualmente:

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:

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:

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 PageSpeed

Eis a pontuação posterior para mobile:

Google 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
Advertisement
Advertisement
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.