Google PageSpeed Insights, ¿Qué es? Caso práctico y soluciones
¿Qué es Google PageSpeed Insights?
Google PageSpeed Insights es una herramienta que pone Google a disposición de desarrolladores de webs y apps para tener una visión global y exhaustiva de aquellas mejoras que podemos implementar a fin de lograr que nuestras webs tengan un mejor rendimiento y ofrezcan una mejor experiencia de usuario.
Basta con introducir una página y la herramienta (usando internamente la librería Lighthouse) generará dos reportes independientes, uno para la versión móvil y otro para la versión de escritorio, asignando en cada caso una puntuación global sobre 100 puntos y desgranando en todo detalle aquellos puntos donde "flaqueamos" y cuál es el motivo y solución que deberíamos aplicar.
Además de la puntuación, tendremos 3 colores indicativos, el rango verde es que nuestra web tiene una puntuación óptima, el rango naranja sería media, aceptable, pero se debería revisar que se puede mejorar, el rango rojo implicaría un deficiente y sería recomendable hacer una auditoria a fin de tratar de mejorar en todas las directrices posibles.
Sobre papel es la herramienta ideal, sabemos lo importante que es para Google el rendimiento y experiencia de usuario de cara al posicionamiento orgánico (SEO) y sin lugar a dudas PageSpeed Insights es el mejor aliado para esta tarea, el problema es que muchos lo han convertido en un dogma, buscando de forma obsesiva el 100/100, algo que en muchos casos no es posible.
Por supuesto, es fundamental que nuestras webs y aplicaciones tengan un rendimiento óptimo, que se cumpla el mayor número de buenas prácticas recomendadas por el buscador, pero se debe entender que son directrices generales, que no aplican en todos los casos.
Aunque indagaremos en mayor profundidad en este artículo, poniendo un ejemplo, el mero hecho de introducir el código JavaScript de Google Analytics ya incurre de modo negativo en la puntuación final, el motivo, este define una política de caché de 2 horas y Google recomienda que sea superior, pero claro, es una librería cargada de manera externa por lo que no tenemos ningún tipo de control (en este caso concreto no es del todo cierto, ya que hay algunas formas de alojar el script a nivel local y evitar el uso de la librería externa, aunque estaríamos hablando de hacks) sobre el tiempo de caché y no podemos hacer nada para remediarlo, también penaliza por ser librerías cargadas de forma externa y penalizar en el tiempo de procesamiento por parte del navegador del usuario que accede a nuestras webs.
Con esta situación nos vamos a encontrar decenas de veces, librerías externas para analítica, publicidad o funciones requeridas por nuestra web, imágenes no optimizadas desde servidores externos, elementos CSS que bloquean el renderizado causa del propio tema de nuestra web.
De nuevo volvemos a recalcar, por supuesto, toda directriz y buena práctica que se pueda cumplir, debe ser aplicada, y en este artículo trataremos como solucionar las más relevantes, pero entendiendo siempre que no será posible solucionar todas y que lo que premia en posicionamiento SEO es que la experiencia de navegación y velocidad de carga sea la mejor posible, unido a la creación y optimización de contenidos, todo esto sería superior a una puntuación de una herramienta que actúa como guía más que doctrina.
Core Web Vitals
Dentro del reporte que nos genera PageSpeed Insights, vemos que toma relevancia una serie de métricas que al principio pueden resultar de difícil comprensión, inicialmente se conocieron como Core Web Vitals, su objetivo es medir el rendimiento más allá de la propia velocidad de la web, teniendo en cuenta factores como el tiempo de renderizado por parte del navegador, el tiempo que tardaríamos en poder interactuar con la web, o el elemento que supone el mayor incremento de la carga en tiempo y procesamiento.
- FCP (First Contentful Paint), es el tiempo que tarda desde que se accede a la web hasta que el navegador realiza el renderizado del primer elemento, sea texto o imagen.
- TTI (Time to Interactive), el tiempo en el que una página tarda en ser 100% operativa, seguro que te has encontrado accediendo a webs que no dejaban clicar por faltar algún contenido, pues esa métrica mide precisamente esto, el tiempo que tardarías en poder hacer uso funcional de una web.
- Speed Index, para esta métrica Google crea un vídeo durante la carga de la web y lo divide en frames, esta línea de tiempo será utilizada para crear una media de velocidad en la carga de los diferentes contenidos que se muestran en pantalla.
- LCP (Largest Contentful Paint), se busca el elemento de mayor tamaño (imagen o vídeo) y se evalúa el tiempo que tarda en procesarse y mostrar al usuario.
- TBT (Total Blocking Time), es la suma de los periodos, en milisegundos, entre FCP y TTI cuando la duración de la tarea excede los 50 ms.
- CLS (Cumulative Layout Shift), mide la estabilidad visual, imagina una web a la que accedes, tiene una cabecera, pie de página e imagen en medio, la imagen es pesada por lo que tarda un rato en mostrarse, mientras tanto la cabecera y pie de página están juntos, hasta que la imagen carga finalmente y actúa de separador, esto es precisamente lo que no quiere Google, para pasar la prueba CLS, lo correcto es que cada elemento de la página esté en su posición final sin depender de que otros elementos aún estén pendientes de carga.
Caso práctico y soluciones
Ya hemos aprendido quién es quién en las diferentes métricas de Google PageSpeed Insights, y es hora de ponernos manos a la obra, en este caso práctico no vamos a tratar absolutamente todas las métricas del reporte, sino aquellas que creemos pueden tener una mayor impacto y que son fácilmente solucionables en la mayoría de proyectos, sea de forma manual o con un plugin de optimización como LiteSpeed Cache, que usaremos en este caso.
Partimos de la base más frecuente, una web o tienda online desarrollada con WordPress, un número de plugins medio y una plantilla comercial dependiente de algún constructor tipo Elementor o Divi.
La idea es que en cada punto se entienda el motivo, la solución y como aplicarla en el caso ejemplo, para lo que utilizaremos casi siempre opciones del plugin de optimización y cache para WordPress, LiteSpeed Cache, gratuito en todos nuestros servicios de hosting.
Consideraciones previas
Antes de comenzar con el caso práctico, partimos de que tienes WordPress con el plugin LiteSpeed Cache activo, en caso contrario lo puedes habilitar de forma sencilla vía cPanel.
Importante verificar que la función de caché está activa para acelerar nuestro sitio, la encontrarás en LiteSpeed Cache, sección Caché, pestaña Caché, y opción Activa cache está en On.
En esa misma sección encontrarás otros ajustes que es recomendable tener activos.
En Opciones generales, pestaña Ajustes generales debemos obtener una clave para nuestro dominio, hacemos click en Solicitar clave de dominio y esperamos a que se complete la petición.
Para funciones como la optimización de imágenes, necesitamos que LiteSpeed compruebe que efectivamente el servidor usa su servidor web, con la clave solicitada conseguimos esto mismo, obtener permisos desde los servidores de LiteSpeed, para las optimizaciones que se realizarán en la nube.
Por último, configuraremos el sistema de optimización de imágenes para que las peticiones de optimización se tramiten automáticamente, para ello accede a Optimización de imágenes, pestaña Ajustes de optimización de imágenes y activa Cron de petición automática y Cron de obtención automática.
Recomendamos que todos los ajustes tratados a continuación, se prueben de forma gradual, individualmente, cada instalación de WordPress es diferente en plugins, tema, versión, y aunque la mayoría de ajustes son seguros, es mejor ser precabido y evaluar de forma independiente que efectivamente no generan ningún conflicto.
Publica recursos estáticos con una política de caché eficaz
Cuando un usuario accede a una web, el navegador descarga todos los contenidos, ficheros .css, .js, imágenes, etc. Para evitar que estos sean descargados de nuevo durante la navegación, lo correcto es definir una política de caché, le decimos al navegador, "durante x horas, no vuelvas a descargar estos ficheros, ya que no van a cambiar, usa la copia local que tengas almacenada". De esa forma ahorramos transferencia de datos al usuario e incrementamos la velocidad de carga durante la navegación.
Para Google, un tiempo de caché superior a 30 días es positivo, incluso si son ficheros que nunca cambian, 1 año o más.
Pero como tratamos al inicio, el tiempo de vida no depende siempre de nosotros, toda librería o imagen que cargue desde un servidor externo, dependerá exclusivamente del tiempo de caché definido en dicho servidor, no lo podemos alterar.
También habrá casos de contenidos que cambien con frecuencia y no nos interese que el navegador muestre al usuario una imagen o vídeo que podría no estar al día con respecto a la copia almacenada en el servidor.
Siguiendo con nuestro caso ejemplo, definiremos un tiempo de caché desde LiteSpeed Cache, para ello accedemos a WordPress, sección LiteSpeed Cache, subsección Caché y pestaña Navegador.
Activamos Caché del navegador y en TTL caché de navegador definimos en segundos el tiempo de caché, por defecto está en 52 semanas que sería un valor alto y razonable.
Minifica los archivos CSS
En este punto PageSpeed Insights nos recomienda reducir el tamaño de nuestros ficheros CSS, esto se hace con la técnica de la minificación, reduciendo el fichero a su mínima expresión, eliminando saltos de línea y cualquier contenido no imprescindible.
Para este fin accedemos a LiteSpeed Cache, sección Optimización de página, pestaña Ajustes de CSS y activamos Minificar CSS y Combinar CSS.
Con la primera opción minificamos, con la segunda, combinamos todo en un único fichero para reducir las peticiones que el navegador realiza sobre el servidor.
Reduce el contenido CSS que no se use
El contenido CSS sin uso es literalmente eso, directivas definidas en ficheros CSS que realmente no son usados en la maquetación de la web que se muestra al usuario.
Aquí no habría más opción que analizarlo con el depurador del navegador para encontrar estos elementos.
Lo que si te recomendamos es que desactives y elimines cualquier plugin de WordPress que no uses, podrían estar cargando ficheros .css sin que fueses consciente de ellos y repercutiendo negativamente en el rendimiento.
Minifica los recursos JavaScript
Al igual que para los ficheros CSS, los ficheros JavaScript deben ser también minificados y combinados para reducir su tamaño y número de peticiones.
Acede a LiteSpeed Cache, sección Optimización de página, pestaña Ajustes de JS y activa Minificar JS y Combinar JS.
Reduce el contenido JavaScript que no se use
De forma idéntica que para reduce el contenido JS que no se use, buscamos eliminar cualquier librería que no esté siendo utilizada en la página, el propio reporte de PageSpeed Insights te orientará hacia aquellos ficheros que no estén siendo utilizados:
Habilita la compresión de texto
Por defecto todos nuestros servicios tienen activa la compresión de texto usando Gzip o Brotli si el navegador es compatible, no tendrás que hacer nada más, aunque si te recomendaríamos además minificar el código HTML para reducir el tamaño aún más, esto se haría desde LiteSpeed Cache, Optimización de página, pestaña Ajustes HTML y activa Minificar HTML.
Pospón la carga de imágenes que no aparecen en pantalla
Consiste en diferir la carga de las imágenes que no están en el campo visual de la página (se conoce como lazy load), aquellas para las que deberíamos hacer scroll, de esa forma reducimos el peso total de la página y aceleramos la velocidad de carga y navegación.
Esto que parece complejo se puede realizar de forma sencilla desde LiteSpeed Cache, sección Optimización de página, pestaña Ajustes de medios, activando Retrasar la carga de imágenes.
Usa un tamaño adecuado para las imágenes
Se trata del tamaño en pixeles de las imágenes, no el peso, sino el tamaño en pixeles, si se tiene una imagen de 2000px de ancho pero el ancho máximo de la página es de 1200px, se tendría una imagen de un tamaño no adecuado.
Lo mismo ocurre si esta misma imagen está presente en la versión móvil, sería una proporción en pixeles extremadamente alta con respecto al tamaño de la pantalla del usuario.
PageSpeed Insights te mostrará un listado de las imágenes que requieran atención de cara a optimizar su tamaño.
En LiteSpeed, accede a Optimización de página, pestaña Ajustes de medios y activa Añadir tamaños que faltan.
Codifica las imágenes de forma eficaz
Relacionado de nuevo con las imágenes estaría la calidad en la que estas sean guardadas, si la imagen tiene el potencial de reducir su tamaño sin perdida excesiva de calidad, Google PageSpeed Insights mostrará la alerta.
La tarea de optimización se realizaría desde LiteSpeed de forma automática, accede a Optimización de imágenes, pestaña Ajustes de optimización de imágenes y activa Optimizar imágenes originales.
Las imágenes se optimizarán automáticamente, no es necesario realizar ninguna otra acción, solo debes tener en cuenta que las imágenes se envían a servidores de optimización y se descargan cuando están listas, dependiendo del número de imágenes almacenadas esta tarea puede llevar horas e incluso días.
Publica imágenes con formatos de próxima generación
El formato clásico por excelencia para el almacenamiento de imágenes es JPEG, no obstante tiene un competidor, un formato que ocupa menos espacio y que ya tiene compatibilidad con la mayoría de navegadores, WebP.
Por suerte con LiteSpeed Cache beneficiarte de este formato es sencillo, el sistema generará una versión WebP de cada imagen, manteniendo la versión original en JPEG, si el navegador del usuario que accede es compatible con WebP, usará este formato, en caso contrario seguirá usando JPEG.
Accede a Optimización de imágenes, pestaña Ajustes de optimización de imágenes y activa Crear versiones WebP y Reemplazo de imágenes WebP.
Evita un tamaño excesivo de DOM
Simplificando, el DOM sería el árbol de elementos (párrafos, imágenes, bloques, vídeos, listas, etc) que el navegador interpreta vía código HTML, a mayor número de elementos, más CPU requiere el navegador del usuario a la hora de procesar la web a la que se accede.
Aunque puede haber casos en los que no vaya ligado, lo normal es que un mayor número de elementos en DOM se vea reflejado en la cantidad de elementos visible en la página, por ejemplo una categoría donde se muestran 60 productos sin paginación de ningún tipo, tendrá previsiblemente un DOM de tamaño excesivo.
Aquí lo más sencillo como primer paso es evaluar la página visualmente, tenemos un ¿carrusel con 30 productos? ¿Un listado de artículos sin paginación excesivo? Recuerda que menos es más, es mejor facilitar la navegación con pocos elementos, productos, artículos, que sobrecargarla y que el rendimiento del navegador se vea afectado, y, por lo tanto, la experiencia de navegación del usuario.
Elimina los recursos que bloqueen el renderizado
Hay scripts JavaScript y CSS que por su funcionalidad pueden bloquear el renderizado de la página, siendo necesario esperar a que estos sean descargados para que la página sea funcional.
En muchos casos esta carga se puede diferir, haciendo que el navegador cargue en paralelo los ficheros .css y .js sin que el resto de nuestra maquetación deba esperar.
Para probar la carga diferida, accede a Optimización de página, pestaña Ajustes CSS y activa Cargar CSS asíncronamente.
Para los ficheros .js, accede a la pestaña Ajustes de JS y establece Deferir carga de JS en Diferido.
Reducir el uso de código de terceros
Tal como apunta la recomendación, se trata de en lo posible evitar la dependencia de ficheros JavaScript alojados en servidor externos, a veces será imposible no depender de estos (por ejemplo los scripts que facilitan redes publicitarias), en otros casos al ser librerías genéricas si podríamos copiar el fichero js y almacenarlo en nuestro servidor, evitando la llamada de red externa.