Optimiza la carga de imágenes con Flying Images

Tienes WordPress y un tema bien optimizado, liviano, ágil y moderno. Pero todas esas bellas imágenes, tanto destacadas como de fondo, están retrasando la carga de tu sitio. Es lógico: una foto de un tamaño promedio no pesa menos de 70KB (en un banner, en un post, o de fondo), y eso si está bien optimizada. Es decir que a tu contenido de texto en una sección cualquiera de tu sitio le añadimos tres imágenes y resulta que el 80% de la información que debe descargarse de un servidor es… ¡fotográfica!

¿Cómo podemos acelerar esta descarga, priorizando el texto que el usuario pretende leer, y dejando la bajada de bitmaps (JPG, PNG, BMP, GIF) para el final? ¡Pues usando Flying Images!

¿Qué es Flying Images?

Optimiza la carga de imágenes con Flying Images 1

Flying Images es un excelente plugin o componente de WordPress que acelera la presentación de tu sitio en cualquier pantalla gracias a un proceso alternativo en la descarga de fotos e imágenes. La clave de su éxito se basa —aunque no exclusivamente— en retrasar la bajada de imágenes apelando a una mecánica que se denomina Lazy Image Load (en inglés, «descarga perezosa de imágenes»). De «perezoso» no tiene nada; en esta dinámica se prioriza la carga de la estructura y los textos de un sitio, dejando para el final la bajada de la fotografía e ilustraciones. Es una práctica creciente, y, para que te des una idea, los navegadores Chrome y Firefox ya ofrecen procesos para practicar Lazy Loading de manera natal (aunque NO están activados por defecto). Esta mención cobrará importancia más adelante, y ya verás cómo.

¿Cómo funciona Flying Images?

Flying Images modifica el código HTML de tu sitio reemplazando las llamadas a las imágenes por una codificación levemente variada. A continuación, un ejemplo de un llamado típico a una imagen, y cómo este plugin opera sobre la misma:

Optimiza la carga de imágenes con Flying Images 2

Como vemos, Flying Images añade ‘data-‘ al comando que señala la dirección de una imagen (‘src’, es decir source, origen). Por ende, un explorador cualquiera pasará por alto —en un primer momento— la carga de la imagen (porque no reconoce el modo «correcto» de solicitar la imagen al servidor).

Este es el primer paso de su funcionamiento, y como resultado obtendremos una puesta donde veremos primeramente todas las columnas con sus textos, y la estructura final de diseño del sitio, pero sin las imagénes.

Por supuesto, esta puesta enseguida recibirá las imágenes en el segundo paso (y fnal), gracias a una secuencia de JavaScript: un pequeño código JS —parte del motor de Flying Imagesverifica que las imágenes faltantes se encuentran dentro del área visible en el display del usuario, invirtiendo el correspondiente código «data-scr» por el «scr» usual. Así, se dispara entonces la bajada de las imágenes para su correcta presentación.

Dos ventajas ENORMES de usar Flying Images (y no otro plugin similar)

Primero, que si una foto o imagen no está en la pantalla (es decir, dentro del espacio real y físico de lo que un usuario está viendo en su celular o monitor) dicha imagen no se descarga. Las imágenes se descargan en tiempo real, en el momento en que un usuario escrolea para continuar la lectura. ¿Por qué es algo muy bueno? Porque si el usuario encontró el contenido que buscaba en una primera porción de la entrada o página (incluyendo los casos donde sigue un link relacionado hacia otro lado de nuestro sitio sin llegar al final de la puesta), las imágenes que nunca llegó a ver no fueron descargadas en vano a su dispositivo. Este contexto contrasta muchísimo con su alternativa común (sin Lazy Load): el usuario normalmente debería haber tenido que esperar a que el contenido completo se descargue para poder leer aquella porción que le interesaba.

Optimiza la carga de imágenes con Flying Images 3

La segunda gran ventaja de Flying Images es que, antes de inyectar el JavaScript del segundo paso mencionado, busca la existencia de la herramienta natal de Lazy Load en nuestro propio navegador. Esto acelera y optimiza el proceso de descarga (evitando código adicional en nuestro sitio). Como les comentábamos más atrás en la nota, tanto el navegador Chrome como Firefox ya cuentan con la posibilidad de realizar descarga diferida o Lazy Loading de las imágenes (desactivado por defecto). Entonces, Flying Images «invoca» a este componente natal, es decir, «de fábrica» en nuestro navegador, para aprovecharlo en conjunto con su operación (aliviando aún mas la velocidad de toda la operación).

En síntesis, Flying Images no necesitará de su propio JavaScript, trascendiendo en sitios más rápidos dado que la operación de descarga final de las imágenes se realizará de manera natal en el motor mismo de tu explorador. ¡Bravo!

Nota adicional: la decisión de descargar de manera diferida todas las imagénes o bien sólo aquellas que se encuentran en el marco exacto del display de tu celular o monitor es tuya. En breve lo veremos.

Detalles técnicos

¿Por qué Flying Images es diferente a todo el resto de los otros plugins que instauran la mecánica de Lazy Load en mi sitio?

  • Porque en el contexto de los navegadores nuevos, aprovechará el código de fábrica de tu explorador; sólo descargará código adicional JavaScript en los casos donde el navegador no soporte esta función.
  • Puedes decidir descargar las imágenes de tu sitio ANTES de que el usuario escrolee para visualizarlas (el resto de los plugins similares sólo descargan las imágenes cuando el usuario debe verlas en pantalla, lo que para muchos admins es un retraso indeseado, sobre todo con imágenes grandes).
  • El tamaño de su JavaScript es de apenas 0.5KB, gzipped (comprimido) y minificado (optimizado).
  • Opcionalmente puedes configurarlo para que solamente funcione cuando el navegador que emplea tu visita disponga de Lazy Load de manera natal (es decir que no habrá ningún código JavaScript adicional nunca).
  • Rescribe todo el código HTML de tu sitio una vez renderizado, buscando y cambiando las llamadas ‘scr’ existentes por ‘data-scr’ (gracias a que espera el proceso total del HTML, no se le escapa ninguna llamada a imágenes proveniente de otro plugin o componente).
  • Inserta un marcador transparente en las imágenes para que su carga diferida no produzca «parpadeos» (efecto de rediseño en pantalla que provoca la inserción tardía de las imágenes).
  • Flying Images no genera conflictos con versiones antiguas de Internet Explorer y/o contextos donde el uso de JavaScript se encuentre desactivado (en esos casos, las imágenes cargarán normalmente empleando la etiqueta «noscript«).

Instalando Flying Images en mi sitio

La instalación es igual que con cualquier otro plugin. Repasemos:

Optimiza la carga de imágenes con Flying Images 4

Instalado y activado el nuevo plugin, podemos echar un vistazo a su panel de configuración.

Configurando Flying Images en mi sitio

Optimiza la carga de imágenes con Flying Images 5

En Ajustes > Flying Images contemplaremos la pantalla de la captura superior.

Lazy Load Method estará activado por defecto; si no lo está, actívalo.

Una opción interesante tiene lugar en «Bottom Margin». En la captura y por defecto se establece en 500px, y te vamos a explicar qué es.

Bottom Margin

En este análisis ya te comentamos que Flying Images permite al administrador del sitio elegir el modo en que se cargarán las imágenes de descarga diferida. Recordemos: las imágenes pueden cargarse todas y cada una de ellas al finalizar la descarga de todo el resto del contenido, o bien cargarse en tiempo real en la medida en que el usuario hace scroll en la página que se encuentra visualizando (es decir, sólo se descargan las fotos e imágenes DENTRO de la región física real que se visualiza en la pantalla de turno, sea móvil o escritorio).

Bottom Margin, o Margen Inferior, es la región donde podemos configurar la distancia vertical (medida en píxeles) a partir de la cual se dejan de descargar las fotos. Creemos que el siguiente esquema te lo ejemplificará muy bien:

Optimiza la carga de imágenes con Flying Images 6

Como vemos en el esquema, esa distancia a partir de la cual deseo que Flying Images suspenda la descarga de imágenes se denomina «Bottom Margin».

Como 500px es una distancia recomendada, podemos dejarlo como está. Ingresar cero significará que ninguna imagen por fuera de nuestro campo de visión en el display se cargará de antemano, mientras que seleccionar una medida mayor (el selector permite hasta 3000px) significará que Flying Images descargará imágenes que aún no estamos viendo hasta una distancia de 3000 píxeles hacia abajo.

Con esto ya podemos decir que hemos optimizado con excelencia la descarga de todo material fotográfico de nuestro sitio. Es un buen momento para tomarnos un café y mirar el atardecer por la ventana.

Antes, una última observación: la solapa «Compression» posee un ajuste tildado por defecto, y es la optimización de imágenes que, a partir de ahora, subas a tu sitio. En otras palabras, si dejas esta opción tildada, Flying Images reemplazará los JPGs y PNGs que subas a tu sitio (a partir del momento de su intalación) por copias comprimidas de las mismas. NO te recomendamos emplear esta herramienta adicional con que cuenta este plugin (sobre todo si ya posees un plugin que se especialice en ello).

Si nada de esto último te suena, te recomendamos leer nuestro análisis sobre plugins de optimización de imágenes, en donde hemos preparado una comparativa de los componentes más usados.

Gracias por leer, y hasta nuestra próxima nota.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *