close up photography of colored pencils

Lazy Load rudimentario para sitios que utilizan Pelican

Si son lectores frecuentes de este espacio sabrán que tengo un sitio web desarrollado con Pelican.

En afán de optimizar lo más posible el sitio decidí implementar un lazy load o carga diferida en las imágenes del sitio peeeeeroooo …

Pues no es tan sencillo como uno esperaba. Verán, el proceso es muy similar a programar.

Uno escribe los artículos, ajusta el CSS y el refina el código que le da estructura a las páginas. Al “compilar” el resultado son todas las páginas HTML del sitio, no se requieren bases de datos y si juega uno bien sus cartas el resultado es bastante bueno y rápido.

Lazy Load a nivel navegador

El Lazy Load o carga diferida es un concepto muy simple. No cargues las imágenes que no estas viendo. De esa forma si el usuario no se desplaza por la página las imágenes no son cargadas y esta lista para interactuar con el usuario más rápido.

Ahora bien, hay varias formas de hacer esto, algunas usan javascript pero lo descarté ya que no le quiero agregar más programación a la página que la necesaria (Ya tiene suficiente con los scripts de Analytics y Adsense).

Lo más sencillo es agregar una instrucción a la etiqueta HTML que se encarga de mostrar las imágenes. Más o menos de la siguiente forma.

<img loading="lazy" src=“imagen.jpg” …

Si el navegador no soporta esta instrucción, pues no pasa nada, pero la mayoría de los navegadores modernos si lo hace.

¿Y como implemento algo similar en Pelican? pues si alguien lo sabe se los agradecería. Busqué en los plugins de Pelican pero no encontré uno que hiciera algo similar.

Buscar y reemplazar

Así que por lo pronto hice lo que me pareció más sencillo y a veces lo más sencillo es lo mejor.

Después de generar mi sitio web con la instrucción:

make publish

Hice una búsqueda con el comando find de todos los archivos index.html de la carpeta output de mi proyecto.

find ./output/ -name "index.html" -exec sed -i 's/<img/<img loading="lazy"/g' {} \; -print

o todo junto en una sola línea.

make publish && find ./output/ -name "index.html" -exec sed -i 's/<img/<img loading="lazy"/g' {} \; -print
Lazy Load funcionando.
Al desplazarme se puede ver el momento en que se cargan las imágenes.

¡Y listo! Funciona perfectamente.

¡Me encantaría saber que opinas!

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: