Tutorial a3 Lazy Load

[vc_row][vc_column][vc_column_text]Como la mayoría conoce, WordPress es un gestor de contenidos muy utilizado en la actualidad por millones de personas. En él muchas personas destacas sus habilidades en generar contenido de interés para el público. En su evolución, WordPress ha incluido una serie de plugins que ayudan al crecimiento de una página web, tanto en su posicionamiento seo, como en estilo e imagen, así como en la velocidad de la carga de sus archivos.

En otras ocasiones hemos hablado de qué es Lazy Load y cómo funciona. En el tutorial de hoy explicaremos la función y la importancia de un plugin denominado a3 Lazy Load, el cual permite que la carga de las páginas pesadas por incluir contenido multimedia, sea mucho más rápida, permitiendo que los usuarios entres de forma más tranquila a el sitio web. a3 Lazy Load es uno de los plugins de carga diferida más utilizados por los usuarios de WordPress.

Son muchas las mejoras que han hechos los plugin de la versión Lazy Load, enfocándose cada vez más en la optimización de la experiencia del usuario, es así como llegamos al plugin a3 Lazy Load. En esta versión podemos enfocarnos directamente en la ralentización de la carga de la página web, configurando una serie de opciones para hacer una carga perezosa en ciertas imágenes o vídeos.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=»25709″ img_size=»full» alignment=»center»][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

¿Qué es el a3 Lazy Load?

Se refiere a un plugin cuya finalidad se basa en retrasar la carga de las imágenes, con el efecto que vayan apareciendo mientras el usuario vaya haciendo scroll. Consiste en un complemento dedicado hacia los dispositivos móviles, que ayuda a la aceleración a la hora de cargar los sitios web, este complemento actúa conforme al peso del contenido de cada página, es decir que mientras más pesado es el contenido, mayor rendimiento tendrá el complemento por lo que se mejorara el rendimiento.

Se considera uno de los plugins más fáciles de usar, en cuanto a carga diferida para WordPress. Este plugin admite todos los videos de WordPress, así como también se incluyen los videos de la plataforma de YouTube, Vimeo y HTML5.

Esta herramienta hace que el contenido se vaya cargando según lo vaya solicitando la pantalla, solo lo que se muestre en el momento, así no se tiene que esperar a que cargue todo el contenido de una página web para visualizarlo, de esta manera se rebajan los tiempos de carga. Optimizando la experiencia del usuario al visitar el sitio web, de esta forma logra observar el contenido al paso que va avanzando, sin tener que esperar mucho tiempo para que cargue el contenido completo.

Es una excelente opción para aquellas páginas web que poseen mucho contenido de imágenes en alta resolución o videos, entre otros. Puesto que los navegadores a la hora de encontrarse con un sitio web muy pesado, lo evitan, haciendo que se pierdan visitas y por consiguiente potenciales clientes. Con esta herramienta puedes evitar esa acción de los navegadores y optando por la carga diferida conseguirás una mejor evolución de tu página web.

Lo mejor de a3 Lazy Load, es que esta versión cuenta con una solución específica.

Ventajas de a3 Lazy Load

  • Personaliza el estilo visual a la hora de cargar las imágenes
  • Añade exclusiones que hagan que otras imágenes o elementos no se carguen con Lazy Load
  • Traducción lista
  • Soporte perfecto del framework jQueryMobile
  • Soporte backend para la visualización de RTL.
  • Escoge donde se carga el Lazy Load, si en el pie de página o en la cabecera.
  • Listo para sitios múltiples de WordPress.
  • Totalmente gratuito
  • 100% compatible con WordPress 5.5

¿Cómo funciona la carga diferida?

1.- El navegador de Internet construye la página, sin descargar imágenes o precargar videos.

2.- Se determina que vídeos van a precargar y que imágenes se van a descargar, por medio de JavaScript, esto se realiza basados en el contenido se visualiza al principio de la página.

3.- La imágenes y vídeos retrasaran su carga, hasta que el usuario se desplace a lo largo de la página y aparece contenido adicional en la pantalla.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=»26764″ img_size=»full» alignment=»center»][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Requerimientos para la instalación del plugin a3 Lazy Load

  • WordPress 4.6 o superior
  • PHP versión 5.6.0 o superior
  • MySQL versión 5.6 o superior O MariaDB versión 10.0 o superior

¿Cómo se utiliza a3 Lazy Load?

Si deseas crear este efecto de carga diferida en tu sitio web y ayudar que se cargue más fácilmente, sigue los siguientes pasos:

1.- Instalar y activar el plugin

El plugin de a3 Lazy Load lo puedes descargar directamente desde el repositorio de WordPress, una vez ubicada la herramienta das click en instalar y posteriormente en activar.

2.- Configura el plugin

Si abres el menú de configuración de WordPress, podrás observar el botón de a3 Lazy Load. Haz clic en él y enciendes la carga diferida. A continuación debes configurar las opciones de tu preferencia, según tu sitio web. Este plugin se encuentra en ingres, sin embargo su configuración es muy sencilla.

Lo primero que encontraremos al acceder a las configuraciones del plugin es la opción de Plugin Framework Global Settings.

a) Open Box Display

Este apartado nos indica si deseamos que sean mostrados todos los menús del plugin abiertos al entrar a sus configuraciones.

b) House Keeping

En esta opción se indica que al ser desinstalado el plugin no se encontrara ningún rastro de él dentro del código de WordPress.

c) Imágenes

Las imágenes son el elemento principal que hace más lenta la carga de la página e incrementa el uso del ancho de banda. Para evitar que una página con muchas imágenes ralenticen la carga, ingresa al panel de administración de a3 Lazy Load, gire la carga de imágenes en a3 Lazy Load ON | APAGADO. Si desea una mayor flexibilidad puede escoger las siguientes opciones cuando encienda la carga perezosa en imágenes:

  • Todas las áreas de contenido, como páginas y publicaciones
  • Aplicar para publicar miniaturas
  • Widgets (barra lateral, encabezado y pie de página)
  • Aplicar a los gravatares.

d) Videos

El plugin de a3 Lazy Load es compatible con todos los vídeos incrustados de WordPress. Puedes consultar la lista de archivos de WordPress Codex y obtener una lista completa. El método de inserción de WordPress para copiar y pegar la URL del vídeo en el área de contenido de publicaciones y páginas es totalmente compatible.

Este plugin admite videos de YouTube, video y HTML5. Es importante recalcar que no funciona con el nuevo widget de vídeo de WordPress ya que este no puede extraer iframe en la primera carga, por lo que usa JavaScript para reemplazar html a iframe y por consiguiente a3 lazy Load no puede ver que se aplique.

Para la configuración de los vídeos, ingresa al panel de administración de carga lenta a3, desde ahí debes activar el soporte de vídeo.

e) Acelerador de sitio Jetpack

Se puede activar esta opción ya que Jetpack Accelerator posee su propia función de carga diferida que debe estar APAGADA primero para así poder hacer uso de a3 Lazy Load como su motor de carga diferida.

f) Imágenes WebP

Para este apartado no existen configuraciones, puesto que el plugin a3 Lazy Load detecta de forma automática si una imagen posee una versión WebP y cargará dicha versión WebP de forma diferida. En caso de que no exista una imagen de versión WebP, se cargará la versión apropiada en jpg o png.

g) Rendimiento

Este apartado da la opción de cargar su script desde el sitio HEAD o desde el FOOT. Para ello el tema debe tener la función wp footer, si es seleccionada FOOTER load. Además del CSS completo es cargado completamente desde HEAD.

h) Exclusión de imágenes y de Vídeos

El plugin a3 Lazy Load da la opción de excluir imágenes o vídeos por nombre, de esta forma se evita el efecto Lazy Load. Debes utilizar este nombre de clase: a3notlazy, para poder excluir la carga diferida en ciertas imágenes individuales, vídeos e iframes específicos.

i) Excluir URL o páginas

Si deseamos excluir algunos URL o páginas de la carga diferida, tan solo debemos añadir la URL que queramos excluir o seleccionar las casillas correspondientes que nos convenga, como por ejemplo la Home Page.

j) Compatibilidad

