Speed Auditor: descubre lo que frena tu WordPress

Algunos administradores de sitios hechos con WordPress viven obsesionados con PageSpeed Insights o GTmetrix. Mi consejo, y el de muchos otros que saben mucho más de esto, es que no hay que darle a esas métricas más importancia de la que tienen.

Si la velocidad de carga percibida es buena no es necesario ponerlo todo "en verde". En muchos casos es hasta contraproducente porque se puede caer en la sobreoptimización, o lo que es peor, puedes terminar arruinando distintas cosas intentando arreglar una.

Aún así, tanto si eres un aficionado al WPO, un apasionado de la optimización o simplemente quieres intentar mejorar la respuesta de tu sitio, estas herramientas son casi imprescindibles. El problema es que ofrecen "fotos fijas" tomadas desde servidores externos. Pero, ¿qué pasa cuando tú, como administrador, navegas por tu web? ¿Qué ocurre con esos anuncios que cargan tarde o ese menú que da un salto justo cuando vas a hacer clic?

Origen

Speed Auditor surge como respuesta a una necesidad personal de tener distintas herramientas de diagnóstico local sencillas pero con cierta potencia. No es un plugin de optimización (no cambia nada en tu código), es un plugin de auditoría en tiempo real.

Si buscas un buen plugin, posiblemente el mejor, de pago para WPO, con el que hacer cambios y ajustes finos, échale un vistazo a Perfmatters. Si por el contrario buscas algo gratuito y simple sin calentarte la cabeza con configuraciones y ajustes, pero con muchas posibilidades, puedes probar WPO Rocket Tweaks de Fernando Tellado, disponible en el repositorio de WordPress.

Si no sabes qué es un nodo DOM o una métrica de latencia, no te preocupes. Speed Auditor está diseñado para que entiendas tu web de un vistazo:

• El indicador inteligente: En tu barra de administración aparecerá un icono que cambia de color. Si está en Verde, tu LCP (el tiempo que tarda en verse lo más importante) es óptimo. Si pasa a Naranja o Rojo, algo necesita tu atención.

• Auditoría mientras navegas: No tienes que configurar nada complejo. Activas el plugin y, mientras revisas tus posts, trabaja en segundo plano analizando si tus imágenes pesan demasiado o si tu servidor está respondiendo con pereza.
• Informes más humanos: Con un clic, descargas un archivo .txt que puedes enviar a tu desarrollador o guardar para comparar resultados tras aplicar cambios.

Bajo el capó

La versión 1.1.8 intenta ofrecer cierta profundidad de diagnóstico que permita ahorrar tiempo de trasteo en la consola del navegador.

• Identificación precisa del LCP: El plugin detecta exactamente qué elemento (imagen o bloque de texto) ha disparado el Largest Contentful Paint.
• Análisis de profundidad del DOM: Crucial para evitar el "DOM size excessive". Speed Auditor desglosa el número de nodos por zonas (Header, Content, Footer) y te avisa si la anidación supera los 15-20 niveles.
• Monitor de latencia de medios: Mide el tiempo de transferencia real (Resource Timing API) de las imágenes. Si una imagen tarda 500ms en descargarse, el plugin la marca como crítica.
• Cero impacto en el servidor: Todo el procesamiento ocurre en el lado del cliente (navegador). No hay consultas pesadas a la base de datos ni procesos PHP que ralenticen el sitio.

El gran salto. Próximamente: Speed Auditor 1.1.9 (con "Radar CLS")

Hasta ahora, el Cumulative Layout Shift (CLS) era una cifra abstracta en un informe. Sabías que algo se movía, pero no siempre sabías qué. Muy pronto, en la versión 1.1.9, esto cambiará.

Se introducirá el botón de radar o Visual CLS "Highlighter".

Imagina activar un modo "radar" que dibuja cajas rojas sobre cualquier elemento que se desplace mientras haces scroll. Esto, que ya hacen algunas extensiones, con más o menos éxito, siempre es una ayuda visual muy útil para intentar cazar esos "desbordamientos" que a veces se escapan a la vista.

• ¿Será un banner de AdSense el que empuja tu contenido? Lo verás con una caja roja. Puedes profundizar en este problema aquí.
• ¿Es una imagen sin dimensiones definidas? El radar la atrapará.
• Persistencia total: Podrás navegar por toda tu web con el radar encendido; el plugin recordará que quieres seguir auditando visualmente cada rincón.

Esta actualización incluirá además un breve glosario técnico, que se irá ampliando para añadir consejos y pequeños tutoriales, que estará integrado en tu panel de WordPress, para que términos como ins, iframe o figure dejen de ser un misterio.

La idea es ir mejorando tanto la respuesta del análisis como de los informes que se generen a medida que lo vaya probando en distintos escenarios y si recibo alguna que otra sugerencia de mejora o avisos de errores.

La versión 1.1.8 ya está disponible para poner orden en tus métricas, y pronto, la 1.1.9 facilitará aún más la corrección de la estabilidad visual de WordPress. Si la instalas ahora, en breve recibirás la actualización.

¿Cómo funciona?

El código sigue estos tres pasos:

1. El observador (PerformanceObserver)

El navegador (Chrome, Edge, Opera) tiene una API nativa llamada Performance API. El plugin registra un "vigilante" llamado PerformanceObserver configurado específicamente para el tipo de entrada layout-shift.

Cada vez que algo se mueve en la pantalla después de que se ha pintado inicialmente, el navegador genera un evento. El plugin atrapa ese evento y extrae dos datos clave:

• El valor del desplazamiento: (Ese número como 0.0145).
• El elemento culpable: El navegador le dice al plugin exactamente qué nodo del HTML se movió.

2. El filtro de "Interacción Reciente"

Aquí es donde el plugin intenta ser inteligente. No todos los movimientos son "malos". Si tú haces clic en un menú desplegable y el contenido baja, eso es un movimiento esperado por el usuario.

El plugin verifica una propiedad llamada hadRecentInput. Si tú has tocado una tecla o hecho clic en los últimos 500ms, el navegador marca ese movimiento como "esperado" y el plugin lo ignora para no dar falsos positivos. Solo detecta los movimientos que ocurren de forma inesperada (como un anuncio que aparece de repente).

3. El renderizado visual (Las cajas rojas)

Una vez que el plugin tiene el elemento que se ha movido, entra en juego la parte visual:

1. Cálculo de coordenadas: Usa una función llamada getBoundingClientRect() para saber dónde está ese elemento en la pantalla en ese preciso momento (píxel arriba, píxel izquierda).
2. Inyección del marco: Crea un div con posición absoluta, un borde rojo de 2px y un z-index altísimo para que se dibuje por encima de todo.
3. La etiqueta: Añade un pequeño recuadro arriba a la izquierda de la caja roja con el nombre de la etiqueta (ins, img, div) y el valor del CLS acumulado.

Preguntas frecuentes