Las mejores maneras de personalizar su propia carga diferida para sitios web
Publicado: 2019-07-29Lazy Loading se utiliza para diferir la carga de algunas imágenes o elementos de la página web para más tarde cuando un usuario visita una página web. Esto generalmente se hace para imágenes y elementos del sitio web debajo del pliegue. La idea es que, en lugar de cargar toda la página web de una sola vez, cargue algunas partes de la página web a medida que el usuario sigue desplazándose hacia abajo.
El principal beneficio de usar lazy Loading es que disminuye el tiempo de carga del sitio web en general. Lazy Loading mejora el rendimiento del sitio web y brinda una mejor experiencia de usuario al cargar primero la parte superior que los visitantes pueden comenzar a mirar o leer de inmediato. Cuando los visitantes llegan a su página web y tienen que esperar mucho tiempo, pierden el interés y pueden irse. Sin embargo, si les da algo para ver o leer al instante mientras carga el resto de la página web, puede mantenerlos enganchados a su sitio web. La segunda ventaja de Lazy Loading es la reducción de costes. Las imágenes solo se descargan si el visitante del sitio web visita esa sección en particular del sitio web. Por lo tanto, si el visitante no se desplaza hacia abajo, se descargan menos datos en su dispositivo, ahorrándole dinero.
Debido a estas ventajas, Lazy Loading es una excelente manera de mejorar la experiencia y la eficiencia del usuario de su sitio web.
Puede personalizar la carga diferida para su sitio web de dos maneras: usando la propiedad de fondo CSS o usando la etiqueta <img>. Sin embargo, el método de la etiqueta <img> es el más común de los dos, ya que esta técnica es fácil de usar.
Propiedad de la etiqueta <img>:
Cuando se usa la etiqueta <img>, el navegador usa el atributo src para activar la carga de la imagen. No importa si es la primera imagen o la imagen número 100 en su código. Si el navegador recibe el atributo src, activará la carga de la imagen. Entonces, para cargar estas imágenes de forma diferida, agregue la URL de la imagen a un atributo que no sea src. Por ejemplo, si coloca la URL de la imagen en el atributo data-src, el navegador no activa la carga de la imagen ya que el atributo src está vacío.
Ahora que la carga inicial se ha detenido, debemos decirle al navegador cuándo debe cargarse la imagen. Queremos activar la carga de la imagen tan pronto como ingrese a la ventana gráfica. Hay dos formas de verificar el momento en que una imagen ingresa a la ventana gráfica:
1. Uso de eventos de JavaScript:
En esta técnica, los detectores de eventos se utilizan para cambiar el tamaño, el cambio de orientación y los eventos de desplazamiento en el navegador. El evento de desplazamiento es el más obvio. Se utiliza para comprobar cuándo el usuario se desplaza por la página web. Los eventos 'orientationChange' y 'resize' son igualmente esenciales para la carga diferida. El evento de cambio de tamaño se activa cuando hay cambios en el tamaño de la ventana del navegador. El evento 'orientationChange' ocurre cuando el dispositivo se gira del modo vertical al horizontal o viceversa. En estos casos, la cantidad de imágenes que son visibles en la pantalla cambiará, por lo que necesitaremos activar la carga de la imagen.
Cuando ocurre uno de estos eventos, buscamos todas las imágenes presentes en la página que aún no se han cargado. Al verificar todas las imágenes descargadas presentes en la página web que ahora está en la ventana gráfica, encontramos las que deben cargarse instantáneamente. Esto se hace utilizando la parte superior de desplazamiento del documento actual, la altura de la ventana y el desplazamiento superior de la imagen.
Si una imagen ha ingresado a la ventana gráfica, tomamos la URL de la imagen del atributo data-src y la colocamos en el atributo src que desencadena la carga de la imagen. Luego, debemos eliminar la clase perezosa de la imagen, ya que esta clase hace que las imágenes se carguen con pereza. Cuando se cargan todas las imágenes, se eliminan los detectores de eventos.
En el caso del desplazamiento, el evento de desplazamiento se dispara continuamente. Entonces, para aumentar el rendimiento, podemos agregar un pequeño tiempo de espera que acelerará la ejecución de carga diferida.
2. Usando la API del observador de intersección:
Intersection Observer API es una API comparativamente nueva en los navegadores. Esta técnica hace que sea muy simple detectar el tiempo de un elemento que ingresa a la ventana gráfica. Esta técnica ofrece un rendimiento excelente sin utilizar matemáticas complejas en comparación con el método anterior.
Primero, tenemos que adjuntar el observador a todas las imágenes que requieren carga diferida. Cuando la API detecta que una imagen ha ingresado a la ventana gráfica, selecciona la URL de data-src y la coloca en el atributo src usando el método 'isIntersecting' para activar la carga de la imagen. Después de eso, la clase perezosa se elimina junto con la eliminación del observador.
La API de Intersection Observer funciona rápidamente sin hacer que el sitio parezca lento al desplazarse en comparación con el uso de eventos de JavaScript. Con la técnica de escucha de eventos, tuvimos que agregar un tiempo de espera que agrega un ligero retraso. Sin embargo, la API de Intersection Observer no es compatible con todos los navegadores. Por lo tanto, el detector de eventos se ha convertido en una opción popular para los usuarios.
Propiedad de fondo CSS:
Para cargar imágenes de fondo CSS, el navegador debe crear el Modelo de objetos CSS (CSSOM) junto con el Modelo de objetos del documento (DOM) para decidir si el estilo CSS se aplicará a un DOM presente en el documento existente. Si la regla CSS no se aplica al elemento, el navegador no cargará la imagen de fondo.
Con esta técnica, aplicamos la propiedad CSS de la imagen de fondo cuando un elemento llega a la ventana gráfica. Hay un elemento con ID bg-image (imagen de fondo) en CSS. Una vez que se agrega la clase lazy a la imagen, en la técnica CSS, anulamos la propiedad bg-image y la convertimos en none.
Se prefiere agregar la clase .lazy a la imagen #bg en CSS que usar solo la imagen #bg. Inicialmente, el navegador aplica background-image: none al elemento. Una vez que nos desplazamos por la página web, los detectores de eventos o el Intersection Observer detectan la imagen presente en la ventana gráfica y eliminan la clase .lazy. Esto no es aplicable en la técnica CSS ya que la propiedad bg-image se aplica al elemento que desencadena la carga de la imagen de fondo.
Entonces, estas son las dos formas en que puede personalizar su propio sitio web de carga diferida. Ambas técnicas ofrecen resultados excepcionales. Sin embargo, si desea una técnica sencilla, debe optar por la etiqueta <img>. Hay muchos complementos disponibles para que los usuarios de WordPress también personalicen las imágenes de carga diferida en sus sitios web de WordPress. La optimización de imágenes para su sitio web de WordPress con estos complementos, junto con la carga diferida, mejorará el rendimiento de su sitio web, brindará una mejor experiencia y también ayudará con el SEO.