Lazy Load rudimentario para sitios que utilizan Pelican

close up photography of colored pencils

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
Al desplazarme se puede ver el momento en que se cargan las imágenes.

¡Y listo! Funciona perfectamente.

Acelerar tu sitio web vs Google adsense, no se puede todo en la vida

Las nuevas reglas del SEO según Google dicen que tu sitio web debe de ser rápido, pero al incluir anuncios de adsense el rendimiento cae.

La exigencia más reciente es que tu sitio web debe ser rápido, entre más rápido mejor estarás posicionado en el buscador y por lo tanto tendrás más visitas. Okey vamos a optimizarlo.

He pasado más de un mes intentando extraer hasta el último byte extra de rendimiento en mis sitios web pero hay algo que simplemente echa a perder todo el trabajo y me refiero a los anuncios de adsense.

No es que gane mucho dinero, pero es lo que paga el hosting y los dominios. Durante años este sitio se ha mantenido autosustentable, es decir, no me cuesta escribir en él, a mi me sirve para hacer muchos experimentos y después de tantos años pues ya le tengo cariño.

Pero cada año se vuelve más difícil darle de comer al gigante que siendo honestos, pues es el que trae más visitas a este sitio.

Core Web Vitals o en español La experiencia de usuario

Existe una herramienta oficial para medir el desempeño de tu sitio web, me refiero al Google Lighthouse. Ahí podrás ver que tan bien (o mal) se comporta y hará las recomendaciones pertinentes.

Performance ¿Por qué estás tan triste?

Existen en Internet muchos recursos con información sobre cómo optimizar tu página web.

Recomendaciones para mejorar el rendimiento.

Va a depender mucho de que herramientas utilices. En mi caso, uso WordPress y me ayudo mucho del plugin LiteSpeed Cache.

Lo más básico es Optimizar las imágenes. Una imagen pequeña se carga rápido, así de simple.

En WordPress uso el plugin EWWW Image Optimizer

Tengo otro sitio en el que uso Pelican como generador de contenido, en este caso convertí todas las imágenes a WebP con un script en Python que yo mismo programé [véase Convertir archivos JPG a WebP con Python]

Ayuda mucho un buen plugin de caché para wordpress. Hay varios disponibles, como el famoso W3 Total Cache o el WP Super Cache.

Estos programas le quitan carga a su servidor al generar contenido estático optimizado.

En el sitio que utilizo Pelican no es tan necesario, porque prácticamente todo su contenido es estático.

Al final puedo obtener excelentes resultados, pero no importa lo que haga, en el momento que pongo anuncios de adsense el rendimiento se hunde como el Titanic.

Adsense no me hagas eso !!!

¿Limitar los anuncios?

Es lo lógico, si el problema son los anuncios, entonces lo lógico sería limitar el número de estos ¿Suena bien no?¡Pues no es cierto! ya verán.

Hace tiempo que adsense liberó los Anuncios Automáticos en el que agregas un código especial y este toma la decisión de cuales anuncios aparecen y en donde.

Si ven una página web saturada de anuncios probablemente es por que esta usando anuncios automáticos.

La solución sería volver al método antiguo. Copiar el código de adsense de cada anuncio dónde quieres que aparezca y claro, al haber menos anuncios el rendimiento mejora pero hay un problema. Los ingresos se desploman.

¡Simplemente no se puede ganar! O tienes un sitio rápido sin anuncios o uno lento con anuncios.

¿Entonces que se puede hacer?

Pues no mucho, de nuestra parte. Adsense podría mejorar su algoritmo para evitar añadir demasiada carga a los sitios web o que le exigiera algo de optimización a los anunciantes.

Me ha tocado ver imágenes enormes en los anuncios que bien pudieron aligerar con anterioridad, pero ese no es problema del anunciante, porque ellos no quieren mejorar su posición en el buscador, sólo quieren que aparezca su anuncio.

Inestabilidad es el nombre del juego.

Actualmente creo que le dedico más tiempo al SEO que a escribir.

Cada cierto tiempo aparecen actualizaciones al algoritmo del buscador de Google o WordPress con sus actualizaciones automáticas que modifican los resultados, es un sistema inestable que se modifica continuamente.

Lo que queda es revisar cada cierto tiempo si hay caídas bruscas en el performance o en los ingresos, pero a veces los cambios son tan variables que no se puede estar seguro si una modificación tendrá un impacto positivo.

¿Ustedes que opinan mis 4 lectores? ¿Ven alguna solución a este dilema?

Páginas de error 404 personalizadas en Pelican

Cuando comencé mi aventura con el generador de contenido estático Pelican cometí muchas equivocaciones, por eso al principio me aparecian muchos errores 404 de páginas o recursos no encontrados.

Al principio, el servidor web me mostraba una página de error genérica, pero lo mejor es ofrecer una página personalizada que ofrezca algún tipo de ayuda.

En mi caso, puse un enlace al archivo general donde están enlazados todos los artículos del sitio y un cuadro de búsqueda.

Pero vámonos por pasos.

Crear la página personalizada

En la carpeta content / pages de mi proyecto hice un archivo con el nombre 404.md con un contenido muy similar a este:

Title: Archivo no encontrado
Status: hidden
Save_as: 404.html

El artículo solicitado no pudo ser localizado.

Tal vez quiera revisar el [Archivo general](https://centaurodelnorte.com/archivo.html).

Noten los encabezados, son importantes.

Informar al servidor web

Ahora hay que informarle al servidor web que existe una página personalizada para mostrar cuando existan estos errores.

Si estan usando un servidor web Apache o similar (en mi caso uso el servidor LiteSpeed ). Para eso hay que modificar el archivo .htaccess (o crearlo si no existe) y agregar esto:

# Error 404
ErrorDocument 404 /404.html

Con eso será suficiente.

Un tip adicional

Esto lo descubrí un poco a la mala. El archivo .htaccess no se genera automáticamente en Pelican a menos que así lo configuren.

Para eso, hice un archivo llamado htaccess.txt en la carpeta content / assets con todas las modificaciones que le he hecho a mi archivo .htaccess (incluyendo la anterior).

En el archivo de configuración de Pelican me encontré con el diccionario EXTRA_PATH_METADATA y agregué el archivo htaccess.txt como se muestra a continuación.

EXTRA_PATH_METADATA = {
    'assets/robots.txt': {'path': 'robots.txt'},
    'assets/favicon.ico': {'path': 'favicon.ico'},
    'assets/htaccess.txt': {'path': '.htaccess'},
}

De esa forma toma el contenido del archivo htaccess.txt y lo copia correctamente como un archivo .htaccess en la carpeta output del proyecto.

Y lo seguirá haciendo cada vez que genere el contenido estático de mi sitio.

¿Le han dado un vistazo a Pelican? en estos días de tanta amenaza informática vale la pena considerar este tipo de herramientas.

¡Hasta la próxima!.