Tabla de contenido
¿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
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?
Orígen del término “Above the fold” o “sobre el doblez”
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
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:
- Ve a la barra de direcciones y abre
chrome://flags - En la caja de búsqueda introduce “
lazy” (sin comillas) - 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
- Habilita ambos cambiando los valores de “Default” a “Enabled“
- Reinicia Chrome (puedes hacerlo manualmente o presionando un botón que se ve abajo a la derecha que dice “Relaunch now“
- ¡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
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.
Orlando es un ingeniero en sistemas de 45 años de edad, apasionado del desarrollo de software y con un cariño especial por WordPress. Le encantan los libros, la música, la fotografía, los cómics y es un AFOL. De último pero no menos, esposo y padre de dos trolls.
Hola, estoy comenzando con esto de las webs, y me han dicho que debo optimizar las imágenes y vídeos con carga diferida, la cuestión es que encontré un script pequeño para la carga diferida en vídeos, me dicen que evite los plugins para mayor rendimiento y con el script que encontré en este sitio (link omitido) el tutorial solo informa que pege el codigo en la plantilla, mi pregunta es ¿Que pasa si pongo mal el script? no se nada de esto o me recomiendan optar por un plugin. Gracias
Claufer,
Yo no pondría un código así sólo porque si. Mi primera recomendación es un plugin; JetPack, a3 Lazy Load, ShortPixel y una tonelada más tienen soporte de lazy loading, yo intentaría con uno de esos. Recuerda que esto es hacer pruebas con uno y otro y medir, hasta encontrar el resultado que quieras.
Saludos.