¿Es posible conseguir un 100/100 en Google Pagespeed?

Respuesta corta sí, respuesta larga: Para que tu sitio web consiga un 100 en Google Pagespeed además de tener un buen hosting, optimizar CSS y JS, optimizar imágenes, tener una web responsive, etc. no puedes utilizar servicios del mismo Google como:

• Google Adsense
• Google Analytics
• YouTube

Entonces ¿Por qué Google penaliza el uso de sus propios servicios? Realmente Pagespeed no penaliza sino que te sugiere formas de optimizar el rendimiento y velocidad de tu sitio. De hecho si analizas google.com verás la baja puntuación que obtiene.

Google Pagespeed Es una herramienta potente para detectar, analizar y solucionar aspectos que afectan a la velocidad y rendimiento de tu sitio.

Cómo utilizar Google Pagespeed

El análisis de tu sitio puedes hacerlo con su API aunque lo más habitual es usar el servicio online de Pagespeed actualizada en 2013 con un análisis más profundo en cuanto a móviles y usabilidad que la extensión que añade una pestaña a las Herramientas para desarrolladores de Google Chrome.

Puedes hacer el análisis general desde Pagespeed para optimizar errores generales pero si quieres optimizar todas las páginas de tu sitio te recomiendo que utilices:

• las Herramientas para Webmasters de Google > Tráfico de Búsqueda > Usabilidad Móvil. Obtendrás un informe con los problemas de páginas concretas, por ejemplo esos botones (enlaces) pequeños o páginas donde estás utilizando Flash.
• Google Analytics > Comportamiento > Velocidad del sitio > Sugerencias de velocidad. En este informe obtienes el tiempo de carga de tus páginas más visitadas, su puntuación en Google Pagespeed y un enlace directo para analizarla en Pagespeed.

En Pagespeed pones la URL de una página y el resultado se divide en dos pestañas: Móvil y Ordenador que comparten muchas reglas para el análisis.

La puntuación sobre 100 dependerá de si las reglas las cumples o no, cada regla aparecerá como:

• Elementos que debes corregir
• Elementos que puedes plantearte corregir
• Reglas aprobadas

Desde no hace mucho en la pestaña Móvil hay una sección nueva llamada Experiencia de Usuario con puntuación independiente y es la que muchos sitios están revisando desde el anuncio de Google de que a partir de este 21 de abril su algoritmo dará mejor posicionamiento a sitios responsive.

Cómo mejorar la Experiencia de usuario en Google Pagespeed

Vamos a empezar con la sección de usabilidad y UX para móviles. Si tu sitio es responsive obtendrás buena puntuación aunque quizás haya algunos aspectos que puedas mejorar.

Existen 5 reglas:

1. Aplicar el tamaño adecuado a los botones táctiles

Puede que algunos enlaces y botones de la página web sean demasiado pequeños para que los usuarios puedan tocarlos en una pantalla táctil. Quizás debas aplicar un tamaño más grande a los botones táctiles para proporcionar una experiencia de usuario mejor.

Ya sabemos que el dedo es más gordo que el puntero así que deja bastante espacio entre ellos y que no sean demasiado pequeños.

En el análisis de Experiencia de usuario de google.com esta es la única regla que no aprueba por los dos botones que veis enmarcados en la captura.

Hay 2 reglas que seguramente pases sin problemas:

2. Evitar los plugins

Básicamente evita Flash, Java y Silverlight para que sea compatible. Si tu sitio lleva ya un tiempo funcionando igual tienes vídeos de YouTube embebidos en Flash, revísalo y actualízalo a HTML5. Te acosenjo que utilices las Herramientas para Webmasters de Google para ver rápidamente qué páginas utilizan algún plugin.

3. Utilizar tamaños de fuente que se puedan leer

El texto de la página debe ser legible. Te recomiendo el artículo de Daniel Martínez (@Wakkos) Unidades de medida en CSS

Estas dos reglas son las que definen si tu sitio es o no responsive:

4. Adaptación del contenido a la ventana gráfica

Hay que evitar el scroll horizontal, que todo el contenido aparezca en el ancho del dispositivo:

• no utilizar anchos de ventana gráfica absolutos, si tu layout no es fluido utiliza media queries para asignar un ancho de un 100% a la ventana gráfica a partir de ciertos tamaños de dispositivo,
• haz que tus imágenes y vídeos sean responsive y se ajusten también (ver Cómo hacer los vídeos e imágenes responsive en WordPress)
• y como seguridad extra aplica un overflow:hidden

