{"id":1359,"date":"2020-02-13T10:08:43","date_gmt":"2020-02-13T15:08:43","guid":{"rendered":"https:\/\/v3.ricardoromo.co\/?p=1359"},"modified":"2020-02-15T15:52:03","modified_gmt":"2020-02-15T20:52:03","slug":"aumenta-la-velocidad-de-tu-sitio-web","status":"publish","type":"post","link":"https:\/\/v3.ricardoromo.co\/2020\/aumenta-la-velocidad-de-tu-sitio-web\/","title":{"rendered":"Aumenta la velocidad de tu sitio web"},"content":{"rendered":"\t\t
A finales del 2019 compr\u00e9 un <\/span>hosting compartido<\/span> en namecheap, <\/span>necesitaba publicar rapido y facil en www.ricardoromo.co, y un <\/span>wordpress<\/span> me facilitaba esta tarea. A las pocas horas de estar configurando el sitio me doy cuenta de que esta <\/span>muy lento<\/span>. 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\u00e1s de $2.5 mensuales.\u00a0<\/span><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t \u00a0<\/p> La latencia de mas de 100ms me hecho un poco para atr\u00e1s, pero ya era tarde, hab\u00eda comprado un a\u00f1o, as\u00ed que me toc\u00f3 quedarme con \u00e9l. Empec\u00e9 a publicar contenido en el sitio, siempre con la <\/span>incomodidad de que era lento<\/span>, pero bueno qu\u00e9 m\u00e1s pod\u00eda hacer. Con el tiempo hice ciertas optimizaciones que recomendaba la gente en internet para mejorar la carga del sitio, pero aun as\u00ed tenia <\/span>picos en la carga<\/span> de casi<\/span> 1 minuto 50 segundos<\/span>. Como consecuencia, el <\/span>porcentaje de rebote<\/span> del sitio era bastante alto, casi un 80%. Supuse que era por el tiempo de carga.<\/span><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t \u00a0<\/p> Ten\u00eda que hacer algo, entonces descubr\u00ed una manera de <\/span>cachear el sitio web<\/span> a trav\u00e9s de un <\/span>CDN<\/span>. <\/span>Un CDN (<\/span>content network delivery<\/span>), son una serie de servidores que sirven de intermediario entre los clientes y el hosting, guardando una copia de los datos, <\/span>aumentando el ancho de banda<\/span>. De esta manera el sitio no tendr\u00eda que cargar desde el hosting compartido de namecheap y si no a trav\u00e9s del CDN.<\/span><\/p> \u00a0<\/span><\/p> Para este blog usare el ejemplo de mi sitio web, que est\u00e1 montado sobre un wordpress.\u00a0<\/span><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Una vez instalado W3, van a settings, y en la secci\u00f3n que dice CDN, seleccionan la casilla que dice <\/span>activar<\/span>. A continuaci\u00f3n les pedir\u00e1 el tipo de CDN, y aqu\u00ed la selecci\u00f3n es a gusto personal. Yo seleccione <\/span>Amazon CloudFront<\/span>, por que ya tenia cuenta en AWS, pero hay otros <\/span>proveedores <\/span>como Azure o Google\u00a0 que pueden funcionar. Para este blog ense\u00f1are la configuraci\u00f3n en AWS.<\/span><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t \u00a0<\/p> \u00a0<\/p> Luego de activar y seleccionar el <\/span>tipo de CDN<\/span>, se van a la pesta\u00f1a CDN del plugin, e ingresan los siguientes datos. El <\/span>ID de la clave de Acceso y la Clave Secreta<\/span>. Para conseguir estos dos datos debemos entrar a nuestra cuenta de Amazon Web Services.<\/span><\/p> \u00a0<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Para obtener <\/span>El <\/span>ID de la clave de Acceso y la Clave Secreta<\/span>, es necesario <\/span>crear un usuario en IAM<\/span> desde una cuenta en AWS: <\/span>https:\/\/aws.amazon.com\/es\/<\/span><\/a><\/p> Este no es un tutorial de como crear tu cuenta de Amazon Web Services, en internet podr\u00e1s encontrar muchos tutoriales sobre esto, pero debes saber que ellos ofrecen 12 meses gratis en varios productos, entre ellos CloudFront.<\/span><\/p> \u00a0<\/span><\/p> \u00a0<\/p> Una vez entras a la consola de AWS, te diriges a <\/span>servicios<\/span> y luego a <\/span>IAM<\/span>. <\/span><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/figure><\/a><\/div>\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
<\/figure><\/a><\/div>\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
Paso 1 - Instalar W3<\/span><\/h2><\/span><\/a><\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
W3 es un plugin viene por defecto<\/span> en la instalaci\u00f3n de wordpress, nos sirve para optimizar ciertas configuraciones de nuestra instalacion. Para este blog es importante tener instalado W3 o alg\u00fan plugin que te permita <\/span>configurar un CDN<\/span><\/span><\/pre>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
<\/figure><\/a><\/div>\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
Paso 2 - Configuraci\u00f3n de W3<\/span><\/h2><\/span><\/a><\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
<\/figure><\/a><\/div>\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
<\/figure><\/a><\/div>\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
Paso 3 - Configurar Usuario en IAM<\/span><\/h2><\/span><\/a><\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\u00a0<\/span><\/pre>