Cómo Lazy Load en WordPress (Imágenes y videos)

Si es propietario de un sitio web, es probable que haya pensado en la velocidad del sitio al menos una vez en el pasado. Después de todo, Google considera la velocidad al determinar dónde ubicar los sitios en los resultados de búsqueda. Por lo tanto, si su sitio tarda en cargarse, está en desventaja en lo que respecta a la clasificación. Y todos sabemos que las clasificaciones más altas generan más tráfico.

Entonces, ¿cómo te aseguras de que tu sitio de WordPress se cargue lo más rápido posible? Una forma es cargar tus imágenes de forma diferida.

La carga diferida es una técnica que retrasa la reproducción de imágenes y videos hasta que se necesitan. Implementar esto puede acelerar considerablemente su sitio, y la buena noticia es que no necesita ser un desarrollador para que esto funcione.

Hoy, le mostraremos cómo cargar imágenes y videos de forma diferida en WordPress usando dos métodos: con un complemento y sin él.

¿Qué es la carga diferida?

La carga diferida es una técnica común utilizada para mejorar la velocidad de la página. La idea es simple: en lugar de cargar todas las imágenes en una página cuando llega un visitante por primera vez, solo muestra las imágenes que son visibles. Luego, a medida que el visitante se desplaza hacia abajo en la página, se cargan más imágenes según sea necesario.

Esto significa que si un visitante nunca se desplaza hacia abajo hasta la parte inferior de una página, las imágenes debajo del área de la página visitada nunca se cargan. Por lo tanto, la carga diferida puede ahorrar preciosos milisegundos (o incluso segundos) del tiempo de carga de su página.

Además, la carga diferida también puede ayudarlo a conservar el ancho de banda. Esto es especialmente importante si tiene personas que visitan su sitio en un dispositivo móvil. Al diferir la carga de imágenes y videos que no son visibles, puede disminuir la cantidad de datos utilizados.

¿Cómo funciona la carga diferida?

En general, la carga diferida funciona de una de dos maneras. WordPress, a partir de la versión 5.5, agrega un atributo HTML5 llamado "cargando". En este caso, el navegador maneja todas las partes del proceso de carga diferida sin necesidad de JavaScript adicional.

Otro método, desarrollado antes del atributo de HTML5, es a través de JavaScript creativo. En este caso, se sirve un marcador de posición vacío al cargar la página, luego se usa JavaScript para cargar imágenes a medida que ingresan a la ventana gráfica.

De cualquier manera, solo se cargan las imágenes que necesita el navegador. Otras imágenes se cargan una vez que un visitante se desplaza hacia abajo en la página.

Hay algunas maneras diferentes de hacer esto, que discutiremos con más detalle a continuación. Pero esa es la esencia de cómo funciona la carga diferida.

¿Cuáles son los beneficios de la carga diferida?

Hay tres beneficios principales para las imágenes de carga diferida:

• Mayor velocidad del sitio
• Uso de ancho de banda reducido
• Mejor experiencia de usuario

El aumento de la velocidad del sitio suele ser la principal motivación para implementar la carga diferida. Al esperar para renderizar imágenes innecesarias, puede disminuir el tiempo de carga de su página. Esto es especialmente cierto si tiene muchas imágenes en una página o si sus imágenes son grandes.

A continuación, la carga diferida puede ayudarlo a conservar el ancho de banda. Si los visitantes nunca se aventuran por la página, no se desperdicia ancho de banda cargando imágenes que nunca verán.

Finalmente, la carga diferida puede mejorar su experiencia de usuario. Esto se debe a que los visitantes no tienen que esperar a que se carguen todas las imágenes de una página antes de que puedan comenzar a interactuar con su sitio.

¿La carga diferida de WordPress es predeterminada?

Sí, a partir de WordPress 5.5, la carga diferida está habilitada automáticamente de manera predeterminada al momento de la instalación. Sin embargo, hay algunas formas de personalizar la experiencia que son bastante sencillas e intuitivas. Discutiremos estos métodos con más detalle a continuación.

¿Debo cargar mis imágenes de forma diferida? ¿Hay inconvenientes?

En la mayoría de los casos, la carga diferida de sus imágenes es una gran idea si desea mejorar la velocidad de su página o conservar el ancho de banda. Sin embargo, también hay algunos inconvenientes potenciales a considerar.

Cambio de diseño

Si carga sus imágenes de forma diferida, el diseño de su página puede cambiar. Por ejemplo, si tiene una barra lateral en el lado derecho de su página y carga de forma diferida una imagen que se encuentra dentro de ella, la barra lateral puede moverse hacia abajo para dejar espacio. Esto puede ser muy desorientador para sus visitantes.

Como regla general, se recomienda usar marcadores de posición para evitar este problema.

Impacto potencial para el SEO