5. Configurar ventana gráfica

Añade la metaetiqueta a tu <head>

<meta name=viewport content="width=device-width, initial-scale=1">

Cómo conseguir un 100 en Google Pagespeed

Vamos ahora con lo más complicado, obtener un 100 o al menos una puntuación cerca del 100 en Google Pagespeed tanto en Móvil como en ordenador.

Como os decía las reglas son comunes, son 10, vamos a ordenarlas según la dificultad para aprobarlas. Desde las más fáciles, las que seguramente tengas aprobadas, a otras que requieren conocimientos avanzados a la regla que por mucho que lo intentes jamás pasarás.

1. 1 Regla fácil de mejorar

Reducir el tiempo de respuesta del servidor, debe ser inferior a 200 ms. Solución: elige un buen hosting para tu sitio

2. 5 Reglas relativamente fáciles de mejorar

Las siguientes reglas son relativamente fáciles de mejorar:

1. Minificar JavaScript
2. Minificar CSS
3. Minificar HTML

Para minificar los recursos JS, CSS y HTML tienes 3 posibilidades:

1. Minificarlos manualmente, si desarrollas tu propio tema con algún preprocesador como Sass lo tendrás fácil para el CSS, y luego subirlos a tu servidor
2. La más recomendable: utilizar algún plugin para WordPress como W3 Total Cache que incluye entre otras esta opción o Minit específico para minificar y concatenar CSS y JS.
3. Desde el mismo análisis de Pagespeed tienes un enlace para descargar los recursos de imagen, JavaScript y CSS optimizados y la extensión para Chrome te dará un HTML minificado, claro que si utilizas WP o cualquier lenguaje dinámico esto último de nada te sirve.

Otra regla es Habilitar compresión

Normalmente con un plugin para caché como el mencionado W3 Total Cache lo tendrás solucionado siempre y cuando tu servidor lo tenga habilitado, si no usas el plugin puedes añadir a tu .htaccess

<IfModule mod_deflate.c>
# Insert filters
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml

# Drop problematic browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>

La quinta regla relativamente fácil de mejorar es la Optimizar imágenes, tienes también varias opciones:

1. Optimizarlas con algún servicio online y volver a subirlas.
2. Utilizar las que te da Pagespeed en el análisis en el enlace para descargar los recursos de imagen, JavaScript y CSS optimizados
3. Si usas WordPress el plugin EWWW Image Optimizer optimizará las que vayas subiendo nuevas pero y sobre todo te permite optimizar las de tu propio tema y también optimizar las de tu librería una a una o masivamente.

5. 2 Reglas relativamente complicadas de mejorar

Estas reglas tienen que ver con el renderizado de tu página, de cómo se va construyendo y para aprobarlas tienes que servir prioritariamente todo lo necesario para que se renderice primero la parte visible superior de tu página y luego el resto. Si no eres diseñador web y utilizas un tema o plantilla de terceros olvídate de aprobar estas reglas. Si lo eres probablemente te encuentres en un dilema sobre la conveniencia o no de dividir tus CSS y JS.

Una de estas reglas es “Prioriza el contenido visible”, habla del HTML, de que ese HTML esté organizado para que se muestre rápido, sin recursos externos, sin imágenes que lo ralenticen, este primera regla no es muy complicada de mejorar si el tema es tuyo, básicamente hazla semántica, carga los recursos de forma asíncrona, utiliza CSS en vez de imágenes, etc.

El problema es que está relacionada con esta seguna regla que sí que es un quebradero de cabeza: “Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página” es lo que se conoce como ruta crítica de renderización, critical path render y también Above the fold.

 

Se supone que debes poner el CSS y JS que renderiza esa primera parte de tu web dentro del HTML con la etiqueta <style> no como archivo CSS externo y con el JS lo mismo, algo que contradice lo que todos los diseñadores aprenden en su primera aproximación a CSS.

Para detectar ese CSS puedes utilizar:

• este servicio online: Critical Path CSS Generator – by Jonas Ohlsson
• este bookmarklet para Google Chrome que te mostrará en la consola de Google Chrome ese CSS prioritario.
• Más herramientas aquí critical-path-css-tools
• Un buen artículo: Conoce cómo funciona el browser y optimiza tu código frontend | CSSLab

6. 1 regla que jamás vas a aprobar

