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?

Ajustando WordPress para obtener el candadito verde

Tenía pendiente escribir este artículo, durante el mes de noviembre hice el cambio de compañía de hosting. Algo que puede parecer atemorizante para cualquier mortal. Pero creo que ya era necesario. El cambio fue de Hostgator a BANA Hosting y después de un mes puedo decir que me alegro de haber tomado esa decisión.

Las razones para hacer mis maletas e irme a otro lados son varias:

Claro que el costo es una de ellas, no voy a poner cifras aquí porque pueden cambiar con el tiempo. Pero creo que en un mercado tan competido, llega un momento en que volteas a ver a otro lado y te das cuenta de que otras compañías ofrecen más opciones a un mejor precio.

Otra de las razones es el soporte técnico en español. Eso me ayudó mucho en la transición al nuevo hosting. Básicamente ellos hicieron el trabajo pesado y yo me encargaba de supervisarlos. Creo que ya me soñaban. Mudar todos los archivos me hubiera significado un gran esfuerzo y mucho tiempo.

Pero la razón principal para el cambio de hosting es que quería tener un dominio con HTTPS , ya me habían dicho que contar con una conexión segura mejoraba tu SEO, pero hacerlo en Hostgator no era barato.

Instalar un certificado SSL implicaba un costo adicional que no estaba dispuesto a pagar. Con la llegada de Let’s Encrypt y su oferta como autoridad certificadora gratuita simplemente no justificaba el pago de un certificado.

Hostgator ofreciendo el servicio de SSL.

Pero pongamos manos a la obra. Después de hacer el cambio de hosting me di cuenta que la tarea de asegurar mis sitios web con WordPress no era un paseo por el campo. Tuve que hacer muchos ajustes aquí y allá para lograr el famoso candadito verde.

Les aclaro a mis 4 lectores, que las indicaciones aquí mostradas son para BANA Hosting, pero supongo que se pueden aplicar a otras compañías de hosting. Ahora sí, ¡Comenzamos!

Activar Let’s Encrypt en los dominios.

Lo primero es activar los certificados SSL para nuestros dominios. BANA utiliza cPanel, una herramienta muy utilizada por las empresas de hosting para la administración de servidores.

En el apartado de Seguridad podemos ver el ícono de Let’s Encrypt.

Let’s Encrypt en cPanel

Ahí vamos a agregar un Issue , en mi caso agregué el dominio linuxmanr4.com. Me marcó unos errores, pero parece que estos certificados no se pueden usar en otra cosa que no sean páginas web.

Certificado listo e instalado.

Una de las características importantes de los certificados de Let’s Encrypt es que se tienen que renovar cada 90 días. Este proceso es automático, así que no hay mucho de que preocuparse (pero hay que estar al pendiente).

Modificar las opciones generales de wordpress.

A estas alturas si abro mi dominio de mi página web con https debe de funcionar, pero es probable que no aparezca el candadito verde.  Ahora hay que indicarle a WordPress nuestro nuevo URL.

Para eso hay que ir a Ajustes Generales de nuestra instalación de WordPress y cambiar la Dirección de WordPress y la Dirección del sitio ahora con https tal y como lo muestra la siguiente imagen.

Ajustes generales de wordpress.

Guardamos y aplicamos los cambios. Eso es todo en este apartado.

Quitar plugins de caché y de optimizaciones.

Este paso es OPCIONAL, pero en el caso de BANA lo considero recomendable. Lo que pasa es que BANA utiliza como servidor web a LiteSpeed un software compatible con Apache,  pero con sus sutiles diferencias.

En sí esto no sería suficiente para quitar los plugins de optimizaciones como los de caché, combinadores de CSS, “minificadores” de código u optimizadores de javascript. Lo que pasa es que existe un plugin que se llama Litespeed Cache que sólo funciona si se tiene instalado LiteSpeed Webserver.

Configuración de LiteSpeed cache.

Anteriormente usaba WP Fastest Cache , junto con otros plugins de WordPress para mejorar el desempeño de mis sitios. Pero LiteSpeed Cache cumple con  todas estas funciones y algunas adicionales, así que no tiene caso tener dos plugins que hacen lo mismo.

Instalar LiteSpeed Cache.

Este paso esta condicionado a que tu servidor web sea LiteSpeed, pero como mencionaba en el paso anterior desaprovecharía una gran oportunidad al no instalarlo.

Este paso me llevó algo de tiempo, tardé un poco en encontrar una configuración que me funcionara. Lo que hice es que iba activando funciones y observaba el comportamiento.

Lamentablemente, este plugin no tiene la opción de Exportar|Importar  su configuración, algo que me hubiera ahorrado algo de tiempo al replicarla en otros sitios.

Probablemente escriba otro artículo compartiendo con imágenes la configuración de este plugin, igual le puede servir a otros como base.

Instalar Really Simple SSL y Better Search Replace

Cada vez nos acercamos más para conseguir el famoso candadito verde. Recomiendo mucho instalar el plugin Really Simple SSL. En verdad es muy simple, solo hay que instalarlo, activarlo y se encarga de hacer su magia.

Better Search Replace nos ayudará a buscar algunos patrones en las bases de datos para reemplazarlos por otro. Por ejemplo, cambiar todos los http:// por https:// , pero hágalo con cuidado. Este plugin manipula directamente la base de datos. Si no tiene idea de lo que hace ni se meta, mucho menos sin un respaldo.

Yo lo use para ajustar algunos enlaces y nada más. Claro que ahorra mucho tiempo, pero si se usa de forma incorrecta también puede causar mucho daño. Se recomienda precaución en su uso.

Modificar el archivo .htaccess

El siguiente paso recomendado es modificar el archivo .htaccess. Esto se hace para redireccionar automáticamente todo el tráfico http a https. Muchos enlaces hacia mi blog empezarán con un http, bueno pues este ajuste se encarga de mandarlos a la nueva versión segura y mejorada.

Para editar el archivo utilicé el Administrador de archivos del cPanel, pero para que aparezca el archivo en cuestión, primero hay que hacer clic en el botón de Configuración (en la esquina superior derecha) y activar la opción que dice Mostrar archivos ocultos (dotfiles).

Preferencias del administrador de archivos.

Con esto podemos ver el archivo en el directorio donde esta alojado nuestro sitio web y agregamos lo siguiente al principio del archivo:

# Redireccionamiento de HTTP a HTTPS
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Editando el archivo .htaccess

Y eso es todo en este apartado.

Informarle a Google de los cambios.

A estas alturas del partido ya debe de aparecer un candadito verde en nuestro sitio. Si no lo hace, por favor borren el caché del navegador.

¡Ya soy un sitio seguro!

Solo entonces le avisaremos a Google de los cambios recientes. Para eso hay que ir a la Google Search Console y agregar la versión de nuestro sitio que comienza con https.

No es necesario eliminar la versión anterior.  En los primeros días hice varios ajustes siguiendo las recomendaciones de Google. Por ejemplo, subí nuevamente mi sitemap, corregí algunos errores, todo esto es normal, pero hay que estar atento.

Espero que este artículo les sirva de algo y les ahorre un poco de tiempo.

Enlaces que me ayudaron.

Imagen destacada de Micah Williams de Unsplash.