Este plugin tiene la compatibilidad asegurada con cualquier tema de WordPress siempre y cuando siga el códice de temas del mismo WordPress. Algunos de los complementos que están 100% asegurada su compatibilidad son:

  1. Complemento: campos personalizados avanzados ya sean gratuitos o Premium
  2. Plugin – WooCommerce
  3. Complemento – YouTube incrustado
  4. Plugin – JetPack
  5. Complemento – MobilePress – Configurar para no aplicar en móviles si MobilePress está instalado
  6. Plugin: WP Super Cache, W3 Total Cache, Autoptimize
  7. Complemento – WordPress AMP
  8. Complemento – Elementor (gratuito y Pro)
  9. Complemento – Descarga de WP
  10. Complemento – WPTouch. Nota: configure para no aplicar en móviles si WPTouch está instalado
  11. Complementos WebP: Smush, EWWW Image Optimizer, Imagify, WebP Express
  12. No entrará en conflicto con ningún complemento que mantenga una carga diferida incorporada
  13. CDN: todas las arquitecturas CDN conocidas.

3.- Guardar

Ahora solo queda guardar los cambios y observar el rendimiento mejorado que el plugin de a3 Lazy Load le otorgo a su sitio web. De esta forma, los usuarios que visiten la página web no deben esperar a que carguen todas las imágenes y vídeos para comenzar a ver el contenido, por lo que se observa una gran rebaja en los tiempos de carga de los sitios web. Si poseemos una página con pocas imágenes, no se notara mucho la diferencia.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image image=»26765″ img_size=»full» alignment=»center»][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

¿Qué se debe tener en cuenta al utilizar el plugin a3 Lazy Load?

Como ya sabemos el plugin a3 Lazy Load es ideal para solucionar problemas en cuanto a la velocidad de carga en páginas que se encuentran muy pesadas por el uso de imágenes y videos. Si por el contrario, nuestra agina web no posee muchas imágenes en gran formato o colocamos pocas imágenes en nuestro contenido, podemos solo optimizar las imágenes ahorrándonos este plugin.

En caso de poseer muchas imágenes y darnos cuenta de que la carga del sitio web se ralentiza, este plugin puede significar la solución para tus problemas, con tan solo configurar los elementos que quieres que carguen en forma diferida, puedes aumentar la velocidad de carga de tu página web.

Puede que algunos de los elementos de tu página web no se carguen de forma perezosa a la hora se guardar los cambios de configuración del plugin. Esto se debe a que a3 Lazy Load solo puede ser aplicado en los elementos que se agregan por medio de las funciones básicas de WordPress. Si el tema o desarrollador de complementos que está utilizando, agrega elementos como videos e imágenes por medio de alguna función personalizada, este plugin no puede asimilar dicha función, por lo que no aplica la carga perezosa a ese elemento.

Conclusión

Son muchas las ventajas que puedes conseguir con la instalación y correcto uso de este plugin, solo debes aprender a usarlo de la mejor forma y configurar solo las opciones que consideres necesarias, ya que, si abusas de las configuraciones, sin estar 100% seguro no sacaras provecho alguno para tu sitio web.

Sino al contrario, ya que podría generar conflicto. Es recomendable informarse ampliamente sobre los diferentes plugin que resultan beneficiosos para nuestros sitios web, ya que forman una enorme cantidad de beneficios siempre y cuando los uses de manera correcta.

Así como el a3 Lazy Load, existen otros plugin que te ofrecen variables que mejoran tu sitio web. Como por ejemplo el Shortcodes Ultimate, el cual te ofrece una lista de códigos con los que puedes hacer desde pequeñas a grandes modificaciones de tu sitio web, como el cambio de estilos, de colores, de ilustraciones como recuadros, iconos, entre otros. Así como también está el plugin de Rank Math, el cual te ofrece un mayor posicionamiento SEO, recomendándote palabras claves que hacen a los navegadores de internet una búsqueda más fácil y rápida.

En fin, si tu idea es hacer crecer tu sitio web y dotarlo de imágenes para que se vea llamativo pero no extremadamente sobrecargado, el a3 Lazy Load es ideal para ti y la optimización de tu sitio web, aprovecha este y otros recursos que se encuentran en el repositorio de WordPress.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=»1/4″][/vc_column][vc_column width=»1/2″][vc_empty_space][vc_column_text]Si quieres saber más sobre a3 Lazy Load y su relación con el Posicionamiento SEO, no dudes en contactar con nosotros a través del siguiente formulario:[/vc_column_text][contact-form-7 id=»25951″][/vc_column][vc_column width=»1/4″][/vc_column][/vc_row]