Llegamos al quid del artículo, la regla “Especificar caché de navegador” no vas a aprobarla jamás si utilizas como casi todos los sitios Google Analytics o Adsense. Para el resto, para los recursos internos utiliza algún plugin pero para los externos como http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js o http://www.google-analytics.com/ga.js no puedes hacer nada.

La única solución es prescindir de Adsense y GA. De hecho Adsense aunque tiene formatos de anuncios responsive también puede que complique la regla de usabilidad móvil de los botones, muchos anuncios tienen botones pequeños y/o demasiado juntos y no puedes hacer nada para evitarlo.

Actualizaciones: Solución para Google Analytics

Última actualización (14/06/16):

Solución de Google Analytics para conseguir 100/100 en Pagespeed

Hay una posible y fácil solución para Google Analytics que algunos han utilizado para mejorar la velocidad, es cargarlo de forma asíncrona. Puedes hacer algún uso de un plugin o simplemente utilizar este código de seguimiento.

<!-- Google Analytics -->
<script async src='//www.google-analytics.com/analytics.js'></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Hay que tener en cuenta al tener GA asíncrono se pierde el registro de visitas cortas, es un detalle que no tiene mayor importancia pero afecta por ejemplo a la duración y tasa de rebote. Además el atributo async no es compatible con todos los navegadores. Según  la documentación oficial:

 «Se puede deteriorar en la carga síncrona y en la ejecución en IE9 y en navegadores para dispositivos móviles anteriores, que no reconocen el atributo async. Te sugerimos que uses este fragmento si tus visitantes utilizan principalmente navegadores modernos para acceder a tu sitio.»

La única solución que he visto para aprobar la regla y sacar mayor puntuación es descargar el archivo www.google-analytics.com/analytics.js a tu servidor para que deje de ser un recurso externo y pase a ser un recurso local.  No es un archivo que se actualice con mucha frecuencia aunque no es una práctica recomendada por Google. 

Desgraciadamente para Adsense aunque uses el formato asíncrono no hay forma de optimizar las imágenes de los anuncios o sus recursos.

Más información

Las explicaciones y consejos de las Reglas de PageSpeed Insights

Reglas de velocidad

1. Evitar los redireccionamientos a páginas de destino
2. Habilitar compresión
3. Mejorar el tiempo de respuesta del servidor
4. Especificar caché de navegador
5. Minificar recursos
6. Optimizar imágenes
7. Optimizar la entrega de CSS (*)
8. Priorizar el contenido visible
9. Quitar el JavaScript que bloquea la visualización de contenido
10. Usar scripts asíncronos

(*) Para la regla de Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página”

1. Crear el modelo de objetos
2. Construcción del árbol de visualización, diseño y representación final
3. CSS que bloquea la renderización del contenido
4. Añadir interactividad con JavaScript
5. Medir la ruta de renderización importante con el tiempo de navegación
6. Analizar el rendimiento de la ruta de publicación importante
7. Optimizar la ruta de renderización importante
8. Reglas y recomendaciones de PageSpeed

Reglas de usabilidad

1. Evitar los plugins
2. Configurar ventana gráfica
3. Adaptar el contenido a la ventana gráfica
4. Aplicar el tamaño adecuado a los botones táctiles
5. Utilizar tamaños de fuente que se puedan leer

Resumen

Es muy difícil conseguir un 100 si como decía al principio utilizas Adsense, GA o pones vídeos, tuits o cualquier recurso externo, está en ti prescindir de ellos sólo por mejorar esa puntuación. Yo diría que no te obsesiones con la puntuación en Pagespeed, mejora lo que puedas y analiza tu sitio con otras herramientas gratuitas como GTmetrix, Yslow o Pingdom o WebPagetest

De todas formas lo escrito aquí se basa en mi experiencia, una de las cosas que he hecho recientemente es quitar todos los botones sociales, reducir la llamada a recursos externos y crear funciones con contadores para cada FB y twitter. Lo de la ruta crítica estoy en ello junto con una optimización general del CSS, este sitio tiene tiempo y poco a poco estoy cambiando algunas cosas para mejorarle el diseño y la usabilidad, la próxima versión la estoy haciendo ya con Sass y me será mucho más fácil gestionarla y optimizarla. Por último me queda optimizar páginas antiguas en las que incluí vídeos en Flash, en fin que como todos sabéis nunca se acaba una web.

Espero que os resulte útil el artículo, si quieres aportar algo para mejorarlo en los comentarios te lo agradecería.