En estos tiempos en donde los dispositivos móviles son los más usados, cada vez más requerimos de información en cualquier momento y de la forma mas rápida posible a tal grado que si una página web no se carga en 3 segundo, nos regresamos al buscador y seleccionamos otro resultado de búsqueda con la esperanza de que la nueva página responda en menor tiempo que la anteriro. En este punto es cuando nosotros debemos evaluar nuestos porpios sitios y verificar si necesitamos optimizar nuestas páginas web. Existen diferentes formas de optimización: comprimir imágenes y escalar al tamaño que realmente se necesitan, usar librerias de CSS y JS minificadas, desactivar módulos o plugins del CMS que estés usando, activar un módulo de caché y el módulo GZIP de PHP en el servidor, etc. Pero el más sencillo de aplicar sería el de combinar archivos CSS y JS en nuestro Drupal 7.
el beneficio de unir los archivos de CSS y Javascript en tu página web es que cargue más rápido y mejore tu SEO On Page. En algunos casos, este proceso puede ser significativo porque va a disminuir la cantidad de descarga de recursos o archivos para poder desplegar la página web solicitada.
Nota: Antes de continuar, vamos a usar Chrome como navegador para realizar todas las imágenes.
Calcular la cantidad de recursos
Vamos a realizar una prueba en cualquier página de nuestro sitio web con la finalidad de verificar la cantidad de recursos o archivos que se tiene que descargar y ver al final cuántas peticiones se realizar en cada visita.
Al estar en la página seleccionada para testear, presiona la tecla F12 para que se despliegue la consola del navegador. Esta consola tiene un menú en la parte superior: Elements, Console, Source, Networks, Permormance, Memory, Aplication, Security y Audits, pero para esta prueba vamos a usar la opción Network para ver todas las peticiones que realiza nuestra página.
Ahora, vamos a tener que recargar la página web presionando el botón de recarga que se encuentra a un lado de la URL, o con F5, pero yo recomiendo que siempre recarguemos con Ctrl + F5, esto hace que se descarguen todo los archivos. A partir de esta acción, verás y te darás cuenta de todos los archivos tu navegador web tiene que descargar para poder armar tu página, probablemente te sorprendas porque verás muchos archivos que no reconocerás o tal vez no sabías que se descargaban.
Cuando tu página se termine de cargar, en el pie de página de la consola verás información muy importante como: cantidad de peticiones, bytes transferidos, el peso de de tu página (sumatoria de todos los recursos transferidos) y tiempo de carga. La siguiente imagen nos indica que se hicieron 104 peticiones de descarga de archivos al servidor y se carga en 1.7 segundos.
Combinar y minificar archivos de CSS y JS
Ahora vamos a intentar bajar el número de peticiones y reducir el peso de la página unificando y minificando el CSS y JS desde las configuraciones de Drupal 7. Así es que vamos a ir las configuraciones de Drupal y en la sección de Desarrollo vamos a dar click en Rendimiento para ver las opciones que necesitamos.
Al recargar la página veremos las siguientes opciones de rendimiento:
Si quieres saber cómo funcionan las primeras 2 opciones, te recomiendo mis artículo que dejo enlazado pero hoy vamos a usar OPTIMIZACIÓN DE ANCHO DE BANDA para unificar los archivos de CSS y JS. Por lo tanto, solo tiene que activar las 2 casillas: Unir y comprimir archivos CSS y Unir archivos JavaScript. Presiona el botón Guardar para finalizar con la configuración.
Verificar la combinación y minificación de archivos
Vamos a regresar a la página donde abrimos la consola del navegador y vamos a recargar la página con Ctrl + F5 y veremos cómo se reduce la cantidad de peticiones o archivos a descargar de 104 a 46 requests y pasamos de 1.7 a 1.07 segundos. Otro dato importante es que el peso de la página no varió demasiado, paso de 663KB a 623KB.
Conclusión
La unión de archivos de CSS y JS puede hacer que un sitio se descargue más rápido. Pero ¿por qué? porque por cada petición se tiene que seguir un protocolo: resolver el dominio, negociar la solicitud, enviar la solicitud, esperar a que el servidor responda y descargar el contenido. Si nos ahorramos el protocolo de muchos archivos al juntarlos en uno solo, la misma información se descarga más rápidamente que si se descarga de forma individual.
Al minificar solo ahorramos muy poco espacio porque solo elimina espacios en blanco y retornos de carro.
