Tip rápido para mejorar la carga de imágenes en WordPress/Joomla

Hola a todos,

Últimamente he estado optimizando varios proyectos y quería compartir un ajuste técnico que marca una diferencia inmediata en los Core Web Vitals (específicamente en el LCP - Largest Contentful Paint), tanto en WordPress como en Joomla.

Muchos sitios sufren de una carga lenta debido a imágenes pesadas en el above the fold (la parte superior que carga primero). La mayoría de los CMS cargan todas las imágenes al mismo tiempo, saturando la conexión inicial.

El tip:

Si usas imágenes pesadas en el encabezado o hero banner, asegúrate de aplicar el atributo fetchpriority="high" en tu etiqueta <img>.

• ¿Qué hace esto? Le dice al navegador: "Prioriza la descarga de esta imagen sobre cualquier otro script o archivo".
• ¿Dónde ponerlo? En WordPress, muchos constructores permiten añadir atributos personalizados. En Joomla, puedes hacerlo directamente en el override de la plantilla o mediante un pequeño script en el onAfterRender.

Resultado: El navegador priorizará la imagen principal, mejorando drásticamente el tiempo de percepción visual para el usuario móvil y, por ende, tu puntuación en PageSpeed.

Un error común es intentar optimizar todo con plugins que pesan más que la propia optimización. A veces, un pequeño ajuste en el HTML es mucho más eficiente que instalar otro addon de 2MB.

Espero que les sirva para sus proyectos. ¿Alguien más ha notado mejoras drásticas haciendo este cambio en el fetchpriority?

Saludos.

¿En WordPress eso se puede colocar en elementor en código personalizado dentro de las características del elemento? En el panel izquierdo cuando estás editando la página o la imagen

Hola, @josuerr29, es una excelente pregunta. La respuesta corta es: sí, pero depende de si tienes la versión Pro o la gratuita de Elementor.

Aquí te explico cómo aplicarlo en ambos escenarios:

1. Si usas Elementor Pro: Puedes usar el widget HTML o, mejor aún, aprovechar las funciones de "Atributos" si el elemento lo permite. Sin embargo, lo más limpio para una imagen específica es arrastrar un widget HTML y colocar ahí el código de la imagen directamente:<img src="tu-imagen.jpg" fetchpriority="high" alt="descripción">
2. Si usas Elementor gratuito (y el widget de imagen nativo): Elementor no tiene un campo nativo para añadir fetchpriority en el panel de configuración de la imagen. La forma más técnica y efectiva de hacerlo sin romper nada es mediante un pequeño script en el footer de tu página que añada el atributo dinámicamente a la imagen (seleccionándola por su clase o ID), o usando un hook en el functions.php de tu tema hijo.

Un consejo importante: No apliques fetchpriority="high" a todas las imágenes, solo a la más importante (el hero banner o la imagen principal). Si se lo pones a todas, pierdes el beneficio de rendimiento, ya que el navegador no sabrá cuál priorizar realmente y saturarás la red.

¿Estás intentando aplicarlo en una página de producto o en el banner principal?

Utiliza el plugin Performance Lab para optimizar tu sitio web. Te ayudaré a que tu sitio web se cargue más rápido.

WebowAgency dijo:

Utiliza el plugin Performance Lab para optimizar tu sitio web. Te ayudaré a que tu sitio web se cargue más rápido.

Hacer clic para expandir...

¡Gracias por la recomendación, WebowAgency! El plugin Performance Lab (impulsado por el equipo de WordPress) es excelente para integrar características experimentales y mejoras de rendimiento nativas, como la carga diferida o la gestión eficiente de imágenes.

Sin embargo, en proyectos con arquitecturas muy ajustadas o donde prefiero evitar dependencias de plugins adicionales que puedan sumar peso innecesario, suelo inclinarme por intervenciones directas a nivel de código o mediante la capa de borde (edge). Aun así, es una gran herramienta que vale la pena tener en el radar para optimizaciones estándar. ¡Agradezco mucho el aporte!