Una parada en el camino

Por David Romero

Cloudflare y su servicio gratuito parar mejorar la disponibilidad de tu web

2020-10-16 4 min read Recursos David Romero

Desde que comencé el blog he sido transparente en lo que respecta a la parte técnica del mismo, y de hecho tenéis la sección Cómo se hace totalmente actualizada.

Esta semana he dado de alta el dominio en el servicio gratuito de Cloudflare para mejorar la disponibilidad de la web. ¿Quieres saber en qué consiste, cómo lo he hecho y qué cambios he observado? Sigue leyendo.

Cloudflare es una empresa estadounidense que ofrece varios servicios en internet. Entre ellos, dos de forma gratuita, que son el CDN y la mitigación de ataques DDoS. Un CDN es una red de entrega de contenido. Simplificando, son varios servidores repartidos geográficamente de forma estratégica que almacenan tu sitio web, por lo que se mejora la rapidez (cuando hay un acceso, se le deriva al servidor más cercano) y la disponibilidad (es menos probable que el sitio deje de estar online si está replicado en varios servidores). Un ataque DDoS, simplificando también, se produce cuando varios dispositivos (muchos) realizan múltiples peticiones a un servidor o red concreta, con el objetivo de saturarlo y que deje de estar disponible.

Antes de activar el servicio, voy a realizar algunas pruebas de rendimiento previo, para poder comprobar si mejora posteriormente. Es importante recalcar que, dependiendo del estado de la red y otros factores, las pruebas pueden variar continuamente, así que solamente serán una estimación.

La primera prueba la realizaré con el servicio PageSpeed Insights de Google. El resultado es una puntuación de 88/100 en el rendimiento de la web en un ordenador y una puntuación de 64/100 en un móvil. Puedes acceder a los detalles de estos análisis en los siguientes enlaces:

La segunda prueba la realizaré usando el servicio Pingdom Website Speed Test, que nos permite calcular el tiempo de carga del blog desde distintas ciudades del mundo. Tienes un resumen de los resultados en la siguiente tabla:

Región Rendimiento Tiempo de carga Detalle
Asia - Japón - Tokyo 86 4.53s link
Europa - Alemania - Frankfurt 86 328ms link
Europa - Reino Unido - Londres 86 547ms link
América del Norte - EE.UU. - Washington D.C 86 458ms link
América del Norte - EE.UU. - San Francisco 86 548ms link
Oceanía - Australia - Sídney 86 3.95s link
América del Sur - Brasil - São Paulo 86 1.24s link

El rendimiento medio en Pingdom es 86 y el tiempo medio de carga es de 1.66 segundos.

A continuación, realizaré el procedimiento gratuito de activación de los servicios de Cloudflare. ¿Quieres saber cómo lo he hecho paso a paso? Consulta el siguiente enlace: Paso a paso de activación de un dominio en Cloudflare

Ahora volveremos a realizar el mismo análisis anterior, para conocer cómo ha variado el rendimiento y la velocidad de carga del blog.

El resultado en PageSpeed es una puntuación de 98/100 en el rendimiento de la web en un ordenador y una puntuación de 87/100 en un móvil. Puedes acceder a los detalles de estos análisis en los siguientes enlaces:

En la siguiente tabla tienes el resumen de los análisis realizados en Pingdom:

Región Rendimiento Tiempo de carga Detalle
Asia - Japón - Tokyo 83 1.75s link
Europa - Alemania - Frankfurt 81 1.51s link
Europa - Reino Unido - Londres 83 2.18 link
América del Norte - EE.UU. - Washington D.C 83 736ms link
América del Norte - EE.UU. - San Francisco 83 227ms link
Oceanía - Australia - Sídney 83 1.09s link
América del Sur - Brasil - São Paulo 83 3.00s link

El rendimiento medio en Pingdom es 82.71 y el tiempo medio de carga es de 1.5 segundos.

