100% de pagespeed o cómo hacer una web rápida del copón. Hace ya algo más de un año, escribí una serie de artículos en el blog sobre cómo mejorar el pagespeed de una web WordPress y lo ejemplificaba aplicando todos esos trucos en este blog.

La serie quedó incompleta (a falta del último capítulo sobre CDNs), principalmente por dos motivos:

  1. No la leía ni el tato
  2. Es un tema manidísimo como para posicionarlo bien en Google

Estos suelen ser mis dos motivos por los que no escribo sobre temas de desarrollo en el blog y eso que mejorar el pagespeed de una web, no es nada demasiado técnico, pero bueno.

Todo lo que sé sobre pagespeed y WordPress

En mi serie sobre pagespeed, conseguí mejorar el ranking de esta web, desde un 76% a un 98%.

100% de pagespeed

Si quieres saber cómo lo hice aquí tienes mis trucos sobre pagespeed.

Aunque claro, un 98% no es un 100% de pagespeed. Un 98% es cagar a medias, mientras que un 100% es hacer una cagada limpia, de esas que sueltas un truño con una entrada en el agua perfecta y que el papel sale inmaculado.

¿Cómo crear una web profesional con 100% de pagespeed?

Vayamos al caso. Hace dos semanas y aprovechando que tengo que terminar la tesis del máster, me vino el picorsito y me puse a hacer una landing para el servicio de perito logopeda de Laura.

En realidad, lo que quería era probar a meter SSL gratis en una web, una cosa me llevo a la otra y acabé creando una web profesional desde 0 con un 100% de pagespeed.

El paso a paso para llegar al 100% de pagespeed es el siguiente

El stack de desarrollo

En primer lugar, utilicé Jekyll para generar la web. Jekyll es un framework para crear webs estáticas escrito en Ruby.

Crear la estructura de una web con Jekyll cuesta dos minutos, lo que tardas en instalarlo y ejecutar un par de comandos.

100% de pagespeed jekyll

El siguiente paso es buscar una plantilla molona para tu sitio web. En mi caso, puesto que esto es una web de peritajes, me busqué una plantilla simple y sobria.

Utilizando un hosting gratuito

Desde hace tiempo quiero mover todas mis webs a un hosting gratuito, principalmente porque estoy hasta los webos de los proveedores de hosting.

Por lo general, un hosting compartido es caro y muy poco flexible. Y no tengo ganas de meterme con un hosting dedicado o un servidor en Amazon o similar y echar horas para que las cosas funcionen.

Para estos casos, donde lo que quiero es publicar una web profesional, sencilla y gratis, la mejor opción es utilizar directamente Github.

Hace años ya expliqué cómo publicar un web en github-pages y el procedimiento todavía es válido.

Así que, llegados a este punto, tenemos una web profesional, que utiliza herramientas gratuitas y publicada en Internet.

Y partir de este momento el flujo es sencillo: haces modificaciones en local, commit, push y republicar en github-pages.

Eligiendo un dominio

Siguiente paso, publicar la web en un dominio. En mi caso, en lugar de acceder por alrocar.github.io quiero acceder por peritologopeda.com.

Sobre esto, lo mejor es ir a la documentación de Github e intentar seguirla (digo “intentar” porque está escrita como el culo).

Lo que yo hice para publicar mi web en Github Pages en un dominio propio:

  1. Fijar el nombre del dominio en los settings del repositorio en Github

    github pages dominio propio

  2. Si no me equivoco, esto te crea automáticamente un archivo CNAME en la raíz del repo, de no ser así crearlo tal que así
  3. Hacer un ping a vuestro dominio de github para averiguar la IP:

    configurar dominio github

  4. Por último, ir a vuestro proveedor de dominio y añadir un registro A con la IP y un registro CNAME con el nombre de dominio de Github:

    configurar dominio github

Con esta configuración, ya deberíamos poder acceder a nuestra web desde nuestro nombre de dominio.

Hay que tener en cuenta que los cambios en la configuración de DNS suelen tardar en propagarse, así que en caso de que no funcione hay que esperar (normalmente tu proveedor te avisa cuando está todo OK).

Por cierto, el pantallazo que he puesto es de OVH, aunque últimamente estoy comprando los dominios en GoDaddy a 0.99€ el primer año. Con lo que hasta ahora esa es la inversión total en la web.

El motivo de utilizar un dominio propio, lo explico a continuación.

La madre del 100% de pagespeed: Cloudflare

