Lazy loading: cómo optimizar el re­n­di­mie­n­to de tu sitio web

Si tu objetivo es optimizar el re­n­di­mie­n­to de tu sitio web, tarde o temprano te en­co­n­tra­rás con el término del lazy loading, o carga diferida. Este popular método ayuda a mejorar el tiempo de carga de los sitios web, es­pe­cia­l­me­n­te los que contienen grandes ca­n­ti­da­des de datos, como imágenes o vídeos.

Cuando se abre un sitio web, el navegador carga todos los recursos ne­ce­sa­rios para mostrar la página ade­cua­da­me­n­te. Durante este proceso, se recuperan todos los objetos, no solo los que se en­cue­n­tran en el área visible, también los que están fuera de ella (lo que en inglés se conoce como below the fold). Entre otras cosas, esto comporta un tiempo de carga in­ne­ce­sa­rio. Para evitarlo, los de­sa­rro­lla­do­res utilizan el lazy loading, o carga diferida. Con la ayuda de un script como LazyLoad, el navegador carga las imágenes y el resto de datos solo cuando estos aparecen en la ventana gráfica o viewport (el área visible) del usuario, por ejemplo, al de­s­pla­zar­se por la ventana del navegador o ma­xi­mi­zar­la.

Para explicar el fu­n­cio­na­mie­n­to de LazyLoad, es de gran utilidad el ejemplo de las imágenes. Para utilizar la carga diferida, debes modificar el marcado de la etiqueta img. En lugar del atributo src, el método utiliza un atributo data que incluye una fuente coin­ci­de­n­te. En cuanto la imagen entra en el área visible, el script co­rre­s­po­n­die­n­te añade el atributo src mediante el atributo data, y la imagen aparece. Para que el proceso de carga sea más atractivo para el usuario, se puede utilizar algún efecto de de­s­li­za­mie­n­to o de aparición gradual.

Existen varias maneras de in­co­r­po­rar la carga diferida a tu proyecto web. La im­ple­me­n­ta­ción de esta te­c­no­lo­gía se ha de­sa­rro­lla­do y mejorado co­n­ti­nua­me­n­te a lo largo de los años. En los si­guie­n­tes apartados, te pre­se­n­ta­mos algunas de las so­lu­cio­nes más populares para im­ple­me­n­tar el lazy loading.

Una opción es in­co­r­po­rar a tu sitio web una de las in­co­n­ta­bles pla­n­ti­llas de Ja­va­S­cri­pt de carga diferida. El script LazyLoad, me­n­cio­na­do más arriba, ofrece una solución compacta que no requiere jQuery. Además de la capacidad de co­n­fi­gu­rar la carga diferida nativa para imágenes, videos e iFrames, este script de 2,4 KB (kilobytes) admite imágenes re­s­po­n­si­vas, entre otros elementos.

Una al­te­r­na­ti­va a LazyLoad es el script Lazy Load Re­ma­s­te­red, de Mika Tuupola. A di­fe­re­n­cia de LazyLoad, este script utiliza jQuery y pro­po­r­cio­na algunos efectos muy atra­c­ti­vos, como el des­en­fo­que de imágenes.

La carga diferida nativa es la forma más sencilla de in­co­r­po­rar el método del lazy loading a tu proyecto web. Esta te­c­no­lo­gía, ini­cia­l­me­n­te solo di­s­po­ni­ble en el navegador Google Chrome (versión 75 o superior), ahora también funciona en Firefox, Edge y Opera. Para utilizar esta opción, solo tienes que añadir el atributo loading a los co­rre­s­po­n­die­n­tes co­n­te­ni­dos del sitio web:

Además del valor lazy para la carga diferida, están di­s­po­ni­bles los si­guie­n­tes valores:

• eager: el navegador carga el objeto di­re­c­ta­me­n­te cuando se abre la página.
• auto: el navegador decide si carga el objeto di­re­c­ta­me­n­te o en diferido.

La ventaja de la carga diferida nativa es que el navegador no tiene que cargar una bi­blio­te­ca Ja­va­S­cri­pt adicional. Esto no solo ahorra tiempo de carga, sino que también garantiza que el navegador cargue las imágenes mediante lazy loading incluso si el usuario ha des­ac­ti­va­do Ja­va­S­cri­pt.

Si in­co­r­po­ras la carga diferida con Ja­va­S­cri­pt, el navegador consulta co­n­s­ta­n­te­me­n­te la posición de los objetos. Esto puede tener efectos co­la­te­ra­les des­agra­da­bles, como sacudidas, además de so­bre­ca­r­gar el servidor. Con la API In­te­r­se­c­tion Observer, se resuelve este problema. Esta interfaz supervisa los cambios de los elementos en relación con un elemento principal concreto. El elemento principal suele ser la ventana gráfica. Si el objeto se superpone con el elemento principal, o si la distancia entre los elementos cambia en cierta medida, In­te­r­se­c­tion Observer ejecuta una función de de­vo­lu­ción de llamada y muestra el elemento.

Si has creado tu sitio web con WordPress, puedes in­co­r­po­rar fá­ci­l­me­n­te la carga diferida con un plugin, como a3 Lazy Load. Además de imágenes y videos, esta extensión también admite el método de la carga diferida para otros tipos de contenido in­cru­s­ta­do.

Los ope­ra­do­res de sitios web suelen utilizar píxeles para rastrear el co­m­po­r­ta­mie­n­to de los usuarios. A veces, estos píxeles de se­gui­mie­n­to están úni­ca­me­n­te en el área no visible. Si se aplica la carga diferida a todas las imágenes, el navegador no carga el píxel de se­gui­mie­n­to hasta que este se encuentra en el área visible. Como resultado, se pierden cifras im­po­r­ta­n­tes sobre clics y co­n­ve­r­sio­nes.

De­pe­n­die­n­do de la opción que utilices, puedes hacer que el píxel de se­gui­mie­n­to se cargue de manera in­de­pe­n­die­n­te al abrir la página:

• Lazy loading nativo: añade el atributo loading="eager" al píxel de se­gui­mie­n­to.
• Lazy loading con Ja­va­S­cri­pt: asigna al píxel de se­gui­mie­n­to una de­te­r­mi­na­da clase que hayas excluido del código Ja­va­S­cri­pt. Si lo prefieres, puedes asignar una clase a todos los objetos que el navegador deba cargar mediante lazy loading y aplicar el script ex­pre­sa­me­n­te a esta.