Lazy Load en WordPress

Dificultad del post: facilmediadifícil
lazyload

Durante mucho tiempo he sido detractor de Lazy Load como técnica WPO porque la implementación en algunos casos aplicada a las imágenes era, por decirlo de alguna manera, bastante mala.

Actualmente las cosas han cambiado y, con el Lazy Load nativo que podemos encontrar en navegadores como Google Chrome, conseguimos las ventajas que nos puede aportar Lazy Load sin la desventaja de tener que depender de un script JS para que se ejecute.

lazy load

El Lazy Load como técnica WPO consiste en cargar de forma diferida ciertos elementos. Normalmente se aplica a imágenes, aunque también a los iframes y a los vídeos de Youtube.

En resumidas cuentas, si activamos Lazy Load para las imágenes, estas no se cargarán cuando se abra la página sino cuando se necesiten, es decir, cuando el usuario vaya haciendo scroll y navegando por la web. Esto es especialmente útil en posts o artículos muy largos y con muchas imágenes.

Como ya he dicho, a mí al principio no me gustaba mucho Lazy Load porque la librería JS utilizada para esto podía retrasarse al servir las imágenes. Además, implicaba más Javascript para cargarse en el navegador del visitante. Sin embargo, actualmente con el Lazy Load nativo ya no existe ningún problema de Javascript.

lazy load

El Lazy Load tiene las siguientes ventajas como técnica WPO:

  • Reducimos el ancho de banda utilizado ya que, si el usuario nunca llega a bajar por la web, nunca se descargan las imágenes de abajo.
  • Reducimos el tiempo necesario para que la web esté lista para el usuario, ya que el peso completo de la web baja radicalmente.
  • Reducimos el impacto en el servidor web, ya que bajan bastante las peticiones realizadas al servidor.

No obstante, Lazy Load también tiene algunas desventajas:

  • Cuando implementamos Lazy Load NO nativo (es decir, mediante librería Javascript) pueden darse problemas importantes.
  • En algunos casos y dependiendo de la situación, si falla la comunicación entre el servidor y el navegador del visitante esas imágenes nunca cargarán, aunque esto ocurre en muy pocas ocasiones.

Existen muchos plugins para implementar Lazy Load en WordPress, ya que es una funcionalidad común en los plugins de WPO desde hace mucho tiempo.

Lo que tenemos que buscar actualmente es un plugin capaz de activar el Lazy Load nativo del navegador. Incluso podemos mejorarlo si hacemos Lazy Load de los iframes y de los vídeos de Youtube.

No me voy a extender mucho más con la introducción. Vamos a ir directos a la práctica.

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

RESPONSABLE:

RAIOLA NETWORKS, S.L.

C.I.F.: B27453489

Avda de Magoi, 66, Semisótano, Dcha., 27002 Lugo (Lugo)

Telefono: +34 982776081

e-mail: info@raiolanetworks.es

FINALIDAD:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
LEGITIMACIÓN:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
DESTINATARIOS:

No se ceden datos a terceros, salvo obligación legal.

Personas físicas o jurídicas directamente relacionadas con el Responsable

Encargados de Tratamiento adheridos al Privacy Shield

DERECHOS:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
INFORMACIÓN ADICIONAL:Se puede consultar la política de privacidad de forma más detallada aquí.

 

Lazy Load en WP Rocket

Como siempre, hablo de WP Rocket porque nos permite configurar Lazy Load tanto para imágenes como para iframes y vídeos.

lazy load

El tema es que WP Rocket también ofrece Lazy Load como plugin independiente y gratuito disponible en el repositorio de WordPress para que lo utilices en combinación con cualquier otro plugin de cache.

La principal ventaja de Lazy Load – Optimize images es que permite implementar Lazy Load por JS de imágenes, iframes y vídeos. Exactamente las mismas opciones que la versión completa de WP Rocket.

lazy load

El problema viene si queremos activar el Lazy Load nativo en WP Rocket o en Lazy Load – Optimize Imágenes porque deberemos recurrir a un plugin externo llamado Chrome Native LazyLoad. Se puede descargar desde la documentación de WP Rocket: https://docs.wp-rocket.me/article/1292-chrome-native-lazyload

Tengo que recalcar que cualquiera de estas dos opciones relacionadas con WP Rocket solo afectarán a las imágenes del contenido, no a las del theme o plugins.

Puedes encontrar más información acerca de WP Rocket en esta URL: https://alvarofontela.com/wp-rocket-plugin-cache-wordpress/

 

Perfmatters para Lazy Load

