La página web promedio pesa alrededor de 3719 kB con imágenes y videos ocupando casi el 78% del peso total, de acuerdo al HTTP Archive. Esos son muchos bytes que el navegador de un visitante tiene que descargar y visualizar, y todas las tendencias apuntan a páginas aún más grandes y un incremento en el uso de imágenes para el futuro. WordPress está liderando la carga cuando se trata de compartir archivos multimedia e incorporando archivos multimedia en el diseño del sitio. Con WordPress, es fácil integrar imágenes y videos a las publicaciones, páginas, e incluso en el fondo de un tema.

Sin embargo, todos esos recursos pesados hacen que descargar una página web, sea una experiencia costosa para los usuarios que tienen que esperar para descargar grandes archivos – incluyendo archivos que al inicio no son visibles – antes de ver la página. Aquí es donde entra en juego la carga diferida (Lazy Loading) de WordPress.

¿Qué Es Carga Diferida y Cómo Funciona?

Carga diferida es una técnica de optimización que carga contenido visible, pero retrasa la carga y la versión del contenido que aparece debajo del pliegue. Es el tipo de cosas que a Google le emociona, y es una técnica que debería considerar si sus publicaciones y páginas incluyen muchos videos e imágenes de alta resolución.

Carga diferida funciona así:

  • El navegador construye la página web DOM sin descargar imágenes y precargar videos.
  • JavaScript es usado para determinar que imágenes descargar y que videos precargar, basado en el contenido que es inicialmente visible cuando la página carga. Estas imágenes y videos son descargados y precargados como sea apropiado.
  • El descargar y la versión de videos adicionales es retrasado hasta que el visitante del sitio baje a lo largo de la página y un contenido adicional aparece.

El resultado final es que las imágenes no son descargadas y los videos cargados hasta que realmente sean necesarios. Esto puede brindar un impulso significativo en el desempeño para sitios que incluyan muchas imágenes de alta resolución y videos.

Carga diferida puede traer un profundo impacto en la velocidad del sitio si usted utiliza muchas imágenes. 🚀 Haga clic para Tweet

Carga Diferida de WordPress

Como con muchos otros problemas de desempeño de otros sitios, cuando se trata de carga diferida de WordPress, hay un plugin que puede utilizar para arreglar el problema. En realidad, hay muchos plugins gratuitos disponibles en el directorio de WordPress que pueden ser usados para hacer carga diferida a imágenes y videos. Después de considerar una docena de plugins y poniendo varios por sus ritmos, hemos identificado tres plugins que producen una gran mejora en el desempeño del sitio. Si usted está listo para implementar  carga diferida, comience a considerar estas tres opciones.

¿Las imágenes y videos realmente hacen más lentos a los sitios web?

Antes que nada y antes de cargar imágenes a WordPress asegúrese de que estén optimizados.

Necesitamos una calificación base para que podamos ver el impacto al agregar nuevas imágenes y videos. No tiene sentido arreglar un problema, si en realidad no hay un problema que haya que arreglar. Para probar las cosas, yo preparo una instalación estándar de WordPress en una cuenta de hosting de Kinsta. TwentySixteen es el tema activo y no se han implementado plugins de optimización ni técnicas como el almacenamiento en caché.

Así es como Pingdom website speed test califica el sitio antes de agregar cualquier imagen o video.

Prueba de velocidad sin imágenes o videos

Prueba de velocidad sin imágenes o videos

Como puede ver, la página es muy liviana, pesa menos de 155 kb y carga en menos de medio segundo. Es difícil encontrar una falla con estos resultados. ¿Qué pasa si cargamos la página con imágenes grandes y videos de YouTube?

Prueba de velocidad sin el plugin de carga diferida

Prueba de velocidad sin el plugin de carga diferida

El tamaño de la página subió a 1.7 MB y el tiempo de carga se ha triplicado, por tan sólo debajo de los 1.3 segundos. TwentySixteen es un tema liviano y bien programado, así que incluso con una media docena de imágenes y videos de YouTube, el sitio sigue siendo bastante liviano y se carga súper rápido. Sin embargo, podemos ver que, al agregar imágenes y videos, ha hecho mucho mayor el tamaño de la página y a reducido su velocidad considerablemente.

Mejorando la Velocidad de la Carga de la Página con Clugins de Carga Diferida

Cuatro plugins que aceleran considerablemente la carga de esta página son BJ Lazy Load, Lazy Load XT, a3 Lazy Load y Lazy Load. Veamos como cada una se desempeña. También probamos muchos otros plugins, pero no mostraron una mejora considerable en el desempeño del sitio. Cuando pruebe los plugins de carga diferida, asegúrese de hacer una prueba antes y después para asegurarse de que están produciendo los resultados que está buscando.

