PageSpeed Insights

El pasado 3 de noviembre de 2021, se publicó un artículo en el blog de WebDev donde explican las novedades que han traído a esa fecha respecto a la herramienta online de performance PageSpeed Insights.

PageSpeed Insights new tool

Algunas de las novedades son:

  • Ofrecer más información y claridad en el reporte respecto a cómo se extrae la data (field & data) que se muestra tras un análisis, por ejemplo:

Campo:

Laboratorio:

  • Diferenciar claramente lo que son los datos de campo y de laboratorio, especificando qué significa cada uno.
  • Pasa a estar bajo un subdominio de webdev como es https://pagespeed.web.dev/
  • Datos de Origen vs URL: los datos de Origen son los datos que ofrece CrUX en agregado para todas las páginas del dominio (muestra)
Resumen:


Search Console y PageSpeed ​​Insights son herramientas que informan sobre las experiencias reales de los usuarios en tu sitio aunque lo hagan con diferentes niveles de granularidad.

Sin embargo, Lighthouse (que también se informa en PageSpeed ​​Insights en la sección "Datos de laboratorio") informa sobre experiencias sintéticas / simuladas o también conocidas como de Laboratorio.

Ten en cuenta que la discrepancia de valores en las CWV que da SPI entre Field Data y Lab Data existen porque la forma de analizarlos es diferente. En Lab te ayuda a debugger la página mientras que Field te da la información real de experiencia de usuario. Más info.

Recomendable: realizar siempre el mismo análisis con esta herramienta de PSI ya que, por un lado utiliza datos de usuarios reales teniendo en cuenta diferentes conexiones, etc. y por otro lado, porque el análisis corre en una máquina de Google y siempre utiliza la misma (en lugar de correr el test en la tuya que puede cambiar…).

Lo malo de los datos de campo que usa la herramienta, es que se recogen cada 28 días y no en tiempo real, por lo que esa información que ofrece tras el análisis es de los últimos 28 días / 1 mes.

Muy interesante el resumen que hace de esta parte midudev en uno de sus directos de Twitch donde explica a detalle el comportamiento de esta herramienta y el repaso a las herramientas de Lighthouse y PageSpeed Insights en este vídeo de Youtube extraído del directo.

Como utilidad, os comparto lo que sería el código de marcador rápido que habría que incluir en tu navegador favorito para que, a la hora de querer realizar un análisis rápido con esta herramienta, simplemente clicando en ese marcado, te abra directamente el análisis ya ejecutado de cualquier url que estés viendo desde el navegador.

javascript:void(window.open(%27https://pagespeed.web.dev/report?url=%27+window.location.href,%27_blank%27));

CONTEXTO

El 17 de enero de 2018 Google hizo oficial un comunicado que sin duda trajo efectos directos sobre el posicionamiento de los sitios webs desde dispositivos móviles. Y es que Google resume en su post que la velocidad de la página en móvil es considerada una señal de posicionamiento desde de Julio de 2018 (al igual que ya hizo en 2010 con la velocidad de página como factor de ranking en desktop).

Tal y como afirman en el post, el impacto de este nuevo cambio en el algoritmo sólo afecta a un pequeño porcentaje de las queries en móvil (pero teniendo en cuenta el gran volumen de datos que maneja el buscador, este update afecta a un volumen importante de sitios web).

El consumo actual que representa el entorno mobile supone en torno al 60% del tráfico desde los distintos buscadores, no sólo Google. Por tanto, es clave tener controlado los tiempos de carga en página y reducirlos lo máximo posible.

Por cada segundo que tarda una página en cargarse en un dispositivos móvil, las conversiones pueden disminuir hasta un 20% Estudio de Google/SOASTA.

Sin duda este movimiento de Google hace referencia más allá de la velocidad de página como factor SEO, y es, el mejorar la experiencia de usuario en móvil (por ejemplo: los vídeos y audios configurados en autoplay empeoran la usabilidad, además de hacer más lenta la carga de la página al cargar contenido innecesario; o mostrar publicidad en formato full-page pop-ups e interstitials).

Illyes dijo en una ocasión que la forma en la que Google calcula la velocidad de página para desktop no funciona para calcularla en móvil, de ahí la necesidad de lanzar esta nueva forma.

¿Y QUÉ PASA CON LAS PÁGINAS AMP?

Si usas AMP en tus páginas, no tienes de qué preocuparte en cuanto a tiempos de carga, ya que está demostrado que el tiempo de descarga de las páginas AMP es mucho menor que la página canonical (en la mayoría de las veces) teniendo en cuenta que ya parte de un framework optimizado y en su core reducen el js a la máxima expresión.

CÓMO ANALIZAR EL TIEMPO DE CARGA DE MI PÁGINA MÓVIL Y SU RENDIMIENTO

  • Desde GSC en Rastreo -> Estadísticas de rastreo.
    • Tamaño total de la descarga: «Tamaño total de todos los archivos y recursos descargados durante los rastreos hechos durante el periodo indicado. No se cuentan los recursos que ya estaban en la caché por haberse rastreado antes. En el tamaño (indicado en bytes), se incluyen archivos HTML, bytes de imágenes asociadas, archivos de secuencias de comandos y archivos CSS.»
    • Tiempo medio de respuesta: «Tiempo medio que se tarda en obtener el contenido de una página como respuesta a una solicitud de rastreo. No se incluyen el tiempo que se tarda en obtener los recursos de la página (secuencias de comandos, imágenes u otro contenido vinculado o insertado) ni el tiempo de renderizado.»
  • Desde la herramienta de PageSpeedInsights : a través de una reciente actualización de la herramienta, se puede comprobar la velocidad de una página teniendo en cuenta lo que denominan First Contentful Paint (FCP) y el DOM Content Load (DCL), es decir, el momento en el que los usuarios obtienen respuesta visual de la página, y el momento en el que se cargan los documentos de la página.
  • Con la aplicación Lighthouse podrás hacer auditorías de las páginas que quieras analizar y saber así el rendimiento de la página, etc.