Vistas: 509
Tiempo de lectura:4 Minutos, 44 Segundos

A finales del 2019 compré un hosting compartido en namecheap, necesitaba publicar rápido y fácil en www.ricardoromo.co, y un wordpress me facilitaba esta tarea. A las pocas horas de estar configurando el sitio me doy cuenta de que esta muy lento. Luego de comprobar la latencia del hosting, me doy cuenta de que es bastante alta, algo que era comprensible, ya que era bastante barato, me estaban cobrando algo más de $2.5 mensuales. 

La latencia de mas de 100ms me hecho un poco para atrás, pero ya era tarde, había comprado un año, así que me tocó quedarme con él. Empecé a publicar contenido en el sitio, siempre con la incomodidad de que era lento, pero bueno qué más podía hacer. Con el tiempo hice ciertas optimizaciones que recomendaba la gente en Internet para mejorar la carga del sitio, pero aun así tenia picos en la carga de casi 1 minuto 50 segundos. Como consecuencia, el porcentaje de rebote del sitio era bastante alto, casi un 80%. Supuse que era por el tiempo de carga.

Tenía que hacer algo, entonces descubrí una manera de cachear el sitio web a través de un CDN. Un CDN (content network delivery), son una serie de servidores que sirven de intermediario entre los clientes y el hosting, guardando una copia de los datos, aumentando el ancho de banda. De esta manera el sitio no tendría que cargar desde el hosting compartido de namecheap y si no a través del CDN.

Para este blog usare el ejemplo de mi sitio web, que está montado sobre un wordpress. 

Paso 1 – Instalar W3

W3 es un plugin viene por defecto en la instalación de wordpress, nos sirve para optimizar ciertas configuraciones de nuestra instalación. Para este blog es importante tener instalado W3 o algún plugin que te permita configurar un CDN

Paso 2 – Configuración de W3

Una vez instalado W3, van a settings, y en la sección que dice CDN, seleccionan la casilla que dice activar. A continuación les pedirá el tipo de CDN, y aquí la selección es a gusto personal. Yo seleccione Amazon CloudFront, por que ya tenia cuenta en AWS, pero hay otros proveedores como Azure o Google  que pueden funcionar. Para este blog enseñare la configuración en AWS.

Luego de activar y seleccionar el tipo de CDN, se van a la pestaña CDN del plugin, e ingresan los siguientes datos. El ID de la clave de Acceso y la Clave Secreta. Para conseguir estos dos datos debemos entrar a nuestra cuenta de Amazon Web Services.

Paso 3 – Configurar Usuario en IAM

Para obtener El ID de la clave de Acceso y la Clave Secreta, es necesario crear un usuario en IAM desde una cuenta en AWS: https://aws.amazon.com/es/

Este no es un tutorial de como crear tu cuenta de Amazon Web Services, en Internet podrás encontrar muchos tutoriales sobre esto, pero debes saber que ellos ofrecen 12 meses gratis en varios productos, entre ellos CloudFront.

Una vez entras a la consola de AWS, te diriges a servicios y luego a IAM.

Dentro de IAM, vamos a usuarios y luego seleccionamos añadir usuario.

Luego dentro de este, configuramos el nombre y los permisos.

Configuramos el nombre del usuario y Configuramos los permisos para usar Amazon CloudFront

En la pestaña de etiquetas, pasamos de largo y luego crear usuario. En el paso 5, tenemos que detenernos, ya que en este apartado estarán los 2 datos importantes que estamos buscando. El ID de la clave de acceso y la clave secreta.

Cuando des click en mostrar a la clave secreta tienes que guardarla muy bien, ya que no hay manera de obtenerla nuevamente, solo puedes verla una vez en esta consola.

Luego de obtener las claves, nos vamos a la ventana de wordpress del paso 3 donde nos pedían las claves, ingresamos las claves y damos clic en crear distribución.

Una vez creada la distribución tenemos que esperar hasta que se complete el despliegue en Amazon CloudFront. Este proceso puede tardar alrededor de 30 minutos. podemos ir comprobando su disponibilidad en el botón “Prueba de la distribución de cloudfront”.

Paso 4 – Magia

Una vez completado el despliegue, podemos ver que nuestro sitio carga mucho más rápido. Con este solo cambio, logré que mi sitio web redujera el tiempo de carga de 1 minuto a 5 segundos.

Podemos comprobar la sensación al entrar en él o desde el número que nos arroja la consola del navegador.

Conclusiones

Es importante tener un sitio web que cargue rápido, el 85% los visitantes de mi sitio web se iban sin visitar ninguna otra pagina, supongo que una de las razones es una carga lenta del sitio web. Según un estudio de google el 53% de las visitas puede abandonar el sitio web si tu páginas tarda más de 3 segundos en cargarse, entonces ahí puede estar la respuesta a mi problema.

La optimización de un sitio web es una tarea muy compleja, ya que requiere tocar aspectos muy técnicos del desarrollo web, como la carga de recursos externos, optimizar los temas o plugins que usamos en el sitio, el tamaño y la resolución de las imágenes. Y ni hablar en móviles, mi sitio web aún es débil en dispositivos móviles, pero considerando que el tráfico que ingresa en el es mas de un 60% de gente con teléfonos, es una tarea que tengo pendiente por hacer.

Si llegaste hasta aquí te doy las gracias por aguantar esos 2 segundos mas de carga de este artículo y si conoces a alguien que le pueda interesar este tema, compártelo, y así nos ayudamos a crecer a todos.