Mejorando el blog

Tras casi dos años manteniendo este blog, he estado revisando la estructura del mismo y revisando los resultados que obtenia con la herramienta de Pagespeed Insights de Google. Tras ver las recomendaciones he optado por realizar un par de modificaciones.

En primer lugar explicar que este blog se basa en una herramienta llamada Hugo que permite crear páginas webs de contenido estático a través de documentos escritos con Markdown, si queréis más información al respecto sobre como es la estructura del blog os dejo una de las primeras entradas escritas en el donde hablo de esta herramienta (https://blog.alefnode.com/blog/creando-una-web-con-hugo/)

Algunos de los cambios recomendados por Google son carga asincrona de archivos JS y CSS por lo que para ello en cuando a los javascript los hemos situado en el final de la web justo antes de la etiqueta y la parte de los CSS hemos cambiado la carga para escribirlos de la siguiente forma:

1
2

<link rel="stylesheet" href="{{ "css/style.css" | absURL }}" media="none" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="{{ "css/style.css" | absURL }}"></noscript>

Por otro lado también se recomienda utilizar formatos en los ficheros de imagen que sean de nueva generación esto significa por ejemplo utilizar los formatos webp en lugar de png o jpg. Para solventar esto lo primero que tenemos que hacer es modificar nuestro nginx (o el servidor web que se utilice) y lo hemos hecho utilizando esta configuración:

En nuestro fichero /etc/nginx/nginx.conf

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

location /images/ {
            autoindex on;
            add_header X-Robots-Tag "noindex, nofollow";
            location ~* \.(jpg|jpeg|png)$ {
              expires 365d;
              add_header Vary "Accept-Encoding";
              add_header Cache-Control "public, no-transform";
              try_files $uri$webp_extension $uri =404;
            }
        }
        location ~* \.(jpg|jpeg|png|webp|gif|ico|css|js)$ {
            expires 365d;
        }

Y añadimos un fichero en /etc/nginx/conf.d/webp.conf

1
2
3
4

map $http_accept $webp_extension {
    default "";
    "~*webp" ".webp";
}

Y por ultimo debemos añadir los ficheros webp y para ello podemos utilizar el comando:

1

for i in $(find . -type f -name "*.jpg" -or -name "*.jpeg" -or -name "*.png"); do cwebp -q 75 -alpha_q 10 $i -o $i.webp; done

Con estes pequeños pasos hemos consiguido mejorar la carga de esta web a tal punto que las puntuaciones actuales para este blog son bastante buenas, aqui os dejo unas imagenes con los resultados.

Versión móvil

Version PC