Tabla de contenidos
By Nick Schäferhoff - Última actualización el
¿Tu web de WordPress usa muchas imágenes? No sería de extrañar, ya que son el formato multimedia más popular de la web. Sin embargo, al mismo tiempo, las imágenes pueden ralentizar seriamente tu sitio, y por eso necesitas saber cómo usar el lazy load en WordPress.
Ya hemos hablado antes de optimizar las imágenes para que sean lo más pequeñas posible y se carguen rápido. Sin embargo, hay un límite a lo que puedes reducir el tamaño de tus imágenes sin que pierdan calidad. Además, si tienes muchas imágenes en la misma página, su tamaño se va sumando, aunque estén optimizadas.
Adame Dahmani, Product Manager de WP Rocket, lo explica así:
La carga diferida (lazy loading) aplaza la carga de las imágenes, los vídeos y los iframes que están fuera de la pantalla hasta que se necesitan, lo que reduce las peticiones innecesarias. Así se alivia la presión sobre el ancho de banda y el procesamiento, y el navegador puede gestionar de forma más eficiente el hilo principal y la ruta crítica de renderizado. Bien implementada, mejora el First Contentful Paint y, a menudo, el Largest Contentful Paint, porque da prioridad al contenido de la parte superior de la página (above the fold).
Motivo suficiente para preparar una guía detallada sobre la carga diferida en WordPress, ¿no te parece? Por eso, en este artículo aprenderás cómo funciona y cómo puedes aplicar la carga diferida a tu web para obtener los mejores resultados.
¿Qué es la carga diferida (lazy loading)?
Normalmente, cuando abres una página web, tu navegador carga todos sus datos de una vez. Cada imagen, cada texto, cada enlace, etc.
Sobre todo con las imágenes, si hay muchas, esto puede llevar mucho tiempo. Las imágenes son mucho más grandes que otros elementos de una web. Además, mientras el navegador está ocupado con ellas, a menudo impiden que se carguen otros recursos, lo que evita que tu página termine el proceso de renderizado.
El resultado: tus visitantes tienen que esperar mucho para ver la página web que han solicitado. Y muchos no se quedarán a esperar, lo que dispara tu tasa de rebote.
El lazy loading lo evita impidiendo que se carguen las imágenes y otros recursos que no se ven inicialmente en la pantalla, y es una forma eficaz de optimizar el tiempo de carga de tu web.
En su lugar, las imágenes situadas más abajo en la página solo se cargan progresivamente, a medida que los visitantes se desplazan hacia ellas. Así no saturan el navegador, que puede cargar otras partes de la web más rápido. En consecuencia, las páginas aparecen antes para los visitantes, lo que se traduce en una mejor experiencia.
Por cierto, eso es exactamente lo que quieren decir las herramientas de prueba de velocidad cuando te indican «Pospón la carga de imágenes que no aparecen en pantalla».
Cómo funciona la carga diferida
Hay varias formas de implementar la carga diferida. Antes necesitabas un JavaScript bastante sofisticado para hacerlo. Sin embargo, hoy en día se ha convertido en una función estándar de los navegadores.
Por eso, puedes limitarte a marcar con un atributo HTML las imágenes que quieras cargar de esta forma, y los navegadores de tus visitantes harán el resto.
Esto es estupendo porque facilita la implementación, no requiere código adicional en tu web y estandariza el método. Como se ha convertido en el estándar de facto, ahora también se conoce como «carga diferida nativa» (native lazy loading).
Ventajas de la carga diferida
Ahora que sabes cómo funciona, ¿qué ventajas tiene aplicar la carga diferida a las imágenes de tu web?
- Tiempos de carga de página más cortos: ya lo hemos comentado. Al evitar que las imágenes y otros elementos multimedia se carguen de entrada, puedes reducir mucho el tiempo que tarda en aparecer una página web.
- Menos trabajo para el navegador: si las imágenes tienen carga diferida, tu navegador no tendrá que procesarlas hasta que un visitante se desplace hacia abajo por la página.
- Menos peticiones HTTP: también reducirás el número de peticiones HTTP y mejorarás la nota del Largest Contentful Paint.
- Mejor experiencia de usuario: a los visitantes de una web les encantan las páginas que cargan rápido, así que la carga diferida puede favorecer las conversiones y otras métricas de interacción.
- Menos costes de servidor y de CDN: tu servidor o tu CDN tendrán que descargar menos datos, lo que se traduce en facturas más baratas si tienes un ancho de banda limitado.
- Rendimiento más rápido en móviles: las imágenes influyen más en las conexiones móviles lentas. Si reduces su influencia, tus usuarios de móviles se beneficiarán especialmente.
- Ventajas para el SEO: la carga diferida mejora las Core Web Vitals, que son un factor de posicionamiento de Google.
Posibles inconvenientes
Al mismo tiempo, la carga diferida también puede dar problemas:
- Problemas de rendimiento: aplicar la carga diferida en la parte superior de la página (logotipos, imágenes de cabecera, etc.) puede llegar a perjudicar el rendimiento. Esto se debe a que el elemento Largest Contentful Paint es probablemente una imagen de la parte superior de la página, así que debería cargarse lo antes posible. Más adelante veremos cómo excluir imágenes de la carga diferida.
- Problemas de SEO: si se implementa mal, puedes impedir que los motores de búsqueda indexen las imágenes con carga diferida. Sin embargo, si sigues las instrucciones de esta guía, no debería ser un problema.
- Cambios de diseño: si no defines el tamaño de las imágenes con carga diferida, el diseño de la web puede desplazarse, lo que perjudica al Cumulative Layout Shift.
- Posibles conflictos: la función puede chocar con algunos plugins.
- Efecto en la experiencia de usuario: la carga diferida se nota cuando alguien se desplaza muy rápido hacia abajo por la página.
Cuándo usar la carga diferida
Entonces, ¿cuándo tiene sentido usar esta técnica?
En la mayoría de los casos, es más eficaz si tienes muchas imágenes en tu web, por ejemplo, artículos de blog largos con muchas capturas de pantalla. Sin embargo, también puede aplicarse a páginas de producto o de portfolio.
En cuanto a qué imágenes exactamente deben llevar carga diferida, deberían ser las que quedan por debajo de la parte superior de la página (below the fold). Así se reducirá el tiempo de carga de la página sin afectar a la experiencia de usuario. Ya hemos dicho antes que no deberías aplicar la carga diferida a las imágenes de la parte superior de la página, ya que puede perjudicar al tiempo de carga de la página.
💡 ¿Lo sabías? WP Rocket ahora incluye Rocket Insights, el centro de rendimiento integrado que funciona con la tecnología de GTmetrix. Lleva la monitorización del rendimiento justo donde ya optimizas tu web, para que puedas supervisar tus páginas clave, entender tus resultados, recibir recomendaciones claras vinculadas a las funcionalidades de WP Rocket y volver a hacer pruebas cuando quieras, todo sin tener que ir saltando entre varias herramientas.
🚀 Actualiza WP Rocket a la última versión para empezar a usar Rocket Insights directamente desde tu panel de control: ¡está incluido gratis en tu plan!
Cómo aplicar la carga diferida nativa a las imágenes
Basta de teoría, pasemos a la práctica. Como primer paso, veamos cómo implementar el lazy load si quieres usar la solución nativa del navegador.
El atributo HTML loading
Para que los navegadores apliquen la carga diferida, los elementos de la web cuya carga deba retrasarse tienen que estar marcados con el atributo HTML <loading=“lazy”>. Así es como se ve en la práctica:
<img src="wp-rocket-is-awesome.jpg" loading="lazy" alt="WP Rocket" />
<iframe src="WP-Cache-Basics.html" loading="lazy"></iframe>El atributo admite dos valores:
- lazy: aplaza la carga de los elementos de imagen o iframe.
- eager: es el comportamiento de carga estándar. El recurso se solicita de inmediato, esté donde esté.
Actualmente, el atributo loading solo admite las etiquetas <img> e <iframe>. Por ejemplo, no puedes usarlo para aplicar la carga diferida a imágenes de fondo en CSS. Más abajo veremos opciones para hacerlo.
Además, como lo han adoptado prácticamente todos los navegadores (ver más abajo), este método también es el más seguro en cuanto a la indexación de las imágenes con carga diferida para el SEO. Mientras la etiqueta img tenga un atributo src, al menos Google no debería tener ningún problema para indexar tus imágenes.
Solo si implementas la carga diferida con JavaScript puede ser buena idea indicar el src dentro de una etiqueta <noscript>. Es para los motores de búsqueda cuyos rastreadores no saben procesar JavaScript (de nuevo, Google puede hacerlo sin problemas).
En cualquier caso, también es buena idea proporcionar un sitemap de imágenes.
Compatibilidad con los navegadores
La carga diferida se ha convertido en un estándar web de facto. Según Can I Use, debería funcionar para más del 95 % de los usuarios de navegadores de todo el mundo.
Además, aunque hayas implementado la carga diferida en tu web, no perjudicará a la experiencia en un navegador que no la admita.
La carga diferida en WordPress: opciones integradas
Desde WordPress 5.5, el CMS aplica la carga diferida a las imágenes de forma predeterminada. La función se amplió a los iframes en la versión 5.7 y se perfeccionó en WordPress 5.9.
Así que, si has migrado tu web de un CMS como Squarespace a WordPress y tu sitio WordPress usa la última versión, cualquier imagen o iframe que tenga asignados los atributos width y height recibirá automáticamente el atributo <loading=”lazy”>. Esta condición se ha incluido para evitar los problemas de Cumulative Layout Shift que ya hemos mencionado.
Además, a partir de WordPress 5.9, la carga diferida no se aplicará al primer iframe ni a la primera imagen de una página. Así se evitan los problemas de LCP que hemos visto antes.
Aparte de eso, WordPress aplica el atributo a las imágenes en los siguientes lugares:
- Contenido de las entradas
- Extractos de las entradas
- Widgets de texto
- Imágenes de avatar
- Imágenes añadidas como adjuntos
Opciones de personalización
Actualmente, no hay opciones sin código para desactivar de forma selectiva la carga diferida nativa de WordPress en determinadas páginas o imágenes. Si quieres hacerlo, tienes que usar un plugin o algunos de los filtros y funciones siguientes.
- wp_lazy_loading_enabled: puedes usarlo para activar y desactivar por completo la carga diferida de las imágenes en determinados contextos.
- wp_filter_content_tags(): añade los atributos srcset, sizes y loading a las etiquetas HTML img, además de atributos loading a los iframes.
- wp_img_tag_add_width_and_height_attr(): sirve para aplicar los atributos width y height a las etiquetas img que no los tienen, para que se les pueda aplicar la carga diferida.
- wp_img_tag_add_srcset_and_sizes_attr(): incluye los atributos srcset y sizes en las etiquetas img existentes, con fines similares a los de la función anterior.
- wp_img_tag_add_loading_attr(): añade el atributo loading a las etiquetas img. Para los iframes, usa wp_iframe_tag_add_loading_attr().
- wp_omit_loading_attr_threshold(): establece un umbral que determina cuántas de las primeras imágenes e iframes no deberían cargarse en diferido. Resulta útil si tu web muestra varios elementos multimedia en la parte superior de la página y quieres desactivar la carga diferida en todos ellos.
Para ver ejemplos de cómo usar lo anterior para modificar la carga diferida en WordPress, consulta los anuncios de WordPress 5.5, 5.7 y 5.9.
Consejos para solucionar problemas
Si la carga diferida nativa no funciona en tu sitio WordPress, probablemente se deba a que intentas aplicarla a elementos que no llevan las etiquetas <img> o <iframe>. Son las únicas etiquetas a las que WordPress aplica la carga diferida de forma nativa. Para otras opciones, consulta la siguiente sección.
Cómo activar la carga diferida de WordPress para imágenes y vídeos con un plugin
Hay muchas opciones de plugins para añadir la carga diferida a tu web. Pero, con diferencia, la forma más sencilla es WP Rocket. Se tarda menos de un minuto.
Solo tienes que ir a Ajustes > WP Rocket > Medios en el escritorio de tu WordPress.
Marca las casillas de los tipos de medios a los que quieras aplicar la carga diferida:
- Imágenes
- Imágenes de fondo en CSS
- iframes y vídeos
Además, puedes hacer que WP Rocket sustituya los vídeos de YouTube incrustados por una imagen de vista previa. Por último, hay una opción para añadir los atributos width y height a las imágenes que no los tienen, para que también puedan beneficiarse de la carga diferida.
Elige las opciones que quieras y haz clic en Guardar cambios, abajo del todo. Listo.
Diferencias con la carga diferida nativa
Como ya puedes ver en lo anterior, las opciones de WP Rocket van más allá de la carga diferida nativa de WordPress. Una de las principales diferencias es que también aplica la carga diferida a las imágenes de fondo, tanto a las que están en línea como a las definidas en archivos CSS. Por ejemplo, este es un marcado compatible con esta función:
<div style="background-image: url(image.jpg)">Puedes leer más sobre la carga diferida de imágenes de fondo con WP Rocket en nuestra documentación técnica.
Cómo comprobar si la carga diferida funciona
Para ver si la carga diferida se aplica correctamente en tu web, puedes usar las herramientas para desarrolladores del navegador. Ve a la pestaña «Red» y usa el filtro «Img». Vuelve a cargar la página: en la lista solo deberías ver las imágenes de la parte superior de la página.
Cuando empieces a desplazarte hacia abajo, deberían ir apareciendo cada vez más imágenes. Además, deberías ver el valor lazyload en la columna «Iniciador».
Consejos para solucionar problemas
Si ves que algunas imágenes no tienen carga diferida aunque hayas activado la opción, puede haber varios motivos:
- Algunos tipos de imágenes se excluyen a propósito, como las galerías de productos de WooCommerce
- Las imágenes contienen alguno de los atributos excluidos, como data-src y data-no-lazy
- La imagen se ha añadido de forma dinámica con JavaScript
- Hay un conflicto con otro plugin que añade la carga diferida, o tu tema tiene su propia función de carga diferida
Para más información, lee nuestra documentación sobre por qué algunas imágenes no tienen carga diferida, los problemas habituales con la carga diferida y los plugins compatibles.
Cómo desactivar la carga diferida en WordPress
Hay casos en los que quieres desactivar la carga diferida, ya sea en todo el sitio, en una página entera o en imágenes concretas. Aquí tienes distintas formas de hacerlo.
Desactiva por completo la carga diferida nativa de WordPress
Si quieres desactivar la carga diferida integrada en tu web de WordPress, puedes hacerlo con este fragmento de código:
add_filter( 'wp_lazy_loading_enabled', '__return_false' );Ponlo en el archivo functions.php de tu tema (¡hijo!). También puedes añadirlo con un plugin como Insert Headers and Footers o crear tu propio MU-plugin.
Para desactivar la carga diferida nativa de WordPress solo en contextos concretos o en determinadas imágenes, consulta las funciones y los filtros de la sección Opciones de personalización de más arriba.
Desactiva la carga diferida en WP Rocket
Puedes desactivar la función LazyLoad de WP Rocket con la misma facilidad con la que la activaste. Ve al panel Medios, desmarca las casillas y guarda.
Excluye entradas y páginas concretas de la carga diferida
Si quieres desactivar esta función solo en una entrada o página concreta, también puedes hacerlo muy fácilmente con WP Rocket. Abre la página o la entrada en el editor y busca el cuadro «Ajustes de WP Rocket» en la barra lateral (ten en cuenta que el contenido tiene que estar publicado para que esté disponible).
Solo tienes que desmarcar la opción que no quieras usar y actualizar el contenido. Si alguna opción aparece en gris, primero tienes que activarla de forma global en los ajustes de WP Rocket.
Quita la carga diferida de imágenes o iframes concretos
También puedes desactivar la carga diferida en elementos multimedia concretos. Encontrarás esa opción en el panel Medios de los ajustes de WP Rocket.
Introduce en el campo el nombre de archivo, la clase CSS, el atributo de img, el nombre de dominio (para imágenes externas) o el nombre del archivo CSS de la imagen que no quieras cargar de forma diferida, y guarda. Tienes más información y ejemplos en la documentación.
Ten en cuenta, sin embargo, que no necesitas usar esta función para excluir de la carga diferida las imágenes de la parte superior de la página. Como no excluirlas puede perjudicar mucho al Largest Contentful Paint y a la puntuación global de PageSpeed Insights, WP Rocket lo hace automáticamente sin que tengas que mover un dedo. Si tienes cualquier otro motivo para excluir imágenes o iframes de la carga diferida, puedes seguir usando el método descrito arriba.
Modifica la carga diferida de WP Rocket mediante código
Si quieres tener más control sobre cómo funciona la carga diferida en WP Rocket, también puedes modificarla con código. Los fragmentos siguientes van en tu functions.php o en un plugin creado para ello.
Desactiva la carga diferida de forma condicional
Empezaremos con una estructura general de función que puedes usar para desactivar la carga diferida en distintas circunstancias:
add_action('wp', function () {
// Declare condition set to false as a default
$condition = false;
// Build your condition logic to turn ‘$condition’ to ‘true’ when applicable
if ($condition) {
// Disable Rocket Lazy Load if condition is met
add_filter('do_rocket_lazyload', '__return_false');
}
}
);A continuación tienes algunos ejemplos de cómo usar este enfoque.
Desactiva la carga diferida en todas las páginas
Usa esto si quieres aplicar la carga diferida a las imágenes de tus entradas, pero no a las de tus páginas:
add_filter( 'wp', function () {
if ( is_page() ) {
add_filter('do_rocket_lazyload', '__return_false');
}
}
);Quita la carga diferida de la página de inicio
Desactiva la carga diferida en la página de inicio de tu sitio (la que configuras en Ajustes > Lectura > Página de inicio):
add_filter( 'wp', function () {
if ( is_front_page() ) {
add_filter('do_rocket_lazyload', '__return_false');
}
}
);Desactiva la carga diferida en la página de tu blog
Lo mismo que antes, pero para el caso en que hayas configurado tu página de inicio como un blog:
add_filter( 'wp', function () {
if ( is_home() ) {
add_filter('do_rocket_lazyload', '__return_false');
}
}
);Elimina la carga diferida de las entradas individuales
Para desactivar la carga diferida en todas las entradas individuales, pero mantenerla en las páginas y en la página de inicio de tu blog, usa este fragmento:
add_filter( 'wp', function () {
if ( is_single() ) {
add_filter('do_rocket_lazyload', '__return_false');
}
}
);Desactiva LazyLoad en imágenes concretas
Puedes indicar a WP Rocket que no use la carga diferida en imágenes concretas con el atributo data-no-lazy:
<img src="my-image.jpg" data-no-lazy="1" alt="" width="100" height="100" />Añade un efecto de aparición gradual a las imágenes con carga diferida
Puede resultar algo brusco para los visitantes que tus imágenes con carga diferida aparezcan de la nada en la página. Mostrar las imágenes de forma gradual es un efecto popular para mejorar esa experiencia.
El siguiente fragmento de CSS añadirá un efecto de aparición gradual (fade-in) a tu web. Ten en cuenta que va en tu style.css, no en functions.php:
img[data-lazy-src] {
opacity: 0;
}
img.lazyloaded {
-webkit-transition: opacity .5s linear 0.2s;
-moz-transition: opacity .5s linear 0.2s;
transition: opacity .5s linear 0.2s;
opacity: 1;
}Ajusta el umbral de LazyLoad
De forma predeterminada, WP Rocket cargará las imágenes con carga diferida que estén a menos de 300 píxeles de la ventana del navegador. Puedes ajustar este umbral así:
add_filter( 'rocket_lazyload_threshold', function ( $threshold ) {
return 100;
});Nota: en el ejemplo anterior, el umbral es de 100 px. Ajusta el número a tu gusto.
Preguntas frecuentes sobre el lazy load en WordPress
¿Qué es el lazy load?
El lazy load, o carga diferida, es una técnica que impide que se carguen las imágenes y otros recursos que no se ven inicialmente en la pantalla hasta que el visitante se desplace hacia ellos. Así, el navegador no se satura y puede cargar antes otras partes de la web, de modo que las páginas aparecen más rápido. Hoy es una función estándar de los navegadores: basta con marcar las imágenes con el atributo HTML loading y el valor lazy.
¿WordPress tiene lazy load nativo?
Sí: desde WordPress 5.5, el CMS aplica la carga diferida a las imágenes de forma predeterminada. La función se amplió a los iframes en la versión 5.7 y se perfeccionó en WordPress 5.9, que ya no la aplica a la primera imagen ni al primer iframe de la página. Con la última versión, WordPress añade automáticamente el atributo loading a las imágenes y los iframes que tienen asignados los atributos width y height, por ejemplo en el contenido y los extractos de las entradas, los widgets de texto y las imágenes de avatar.
¿Cómo activar el lazy load en WordPress?
En WordPress, la carga diferida nativa ya se aplica de forma predeterminada a las imágenes y los iframes que tienen los atributos width y height, así que no tienes que hacer nada para usarla. Si quieres aplicarla también a las imágenes de fondo en CSS o tener más control, la forma más sencilla es un plugin como WP Rocket: ve a «Ajustes > WP Rocket > Medios», marca las casillas de las imágenes, las imágenes de fondo en CSS y los iframes y vídeos, y haz clic en «Guardar cambios».
¿Cómo desactivar el lazy load en WordPress?
Para desactivar por completo la carga diferida nativa de WordPress, añade el fragmento add_filter( 'wp_lazy_loading_enabled', '__return_false' ); al archivo functions.php de tu tema hijo, o hazlo con un plugin como Insert Headers and Footers o con tu propio MU-plugin. Si usas WP Rocket, ve al panel «Medios», desmarca las casillas y guarda. También puedes desactivarla solo en una entrada o página concreta desde el cuadro «Ajustes de WP Rocket» del editor, o excluir imágenes e iframes concretos en el panel «Medios».
¿El lazy load afecta al LCP?
Sí: aplicada a las imágenes de la parte superior de la página, la carga diferida puede perjudicar al Largest Contentful Paint (LCP), porque el elemento LCP es probablemente una imagen de esa zona y debería cargarse lo antes posible. Por eso, lo recomendable es aplicarla solo a las imágenes que quedan por debajo de la parte superior de la página. Desde WordPress 5.9, la carga diferida no se aplica a la primera imagen ni al primer iframe de la página para evitar problemas de LCP, y WP Rocket excluye automáticamente las imágenes de la parte superior de la página. Bien implementada, la carga diferida mejora el First Contentful Paint y, a menudo, el Largest Contentful Paint.
Empieza ya a usar la carga diferida en WordPress
La carga diferida es una forma excelente de mejorar el rendimiento de tu web. Es más eficaz en los sitios que tienen muchas imágenes, porque impide que estas y otros elementos multimedia se carguen hasta que aparezcan realmente en la pantalla.
Aunque WordPress ya incluye la carga diferida nativa de forma predeterminada, no ofrece muchos controles para quien no es desarrollador y solo se aplica a las imágenes y a los elementos iframe. Si quieres un enfoque más granular y aplicar también la carga diferida a elementos como los fondos CSS, lo mejor es optar por un plugin como WP Rocket. Te permite desactivar la carga diferida en determinadas partes de tu sitio e incluso en archivos concretos.
Pruébalo ahora. Si no te convence, siempre puedes contar con nuestra garantía de devolución del dinero del 100 %.
