Advertisement
  1. Code
  2. WordPress

Instalando el Módulo PageSpeed de Google

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

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

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

Bienvenido a mi tercer turorial sobre optimizando la Velocidad de Carga de Tu Página en Google. Para los que no saben, Google PageSpeed es una herramieneta gratuita que evalúa el desempeño y la usabilidaad de tu sitio web para plataformas móviles y de escritorio. Es extra importante porque Google la usa para determinar elementos clave de nuestro posicionamiento SEO, es decir, qué tan alto aparecemos en sus resultados de búsqueda.

Así que los webmasters saben que es algo importante tener una buena PageSpeed, aunque hay un debate sobre ésto. Por ejemplo, la velocidad de la página de The New York Times es actualmente de 60 y 68 de una escala de 100.

En el primer episodio, te guié para tratar de mejorar mi PageSpeed con un tema creado por ahora un extinto proveedor, Práctica para Mejorar Google PageSpeed (Envato Tuts+). Últimamente, logré una PageSpeed para dispositivos móviles de 70 y escritorio 86.

En el segundo episodio, hice mi blog un sitio enfocado en el desarrollo y personalicé mi código de WordPress para alcanzar una PageSpeed de 100 en ambas plataformas, móviles y escritorio. Consulta Optimizando Google PageSpeed a 100 en WordPress (Envato Tuts+).

Y tuve éxito en ésto por un tiempo:

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

Hoy, voy a decirte más de mi experiencia con optimización de PageSpeed y una alternativa menos conocida para hacerlo tú mismo, el propio módulo PageSpeed de Google. Puedes instalarlo por Apache y nginx.

PageSpeed puede integrarse con tu servidor web Apache o Nginx para optimizar automáticamente tu sitio. — Google 

Antes de comenzar, por favor recuerda, que yo si trato de participar en las discusiones en la sección de abajo. Si tienes una pregunta o sugerencia de tópico, por favor publica un comentario abajo o contáctame en Twitter @reifman. Estoy interesado en tu experiencia con WordPress y PageSpeed.

Manteniendo una PageSpeed Óptima

Si mi blog fuera mi foco de tiempo completo, entonces quizá no habría sido demasiado difícil mantener el código optimizado para PageSpeed pues actualizaciones de plugin y actualizaciones de temas de WordPress venían incluídas. Pero no lo es. Y, francamente, mantener éste trabajo se comprobó que consumía mucho tiempo.

Quería regresar a los diás de antaño de actualizaciones por clicks de mouse.

Google No Te Recompensa por un Alto PageSpeed

También noté que después de que cambié un nuevo tema y optimicé mi PageSpeed a 100, el tráfico realmente disminuyó y permaneció bajo. Ciertamente, el maquetado de tema responsivo tuvo algo que ver con ello, pero Google nunca me recompensó por llegar a un PageSpeed de 100.

Similarmente, mientras escribía Instalando AMP WordPress (Envato Tuts+), AMP fue creada para capturar la atención de los editores de medios, pero no es un gran beneficio para los pequeños editores. Google nunca proporcionó tráfico adicional a mi blog después de que yo proporcioné soporte de AMP.

Así que decidí retractar mi foco en PageSpeed y cambiar a un nuevo tema que ayudaría a los usuarios a navegar por mi sitio más fácilmente. También he desinstalado AMP por el momento.

Probando el Módulo PageSpeed de Google

Parecía la perfecta oportunidad de deshabilitar todo mi paquete personalizado de JavaScript y CSS y experimentar con el módulo PageSpeed de Google, que funciona a nivel del servidor para hacer ésto por tí.

Sobre el Módulo PageSpeed de Google

Básicamente, el Módulo PageSpeed de Google automatiza muchas de las optimizaciones de rendimiento que buscan sus posicionamientos de PageSpeed. Y está disponible en los populares servidores de código abierto Apache y nginx.

El Módulo PageSpeed comprime y combina archivos incluídos como JavaScript y hojas de estilo CSS pero también reemplazará imágenes con formatos de archivos comprimidos progresivos (.webp).

Imágenes de mi PageSpeed Antes de la Instalación

Después de instalar mi tema nuevo, tomé imágenes "antes" de mi puntuación de PageSpeed. Recibí un 83 para escritorio:

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

Y un más bajo 64 para móviles:

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 el Módulo PageSpeed

Para éste tutorial, te guiaré por el proceso de instalación para Apache. Google ofrece también instrucciones de instalación para nginx.

El módulo PageSpeed no está incluído en los directorios de paquete de Ubuntu así que necesitas descargarlo manualmente vía wget :

Luego, usa dpkg para instalar el módulo:

Y finalmente, apt-get -f install para arreglar cualquier dependencia:

Posteriormente, reinicia el servidor Apache:

Soportando Archivos Desde Tu CDN

Anteriormente, escribí un artículo auspiciado Acelera Tu Entrega de Contenidos Con KeyCDN y todavía lo uso. Si usas un CDN para tu sitio, entonces necesitas avisarle al módulo PageSpeed.

Aquí está cómo ver y editar el archivo de configuración del módulo:

Y hay una configuración básica:

Todos tus sitios funcionarán con él por defecto. Pero tienes que agregar los subdominios CDN manualmente:

¿Mis CDNs están en c1-, c2- y c4- .jeffreifman.com, así que utilicé un ? el caracter comodín para apuntar a los cuatro de arriba.

Luego, por supuesto, debes reiniciar de nuevo Apache, como lo hicimos antes.

Revisando los Resultados del Módulo PageSpeed

Puedes revisar el código fuente en tu sitio para ver si el módulo PageSpeed está funcionando. Aquí está un ejemplo de la parte superior de la página en JeffReifman.com:

Nota que el src URL ahora es:

568f4.js.pagespeed.jm.7B4hJGmADB.js

Aquí está una imagen más grande colocada manualmente (incidentalmente uno de los anuncios de mi casa) que PageSpeed convierte a .webp:

Todo ésto ocurre automáticamente.

Decepcionantes Cambios en PageSpeed

En general, los resultados de usar el módulo PageSpeed fueron decepcionantes por sí mismos. Gané 4 puntos en escritorio y (mejor) 8 puntos en móviles.

Aquí está la puntuación después para escritorio:

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

Aquí está la puntuación después para móviles:

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

Concluyendo

Si eres un administrador de sistemas, el módulo PageSpeed de Google será muy útil. Es completamente configurable, y puedes personalizarlo en una variedad de formas para un mejor impacto. Sin embargo, para el desarrollador promedio, tengo dudas sobre su eficacia:

  • Las ganancias del desempeño básico fueron limitadas.
  • Más personalización es muy complicado.
  • Las ganancias de PageSpeed claramente no (si no absolutamente) reflejan un incrementado tráfico en el motor de búsqueda.

Estoy contento de que Google ofrezca el módulo, y está diseñado para trabajar dentro de sistemas complejos, pero su impacto para administradores de sistema DIY de todos los días es limitado.

Si tienes preguntas, por favor publícalas abajo. O puedes contactarme en Twitter @reifman. Por favor consulta mi página de instructor en Envato Tuts+ para ver otros tutoriales que he escrito, como Clonando WordPress en Linux (en 90 segundos). Y te animo a consultar mis dos series de programación aquí: Cómo Programar Con Yii2 y Construyendo Tu Startup Con PHP.

Enlaces Relacionados

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.