Vemos que las puntuaciones en PageSpeed han mejorado considerablemente, y eso es muy positivo para el blog, ya que es uno de los factores a considerar para situarlo en el buscador de Google. En Pingdom, aunque el tiempo medio de carga es menor, sí me ha llamado la atención que ahora el tiempo de carga de las ciudades de Europa y América del Sur es más lento que antes de activar el servicio. Es una pena, ya que la mayor parte de las visitas vienen de estas regiones. Pero hay un detalle importante. En Cloudflare aparece la siguiente imagen:

Diagrama en Cloudflare sobre el tiempo de carga

El tiempo de carga total con Cloudflare es más lento, sin embargo, se muestra contenido parcial más rápidamente. ¿Y no es la pantalla en blanco lo que nos agobia? ¿No preferimos comprobar antes que la página se está cargando? ¿Qué posibilidades hay de que alguien abandone una web que está tratando de visitar una vez se ha cargado “algo”?

Seguimos buscando.

Cómo se hace un blog a coste 0

2020-06-06 3 min read Recursos David Romero

Hace ya casi un mes que comencé esta aventura de dejar plasmado por escrito pensamientos con más o menos acierto. Así que hoy me he planteado que podría hacer una publicación tipo “Cómo se hace” (y no “Cómo se hizo”, porque se sigue haciendo) explicando con más detalle lo que conté en la primera publicación.

Lo primero que hice fue registrar el dominio davidlms.com. Este paso no es gratuito, pero es totalmente opcional. Concretamente utilicé la plataforma namecheap, lo que supuso un coste de 12,94$ (con certificado SSL incluido) que tendré la opción de renovar el próximo 11 de mayo de 2021.

Tenía claro que quería una web estática fácil de mantener. Buscaba algo simple, que tuviese tiempos de carga mínimos y me permitiera escribir los artículos en Markdown. Fue cuando descubrí el framework HUGO… Si quieres saber más no dejes de leer aquí.

Sin duda lo que me dio el empujón definitivo al vacío fue encontrar Netlify. Esta plataforma te permite publicar un sitio web estático en Internet con muy pocos clics. Concretamente, crea un repositorio en tu cuenta de Github con el código fuente del framework que elijas y, cada vez que realizas una modificación (un commit en el repositorio), lo vuelve a compilar para actualizar la página. Te proporciona además de forma gratuita un CDN, un dominio y un certificado SSL.

Podéis echar un vistazo al repositorio de este blog, la configuración básica se indica en el archivo site/config.toml y los artículos se ponen en formato Markdown dentro de carpetas individuales en la ruta site/content/article. He usado el tema Bilberry Hugo, que además está basado en Lingonberry de Wordpress. Lo elegí por su minimalismo, por estar centrado en un formato blog y, básicamente, por cumplir con lo que necesitaba.

En este tema hay un par de cosas que merece la pena configurar. Una de ellas son los comentarios. Para mí era fundamental que el lector que quisiese pudiera comentar un artículo fácilmente, teniendo en cuenta que es una página estática. Se dan dos opciones, y DISQUS es la gratuita. Solamente hay que crear una cuenta y poner el nombre registrado en el parámetro disqusShortname del config.toml. La otra cosa es la configuración de las búsquedas. Para eso se hace uso de una cuenta gratuita en Algolia, que se configura siguiendo paso a paso las instrucciones.

Por último, he querido llevar un registro de los visitantes del blog, más por curiosidad que por otra cosa. Se puede hacer gratuitamente con Google Analytics, pero Google ya sabe bastante de nosotros y no me daba la gana que obtuviese datos de mis visitantes por el hecho de entrar en mi web. Netlify te permite contratarlo como servicio en su propia plataforma, pero son 9$ al mes… Un poco caro para mi gusto. Entonces encontré Plausible, una alternativa más ligera y con un enfoque centrado en mantener la privacidad de los visitantes. Si se paga anualmente, sale a 4$ por mes. De momento estoy en el mes gratuito de prueba. Algo curioso: te permite poner la estadística en un enlace público. Así que, por qué no, aquí tenéis las mías.

Todo esto te lo he contado con el único objetivo de animarte a crear tu propio blog, en estos tiempos en los que están en peligro de extinción. Y lo puedes hacer a coste cero.

También hay un objetivo secundario. Si sabes cómo lo he hecho, puedes sugerirme cómo hacerlo mejor. Te espero en los comentarios.