1. BJ Lazy Load

BJ Lazy Load es un plugin muy popular. Está activo en más de 70,000 sitios de WordPress y está calificado con 4.1 de 5 estrellas con más de 60 reseñas.

Plugin de BJ carga diferida

Plugin de BJ carga diferida

Su instalación y configuración no es tan compleja. Sólo encuentre el plugin utilizando el instalador de plugin de WordPress, instálelo, y actívelo. Después de activarlo, se agregará una nueva sección en el menú, en la parte de Opciones > BJ Lazy Load. Todas las opciones de carga diferida son seleccionadas por omisión, y probablemente prefiera dejar estas opciones como están, al menos que se encuentre con algunos problemas en el front end de su sitio después de activar el plugin.

Una opción provista por el plugin y ni uno de los otros dos, es la habilidad de agregar URL para una imagen, para usarla como marcador para las imágenes y videos de carga diferida, hasta que los recursos de imagen y video real sean descargados. Por su puesto, si usted utiliza esta opción, usted querrá utilizar un pequeño archivo y no una imagen de alta resolución.

Para la huella más liviana posible y para resultados fluidos, yo recomiendo crear una imagen de un color sólido del mismo color que el fondo de su sitio y guardándolo en formato png.

También puede especificar una clase HTML que será excluida de la carga diferida. Luego pude aplicar esa clase a cualquier imagen o videos que deseé excluir de la carga diferida. Finalmente, puede especificar qué tan cerca debe llegar una imagen o un video a la ventana gráfica antes de que se descargue y visualice.

Veamos que tan rápido carga nuestra página con BJ y carga diferida.

Prueba de velocidad con el plugin de BJ carga diferida

Prueba de velocidad con el plugin de BJ carga diferida

Eso es súper rápido. Este sitio fue probado una media docena de veces en varios momentos a lo largo del día, y los tiempos de carga eran consistentemente entre 300 y 400 milisegundos.

Este resultado de prueba de velocidad no es atípico.

Mientras que las páginas se cargan extremadamente rápido con este plugin instalado, el tamaño de la página, en realidad, ha aumentado. ¿Por qué sucede esto? En teoría, con la carga diferida activada, el tamaño de la página debería disminuir, ya que no todas las imágenes son descargadas con la apertura inicial de la página.

Después de investigar un poco más la situación descubrimos lo siguiente.

¿Cómo es que WordPress sirve las imágenes?

Default WordPress behavior is to present a range of file sizes to the browser using the srcset attribute of the img element used to embed the image. The browser looks through the list of available sizes and loads the smallest version of the image that will fill the available space.

This means that if you upload a really large image file WordPress will automatically offer several smaller versions of that image to your website visitors. Your visitor’s browser will grab the smallest suitable image based on the amount of pixel real estate available for the image to occupy.

¿Cómo BJ Lazy Load altera el comportamiento de WordPress?

BJ de carga diferida sobrescribe el comportamiento normal de WordPress. El atributo srcset es reemplazado con un atributo data-lazy-srcset que funciona en conjunto con el scripting del plugin. Sin embargo, el resultado final es que, en lugar de descargar la versión reducida de la imagen, la resolución completa de la imagen termina siendo descargada y representada.

Esto no es ideal, pero siempre que optimice los archivos de imagen antes de cargarlos en WordPress, algo que no hice, no verá el mismo problema.

Carga de página con BJ Lazy Load

Carga de página con BJ Lazy Load

La prueba del ojo – simplemente descargue el sitio y vea que pasa – esto demuestra que si usa BJ Lazy Load y su sitio ahora tiene un fondo que no es de color blanco, usted tendrá que cargar algún tipo de imagen de marcador de posicionamiento. El comportamiento normal sin la imagen marcadora es de visualizar a un gif marcador de color blanco en lugar de la imagen.

2. Lazy Load XT

Lazy Load XT tuvo un buen desempeño en nuestras pruebas y es otro buen plugin de carga diferida para WordPress que vale la pena considerar. Con más de 4,000 instalaciones activas, es plugin no es tan popular como el BJ Lazy Load. Sin embargo, ha llamado mi atención con su impresionante calificación de 4.9 de 5. Sólo una de las 22 reseñas publicadas tiene menos de 5 estrellas.

Lazy Load XT plugin

Lazy Load XT plugin

Después de activarlo, el plugin es configurado al navegar al menú que podrá encontrar en Opciones>Lazy Load XT. Usted notará inmediatamente que este plugin hace más que simplemente cargar imágenes y videos. También puede utilizar este plugin para minimizar archivos JS y CSS, cargar bibliotecas JavaScript y CSS utilizando Cloudflare CDN, y mover scripts al pie del sitio.

Hay bastantes opciones adicionales que puede utilizar para ajustar el rendimiento del sitio. Sin embargo, ya que solo estamos probando la carga diferida en este punto, no cambié la configuración predeterminada, no me metí en minimización o movimiento CSS y JavaScript, borré el caché del servidor y ejecuté la página de prueba a través de la prueba de velocidad del sitio web Pingdom.

Prueba de velocidad con Lazy Load XT

Prueba de velocidad con Lazy Load XT

La página se mantiene en 2 MB y el tiempo de carga de la página no es tan rápido como lo era con BJ Lazy Load, pero aun así cumplimos con una reducción del 50% del tiempo de carga de la página comparado con el tiempo requerido de carga de la página sin carga diferida.

Un rápido vistazo al conjunto de archivos en los resultados de la prueba muestra que lo mismo está pasando con Lazy Load XT activado que como pasaba con BJ Lazy Load. En lugar de cargar una versión optimizada de la imagen, con el plugin activado se descarga y se procesa la versión de resolución completa de la imagen.

Si bien el plugin no produjo el mismo aumento de velocidad que BJ Lazy Load, las pruebas van en favor de Lazy Load XT. A diferencia de BJ Lazy Load, el marcador de posición utilizado por Lazy Load XT es transparente. Como resultado, no hay cuadros blancos vacíos desagradables mientras las imágenes y los videos están cargados y no tiene que preocuparse por crear y cargar una imagen de marcador de posición.

3. a3 Lazy Load

a3 Lazy Load es otra opción popular de carga diferida para WordPress en el repositorio. Este plugin se encuentra activo en más de 50,000 sitios de WordPress y ha ganado una muy buena calificación de 4.7 de 5, y ha recibido casi 40 reseñas de usuarios.

¿Luchando con el tiempo de inactividad y los problemas de WordPress? Kinsta es la solución de alojamiento diseñada para ahorrarle tiempo! Vea nuestras características
Plugin de a3 Lazy Load

Plugin de a3 Lazy Load

Cuando se activa el plugin, este agrega una opción adicional Opciones > a3 Lazy Load. Para propósitos de prueba, no moví ni una de las opciones, con una excepción. Si usa la opción de color de fondo de carga, para que el color del marcador sea igual al color de la página de fondo. Con este cambio, y las opciones base, el sitio tuvo un buen desempeño.

Prueba de velocidad con el plugin de A3 Lazy Load

Prueba de velocidad con el plugin de A3 Lazy Load

Estamos de vuelta a un tiempo de carga por debajo de medio segundo. Esto es destacable, considerando el número de imágenes y videos incluidos en el sitio web.

Comparando los resultados de las pruebas

Sin duda alguna, usted notará que el tamaño de la página y el número de peticiones ha disminuido considerablemente, ¿Qué está causando esta dramática diferencia? Pingdom brinda una imagen del tamaño del contenido, y una rápida comparación provee la respuesta. Primero, así es como luce la imagen del tamaño del contenido con a3 lazy Load activado.

Tamaño de contenido con el plugin de A3 Lazy Load

Tamaño de contenido con el plugin de A3 Lazy Load

La huella de la imagen es pequeña, con tan sólo 150 kb. BJ Lazy Load y Lazy Load XT produjeron un tamaño de página de 2.0 MB. Así es como luce la imagen del contenido con un total de carga de 2.0 MB.

Tamaño del contenido con el plugin de Lazy Load XT

Tamaño del contenido con el plugin de Lazy Load XT

El script, HTML, CSS y otros tamaños de contenido son casi idénticos. Sin embargo, el tamaño de la imagen es de 1.86 MB – básicamente el tamaño de la versión de resolución completa es la primera imagen de la página – en lugar de solo 150 kb. Así que, ¿Qué está pasado? Como mencioné anteriormente, WordPress automáticamente provee una variedad de tamaños de imagen y el navegador elige y visualiza la versión más pequeña posible basada en el tamaño en la que la imagen será representada en la pantalla.

BJ Lazy Load y Lazy Load XT sobrescriben este comportamiento y terminan entregando la imagen de resolución completa. Sin embargo, a3 Lazy Load deja intacto el comportamiento normal de WordPress y el resultado es que una imagen mucho más pequeña es entregada.

Curiosamente, a pesar de la diferencia de tamaño, el sitio carga más rápido con BJ Lazy Load activado que con a3 Lazy Load activado. El sitio fue probado varias veces con cada plugin instalado, para asegurar que los resultados mostrados aquí no eran inusuales. La diferencia se reduce a el número de peticiones HTTP requeridos para cargar la página. A primera vista, parece que BJ Lazy Load requiere más peticiones. Sin embargo, si damos un vistazo al conjunto de archivos, podemos ver lo que realmente está pasando.

Datos de Lazy Load URIs

Datos de Lazy Load URIs

El archivo del sitio con BJ Lazy Load activado incluye alrededor de veinte peticiones que comienzan con data:image/gif. Estos son Datos URIs en lugar de peticiones HTTP. En efecto, estos le dicen al navegador que cree un gif localmente, en lugar de pedir ese gif de un servidor. Como resultado, BJ Lazy Load solo necesita 17 peticiones HTTP para construir la página, contra los 27 requeridos por a3 Lazy Load. Esto explica porque la página se carga tan rápido.

Lazy Load Xt emplea una táctica similar, pero aún requiere algunas peticiones que con BJ Lazy Load, lo cual explica la razón por la que no produce los mismos resultados.

4. Lazy Load

Y una cuarta opción es Lazy Load el cual es un plugin gratuito creado por el equipo en WP Rocket. Actualmente se encuentra activo en más de 10,000 instalaciones con una calificación de 4 de 5. Si está buscando una opción simple de Lazy Load para WordPress, con una buena velocidad, esta es una buena opción.

Plugin de Lazy Load por WP Rocket

Plugin de Lazy Load por WP Rocket

El plugin funciona con thumbnails, todas las imágenes en el contenido de una publicación o en el texto de un widget, avatars y smilies. La gran ventaja de este plugin es que no hay una biblioteca de JavaScript como la de jQuery que esté siendo usada y el script pesa menos de 10 KB. No hay opciones para configurar, simplemente instale el plugin y lazy loading hará el trabajo.

5. Lazy Load for Videos

Si sólo le preocupa hacer lazy load a los videos, también le recomendamos checar el plugin de Lazy Load for Videos. Mientras que los plugins anteriores hacen esto también.

Plugin de Lazy Load for Videos

Plugin de Lazy Load for Videos

Impacto de Lazy Loading en el SEO

Sin importar que plugin termine utilizando para el lazy loading en WordPress, es importante que no dañe su SEO. Hay dos cosas que necesita chequear muy bien.

  1. Asegúrese de que Google aún pueda buscar sus imágenes cargadas con lazy loading. Fácilmente puede chequear esto utilizando la herramienta de “Fetch as Google” bajo la sección de crawl en el Google Search Console. Si aún puede ver las imágenes en el código fuente entonces es muy probable que todo esté bien.
  2. Asegúrese de que siga utilizando texto alternativo en sus imágenes ya que esto es importante para el posicionamiento de la búsqueda en Google image.

Resumen y Recomendaciones

¿Dónde nos deja esto? Las cuatro opciones hacen un buen trabajo de mejorar el tiempo de carga al hacer carga diferida de imágenes y videos. La elección de cual es mejor ya es por preferencia personal y como prepara usted las imágenes antes de subirlas a su sitio de WordPress.

  • Si usted no optimiza las imágenes antes de subirlas a su sitio de WordPress – y realmente debería hacer esto – entonces elija a3 Lazy load para que pueda obtener beneficio de la optimización de imagen integrada dentro de WordPress.
  • Si usted optimiza imágenes antes de subirlas y desea el tiempo de entrega más pronto posible con el menor esfuerzo, BJ Lazy Load es una buena opción. Lazy Load es otra buena opción.
  • Si usted optimiza imágenes antes de subirlas y quiere opciones de configuración adicionales, que le permitirán configurar como CSS y JavaScript son entregados y manejados, elija Lazy Load XT.

Carga diferida es solo una técnica que puede usar para optimizar su sitio de WordPress. Sin embargo, tiene el potencial de tener un impacto profundo en la velocidad del sitio, si usted utiliza muchas imágenes y videos. Aún así, una vez que haya implementado lazy loading, hay varias técnicas adicionales que podría considerar e implementar para ofrecer el desempeño más rápido posible en su sitio web. ¿Nos faltó alguna solución de lazy load para WordPress? Si es así, por favor comparta en la parte de abajo.