Archivos Estaticos y Optimización de Sitios Web

Tiempo de lectura: 10 minutos.

Público objetivo: Desarrolladores de software

Nivel:  Básico.

Fecha publicación: 27 de Octubre de 2018

Hola nuevamente !!, me alegra mucho retomar el blog de Elemental Lab y seguir alimentando nuestro sitio web con información útil para otras personas en el área de la tecnología, esta vez les hablare sobre como manejar archivos estáticos de una manera optimizada (css, js, etc.) y media (imágenes, videos, logs, etc.).

En Elemental Lab tenemos varios VPS (Virtual Private Server) o Servidores Virtuales Privados con Digital Ocean, Digital ofrece Infraestructura como servicio (iaas), esto quiere decir que nosotros debemos configurar los servidores que adquirimos con la empresa y nos da una ventaja en cuanto a personalización. Contrario a lo que ocurre con algunas empresas que usan servidores compartidos o plataformas como servicio, como por ejemplo Heroku, donde la configuración es mínima y no se requiere mucho conocimiento sobre administración de servidores.

Archivos Estáticos 

Todo proyecto de software web requiere archivos javascript y css, generalmente estos archivos son almacenados en el mismo servidor donde esta el codigo fuente del proyecto, es algo que está bien, pero que se puede mejorar. Cuando alguien ingresa a la página web del proyecto (ej. elementalab.com) se envian varias peticiones desde el navegador al servidor donde está alojado el proyecto, entre esas peticiones están los archivos estáticos, es aquí donde se puede mejorar el uso de los mismos. Por ejemplo si la persona que ingresó a la página está en Colombia y el servidor está en California, los estáticos deben viajar desde California hasta Colombia y aunque esto pasa en muy poco tiempo, son segundos o milésimas de segundos determinantes para que una persona tenga una mejor experiencia en el sitio web, además motores de búsqueda como el de google posiciona mucho mejor sitios más optimizados. 

En cuanto a las imágenes el problema puede ser el siguiente, los VPS tienen un espacio de almacenamiento limitado, en el cual está el sistema operativo, programas y el código fuente de los proyectos, si alguno de los proyectos permite a los usuarios subir múltiples imágenes (ej: una red social o tienda tipo mercadolibre), eventualmente el servidor se quedará sin espacio para almacenar nueva información.

Como proxy reverse (intermediario, por ej. intermediario entre navegador y servidor) utilizamos nginx, nginx tiene algunos modulos que son muy utiles para trabajar con archivos estaticos e imagenes, uno de ellos es ngx_http_image_filter_module, un módulo que permite reducir calidad, cortar y en general optimizar imagenes para la web.

Spaces (Espacios)

Digital Ocean implementó recientemente “espacios” para dar una solución al momento de servir archivos estáticos o almacenar imágenes, otras empresas como Amazon también ofrecen una solución para esto, Digital Ocean de momento es la solucion mas económica. 

Por el hecho de adquirir un espacio en Digital Ocean ellos ofrecen un CDN (Content Delivery Network), un CDN funciona básicamente así: Los archivos estáticos están almacenados en diferentes servidores a nivel mundial, si por ej hay un servidor en Bogotá donde están guardados los archivos y alguien ingresa a la página desde Colombia, las peticiones de estos archivos se realizarán a Bogotá, en vez de a California o al servidor principal del proyecto, es decir se realizan al servidor mas cercano desde donde se realiza la petición.

El uso de un CDN reduce la latencia (desfase de tiempo entre el servidor y el navegador) al cargar los archivos de un 50% a 70%.

Con los espacios ya no habrá problema para el almacenamiento a futuro, adicionalmente también se puede utilizar para guardar logs del servidor, que son importantes por temas de seguridad (saber quién hizo qué y cuándo) y para almacenar backups.

Se uno de nuestros referidos, Digital Ocean te dará 100 dolares para utilizar en 60 dias aqui 

Hasta la próxima!

Autor: Jhon J Valero R  

Ingeniero de Software en Elemental Lab

Compartir Compartir Compartir