¡Imágenes hero de Elementor más rápidas en 2 minutos!

Imágenes hero de Elementor más rápidas

Elementor, un popular editor de páginas de WordPress, simplifica el diseño de páginas. Desafortunadamente, a menudo ralentiza los sitios. A veces debido a errores del usuario y a veces debido a las decisiones de diseño de Elementor. Un ejemplo que veo casi a diario es cómo Elementor maneja las imágenes hero. Por defecto, Elementor utiliza imágenes de fondo para estas, lo que ralentiza la carga de la página cada vez.

El atractivo de las imágenes de fondo de Elementor

Elementor añade las imágenes hero como imagen de fondo por defecto. Mientras editas la página con Elementor, simplemente haz clic en el primer contenedor, navega a estilo y añade tu imagen. Es fácil, conveniente y a prueba de errores. Si eso es suficiente para ti, deja de leer aquí, pero si te importan tus visitantes, sigue leyendo y aprende a crear imágenes hero de Elementor de la manera correcta.

El problema con las imágenes de fondo de Elementor

Ahora, ¿qué tienen de malo las imágenes de fondo? Las imágenes de fondo son conocidas por este comportamiento: se extienden por todo el fondo de un elemento. Hace lo que necesita hacer. Pero con un coste de rendimiento:

• Descubrimiento tardío: Desde una perspectiva técnica, las imágenes de fondo están lejos de ser ideales. Las imágenes de fondo de Elementor no se descubren inmediatamente en el HTML. Estas imágenes de fondo están vinculadas en hojas de estilo. Como las hojas de estilo deben descargarse y analizarse por separado, eso significa que se descubren mucho más tarde durante el proceso de renderizado.
• No optimizadas para velocidad:  Las imágenes de fondo no están optimizadas para velocidad porque carecen de propiedades más nuevas como lazy loading nativo, fetchpriority y decodificación asíncrona.
• No responsivas: Por último, pero no menos importante, las imágenes de fondo de Elementor no son responsivas y siempre cargarán una imagen de tamaño de escritorio completo, incluso para dispositivos móviles pequeños.

No entraré en mucho más detalle (si te interesa, lee sobre por qué las imágenes de fondo son perjudiciales) pero basta decir que una página con esta configuración probablemente no pasará los Core Web Vitals.

La solución de 2 minutos para imágenes de fondo lentas

Las imágenes de fondo lentas no tienen por qué ser un problema. Con un simple ajuste de CSS, pueden transformarse en imágenes rápidas y responsivas.  ¿El secreto? Usar object-fit: cover para escalar la imagen y combinarlo con position: relative en el contenedor y position: absolute en la imagen. 

Dato curioso: Hoy me cronometré mientras convertía imágenes de fondo de Elementor en imágenes responsivas ultrarrápidas. ¡Me tomó menos de 2 minutos! 

Si esto suena complicado, ¡no te preocupes! Te guiaré paso a paso. ¡Y al final te espera un video tutorial!

Paso 1: añadir los estilos necesarios

Para arreglar las imágenes de fondo lentas, comienza aplicando algunos estilos CSS esenciales. Estos estilos harán que la imagen se comporte como una imagen de fondo de cobertura adecuada y aseguran que no entre en conflicto con los divs auxiliares de Elementor.

/* The relative parent container */
  .relative{
      position: relative;
  }
  
  /* Ensure Elementor helper divs are not relative */
  .relative .elementor-container, 
  .relative .elementor-column, 
  .relative .elementor-widget-wrap {
      position: initial;
  }
  
  /* The new and improved hero image */
  .heroimg, .heroimg img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }

Qué hace esto:

• .relative: Hace que el contenedor padre sea relativo para posicionar elementos hijos dentro de él.
• .relative .elementor-*: Restablece los divs auxiliares de Elementor para evitar conflictos de diseño.
• .heroimg: Asegura que la imagen se escale para cubrir el contenedor mientras se sitúa detrás de él.

Cómo añadir los estilos:

• Navega a tu Panel de control de WordPress.
• Ve a Apariencia > Personalizar.
• Haz clic en CSS adicional.
• Pega el código CSS anterior y guarda los cambios.

Esto establece la base para convertir esas imágenes de fondo lentas en imágenes hero responsivas y optimizadas. A continuación, aplica las clases .relative y .heroimg a tu sección hero para ver la magia en acción. 

Paso 2: Preparar el contenedor

Ahora que los estilos están en su lugar, es hora de preparar el contenedor para la nueva imagen hero. Esto implica eliminar la imagen de fondo existente y aplicar la clase .relative al contenedor.

Pasos:

• Editar el contenedor:
• Ve a tu editor de Elementor y selecciona el contenedor donde la imagen hero está aplicada actualmente.
• Eliminar la imagen de fondo:
• Navega a la pestaña Estilo.
• Localiza la sección Fondo donde está aplicada la imagen.
• Haz clic en el icono de papelera para eliminar la imagen de fondo.
• Aplicar la clase .relative:
• Cambia a la pestaña Avanzado.
• En Clases CSS, escribe relative.

Paso 3: Añadir una nueva imagen y aplicar las nuevas clases

Con el contenedor listo, es hora de añadir la imagen hero responsiva y optimizada usando Elementor. Así es cómo:

Qué esperar: Durante el paso final, ¡la imagen hero puede verse desalineada o extraña antes de aplicar las clases! ¡Esto es normal! La clase .heroimg transformará la imagen en una imagen hero responsiva de ancho completo que se comporta como una imagen de fondo de cobertura. Una vez completado, tu imagen hero optimizada se situará detrás del contenedor, ofreciendo el mismo impacto visual con un rendimiento significativamente mejorado.

Pasos:

• Añadir un elemento de imagen:
• En el editor de Elementor, haz clic en el icono de más en la esquina superior izquierda para añadir un nuevo elemento.
• Arrastra y suelta el widget de Imagen en el contenedor superior (el que tiene la clase .relative).
• Subir y seleccionar tu imagen:
• En la configuración de imagen en el panel izquierdo, haz clic en el marcador de posición de la imagen.
• Sube la imagen de pantalla completa que deseas usar o selecciona una existente de tu galería de medios de WordPress.
• Aplicar la clase .heroimg:
• Con la imagen aún seleccionada, navega a la pestaña Avanzado en el menú de Elementor.
• En el campo Clases CSS, escribe heroimg.

¡Listo, disfruta de una página más rápida!

¡Lo has logrado! En este punto, tu imagen hero está completamente optimizada y lista para ofrecer una experiencia de página más rápida. 

Una vez que publiques la página, inspecciona el elemento y notarás algo genial: la imagen de fondo lenta ha sido reemplazada por una imagen de primer plano rápida y responsiva. Esta imagen ahora probablemente se carga con un alto fetchpriority, asegurando que se cargue más rápido, mejorando tanto los Core Web Vitals como la user experience.

¡Felicidades por crear una página más rápida y eficiente! ¡Tus visitantes notarán la diferencia!

Antes: 2.6 seg

Después: 0.6 seg

Bonus: precargar la imagen hero

Mira el tutorial completo en YouTube.