Reglas de Google PageSpeed Insights

Reglas de Google PageSpeed Insights.
Al margen de si son importantes o no?
Cuantas reglas hay, y que es cada una de ellas.

Típicas reglas de Google PageSpeed Insights

Estas son las reglas más comunes que nos aplica el PageSpeed y nos muestra en su página de analisis:

  1. Reducir el tiempo de respuesta del servidor
  2. Optimizar imágenes
  3. Especificar caché de navegador
  4. Minificar HTML,  Minificar Css, Minificar JavaScript
  5. Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página
  6. Prioriza el contenido visible
  7. Habilitar compresión

Reducir el tiempo de respuesta del servidor

Básicamente nos hace entender que necesitamos que nuestro servidor sea más rápido en la entrega de la página.

Pero ojo! A veces son las otras reglas la que hacen que esta en concreto salte, o a veces el bloqueo de recursos hace creer que el servidor está siendo torpe.

En ocasiones este mensaje desaparece cuando comprimimos todas las imágenes y minificamos el contenido y liberamos los bloqueos.

No obstante, si al final este mensaje persiste, deberemos estudiar el caso, y ver que el caché de nuestro cms o plataforma esté funcionando como se espera.

Optimizar imágenes

Podemos optimizar imágenes con algún plugin, si nuestro cms nos lo ofrece. (WordPress nos ofrece varios)

También podemos hacerlo desde el propio terminal con comandos de linux, si sabemos hacerlo.

Hay aplicaciones opensource para el escritorio de Linux.
Yo concretamente, suelo usar el propio Gimp. Abro una imágen, hago un “guardar como”, y ahí elijo en un Jpg comprimir al 90% (lo que marca por defecto)

En wordpress tenemos el plugin que se llama Imagify, que es de pago, pero en su versión gratuita nos hace el apaño con una limitación de X imágenes.

Si no usas ningún cms con plugin adeacuado para esto, o no estás familiarizado con las tecnologías, que sepas que el propio Google Page Speed te ofrece las imagenes optimizadas, en el pie de esta regla verás un vínculo que dice exactamente “Descarga los recursos de imagen, JavaScript y CSS optimizados para esta página”

Especificar caché de navegador

Una regla básica que interactua con el caché de los navegadores.
Lo tengo explicado en

https://pedroreinarojas.com/seo/especificar-cache-de-navegador/

Los ficheros externos serán “juzgados”, y seremos penalizados por su uso.
Paradójicamente el propiop script de Google Analytics hace que el PageSpeed (también de Google) nos penalice.
Si buscamos en Google vemos un montón de gente “impedida” y alucinando. (Los propios profesionales del SEO dicen que es una regla sin sollución)
Para esos casos tengo

https://pedroreinarojas.com/seo/seo-wordpress/especificar-cache-de-navegador-en-ficheros-externos/

Minificar HTML, Minificar Css, Minificar JavaScript

Es un poco sin sentido, quizás ahorrar algunos retornos de carro y algunos símbolos nos pueden dar unos KiloBytes de menos, pero al “jefe” y sus reglas de Google PageSpeed les gusta la super optimización.
O eso, o le gusta dar trabajo a quien sabe desempeñarlo.

Tenemos 2 soluciones.
O bien comprimimos las fuentes de los mismos (siempre que no sean ficheros externos), cosa que no es buena idea porque a la hora de querer ver o editar algo nos vamos a volver ##!|%&##.
O buscamos alguna forma de cachearlos y comprimirlos, y que la página busque estos clones ya comprimidos.

El simple hecho de minificar todo, en el siguiente test de PageSpeed nos puede desaparecer problemas que realmente no lo eran.

Hay que tener cierta prudencia a la hora de minificar, pues según el compresor puede darnos algún problema.
Por ejemplo, si una linea comentada con “//” no es eliminada y eliminamos los saltos de carro, nos vamos a encontrar con un gran bloque comentado (por el símbolo que sólo pretendía comentar una linea)
Es prudente mirar con la consola de errores del navegador si el minificado nos acarrea algún problema.

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

El tamaño de una página normalmente es muy superior al tamaño de nuestras pantallas.
Así que, lo que Google espera es que en ese rango de pantalla todo se cargue rápido en primera instancia.

Sucede a veces que este mensaje salta en la puntuación de “Ordenador” y no salta en en la puntuación de “Móvil”.
Esto se debe a que normalmente el dispositivo móvil al ser tan estrecho, recoge mucho más contenido vertical.

A éste efecto de cargar la parte visible en pantalla, se le llama “above-the-fold”

Este aviso se aplica a los JS y a los CSS, pero el bloqueo de ambos es tan diferente como sus propias soluciones.

Bloqueo de visualización por la carga de un CSS

Cuando la carga de un CSS que no tiene relación a la cabecera o parte inicial del HTML produce un retraso en la carga.
O dicho de otra manera. Cuando la carga de un CSS no cambia el aspecto de la parte inicial de la página y supone un gasto de tiempo.
Solución. Llevar al CSS al footer.
Posibles consecuencias:

  • A veces no soluciona el problema
  • En ocasiones en detrimiento del propio diseño del tema si esto supone abandonar parte del estilo “inline”