Si no lo hace correctamente, las imágenes de carga diferida pueden causar que los motores de búsqueda, como Google, tengan problemas para indexarlas. El contenido es el rey cuando se trata de clasificaciones y, en este caso, podrías perder partes valiosas.

Es posible que sus imágenes ya no aparezcan en los resultados de búsqueda y, dependiendo de qué tan importantes sean las imágenes en relación con el resto del contenido de la página (como las imágenes de productos para una lista de comercio electrónico), también podrían disminuir sus clasificaciones de búsqueda regulares.

Dicho esto, si configura la carga diferida correctamente, esto no será un problema. Es por eso que, a menos que sea un desarrollador seguro, su mejor curso de acción es usar un complemento de carga diferida o quedarse con la carga diferida predeterminada incluida con WordPress.

Conflictos de complementos

Además, la carga diferida puede causar problemas con algunos complementos de WordPress, como complementos que usan imágenes para generar vistas previas de redes sociales.

Cada vez que realice cambios en su sitio, debe probarlos minuciosamente para asegurarse de que todo funciona como debe.

Y, en caso de que algo salga mal, tenga a mano una copia de seguridad de su sitio de WordPress para una recuperación rápida.

Cómo habilitar la carga diferida en WordPress

La carga diferida ahora está habilitada de forma predeterminada en WordPress. Si no está utilizando una iteración moderna de WordPress (aunque le recomendamos que lo haga), o si desea un control más granular sobre el proceso de carga diferida, puede hacerlo utilizando uno de los dos métodos distintos: usando un complemento o agregando código a su sitio.

1. Carga diferida con un complemento

Si no es un desarrollador experimentado, le recomendamos que use un complemento porque cada vez que edite el código de su sitio, corre el riesgo de tener problemas. Incluso si tiene copias de seguridad a mano en caso de que rompa algo, puede ser mejor simplemente usar un complemento de buena reputación.

Jetpack Boost es un complemento gratuito dedicado a ayudarlo a medir y mejorar el rendimiento del sitio. Ofrece funcionalidades como:

• Aplazamiento de JavaScript no esencial
• Optimización de la carga de CSS
• Carga de imagen perezosa
• Pruebas de rendimiento del sitio

Para comenzar con Jetpack Boost, descárguelo gratis del directorio de complementos de WordPress.

O, en su tablero de WordPress, vaya a Complementos → Agregar nuevo, luego busque "Jetpack Boost" y haga clic en Instalar ahora . Una vez instalado, haga clic en Activar .

A continuación, vaya a la nueva opción de menú del tablero titulada Boost . Luego, haz clic en Comenzar gratis .

En la página siguiente, desplácese hacia abajo hasta el interruptor grande que dice Carga diferida de imágenes y enciéndalo. Ahora, eche un vistazo a su sitio y asegúrese de que todo se esté mostrando correctamente y se vea bien. ¡Eso es todo! La carga diferida es buena para usar con solo unos pocos clics.

Si desea ir un paso más allá y personalizar la carga diferida de su sitio, puede hacerlo utilizando fragmentos de código, que puede agregar a su archivo functions.php . O bien, puede insertarlos con un complemento de funcionalidad.

Aquí hay algunas tareas que puede realizar:

1. Deshabilitar la carga diferida en ciertas páginas
2. Establecer un marcador de posición que se muestra hasta que se carga la imagen
3. Desactiva la carga diferida para imágenes específicas
4. Desactivar la carga diferida para una clase CSS específica

Por ejemplo, si desea excluir una clase CSS del proceso de carga diferida, usaría 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 detalles, consulta la documentación completa sobre la carga diferida.

2. Cómo cargar imágenes de forma diferida en WordPress sin un complemento

Como mencionamos anteriormente, WordPress, de forma predeterminada, habilita la carga diferida para todas las imágenes que tienen dimensiones establecidas. No necesita activar nada ni agregar ningún código para hacer esto. Sin embargo, puede haber ocasiones en las que desee personalizar el funcionamiento de esta funcionalidad.

Por ejemplo, supongamos que no desea que se incluyan imágenes de plantilla. Agregaría este código a su archivo functions.php :

 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 tal vez desee obtener una gran granularidad y desactivar la carga diferida para imágenes específicas. Puede hacer esto asignando una clase de imagen adicional a cada imagen cuando se agrega a una página o publicación y luego agregando esa clase al siguiente código en su 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 agregar la clase de imagen skip-lazy en el ejemplo anterior a una imagen:

1. Agregue la imagen a la página o publíquela a través de la Biblioteca multimedia.
2. Después de agregar la imagen, busque la configuración de su imagen. Esto puede aparecer de manera diferente dependiendo de si está utilizando el editor de bloques de Gutenberg, el editor clásico o un complemento de creación de sitios. La capacidad de agregar una nueva clase de CSS generalmente se encuentra en el área de Configuración avanzada (Gutenberg y editores clásicos) o en la parte inferior de las opciones de configuración de imagen (la mayoría de los demás creadores de sitios).
3. Agregue la clase skip-lazy a la imagen y guarde su actualización.

Puede obtener más información sobre las posibilidades en la documentación de WordPress.

Cómo cargar videos de forma diferida en WordPress

Si desea cargar sus videos de forma diferida, puede hacerlo agregando código al video en la publicación o página. Este código debería ser algo como esto:

 <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 saber más sobre la carga diferida de WordPress? Hemos respondido algunas preguntas frecuentes a continuación:

¿La carga diferida y el aplazamiento de imágenes fuera de pantalla son lo mismo?

Aplazar las imágenes fuera de pantalla significa esperar para cargar las imágenes hasta que se haya cargado el resto del contenido crítico de la mitad superior de la página. Hay varias formas de hacer esto, pero los sitios de WordPress suelen usar la carga diferida.

Esencialmente, la carga diferida es un método para diferir imágenes fuera de pantalla.

¿Puedo cargar imágenes de fondo de forma diferida en WordPress?

Sí, puede cargar imágenes de fondo de forma diferida si lo desea. Jetpack Boost activa la carga diferida para las imágenes de fondo. Sin embargo, dependiendo de cómo estén configuradas sus imágenes, es posible que no pueda identificarlas todas. Por ejemplo, si la imagen se carga a través de la propiedad background:url, el complemento no la leerá como una imagen y, por lo tanto, no habilitará la carga diferida.

En esa situación, puede usar una herramienta como Lazy Loader, que le permitirá seleccionar las imágenes de fondo específicas que desea cargar de forma diferida.

¿Puedo cargar un video de YouTube de forma diferida?

¡Sí tu puedes! Para hacerlo, inserte el siguiente fragmento de código de WPOrbit en el archivo functions.php de su tema. Si no está seguro de cómo hacerlo, consulte nuestra guía para acceder y editar el archivo functions.php .

 <?php // Do not include the above opening tag. // WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.net function 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 afecta el SEO?

Sí, la carga diferida puede tener un impacto positivo en la clasificación de su motor de búsqueda. Google considera la velocidad del sitio al decidir dónde se clasifican las páginas en los resultados de búsqueda. Y dado que la carga diferida mejora el rendimiento, también puede aumentar la percepción de su sitio por parte de Google.

Si lo hace manualmente, en lugar de usar un complemento de carga diferida, y comete un error, puede tener un impacto negativo en el SEO al dificultar la capacidad de los motores de búsqueda para reconocer sus imágenes.

¿La carga diferida afecta la experiencia del usuario?

Sí, la carga diferida puede mejorar su experiencia de usuario porque reduce el tiempo de carga de su sitio, al tiempo que garantiza que los visitantes puedan ver su contenido de inmediato. Esto, a su vez, puede mejorar su percepción de su marca.

¿Necesito un complemento para cargar mi contenido de forma diferida?

No, no necesita un complemento para cargar su contenido de forma diferida. La carga diferida está habilitada en WordPress de forma predeterminada. Sin embargo, si desea tener más control sobre el proceso de carga diferida, es posible que desee utilizar un complemento. Aquí hay una selección de los mejores complementos de carga diferida para WordPress.

¿Hay alguna desventaja en el contenido de carga diferida?

No hay muchas desventajas en el contenido de carga diferida. Mejora su velocidad, experiencia de usuario y clasificación en los motores de búsqueda. Sin embargo, ocasionalmente puede causar cambios extraños en los diseños de sus páginas. Por lo tanto, siempre debe probar su sitio después de habilitar la carga diferida.

¿Necesito hacer una carga diferida de todo mi contenido?

No, no es necesario que realices una carga diferida de todo tu contenido. Puede optar por cargar de forma diferida solo elementos específicos, como imágenes, videos o iFrames.

¿Qué más puedo hacer para mejorar las velocidades de carga?

Además de la carga diferida, hay otras formas en que puede mejorar la velocidad de su sitio de WordPress, que incluyen:

• Uso de una red de entrega de contenido (CDN)
• Centrándose en mejorar las mismas cosas que también mejoran Core Web Vitals.
• Optimizando tus imágenes
• Habilitación del almacenamiento en caché del navegador
• Minimizar recursos

Acelere su sitio con la carga diferida de WordPress

La carga diferida de sus imágenes es una excelente manera de optimizar el rendimiento de su sitio y mejorar su experiencia de usuario en general. Jetpack Boost ofrece la forma más conveniente y robusta de habilitar la carga diferida, al mismo tiempo que proporciona otras potentes herramientas de velocidad. ¿Listo para comenzar? ¡Consigue Jetpack Boost!