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 publishHice 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' {} \; -printo todo junto en una sola línea.
make publish && find ./output/ -name "index.html" -exec sed -i 's/<img/<img loading="lazy"/g' {} \; -print
¡Y listo! Funciona perfectamente.