Carga diferida de imágenes: que es, como activarla para WordPress y comparativa de plugins

Por , actualizado en

¿Qué es la carga diferida de imágenes?

La carga diferida es un patrón de diseño que básicamente consiste en utilizar un objeto hasta que este haga falta; pensemos en imágenes para ir entendiendo mejor el concepto. Imagina que tienes un sitio que carga una cantidad considerable de imágenes, que como sabrás, representan la mayor parte del tamaño total de un sitio – hasta un 70-80% -, y es imperativo que las optimices tanto como puedas. Ahora bien, en un sitio no optimizado, el navegador intentará cargar todo lo que se defina en este, sean imágenes, scripts, hojas de estilo, etc.; en el caso particular de las imágenes, la carga diferida consiste en cargar sólo las imágenes que ves en pantalla; conforme vayas desplazando la página, el navegador irá solicitando las imágenes cuando estas estén a punto de aparecer en pantalla.

¿Que ventajas nos da la carga diferida de imágenes?

Las ganancias son sustanciales, pues al no tener que descargar todos los recursos de golpe (vamos a centrarnos en imágenes de ahora en adelante), la cantidad de datos a descargar es menor, y por ende ves un resultado mas rápido en tu navegador. El servidor tampoco transmite más de lo que debe; ambas cosas se traducen en reducción de peticiones, algo que por lo general es muy penalizado por los medidores de desempeño como GTmetrix o similares, por lo que en sitios con una gran cantidad de imágenes es una de las primeras técnicas que deberías de usar.

Cómo funciona la carga diferida

Muestra una representación de un algoritmo de carga diferida

Como mencioné antes, imagina la base de tu monitor como un límite, al que llamaremos “fold” o “doblez“; lo que se muestra por arriba es lo que ves en pantalla, y ahora imagina que todo el resto de la página está por debajo; al ir moviendo la página y las imágenes se acercan al doblez el navegador calcula que ya está cerca de aparecer y la solicita sobre demanda al navegador. Sencillo, ¿no?

El origen del término 'above the fold'
El término “above the fold” o “sobre el doblez” o “por encima del doblez” viene de los tiempos de medios impresos, de los periódicos, donde al estar doblados por la mitad sólo se mostraba la parte superior de éste, y que aparte tenía que tener los elementos suficientes para llamar la atención del comprador.

Optimiza imágenes antes de activar la carga diferida

Una recomendación es que antes que actives la carga diferida de imágenes en tu sitio estés seguro que esas imágenes estén propiamente optimizadas; de nada sirve cargar de forma diferida una imagen de 1 MB que bien podría ser de 100 KB, pues sólo estarás teniendo una mejora marginal. Así que recuerda, a optimizar esas imágenes antes, ya sea que optimices manualmente tales imágenes o bien lo hagas con plugins especializados para optimizar imágenes. Cualquier método es mejor que nada.

¿Cómo activar la carga diferida en mi sitio con WordPress?

La forma más sencilla de hacerlo es a través de un plugin, y como te podrás imaginar, hay decenas de ellos. Voy a elegir varios plugins del repositorio de WordPress con el criterio de que tengan 5000 instalaciones o más, que funcionen con la última versión de WordPress (5.2.2 a la hora de escribir esto), y tenga 4 o más estrellas, y con éstos haré una comparativa. Los que se quedan en el review son: JetPack, BJ Lazy Load, Lazy Loading by WP Rocket, Lazy Loader, a3 Lazy Load, Autoptimize, Lazy Load Optimizer, SG Optimizer, WP Smush y por último Image optimization & Lazy Load by Optimole.

Resumen de características de plugins de carga diferida para WordPress

Muestra una tabla de las características más importantes de los plugins de carga diferida para WordPress

Estas son las características más importantes que pude extraer de los plugins de carga diferida para WordPress, vale la pena mencionar que es probable que alguna característica la haya pasado por alto en algún plugin pues por lo general no son muy explícitos en sus descripciones o en sus configuraciones.

Metodología de la prueba

Muy simple: instalación limpia de WordPress 5.2.2, una página creada con Gutenberg con varias imágenes y vídeos, tanto arriba como por debajo del borde inferior de la pantalla, para simular la carga. No hay plugins adicionales funcionando excepto Wordfence. Se mide con GTmetrix y se toman los resultados. El sitio tiene compresión GZip habilitada.

Resultados de la comparativa de plugins de carga de diferida

Los colores van de rojo (peor) a verde (mejor) pasando por amarillo (punto medio).

Los resultados de la comparativa de plugins de lazy loading me dejaron algo extrañado; por un lado BJ Lazy Loading creo que se lleva el primer lugar…pero tiene años sin actualizarse, y todo parece indicar que está abandonado (uno de los focos rojos para considerar un plugin como seguro); a3 Lazy Loading y Lazy Load by WP Rocket hacen un muy buen papel y ya a partir de ahí las cosas vienen cuesta abajo. Algunos son una decepción, como WP Smush (en su versión gratuita) y en particular Lazy Loader, del que había leído cosas buenas, pero que aún en mi paginita sencilla me generó errores 404 en varias imágenes. JetPack es un caso especial pues al menos en la práctica a mi me funciona muy bien (no tanto así en estas pruebas), pero su utilidad vendrá de la mano de que tantas cosas uses de JetPack; si instalas éste sólo para el lazy loading, pues como que no. Lo mismo aplica para los que no sólo contribuyen funcionalidad de carga diferida, es decir, SG Optimizer, Autoptimize y Optimole.

¿Que plugin de carga diferida deberías usar en tu WordPress?

Basándonos en los resultados, parece que la mejor apuesta es por a3 Lazy Load. Aún así, mi recomendación honesta es que no se queden con esta comparativa, es sintética y sólo la usé como una medida simple del desempeño de cada plugin, y muy difícilmente su caso de uso sea igual al mío. Les aconsejo que prueben en sus respectivos sitios y así podrán determinar si un plugin les sirve o no: por ejemplo, no estoy probando con un slider instalado, y es probable que de inicio un plugin de estos les de problemas con un slider. Como prueba, basta un botón: en este blog tengo la carga diferida delegada a JetPack, y va de maravilla, así que no se queden con los resultados que yo obtuve. Tendrán que hacer sus propias pruebas.

Bonus: carga diferida nativa en Chrome 76 (y soporte en WordPress)

Con Chrome 75 o superior, podrás usar el atributo loading="lazy" para que se delegue la carga diferida a Chrome: esto significa adiós librerías externas, código personalizado y algo de JavaScript. Eso si, aún no es estándar en todos los navegadores, pero muy seguramente lo será.

Cómo activar la carga diferida en Chrome 76 y superiores

Lleva a cabo los siguientes pasos para habilitar el soporte nativo de carga diferida:

Muestra como habilitar la carga diferida en Chrome 75 y superiores
  1. Ve a la barra de direcciones y abre chrome://flags
  2. En la caja de búsqueda introduce “lazy” (sin comillas)
  3. Verás que se filtra la vista y sólo aparecen dos experimentos, “Enable lazy image loading” y “Enable lazy frame loading“, estos sirven para carga diferida de imágenes e iframes, respectivamente
  4. Habilita ambos cambiando los valores de “Default” a “Enabled
  5. Reinicia Chrome (puedes hacerlo manualmente o presionando un botón que se ve abajo a la derecha que dice “Relaunch now
  6. ¡Experimenta! 😀

A manera de nota, fíjate bien y verás que hay dos valores para “Enabled“; el primero habilita la característica y el segundo “Enabled” la habilita aunque no uses loading='lazy' en tus imágenes.

De vuelta en el código, para implementar la carga diferida el parámetro loading utiliza tres posibles valores:

  • auto: comportamiento por default del navegador.
  • lazy: aplica carga diferida del recurso.
  • eager: aplica carga inmediata del recurso.

Compatibilidad con navegadores

Data on support for the loading-lazy-attr feature across the major browsers from caniuse.com

Vale la pena mencionar que la característica aún está siendo ajustada, en particular las distancias a las que responde la característica (la distancia por lo general se refiere a la distancia desde el límite inferior de tu pantalla hasta donde se encuentra la imagen que se va a cargar) y otros comportamientos, y muy pronto la veremos ya funcionando.

Aquellos que quieran ir más allá de la remojada de pies en el tema, les aconsejo el artículo de Google Web Fundamentals sobre carga diferida, tiene un montón de información de primer nivel.

Soporte de WordPress core para carga nativa en Chrome

Ya se está trabajando por la gente que está metida en el desarrollo del core de WordPress para que se incluya la compatibilidad de la carga nativa, y no dudo que lo veamos pronto en un futuro cercano.

Palabras finales

Así usen una o cien imágenes, les aconsejo activen la carga diferida en sus sitios con WordPress (y en general con cualquier herramienta/lenguaje/cosa que quieran). Es una manera rápida de ganar en desempeño, y lo verán reflejado al instante. Los invito a dejar sus comentarios, eso si – que sean constructivos. Si tienen algún plugin que deseen ver en este artículo, déjenlo en los comentarios y lo incluiré a la brevedad.

Deja un comentario

Do NOT follow this link or you will be banned from the site!

A %d blogueros les gusta esto: