Existen herramientas que te ayudan a controlar el rendimiento de la página y a evaluar tus mejoras. Una de las mejores es PageSpeed Insights. Está disponible como una aplicación web y como pestaña Lighthouse en las DevTools de Chrome (las mismas DevTools también están disponibles en Edge, Opera, Brave y Vivaldi).
El rendimiento de las páginas web es más importante que nunca. Los usuarios esperan una experiencia ágil y receptiva que rivalice con las aplicaciones de escritorio. Además, Google’s Core Web Vitals mide el rendimiento de la página: influye en el PageRank y en tus esfuerzos de optimización para motores de búsqueda.
WordPress gestiona más de un tercio de todos los sitios web, pero su rendimiento se ve afectado por un alojamiento ineficaz, temas lentos y una dependencia excesiva de los plugins. Puedes solucionar la mayoría de los problemas cambiando a un buen alojamiento web y utilizando las mejores técnicas de rendimiento.
Acceder a Lighthouse
Inicia Lighthouse abriendo la página que quieras examinar y pulsando Ctrl/Cmd + Mayús + I o eligiendo Herramientas para desarrolladores en Más herramientas en el menú. Cambia a la pestaña Lighthouse y haz clic en el botón Analizar carga de página. Los resultados se muestran al cabo de unos segundos:
Puedes profundizar en los porcentajes de nivel superior para descubrir más información y sugerencias que aborden problemas conocidos. La herramienta es inestimable, pero tiene sus inconvenientes:
- Debes iniciar manualmente una ejecución para cada página que estés probando.
- No es fácil registrar cómo han mejorado o empeorado los factores con el tiempo.
- Hay muchos datos que comprobar y es fácil equivocarse.
- Los detalles técnicos están pensados para los desarrolladores. Posiblemente resulte abrumador para los clientes y administradores que quieren una visión rápida de los progresos.
- Las ejecuciones de Lighthouse pueden verse influidas por las velocidades del dispositivo local y de la red, lo que podría dar lugar a falsas suposiciones.
La API de PageSpeed Insights proporciona una forma de resolver estos problemas para que las pruebas puedan automatizarse, registrarse y compararse.
¿Qué es la API PageSpeed Insights?
Google proporciona una API REST gratuita de PageSpeed Insights que devuelve datos en formato JSON con todas las métricas de Lighthouse y mucho más. Te permite automatizar ejecuciones de páginas, almacenar los datos resultantes, revisar los cambios a lo largo del tiempo y mostrar la información exacta que necesitas.
La API de PageSpeed Insights emula la forma en que Google ve tu sitio. Podrías ejecutar un informe cada pocos días o siempre que publiques una actualización de rendimiento.
Los resultados son útiles, pero no necesariamente indicativos de la experiencia real del usuario. La API de rendimiento del navegador es una opción mejor cuando quieres controlar el rendimiento real en todos los dispositivos y redes de tus usuarios.
Inicio rápido de la API PageSpeed Insights
Copia la siguiente dirección en tu navegador y edita la página url para evaluar el rendimiento de tu página:
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/
Firefox es ideal porque tiene un visor JSON incorporado, aunque Chrome tiene extensiones que proporcionan la misma funcionalidad. A continuación se resalta la puntuación general de rendimiento de Lighthouse:
Puedes cambiar la cadena de consulta de la URL de la API según tus propias páginas y preferencias. El único parámetro obligatorio es url, por ejemplo
url=https://mysite.com/page1
Por defecto se ejecuta una prueba de escritorio, pero puedes solicitarla explícitamente con:
strategy=desktop
o cambiar a móvil con:
strategy=mobile
Sólo se ejecutan pruebas de rendimiento, a menos que especifiques una o varias categorías de interés:
category=performance
category=accessibility
category=best-practices
category=seo
category=pwa
Se puede definir un idioma concreto estableciendo una configuración regional, como el francés:
locale=fr-FR
y los detalles de la campaña de Google Analytics pueden establecerse con:
utm_campaign=<campaign>
utm_source=<source>
El servicio es gratuito para las solicitudes poco frecuentes, pero tendrás que registrarte para obtener una clave de la API de Google si pretendes realizar muchas pruebas desde la misma dirección IP en un breve periodo de tiempo. La clave se añade a la URL con:
key=<api-key>
Puedes construir la cadena de consulta de la URL especificando los parámetros que elijas separados por caracteres et (&). La siguiente URL de la API prueba la página en https://mysite.com/ utilizando un dispositivo móvil para evaluar el rendimiento y los criterios de accesibilidad:
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mysite.com/&strategy=mobile&category=performance&category=accessibility
Puedes construir tus propias URL o utilizar la herramienta de creación de URL de la API PageSpeed de Google si necesitas más ayuda.
Resultados JSON de la API PageSpeed Insights
Las pruebas suelen devolver unos 600 Kb de datos JSON en función de las categorías elegidas, el número de activos de la página y la complejidad de las capturas de pantalla (incrustadas en formato base64).
La cantidad de datos es desalentadora, hay cierta duplicación y la documentación de los resultados no siempre es clara. El JSON se divide en cuatro secciones, como se describe a continuación.
loadingExperience
Son métricas calculadas para la experiencia de carga de la página del usuario final. Incluye información como el CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFUL_PAINT_MS y FIRST_INPUT_DELAY_MS de Core Web Vitals. Los detalles y un valor de «categoría» devuelven RÁPIDO, MEDIO, LENTO o NINGUNO si no se ha realizado ninguna medición. Ejemplo:
"loadingExperience": {
"metrics": {
"CUMULATIVE_LAYOUT_SHIFT_SCORE": {
"percentile": 0,
"distributions": [
{
"min": 0,
"max": 10,
"proportion": 0.970
},
{
"min": 10,
"max": 25,
"proportion": 0.017
},
{
"min": 25,
"proportion": 0.012
}
],
"category": "FAST"
},originLoadingExperience
Se trata de métricas agregadas calculadas para las experiencias de carga de páginas de todos los usuarios. Las secciones son idénticas a loadingExperience anterior y es poco probable que los sitios con menos tráfico muestren alguna diferencia en las cifras.
lighthouseResultado
Esta es la sección más grande y contiene todas las métricas de Lighthouse. Proporciona información sobre la prueba:
- requestedUrl – la URL solicitada
- finalUrl – la página real probada después de seguir todas las redirecciones
- lighthouseVersion – la versión del software
- fetchTime – la hora a la que se ejecutó la prueba
- userAgent – la cadena del agente de usuario del navegador utilizado para la prueba
- environment – información ampliada del agente de usuario
- configSettings – los ajustes pasados a la API
A continuación hay una sección de «auditorías» con muchas secciones, entre las que se incluyen unused-javascript, unused-css-rules, total-byte-weight, redirects, dom-size, largest-contentful-paint-element, server-response-time, network-requests, cumulative-layout-shift, first-meaningful-paint, screenshot-thumbnails y full-page-screenshot.
La mayoría de las métricas de auditoría proporcionan una sección de «detalles» que contiene factores como «overallSavingsBytes» y «overallSavingsMs», que estiman los beneficios de aplicar una mejora del rendimiento.
Las secciones «captura de pantalla» de página completa y miniatura contienen datos de imagen base64 incrustados.
Una sección de «métricas» proporciona un resumen de todas las métricas en una matriz de «elementos», por ejemplo
"metrics": {
"id": "metrics",
"title": "Metrics",
"description": "Collects all available metrics.",
"score": null,
"scoreDisplayMode": "informative",
"details": {
"type": "debugdata",
"items": [{
"observedFirstVisualChange": 234,
"observedFirstContentfulPaint": 284,
"interactive": 278,
"observedFirstPaintTs": 1579728174422,
"observedDomContentLoaded": 314,
// ... etc ...
}]
},
"numericValue": 278,
"numericUnit": "millisecond"
},La sección «auditorías» va seguida de «categorías», que proporciona puntuaciones globales de Lighthouse para las categorías elegidas pasadas en la URL de la API:
"categories": {
"performance": {
"id": "performance",
"title": "Performance",
"score": 0.97,
"auditRefs": [
//...La «puntuación» es un número entre 0 y 1 que normalmente se muestra como porcentaje en los informes de Lighthouse. En general, una puntuación de:
- 0,9 a 1,0 es buena
- De 0,5 a menos de 0,9 indica que es necesario mejorar
- menos de 0,5 es deficiente y requiere una atención más urgente
La sección «auditRefs» proporciona una lista de todas las métricas y las ponderaciones utilizadas para calcular cada puntuación.
analysisUTCTimestamp
Por último, se indica el tiempo de análisis. Debe ser idéntica a la hora indicada en lighthouseResult.fetchTime.
Métricas Útiles de los Resultados JSON
Te recomiendo que guardes y examines el resultado JSON en un editor de texto. Algunos tienen formateadores JSON incorporados o disponibles como plugins. Como alternativa, puedes utilizar herramientas gratuitas en línea como:
Es probable que las siguientes métricas te resulten útiles. Recuerda establecer las opciones de categoría asociadas en la URL según sea necesario.
Resumen de las métricas
Puntuaciones globales de 0 a 1:
| Rendimiento | lighthouseResult.categories.performance.score |
| Accesibilidad | lighthouseResult.categories.accessibility.score |
| Mejores prácticas | lighthouseResult.categories.best-practices.score |
| SEO | lighthouseResult.categories.seo.score |
| Progressive Web App (PWA) | lighthouseResult.categories.pwa.score |
Métricas de rendimiento
Incluyen puntuaciones Core Web Vitals de 0 a 1:
| First Contentful Paint | lighthouseResult.audits.first-contentful-paint.score |
| First Meaningful Paint | lighthouseResult.audits.first-meaningful-paint.score |
| Largest Contentful Paint | lighthouseResult.audits.largest-contentful-paint.score |
| Speed Index | lighthouseResult.audits.speed-index.score |
| Cumulative Layout Shift | lighthouseResult.audits.cumulative-layout-shift.score |
Otras puntuaciones de rendimiento útiles son:
| Server response Time | lighthouseResult.audits.server-response-time.score |
| Is crawlable | lighthouseResult.audits.is-crawlable.score |
| Console Errors | lighthouseResult.audits.errors-in-console.score |
| Total byte weight | lighthouseResult.audits.total-byte-weight.score |
| DOM size score | lighthouseResult.audits.dom-size.score |
Normalmente puedes obtener cifras y unidades reales como:
- lighthouseResult.audits.total-byte-weight.numericValue –
el tamaño total de la página, por ejemplo 450123 - lighthouseResult.audits.total-byte-weight.numericUnit –
las unidades utilizadas para el tamaño total de la página, por ejemplo «byte»
Como alternativa, «displayValue» suele contener un mensaje legible con la cifra y la unidad:
- lighthouseResult.audits.server-response-time.displayValue –
un mensaje sobre el tiempo de respuesta, por ejemplo «El documento raíz tardó 170 ms» - lighthouseResult.audits.dom-size.displayValue –
un mensaje sobre el número de elementos en el DOM, por ejemplo, «543 elementos»
Crear un Panel de Rendimiento Sin Código
Las fuentes API en directo pueden leerse y procesarse en muchos sistemas, incluido Microsoft Excel. (Extrañamente, Google Sheets no admite feeds JSON sin más plugins o código macro. Sí admite XML)
Para importar la puntuación de rendimiento global en tiempo real a Excel, inicia una nueva hoja de cálculo, cambia a la pestaña Datos y haz clic en Desde la Web. Introduce la URL de la API de PageSpeed Insights y pulsa Aceptar:
Haz clic en Conectar en el siguiente cuadro de diálogo y mantén la configuración predeterminada (Anónimo). Pasarás a la herramienta Configuración de la consulta:
Haz clic en Grabar a la derecha de la métrica de resultados del lighthouse. A continuación, haz clic en lo mismo en categorías y rendimiento para desglosar la jerarquía de objetos JSON:
Haz clic en el icono En tabla de la parte superior de las opciones del menú contextual.
A continuación, puedes hacer clic en la flecha de filtro del encabezamiento de la tabla para eliminar todo lo que no sea la puntuación antes de hacer clic en Aceptar:
Por último, haz clic en Cerrar y cargar para mostrar la puntuación de la actuación en directo en tu hoja de cálculo:
Puedes seguir el mismo proceso para otras métricas de interés.
Crear un Panel de Rendimiento web
Esta demostración de Codepen proporciona un formulario en el que puedes introducir una URL y elegir análisis de escritorio o móvil para obtener resultados.
El código crea una URL de PageSpeed Insights, llama a la API y, a continuación, presenta varios resultados en una tabla resumen que es más rápida de ver que un informe estándar de Lighthouse:
La función asíncrona startCheck() se ejecuta cuando se envía el formulario. Cancela el evento de envío y oculta los resultados anteriores:
// make API request
async function startCheck(e) {
e.preventDefault();
show(resultTable, false);
show(status);
show(error, false);A continuación, construye apiURL a partir de los datos del formulario y desactiva los campos:
const
form = e.target,
fields = form.firstElementChild,
data = new FormData(form),
qs = decodeURIComponent( new URLSearchParams(data).toString() ),
apiURL = form.action + '?' + qs;
fields.disabled = true;La API Fetch se utiliza para llamar a la URL de PageSpeed, obtener la respuesta y analizar la cadena JSON en un objeto JavaScript utilizable. Un bloque try/catch garantiza que se capturen los fallos:
try {
// call API and get result
const
response = await fetch(apiURL),
result = await response.json();El objeto resultado se pasa a una función showResult(). Ésta extrae las propiedades y las coloca en la tabla de resultados o en cualquier otro elemento HTML que tenga el atributo data-point establecido en una propiedad de la API PageSpeed, por ejemplo
<td data-point="lighthouseResult.categories.performance.score"></td>
Fin del bloque try:
// output result
showResult(result);
show(status, false);
show(resultTable);
}Por último, un bloque catch se encarga de los errores y los campos del formulario se vuelven a habilitar para que se puedan ejecutar más pruebas:
catch(err) {
// API error
console.log(err);
show(status, false);
show(error);
}
fields.disabled = false;
}Otras Opciones de Desarrollo
El código de ejemplo anterior obtiene un resultado de la API de PageSpeed Insights cuando lo solicitas. El informe es más configurable que Lighthouse, pero la ejecución sigue siendo un proceso manual.
Si pretendes desarrollar tu propio panel de control, puede resultar práctico crear una pequeña aplicación que llame a la API de PageSpeed Insights y almacene el JSON resultante en un nuevo registro de base de datos con la URL probada y la fecha/hora actual. La mayoría de las bases de datos son compatibles con JSON, aunque MongoDB es la más adecuada para esta tarea. Una tarea cron puede llamar a tu aplicación de forma programada, quizás una vez al día a primera hora de la mañana.
A continuación, una aplicación del lado del servidor puede implementar su propia API REST para tus requisitos de elaboración de informes, por ejemplo, devolver los cambios en métricas de rendimiento específicas entre dos fechas. Puede ser llamada por JavaScript del lado del cliente para mostrar tablas o gráficos que ilustren las mejoras de rendimiento a lo largo del tiempo.
Si quieres crear informes complejos con cantidades significativas de datos, es preferible precalcular las cifras una vez al día en el momento en que estén disponibles los nuevos datos de PageSpeed. Después de todo, ¡no querrás mostrar cómo está mejorando el rendimiento en un informe que tarda minutos en generarse!
Resumen
La herramienta Lighthouse de Chrome es fabulosa, pero es una faena evaluar con frecuencia muchas páginas. La API de PageSpeed Insights te permite evaluar el rendimiento del sitio mediante técnicas programáticas. Las ventajas:
- Las pruebas de rendimiento se pueden automatizar. No puedes olvidarte de ejecutar una prueba.
- Los resultados se recopilan en los servidores de Google, por lo que los factores de velocidad del dispositivo local y de la red tienen menos influencia.
- Las métricas incluyen información que normalmente no está disponible en Lighthouse.
- Las métricas importantes pueden registrarse y supervisarse a lo largo del tiempo para garantizar que el rendimiento de la página ha mejorado con cada actualización.
- La información sobre SEO, rendimiento y accesibilidad puede mostrarse en informes simplificados para que esté disponible de un vistazo para desarrolladores, gestores y clientes.
Deja una respuesta