Ahora viene la clave para conseguir el 100% de pagespeed y es lo que me quedó pendiente en mi serie de artículos: utilizar una CDN.

En este caso, Cloudflare, ofrece una serie de servicios gratuitos como son:

  1. SSL gratis y redirección https automática
  2. Minimizado y caché de archivos
  3. Protección básica contra ataques

Obviamente no estoy descubriendo nada nuevo, sino que simplemente seguí esta guía para configurar Cloudflare, SSL y demás historias.

A continuación un resumen de cómo configurar Cloudflare para SSL gratis y demás:

  1. Lo primero es crear una cuenta gratis y meter tu nombre de dominio para que se auto-configure:

    configurar cloudflare

  2. Lo segundo es ir a tu proveedor de dominio y cambiar los servidores DNS por los de Cloudflare:

    configurar cloudflare

    Este cambio, por lo general, puede tardar hasta 24 horas en aplicarse, así que paciencia.

Una vez configurado, sólo hay que activar unas cuantas opciones FREE en Cloudflare

SSL gratis con Cloudflare

SSL gratis es, en realidad, lo que buscaba desde un principio. Con Cloudflare es tan fácil como ir a la pestaña Crypto y activar SSL Full y Automatic HTTPS rewrites:

ssl gratis cloudflare

https gratis cloudflare

Y ojo, porque esta es la gracia de utilizar Github Pages y es que como Github utiliza un certificado SSL, podemos activar el SSL gratis en Cloudflare.

Si alojamos nuestra web en un proveedor de hosting, normalmente esta opción no es posible de manera gratuita.

100% de pagespeed con Cloudflare

Llegados a este punto si vamos a GTmetrix o Pagespeed Insights, veremos que nuestra web a pesar de ser muy sencilla, está lejos de llegar al 100% de pagespeed.

Con Cloudflare podemos activar un par de cosas que nos ayudan a llegar al 100% de pagespeed:

  1. Minimizar archivos CSS, HTML y JS, un clásico para optimizar la velocidad de una web se hace con un clic en Cloudflare:

    minimizar html cloudflare

  2. Activar al cache del navegador, otro par de clics:

    browser cache cloudflare

    browser cache

No llego al 100% de pagespeed WTF!!

Llegados a este punto, hay que ir tirando de lo que te diga GTmetrix o Pagespeed insights. En mi caso, me fallaban dos cosas:

  1. Comprimir las imágenes. En WordPress es fácil, instalas un plugin y listo. En una web estática te buscas la vida
  2. Otro problema clásico es el del CSS que bloquea la carga de la página. Para ello, usé esta web, que te da el mínimo CSS que necesita tu web para cargarse. Aunque seguro que hay maneras más elegantes de hacerlo

Una vez realizadas dichas modificaciones, ya lo tenemos:

100% de pagespeed gtmetrix

100% de pagespeed insights desktop

100% de pagespeed insights mobile

El 99% que aparece es en YSlow, que es un servicio que comprueba las cookies de Cloudflare y te la lía.

Pero por lo demás, 100% de pagespeed en GTmetrix y Pagespeed Insights de Google. Con un tiempo de carga de 0.8 segundos: Objetivo cumplido

Sigo sin llegar al 100% de pagespeed, timador!!

Cada web es un mundo y aunque no hay que ser una lumbrera para llegar al 100% de pagespeed, hay que entender dónde está el problema y cómo solucionarlo.

Para el que quiera llegar al 100% le propongo dos cosas:

  1. Aquí está la web que va como un tiro. De gratis. De regalo
  2. Pregúntame cómo hacerlo

Conclusiones de todo esto

No hay que olvidar que el pagespeed mide que en una web se estén aplicando una serie de buenas prácticas que se sabe que correlacionan con la velocidad de carga de una web, pero no la aseguran al 100%.

Así que, yo recomiendo hacer caso a lo que te diga GTmetrix o Pagespeed Insights, pero tampoco obsesionarse, ya que por ejemplo, es más importante que el tiempo de carga sea bajo que conseguir un 100% de pagespeed.

Por otra parte, la web que he utilizado para llegar al 100% de pagespeed, se puede considerar una web sintética, muy sencilla. Las cosas se complican cuando la web es más compleja o cuando se utiliza otro stack, como por ejemplo WordPress.

Después de lo aprendido, sí que veo útil utilizar herramientas que faciliten la configuración de servicios de hosting gratuito como Github pages, o contar con la posibilidad de utilizar una CDN como Cloudflare y poder contar un un certificado SSL gratuito.

Cualquier duda en los comentarios 🙂