WordPress

Cómo Usar Carga Diferida (Lazy Load) en WordPress

Hay muchas maneras de mejorar el rendimiento de su sitio web de WordPress. Las imágenes y otros archivos multimedia son algunos de los mayores culpables de los largos tiempos de carga. Esto significa que la implementación de cualquier método de optimización de imágenes puede impactar significativamente en el rendimiento del sitio, y el lazy loading no es una excepción.

En este artículo, hablaremos de cómo funciona la carga diferida y cómo puede beneficiar a su sitio web. A continuación, le mostraremos algunas de las formas más populares de añadir la carga diferida en WordPress para varios tipos de elementos. Por último, hablaremos de algunos de los problemas técnicos más comunes que puede causar esta configuración.

¡Vamos a ello!

¿Qué es la carga diferida?

Normalmente, cuando usted visita un sitio web, todos sus componentes intentan cargarse a la vez. Su navegador mostrará todos los recursos multimedia, textos, enlaces y otros elementos de la página. Si la página tiene muchos activos multimedia, como las imágenes, pueden ralentizar mucho los tiempos de carga.

Hay muchas maneras de reducir el impacto que tienen las imágenes en los tiempos de carga de la página. Puede optimizar las imágenes, activar el almacenamiento en caché del navegador, utilizar una red de distribución de contenidos (CDN) y optar por tipos de archivo más pequeños. Lo ideal es ir más allá e implementar todas las optimizaciones posibles, ya que no existe un sitio web demasiado rápido.

La carga lenta no disminuye el tamaño de los archivos de imagen ni cambia el tiempo que tardan en cargarse para cada usuario. En cambio, esta configuración puede aplazar la carga de cada imagen hasta que la ventana gráfica del navegador llegue a la sección de la página con ese archivo:

En la práctica, la carga diferida debería tener un impacto mínimo en la forma en que los usuarios interactúan con su sitio web si ya tiene un sitio responsivo. La mayoría de los visitantes no deberían notar la aparición de imágenes mientras se desplazan por sus páginas. Al mismo tiempo, puede beneficiarse de tiempos de carga iniciales más rápidos, ya que los usuarios no tendrán que solicitar y cargar cada imagen simultáneamente.

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

El retraso en la carga puede ayudar a los tiempos de carga iniciales. Esto es esencial si se tiene en cuenta que el 40% de los usuarios abandonan una página web si tarda más de tres segundos en cargarse. Por lo tanto, esta configuración puede atraer a los visitantes a permanecer en su sitio y navegar por su contenido.

Además, el retraso en la carga puede reducir la carga de la memoria y el almacenamiento. Por ello, su uso puede permitirle optar por un plan de alojamiento de sitios web más asequible.

Es importante tener en cuenta que a partir de la versión 5.5 de WordPress, el sistema de gestión de contenidos (CMS) carga las imágenes de forma retardada por defecto. Sin embargo, hay cierta controversia sobre si el enfoque por defecto puede perjudicar las puntuaciones de Core Web Vitals.

Por defecto, la carga diferida mejora los tiempos de carga sobre el papel. Sin embargo, también puede perjudicar las puntuaciones de Largest Contentful Paint (LCP).

LCP mide el tiempo que tarda en cargarse la imagen o el bloque de texto más grande de cualquier página:

WordPress utiliza el atributo HTML loading=lazy para las imágenes de su sitio web. En general, es la forma más fácil de implementar la carga diferida. Sin embargo, no todos los navegadores soportan ese atributo.

Si quieres desactivar la carga diferida para imágenes específicas, tendrás que modificar ese atributo manualmente usando HTML. La alternativa es utilizar un plugin de WordPress que implemente la carga diferida con un enfoque diferente (que le da más control).

¿Pueden otros elementos tener carga diferida?

Técnicamente hablando, puede retardar la carga para casi cualquier elemento en un sitio web. La carga diferida funciona increíblemente bien con las imágenes, y también es una característica excelente para los activos de vídeo.

Aparte de los activos multimedia, también se puede aplazar la carga de código como JavaScript y CSS. De hecho, se recomienda retrasar las secuencias de comandos que puedan bloquear la renderización en su sitio web para mejorar su puntuación de First Contentful Paint (FCP).

Además, también puedes optar por la carga lenta de activos de texto. Sin embargo, esa no es una buena práctica desde el punto de vista de la usabilidad. Además, aunque muestres todo el texto de un libro en una página, no debería afectar significativamente a los tiempos de carga.

La carga diferida es mejor para activos multimedia pesados que afectan significativamente a los tiempos de carga. Sin embargo, el núcleo de WordPress sólo admite la carga diferida para las imágenes. Si quieres extender esta práctica a otros elementos, tendrás que buscar una implementación alternativa. Ahí es donde entran los plugins.

Cómo añadir la carga diferida de imágenes y vídeos en WordPress

Como hemos mencionado antes, WordPress añade la carga diferida para todas las imágenes por defecto. Sin embargo, tendrá poco control sobre qué imágenes cargar retardadamente. Si quieres optar por un enfoque diferente, te recomendamos utilizar el plugin a3 Lazy Load.

Paso 1: Instalar y activar el plugin a3 Lazy Load.

El plugin a3 le permite excluir imágenes y páginas específicas de la carga lenta. Además, también admite la carga retardada de vídeos en su sitio web:

Este plugin también añade soporte para la carga diferida de imágenes y vídeos externos. Esto es algo que la implementación del núcleo de WordPress no hace.

Instala y activa el plugin desde tu panel de control de WordPress. Ahora podrá personalizar la configuración de la herramienta.

Paso 2: Ajustar la configuración de la imagen del plugin

A continuación, dirígete a Ajustes > a3 Lazy Load. En la sección Activación de Lazy Load, verás que el plugin está activado por defecto después de la instalación.

Abra la pestaña Lazy Load Images. Puedes (1) elegir qué imágenes retrasar dentro de tu sitio web y (2) habilitar un fallback para los navegadores que bloquean JavaScript. También puedes (3) establecer una clase CSS para las imágenes cuya carga no quieras aplazar:

La configuración por defecto tiene todas las opciones activadas, lo que recomendamos mantener. Sigue adelante y configura una clase CSS que te permita omitir la carga diferida para determinadas imágenes.

Paso 3: Ajustar la configuración del plugin de vídeo

A continuación, pasa a la pestaña Lazy Load Videos and iframes. Al igual que con las imágenes, a3 Lazy Load le permite elegir la carga diferida para clips específicos.

El plugin admite vídeos en (1) contenidos y widgets, y ofrece (2) una función de reserva para los navegadores que bloquean JavaScript:

Los ajustes de vídeo (3) permiten especificar una clase CSS que excluye determinados vídeos de la carga diferida. Para facilitar la configuración, puede utilizar la misma clase que eligió en la sección de imágenes.

Paso 4: Desactivar la carga diferida (opcional)

Por último, si quieres desactivar la carga diferida para tipos de páginas específicos, puedes hacerlo en la pestaña Excluir por URL y tipos de página. Aquí puede introducir páginas o tipos de contenido concretos que no deberían utilizar la carga diferida:

Guarda los cambios en la configuración del plugin y ya está. Si quieres desactivar la carga diferida para un elemento concreto, abre el editor y selecciona el bloque de imagen o vídeo que quieras configurar.

Abre el menú de configuración del bloque y navega hasta la pestaña Avanzado para encontrar el campo Clase(s) CSS adicional(es):

Puedes utilizar ese campo para añadir la clase de exclusión de carga lenta que has establecido al configurar el plugin. Si hace esto, esa imagen se cargará instantáneamente cuando un usuario visite su sitio.

Solución de problemas de carga lenta

Aunque la carga diferida es práctica y es una característica central de WordPress, también puede conducir a varios tipos de errores en su sitio web. Esta sección discutirá cuáles son esos problemas y cómo solucionarlos.

