Nota: la función de carga diferida de Jetpack se introdujo por primera vez en 2018. En aquel momento, pocas herramientas ofrecían una funcionalidad similar. Supuso una mejora de rendimiento muy necesaria para los sitios de WordPress, especialmente para aquellos con un gran número de imágenes.
Un par de años después, se introdujo un nuevo estándar web de carga diferida y el propio WordPress empezó a admitirlo. Hoy en día, todos los navegadores modernos admiten la carga diferida y el propio WordPress incluye esta funcionalidad de forma nativa para imágenes y vídeos.
Teniendo en cuenta este cambio positivo, la función de carga diferida de Jetpack ya no es necesaria. Puedes desactivarla en tu sitio web y empezarás a beneficiarte inmediatamente de la función de carga diferida nativa que ofrece el propio WordPress.
Para facilitar esta transición, la función de Jetpack dejará de estar disponible y finalmente se eliminará tanto del plugin Jetpack como del plugin Jetpack Boost en noviembre de 2023.
Si eres propietario de un sitio web, probablemente hayas pensado al menos una vez en la velocidad de tu sitio. Al fin y al cabo, Google tiene en cuenta la velocidad a la hora de determinar la posición de los sitios en los resultados de búsqueda. Por tanto, si tu sitio tarda en cargarse, partes con desventaja a la hora de posicionarlo. Y todos sabemos que un mejor posicionamiento genera más tráfico.
Entonces, ¿cómo puedes asegurarte de que tu sitio de WordPress cargue lo más rápido posible? Una forma es aplicar la carga diferida a tus imágenes.
La carga diferida es una técnica que retrasa el renderizado de imágenes y vídeos hasta que se necesitan. Implementarla puede acelerar considerablemente tu sitio y lo mejor es que no necesitas ser desarrollador para ponerla en práctica.
Hoy te mostraremos cómo aplicar la carga diferida a imágenes y vídeos en WordPress utilizando dos métodos: con un plugin y sin él.
¿Qué es la carga diferida?
La carga diferida es una técnica habitual para mejorar la velocidad de carga de las páginas. La idea es sencilla: en lugar de cargar todas las imágenes de una página cuando un visitante llega por primera vez, solo se renderizan las imágenes visibles. Después, a medida que el visitante se desplaza hacia abajo por la página, se cargan más imágenes según sea necesario.
Esto significa que, si un visitante nunca se desplaza hasta el final de una página, las imágenes situadas por debajo del área que ha visto nunca se cargan. Por tanto, la carga diferida puede ahorrarte unos valiosos milisegundos —o incluso segundos— en el tiempo de carga de tu página.
Además, la carga diferida también puede ayudarte a ahorrar ancho de banda. Esto es especialmente importante si hay personas que visitan tu sitio desde un dispositivo móvil. Al retrasar la carga de las imágenes y los vídeos que no son visibles, puedes reducir la cantidad de datos utilizados.
¿Cómo funciona la carga diferida?
Por lo general, la carga diferida funciona de una de estas dos formas. WordPress, a partir de la versión 5.5, añade un atributo de HTML5 llamado «loading». En este caso, el navegador gestiona todas las partes del proceso de carga diferida sin necesidad de ningún JavaScript adicional.
Otro método, desarrollado antes del atributo de HTML5, utiliza código JavaScript ingenioso. En este caso, al cargar la página se muestra un marcador de posición vacío y, después, se utiliza JavaScript para cargar las imágenes cuando entran en la ventana gráfica.
De cualquier forma, solo se cargan las imágenes que necesita el navegador. Las demás se cargan cuando el visitante se desplaza hacia abajo por la página.
Hay varias formas de hacerlo, que explicaremos con más detalle a continuación. Pero, en esencia, así es como funciona la carga diferida.
¿Cuáles son las ventajas de la carga diferida?
Estas son las tres ventajas principales de aplicar la carga diferida a las imágenes:
- Mayor velocidad del sitio
- Menor uso de ancho de banda
- Mejor experiencia de usuario
La mayor velocidad del sitio suele ser la principal motivación para implementar la carga diferida. Al esperar para renderizar las imágenes innecesarias, puedes reducir el tiempo de carga de la página. Esto ocurre especialmente cuando tienes muchas imágenes en una página o cuando son de gran tamaño.
Además, la carga diferida puede ayudarte a ahorrar ancho de banda. Si los visitantes nunca bajan por la página, no se desperdicia ancho de banda cargando imágenes que nunca verán.
Por último, la carga diferida puede mejorar la experiencia de tus usuarios. Esto se debe a que no tienen que esperar a que se carguen todas las imágenes de una página antes de empezar a interactuar con tu sitio.
¿La carga diferida se aplica de forma predeterminada en WordPress?
Sí, desde WordPress 5.5, la carga diferida se activa automáticamente de forma predeterminada al instalarlo. Sin embargo, hay varias formas de personalizar esta experiencia que son bastante sencillas e intuitivas. Explicaremos estos métodos con más detalle a continuación.
¿Debería aplicar la carga diferida a mis imágenes? ¿Tiene algún inconveniente?
En la mayoría de los casos, aplicar la carga diferida a tus imágenes es una gran idea si quieres mejorar la velocidad de carga de tu página o ahorrar ancho de banda. Sin embargo, también hay algunos posibles inconvenientes que debes tener en cuenta.
Desplazamiento del diseño
Si aplicas la carga diferida a tus imágenes, es posible que el diseño de tu página cambie. Por ejemplo, si tienes una barra lateral en el lado derecho de la página y aplicas la carga diferida a una imagen situada en ella, la barra lateral podría desplazarse hacia abajo para hacerle sitio. Esto puede desorientar mucho a tus visitantes.
Como norma general, se recomienda utilizar marcadores de posición para evitar este problema.
Posible impacto en SEO
Si no se hace correctamente, la carga diferida de imágenes puede hacer que los motores de búsqueda, como Google, tengan dificultades para indexarlas. El contenido es lo más importante a la hora de posicionarse y, en este caso, podrías perder partes valiosas.
Es posible que tus imágenes dejen de aparecer en los resultados de búsqueda y, dependiendo de la importancia que tengan en relación con el resto del contenido de la página —por ejemplo, las imágenes de productos en un catálogo de comercio electrónico—, tu posicionamiento habitual en las búsquedas también podría verse muy perjudicado.
Dicho esto, si configuras correctamente la carga diferida, no tendrás este problema. Por eso, a menos que seas un desarrollador con experiencia, lo mejor es utilizar un plugin de carga diferida o mantener la carga diferida predeterminada incluida en WordPress.
Conflictos entre plugins
Además, la carga diferida puede causar problemas con algunos plugins de WordPress, como los plugins que utilizan imágenes para generar vistas previas para redes sociales.
Cada vez que hagas cambios en tu sitio, debes probarlos a fondo para asegurarte de que todo funciona como debería.
Y, por si algo sale mal, ten a mano una copia de seguridad de tu sitio de WordPress para recuperarlo rápidamente.
Cómo activar la carga diferida en WordPress
La carga diferida ya está activada de forma predeterminada en WordPress. Si no utilizas una versión moderna de WordPress (aunque te recomendamos hacerlo) o si quieres un control más preciso sobre el proceso de carga diferida, puedes hacerlo de una de estas dos formas: mediante un plugin o añadiendo código a tu sitio.
1. Carga diferida con un plugin
Si no eres un desarrollador con experiencia, te recomendamos usar un plugin, porque cada vez que editas el código de tu sitio, te arriesgas a encontrarte con problemas. Aunque tengas copias de seguridad a mano por si rompes algo, puede que siga siendo mejor usar simplemente un plugin de confianza.
Jetpack Boost es un plugin gratuito dedicado a ayudarte a evaluar y mejorar el rendimiento de tu sitio. Ofrece funciones como:
- Posponer JavaScript no esencial
- Optimizar la carga de CSS
- Carga diferida de imágenes
- Pruebas de rendimiento del sitio
Para empezar a utilizar Jetpack Boost, descárgalo gratis desde el directorio de plugins de WordPress.
O, en tu panel de administración de WordPress, ve a Plugins → Añadir nuevo, a continuación, busca «Jetpack Boost» y haz clic en Instalar ahora. Una vez instalado, haz clic en Activar.
A continuación, ve a la nueva opción del menú del panel de administración titulada Boost. Después, haz clic en Empezar gratis.
En la página siguiente, desplázate hacia abajo hasta el interruptor grande que dice Carga diferida de imágenes y actívalo. Ahora, revisa tu sitio y asegúrate de que todo se muestra correctamente y tiene buen aspecto. ¡Eso es todo! La carga diferida estará lista con solo unos clics.
Si quieres ir un paso más allá y personalizar la carga diferida de tu sitio, puedes hacerlo mediante fragmentos de código, que puedes añadir al archivo functions.php de tu tema. O bien, puedes insertarlos con un plugin de funcionalidades.
Estas son solo algunas de las tareas que puedes realizar:
- Desactivar la carga diferida en determinadas páginas
- Establecer un marcador de posición que se muestre hasta que se cargue la imagen
- Desactivar la carga diferida para imágenes específicas
- Desactivar la carga diferida para una clase específica de CSS
Por ejemplo, si quieres excluir una clase de CSS del proceso de carga diferida, utilizarías este código:
function mysite_customize_lazy_images( $blocked_classes ) { $blocked_classes[] = 'my-header-image-classname'; return $blocked_classes;}add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );
Para obtener más información, consulta la documentación completa sobre la carga diferida.
2. Cómo aplicar la carga diferida a las imágenes en WordPress sin un plugin
Como hemos mencionado antes, WordPress activa de forma predeterminada la carga diferida para todas las imágenes que tienen dimensiones definidas. No necesitas activar nada ni añadir código para hacerlo. Sin embargo, puede que en ocasiones quieras personalizar el funcionamiento de esta función.
Por ejemplo, supongamos que no quieres incluir las imágenes de las plantillas. Deberías añadir este código al archivo functions.php de tu tema:
function disable_template_image_lazy_loading( $default, $tag_name, $context ) { if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) { return false; } return $default;}add_filter( 'wp_lazy_loading_enabled', 'disable_template_image_lazy_loading', 10, 3);
O quizá quieras desactivar de forma muy precisa la carga diferida para imágenes concretas. Puedes hacerlo asignando una clase de imagen adicional a cada imagen al añadirla a una página o entrada y añadiendo después esa clase al siguiente código de tu archivo functions.php:
function skip_loading_lazy_image_48_large( $value, $image, $context ) {if ( 'the_content' === $context ) {$image_url = wp_get_attachment_image_url( 48, ‘medium’ );if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {return false;}}return $value;}add_filter('wp_img_tag_add_loading_attr','skip_loading_lazy_image_48_large',10,3);
Para añadir la clase de imagen skip-lazy del ejemplo anterior a una imagen:
- Añade la imagen a la página o entrada mediante la Biblioteca de medios.
- Después de añadir la imagen, busca sus ajustes. Estos pueden aparecer de forma diferente según utilices el editor de bloques Gutenberg, el editor clásico o un plugin para crear sitios. La opción de añadir una nueva clase de CSS suele encontrarse en el área de ajustes avanzados (en los editores Gutenberg y clásico) o hacia la parte inferior de las opciones de configuración de la imagen (en la mayoría de los demás creadores de sitios).
- Añade la clase skip-lazy a la imagen y guarda los cambios.
Puedes obtener más información sobre las posibilidades en la documentación de WordPress.
Cómo aplicar la carga diferida a los vídeos en WordPress
Si quieres aplicar la carga diferida a tus vídeos, puedes hacerlo añadiendo código al propio vídeo en la entrada o página. Este código debería tener un aspecto similar a este:
<video controls preload="none" poster="one-does-not-simply-placeholder.jpg"> <source src="one-does-not-simply.webm" type="video/webm"> <source src="one-does-not-simply.mp4" type="video/mp4"></video>
Preguntas frecuentes sobre la carga diferida en WordPress
¿Quieres obtener más información sobre la carga diferida de WordPress? A continuación respondemos a algunas preguntas frecuentes:
¿La carga diferida y el aplazamiento de la carga de imágenes fuera de la pantalla son lo mismo?
Aplazar la carga de las imágenes fuera de la pantalla significa esperar a cargar las imágenes hasta que se haya cargado el resto del contenido crítico de la parte visible. Hay varias formas de hacerlo, pero los sitios de WordPress suelen utilizar la carga diferida.
En esencia, la carga diferida es un método para aplazar la carga de las imágenes fuera de la pantalla.
¿Puedo aplicar la carga diferida a las imágenes de fondo en WordPress?
Sí, puedes aplicar la carga diferida a las imágenes de fondo si quieres. Jetpack Boost activa la carga diferida para las imágenes de fondo. Sin embargo, dependiendo de cómo estén configuradas tus imágenes, puede que no sea capaz de identificarlas todas. Por ejemplo, si la imagen se carga mediante la propiedad background:url, el plugin no la interpretará como una imagen y, por tanto, no activará la carga diferida para ella.
En ese caso, puedes usar una herramienta como Lazy Loader, que te permitirá seleccionar las imágenes de fondo concretas que quieres cargar de forma diferida.
¿Puedo aplicar la carga diferida a un vídeo de YouTube?
¡Sí, puedes! Para hacerlo, inserta el siguiente fragmento de código de WPOrbit en el archivo functions.php de tu tema. Si no sabes cómo hacerlo, consulta nuestra guía para acceder al archivo functions.php y editarlo.
<?php// Do not include the above opening tag.// WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.netfunction iframelazy($content) { if(is_single()) { $content = str_replace('src="https://www.youtube.com/embed/','class="klazyiframe" data-src="https://www.youtube.com/embed/',$content); ob_start();?> <script> var ytflag = 0; var myListener = function () { document.removeEventListener('mousemove', myListener, false); lazyloadmyframes(); }; document.addEventListener('mousemove', myListener, false); window.addEventListener('scroll', function() { if(ytflag == 0){ lazyloadmyframes(); ytflag = 1; } }); function lazyloadmyframes(){ var ytv = document.getElementsByClassName("klazyiframe"); for (var i = 0; i < ytv.length; i++) { ytv[i].src = ytv[i].getAttribute('data-src'); }}</script><?php $jqueryappend = ob_get_contents(); ob_end_clean();} return $content.$jqueryappend;}add_filter('the_content', 'iframelazy');
¿La carga diferida de WordPress afecta al SEO?
Sí, la carga diferida puede influir positivamente en el posicionamiento de tu sitio en los motores de búsqueda. Google tiene en cuenta la velocidad del sitio a la hora de decidir la posición de las páginas en los resultados de búsqueda. Y como la carga diferida mejora el rendimiento, también puede mejorar la percepción que Google tiene de tu sitio.
Si lo haces manualmente, en lugar de utilizar un plugin de carga diferida, y cometes un error, puede afectar negativamente al SEO, ya que dificultará que los motores de búsqueda reconozcan tus imágenes.
¿La carga diferida afecta a la experiencia del usuario?
Sí, la carga diferida puede mejorar la experiencia del usuario porque reduce el tiempo de carga de tu sitio y, al mismo tiempo, permite que los visitantes vean tu contenido de inmediato. Esto, a su vez, puede mejorar la percepción que tienen de tu marca.
¿Necesito un plugin para aplicar la carga diferida a mi contenido?
No, no necesitas un plugin para cargar tu contenido de forma diferida. La carga diferida está activada en WordPress de forma predeterminada. Sin embargo, si quieres tener más control sobre el proceso de carga diferida, quizá quieras usar un plugin. Aquí tienes una selección de los mejores plugins de Lazy Load para WordPress.
¿Tiene algún inconveniente cargar el contenido de forma diferida?
Cargar el contenido de forma diferida no tiene muchos inconvenientes. Mejora la velocidad, la experiencia de usuario y el posicionamiento en los motores de búsqueda. Sin embargo, en ocasiones puede provocar cambios extraños en la distribución de la página. Por eso, siempre debes probar tu sitio después de activar la carga diferida.
¿Tengo que cargar todo mi contenido de forma diferida?
No, no tienes que cargar todo tu contenido de forma diferida. Puedes elegir cargar de forma diferida solo elementos concretos, como imágenes, vídeos o iframes.
¿Qué más puedo hacer para mejorar la velocidad de carga?
Además de la carga diferida, hay varias formas de mejorar la velocidad de tu sitio de WordPress, entre ellas:
- Usar una red de distribución de contenidos (CDN)
- Centrarse en los mismos aspectos que también permiten mejorar Core Web Vitals.
- Comprimir y optimizar las imágenes
- Activar la caché del navegador
- Minificar los recursos
Jetpack 