Otro plugin que me gusta bastante y del que suelo hablar es Perfmatters. Se trata de un plugin de tweaking para WordPress bastante potente que permite también hacer carga condicional de elementos.

Una de las funcionalidades que incluye Perfmatters es Lazy Load, tanto por Javascript como nativo:

lazy load

Lo único malo es que no deja configurar Lazy Load para iframes y vídeos. Además, al igual que en el caso anterior, el Lazy Load en Perfmatters solo afecta a las imágenes insertadas en el contenido del sitio web.

Puedes encontrar más información acerca de Perfmatters en la siguiente URL: https://alvarofontela.com/perfmatters-tweaks-optimizaciones-wordpress/

 

a3 Lazy Load

A3 Lazy Load es un plugin específico para implementar Lazy Load en WordPress y, evidentemente, tiene más funcionalidades y opciones de configuración para configurar un Lazy Load efectivo.

lazy load

a3 Lazy Load es muy superior a las dos opciones anteriores porque se trata de una solución específica. Estas son algunas de las ventajas de a3 Lazy Load:

  • Podemos configurar Lazy Load no solo para las imágenes del contenido, sino también para los avatares de Gravatar y para las imágenes de los widgets.
  • Podemos añadir exclusiones para que ciertas imágenes o secciones no se carguen con Lazy Load.
  • Podemos elegir dónde se carga el Javascript de Lazy Load: cabecera o pie de página.
  • Podemos personalizar el estilo visual con el que se cargan las imágenes.

a3 Lazy Load también permite hacer Lazy Load de iframes y vídeos, tanto en el contenido como en los widgets.

Si quieres ver un vídeo completo sobre como configurar a3 Lazy Load en WordPress, aquí lo tienes:

A3 Lazy Load es un plugin completamente gratuito y podemos encontrarlo en el repositorio de plugins de WordPress: https://es.wordpress.org/plugins/a3-lazy-load/

 

Speed Up – Lazy Load

De todos los que hemos mencionado en este artículo, el plugin Speed Up – Lazy Load es el más ligero y simple. Aunque no es compatible con Lazy Load nativo, la implementación mediante Javascript está muy bien desarrollada y solo hace una petición de 5kb.

Por otro lado, Speed Up – Lazy Load no tiene configuración. Simplemente debemos activarlo y aplicaremos Lazy Load mediante Javascript a las imágenes del contenido.

Puedes encontrar el plugin Speed Up – Lazy Load en el repositorio de plugins de WordPress: https://es.wordpress.org/plugins/speed-up-lazy-load/

 

Flying Images by WP Speed Matters

Para finalizar, no quería acabar el articulo sin hablar de otro plugin de WP Speed Matters que me encanta.

El plugin Flying Images permite realizar ajustes para optimizar las imágenes en WordPress. Entre ellos, la implementación de Lazy Load tanto de forma nativa como por Javascript.

lazy load

Una de las ventajas de Flying Images es que el Javascript utilizado para Lazy Load pesa menos de 1kb. Por lo tanto, es bastante eficiente incluso aunque no esté disponible el modo nativo en el navegador del visitante.

En Flying Images, al igual que en la mayoría de soluciones anteriores, solo aplicaremos Lazy Load a las imágenes del contenido.

Puedes encontrar Flying Images by WP Speed Matters en el repositorio de plugins de WordPress: https://wordpress.org/plugins/nazy-load/

Si quieres conocer el resto de plugins del ecosistema WP Speed Matters puedes encontrarlos en el siguiente enlace. Existen cosas muy interesantes de cara al WPO de WordPress: https://profiles.wordpress.org/gijo/#content-plugins

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

RESPONSABLE:

RAIOLA NETWORKS, S.L.

C.I.F.: B27453489

Avda de Magoi, 66, Semisótano, Dcha., 27002 Lugo (Lugo)

Telefono: +34 982776081

e-mail: info@raiolanetworks.es

FINALIDAD:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
LEGITIMACIÓN:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
DESTINATARIOS:

No se ceden datos a terceros, salvo obligación legal.

Personas físicas o jurídicas directamente relacionadas con el Responsable

Encargados de Tratamiento adheridos al Privacy Shield

DERECHOS:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
INFORMACIÓN ADICIONAL:Se puede consultar la política de privacidad de forma más detallada aquí.

Tal vez te interese...

Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.
Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.

16 comentarios

  1. Increible contenido Alvaro, un tema polémico de WPO

    Me quedo con Perfmatters, instalar un plugin solo para las imagenes aun lo veo como algo no tan necesario, con Perfmatters se solucionan muchas cosas

    saludos

    1. Si, es una buena opción, yo suelo usarlo así en algunos proyectos, aunque en este blog como pongo muchos vídeos, tengo WP Rocket + plugin de Lazy Load nativo.

  2. Hola Alvaro yo estoy iniciando un blob en wordpress, he puesto unos articulos con fotos y videos, los puedo ver en la pagina de preview de woerdpres, pero cuando los quiero ver en los buscadores las fotos no aparecen, encambio los videos si aparecen tengo instalado lazy load que podra estar pasando.

    1. Hola Raul, si estas empezando y no tienes el blog funcionando, te recomiendo que desactives Lazy Load.

  3. Buenas Álvaro.

    Cómo se activa lazy load nativo?? He visto que es un atributo de img tag. Loading=lazy.

    Pero cuando renderiza no ejecuta la carga diferida.

    Hay que hacer algo más?

    Por otra parte, en Mozilla developers indica que el atributo loading no esta reconocido para todos los navegadores, sobretodo en mobile.

    Nos puedes atudar??

    Gracias

      1. Muchas gracias por responder Álvaro.

        La verdad es que aprendemos un montón con tu blog.

        Hemos activos lazy load en el plugin Little speed cache.

        Es suficiente con esto??

        1. Hola Rafa, si, es suficiente, además el plugin LiteSpeed Cache ha avanzado bastante en este campo.

  4. Hola, instale el plugin y carga más rápido, todo bien con imágenes, pero los videos de youtube ahora se ven muy verticales, y no es nada estético, no se que puede haber sucedido

  5. Hola Alvaro! En mi web tengo instalado WP Rocket, aunque debo decir que noto muy pocas mejoras… imagino que no lo configuro del todo bien. Y según qué hago, la lío y rompo los estilos… en fin! jejeje estoy aprendiendo con tu blog… qué combinación me recomendarías? WP Rocket + el helper nativo o WP-Rocket + otro de los que mencionas? Tengo muchas dudas con el tema de plugins, ya que siempre oigo que no instalemos de más.. pero después veo que tenemos que tener un montón ajajaj no sé si ya lo tienes, pero estaría genial un post de qué plugins sí o sí necesito en mi wordpress 😀 y otra pregunta… el ayudante nativo de WP rocket lo instalas, activas y ya? No hay que configurar nada? Ya que no lo encuentro en el dashboard!! Tu blog es un 10!!!!!! Muchas gracias!!

    1. Hola Victoria, WP Rocket es un plugin premium con un soporte excepcional, así que si se te rompen los estilos al activar una opción, contacta con su soporte y te ayudaran con tu tema específico.

      El tema de los plugins, tengo un post donde hablo de los plugins que yo suelo usar (https://alvarofontela.com/mejores-plugins-wordpress/) pero…es una recopilación personal y tú puedes necesitar otros diferentes.

      Nunca he usado el “ayudante nativo” de WP Rocket, de hecho, nunca había oído hablar de él.

      1. Jaja perdona, me refería al Chrome Native LazyLoad. Me he inventado el nombre jaja gracias por tu respuesta! Voy a revisar!

  6. Hola Álvaro. ¿Qué tal? Te quería hacer una pregunta y estaría muy agradecido de tu respuesta.

    A día de hoy y sabiendo que wordpress en su última versión 5.9 (y puede que alguna anterior también) ya tiene un “lazy load” implementado… ¿Qué utilizarías tú con las imágenes y los vídeos? ¿El plugin de Rocket específico para esto? ¿a3 lazy load? ¿otro? ¿ninguno y pones el código a mano? 🙂

    No sé si he sabido explicarme bien…

    Muchas gracias anticipadas
    Saludos
    Victor

    1. Hola Victor, yo personalmente creo que el Lazy Load que lleva WP de forma nativa es bastante descafeinado y muy pocas veces lo he visto funcionar de forma efectiva… Para cubrir todas las imagenes e iframes siempre he requerido el uso de otros plugins.

      El de WP Rocket gratuito está bien. Yo normalmente uso el de WP Rocket o el de perfmatters.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Artículos destacados

Optimizar la carga de JavaScript y CSS en WordPress

WebP en WordPress

Optimizar la carga de Google Fonts en WordPress

Server Timing – Analizar peticiones HTTPS y HTTP (WPO)

WP Rocket para acelerar WordPress con cache de página

Limpiar la base de datos de WordPress

Artículos más comentados

WP Rocket para acelerar WordPress con cache de página

Optimizar la carga de JavaScript y CSS en WordPress

WebP en WordPress

Optimizar la carga de Google Fonts en WordPress

CloudFlare CDN para optimizar tu web o blog

Cache en WordPress – Plugins y tipos de cache