Problemas con las imágenes por encima del pliegue

En general, recomendamos que no cargue las imágenes por encima del pliegue. Cuando decimos «por encima del pliegue», nos referimos a la primera ventana gráfica que sus visitantes ven cuando cargan una página de su sitio web.

Diferir las imágenes por encima del pliegue puede afectar a su puntuación FCP. También puede afectar a las primeras impresiones de los usuarios cuando visitan su sitio web.

La solución simple es deshabilitar la carga diferida para las imágenes en los encabezados de sus páginas y otros elementos superiores. Si tomamos esta página, por ejemplo, recomendaríamos deshabilitar la carga diferida para (1) el logotipo y (2) el fondo de la cabecera:

WordPress requiere que añadas código a tu sitio web para desactivar su implementación nativa de carga diferida. La forma más sencilla de desactivar la carga diferida para determinados activos multimedia es utilizar un plugin como a3 Lazy Load, tal y como hemos explicado en la última sección.

Desplazamiento del diseño debido a la carga diferida

El cambio de diseño se produce cuando se está cargando una página y los elementos se mueven a medida que se hacen visibles. El Cumulative Layout Shift (CLS) es un Core Web Vital que mide el cambio de diseño. En algunos casos, una mala implementación de la carga lenta puede afectar a la puntuación de CLS de su sitio web.

Los elementos de una página no se cargan todos a la vez. En cambio, se cargan uno por uno, aunque el proceso parezca casi instantáneo en un navegador. Cuando tienes archivos de imagen que se cargan después de otros elementos, pueden desplazar esos activos.

La solución a este problema es evitar el uso de imágenes de tamaño completo en WordPress. Cuando subes imágenes a WordPress, el CMS las redimensiona automáticamente a resoluciones estandarizadas:

El uso de resoluciones estándar reduce la probabilidad de que se produzcan cambios drásticos en la composición, incluso con la carga diferida. También puede especificar manualmente las dimensiones de las imágenes para cada archivo. Sin embargo, es un proceso que requiere mucho tiempo. En resumen, sólo recomendamos hacerlo para las imágenes que desee mostrar en dimensiones únicas.

Problemas con la carga diferida y los plugins de caché

Es común que los plugins de almacenamiento en caché entren en conflicto con las herramientas de carga diferida. Algunos plugins de caché, como WP Rocket, incluyen la funcionalidad de carga diferida incorporada. El uso de esa función con un plugin de carga diferida, como a3 Lazy Load, a menudo dará lugar a conflictos.

Recomendamos seguir con una sola familia de plugins para evitar problemas de imágenes que no se muestren debido a herramientas conflictivas. Si tienes activados tanto el plugin de carga diferida como el de almacenamiento en caché y empiezas a encontrarte con errores, te recomendamos que desactives primero la primera opción:

Después de desactivar el plugin de carga lenta, comprueba si tus imágenes se cargan correctamente. Si ese es el caso, su herramienta de almacenamiento en caché probablemente viene con la funcionalidad de carga retardada incorporada. Eso significa que no necesitas configurar ningún software adicional para esa función.

Conclusión

Aunque la carga retardada forma parte de las características principales de WordPress, hay formas de mejorar su implementación. Puede utilizar plugins como a3 Lazy Load para tener más control sobre la carga retardada en su sitio. Con el plugin adecuado, también puedes configurar y excluir la carga diferida para los activos externos.

Dependiendo de cómo se implemente la carga diferida, la práctica debería reducir drásticamente los tiempos de carga de la página. Cuanto más multimedia sea su sitio web, mejores serán los resultados que obtendrá, todo ello sin ningún impacto negativo en la experiencia del usuario. Tambien puede intentar usar la carga diferida de las imágenes de Gravatar.

¿Tiene alguna pregunta sobre el uso de la carga lenta en WordPress? ¡Hablemos de ellas en la sección de comentarios más abajo!

Publicidad

Síguenos en Facebook