Suele ser una solución final llevar todos los estilos al pie de página, acompañadas de todos sus sobre escrituras “inline”, y inyectar el propio contenido en lugar de sus llamadas.

Bloqueo de visualización por la carga de un JS

Similar al Css, aunque con soluciones más sencillas y sin apenas consecuencias.
Nos llevamos a todos los JS al footer, y/o aplicamos las propiedades “Asynch” o “Defer”.

Las llamadas a los JS también pueden contener codigo antes o después de la llamada, pero no suele tener consecuencias al separarlos. (Pero hay que tenerlo en cuenta por si el Debug del navegador nos arroja errores)
Algunos JS pueden tener dependencias tales como a JQuery (También hay que tenerlo en cuenta aunque en el modo Asynch no suele presentar conflictos)

Podemos aplicar “Asynch” o “Defer” o ambos, y ver el comportamiento de la página y la conclusión de resultado del PageSpeed.

Prioriza el contenido visible

Este concepto parece similar al anterior. También basado en el “above-the-fold”.
Pero este no está basado en tiempos ni bloqueos.

La comunicación entre servidor y navegador, se produce en varios pasos, como 2 personas que hablan a través e un teléfono y se les limita el tamaño de las frases.
Pues google quiere que en esa comunicación segmentada, recibir prioritariamente todo lo que afecta al “above-the-fold”. El código imprescindible para visualizar ese rango de pantalla con la mínima comunicación.

Así que, deberemos de evitar:

  • Estilos muy largos
  • Estilos que no tienen relación a la parte superior de la página
  • Scripts
  • Imágenes grandes
  • Objetos dinámicos o del tipo Ajax
  • Columnas

Si tenemos una imagen grande o columnas, podemos rellenar el espacio superior con algún contenido estático forzando que el contenido no conveniente sea empujado abajo y no aparezca en el “above”

Si nos aparece este mensaje, debemos analizar que se mueve en el “above-the-fold” y simplificar la comunicación en ese paso.

También puede darse el caso de que en la versión “Ordenador” tengamos esta penalización y en la versión “Móvil” no. ¿Porque? Pues porque el contenido de ambos es totalmente diferente, y el rango de pantalla-vs-contenido también lo es.

Incluso puedes llevarte una grata sorpresa sólo con minificar el código HTML (si no lo has hecho ya), y ver como desaparece este mensaje.
¿Tiene sentido? Lo tiene y a mi me ha pasado.
Supongo que estás en ese punto del “casi”, y al reducir el código ya cabe toda la trama en la pantalla.

Habilitar compresión

Se soluciona habilitando GZip en nuestro servidor, y añadiendo una regla al .htaccess
En apache se habilita con la extensión “deflate”.

Para las reglas del .htaccess, en WordPress hay muchos plugins que lo hacen de forma automática.
Y para añadir estas reglas de forma manual a nuestro .htaccess, muchos sitios de internet nos lo explican, como el caso en Piwik

Pero recordemos, esta regla en .htaccess no funcionará si el servidor no tiene habilitado dicha funcionalidad.

Una pequeña demostración sobre “Prioriza el contenido visible”

Pequeñas cosas que uno se da cuenta y empieza a intuir por donde van los tiros.
Una cosa es la teoría de las reglas de Google PageSpeed, y otra cosa es realmente entender que hace.
Y como en todo los oficios, la sabiduría la dan las cagadas y el aprender a golpe de patada.

Mi PageSpeed ayer estaba a 100/100, la espuma se salía del barril jjjjjjjjj
Y ahora veo:

Reglas de Google PageSpeed - Reparar "prioriza el contenido visible" de page speed

Como dice el anuncio de aquel seguro de coches cuyo nombre no voy a nombrar ¿Y PORQUE YO?
Algo ha pasado entre un antes y un después, y en el espacio de 1 día no han podido pasar muchas cosas.

Veamos que hay 2 vínculos que dicen “ver la captura de pantalla” y “mostrar original”
Es algo que llama poco la atención, pero nos pueden dar pistas.

Si pico “ver la captura”, me encuentro esto
Reglas de Google PageSpeed - Reparar prioriza el contenido visible de page speed pantalla 1

Si pico en ver original, me encuentro esto
Reglas de Google PageSpeed - Reparar prioriza el contenido visible de page speed pantalla 2

No se ve muy bien porque son imágenes miniatura que nos da la página de analisis y reglas de Google PageSpeed.

Pero me da de sobra como para percatarme de que se trata.
Es la foto de un nuevo artículo.
Así que, un nuevo artículo me ha hecho perder en el 100/100 de las reglas de Google PageSpeed.

¿Como resolverlo?
Pues, o pongo una primera entrada fija donde me entregue un contenido estático y sin foto, o trato de enconger esta imagen.
Lo importante es entender el problema, así como las demás reglas de Google PageSpeed, y tener capacidad resolutiva.

Mi propia forma de resolver todas las reglas de Google PageSpeed Insights

Plugin para PageSpeed Insights de Google en WordPress (FRBM)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *