Hay un elemento en cada página, casi siempre una imagen, que pesa más que ningún otro en si tu web se siente rápida o lenta nada más entrar.
Me refiero a lo que Google mide como LCP (el tiempo que tarda en aparecer el bloque más grande de tu pantalla), y cuanto antes aparezca, mejor.
El problema es que WordPress tiene que adivinar cuál es esa imagen sin haberte visto navegar, y esa adivinanza falla más de lo que te gustaría.
La buena noticia es que ya existe una forma de que WordPress deje de adivinar el elemento inicial más pesado de tu página y lo sepa de verdad, a partir de datos reales de tus propios visitantes.
En este artículo te cuento qué es, qué gana tu web con ello, qué pegas tiene todavía, y qué hacer si prefieres quedarte con algo más probado mientras tanto.
Optimization Detective e Image Prioritizer
El núcleo de WordPress lleva desde la versión 6.3 detectando de forma automática cuál es probablemente la imagen del LCP, casi siempre la destacada, y le añade el atributo fetchpriority="high" sin que hagas nada.
El límite de esa detección automática es que se basa en heurísticas desde el servidor, reglas fijas que no saben cómo se ve realmente tu web en un móvil, en una tablet o con una ventana pequeña de escritorio.
Esas heurísticas aciertan la imagen correcta en torno a la mitad de las veces, mientras que la otra mitad, el navegador, recibe la orden de prioridad equivocada. Optimization Detective nace para resolver justo eso.
Es un plugin del equipo de rendimiento de WordPress que no optimiza nada por sí solo, es un framework que recoge datos reales de tus visitantes (o RUM, siglas de Real User Monitoring, monitorización de usuarios reales) sobre qué elemento se pinta primero en cada tipo de dispositivo.
No tiene pantalla de ajustes ni la va a tener, funciona solo, en segundo plano. El que hace algo con esos datos es Image Prioritizer, el plugin que depende de Optimization Detective para funcionar.
Con la información real de tus visitas, añade fetchpriority="high" a la imagen que de verdad es el LCP en cada punto de ruptura, ajusta la carga diferida para que no se quede vacío justo lo que sí se ve al entrar, y reduce el peso del fotograma inicial de los vídeos que hacen de LCP.
Anteriormente, Image Prioritizer también calculaba el atributo sizes de las imágenes responsive, pero ya no, esa función se quitó por un problema, y hoy ese trabajo lo hace otro plugin del mismo equipo, Enhanced Responsive Images.
¿Para cuándo estará esto en WordPress?
El equipo de rendimiento suele probar la funcionalidad completa en un plugin independiente, la validan con tráfico real de decenas de miles de webs, y cuando por fin entra en el núcleo, suele hacerlo con ajustes más prudentes que los que tenía el plugin original.
Ya te conté ese proceso con la carga especulativa nativa, que también nació como plugin, se probó en más de 50.000 sitios, con una mejora media del 1,9% en LCP en los que lo llevaban activado, y aterrizó en WordPress 6.8 con el modo prefetch y la anticipación más conservadora en vez del prerender y la anticipación moderada que traía el plugin.
El cálculo del atributo sizes para imágenes con carga diferida siguió un camino parecido hasta la versión 6.7.
Dicho esto, no hay fecha para Optimization Detective ni para Image Prioritizer. Ninguno de los dos aparece nombrado de momento en planes de futuras versiones, solo Enhanced Responsive Images y View Transitions figuran como trabajo del equipo de rendimiento en marcha hacia alguna versión de WordPress de las próximas.
Esa cosa es cojonuda ¿no? … pues no del todo
Antes de que instales los dos plugins unos cuantos peros que conviene que conozcas:
- Los dos siguen en beta: Optimization Detective en la 1.0.0-beta5 e Image Prioritizer en la 1.0.0-beta3, y ninguno tiene pantalla de ajustes.
- No deberías usar plugins canonical en webs en producción: Como cualquier plugin de este tipo su misión es terminar en el núcleo de WordPress y, aunque te corroa la impaciencia, no deberías usarlos como si fuesen plugins normales, nunca, ni estos ni ningún otro.
- Necesitas la API REST abierta a visitantes anónimos: Así es como se recogen los datos de cada visita. El propio plugin trae un aviso en Salud del sitio que te avisa si la tiene bloqueada, así que no te vas a quedar a ciegas. Si usas Vigilante con el modo de protección de la API REST más restrictivo, revisa que no le esté cerrando el paso a este plugin en concreto, o nunca vas a ver ninguna optimización aplicada sin saber por qué.
- No optimiza nada para ti como administrador: Hace falta que sean visitantes normales, así que no esperes ver cambios nada más activarlo, necesitas que pase tráfico real primero, para móvil y para escritorio.
¿Hago algo ya?
No hay una respuesta única, depende de cuánto te guste ir por delante y de cuánto tiempo le quieras dedicar, pero sobre todo teniendo en cuenta que si pruebas este tipo de plugins debe ser únicamente como experimentación.
Si no te importa que algo esté en beta y tienes tráfico suficiente para que se llenen de datos las visitas en pocos días, con todas las precauciones, instala Optimization Detective y Image Prioritizer, revisa el código fuente de tu web a los pocos días y compara.
Si prefieres no depender de tráfico acumulado ni de tener la API REST abierta a cualquiera, y quieres algo que ya lleva tiempo funcionando sin sorpresas hay plugins que sí puedes usar ya para optimizar WordPress.
¿De qué plugin estás hablando?
Sabes que hay muchos plugins de optimización, pero yo solo uso uno gratuito, DietPress, y este ya pone fetchpriority="low" a todas las imágenes menos la primera, sin mirar visitas ni dispositivos, una regla fija que sigue siendo mejor que lo que hace el núcleo por su cuenta con el resto de imágenes de la página, que es no hacer nada.
Pero esa regla fija y la lógica de Image Prioritizer, que decide con visitas reales por punto de ruptura, no siempre van a estar de acuerdo. Si en el móvil la imagen importante no es la primera del HTML, más habitual de lo que parece con maquetadores y avisos que se cuelan antes del contenido, tu plugin le estaría bajando la prioridad justo a la imagen a la que el otro se la quiere subir.
Lo tengo controlado, en cuanto Image Prioritizer deje la beta adaptaré DietPress para que no se pisen cuando se incorpore en WordPress, todavía no sé si apartándose cuando lo detecte o afinando la regla, pero se adapta, eso seguro.
Y si prefieres no tocar nada de esto todavía, tampoco pasa nada. Por el patrón que te contaba antes, es candidato real a acabar en el núcleo tarde o temprano, y cuando lo haga no vas a tener que instalar ni configurar nada, como pasó con la carga especulativa.
Elijas lo que elijas, tu web no tiene por qué seguir dependiendo de una adivinanza para saber cuál es su imagen más importante, y eso tarde o temprano juega a tu favor.
Si acabas probando alguno de los dos plugins, cuéntame qué tal te ha ido, aquí abajo en los comentarios tienes hueco.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
