Menú

Minificar archivos CSS y JS

Minificar los archivos, CSS y JS, no es más que reducir al máximo su tamaño para ganar milésimas de segundo al ser cargados. Esta reducción se consigue comprimiendo al máximo los textos y reduciendo, en caso de los .js, los nombre de varibles y funciones. También podemos hacer lo mismo con archivos html. Reduciendo al máximo el nombre de las clases y de los indentificadores (id).

Existen varias herramientas online para minificar los archivos. A continuación os dejamos un enlace para cada archivo y un ejemplo visual.

Para su utilización solo debemos copiar el contenido de cualquier archivo CSS o JS, pegarlo en el textarea de la izquierda y pulsar el botón Minify. Veremos que en le textarea de la derecha, nos aparece el código minificado. Lo Copiamos y lo pegamos de vuelta al archivo original. Recomendamos siempre mantener una copia del archivo sin minificar, pues siempre es más cómodo para trabajar.

Os dejamos un ejemplo de minificación JS

//Archivo sin minificar

$(window).load(function()
{
      var allimages=document.getElementsByTagName('img');
      for (var i=0; i             if (allimages[i].getAttribute('data-src')) {
                  allimages[i].setAttribute('src', allimages[i].getAttribute('data-src'));
            }
      }
      $('.indexHeader').css('background-image', 'url(https://www.seopractico.com/test.jpg)');
});
$(document).ready(function(){
      //Menu interno
      $("#idLink").hover(function()
      {
            $(".escLink").fadeIn();
      }, function () {
            $(".escLink").fadeOut();
      });

      $("#casaMenu").hover(function()
      {
            $(".casaLink").fadeIn();
      }, function () {
            $(".casaLink").fadeOut();
      });
});

A continuación el resultado

//Archivo Minificado

$(window).load(function(){for(var t=document.getElementsByTagName("img"),e=0;e<t.length;e++)t[e].getAttribute("data-src")&&t[e].setAttribute("src",t[e].getAttribute("data-src"));$(".indexHeader").css("background-image","url(https://www.seopractico.com/test.jpg)")}),$(document).ready(function(){$("#idLink").hover(function(){$(".escLink").fadeIn()},function(){$(".escLink").fadeOut()}),$("#casaMenu").hover(function(){$(".casaLink").fadeIn()},function(){$(".casaLink").fadeOut()})});

Como hemos comentado al principio, este procedimiento también lo podemos realizar con los archivos HTML. Solo tenemos que eliminar todos los espacios y saltos de linea entre etiquetas y utilizar indentificadores muy cortos para todo lo que podamos. Por ejemplo si queremos definir una clase para una capa que lo rellene de color azul podemos hacer:

<div class="divRellenoColorAzul">
      Este es un div con fondo azul
</div>

O podemos hacer lo mismo con mucho menos código. Quitando espación, saltos de linea y reduciendo el nombre de la clase de 19 a 3 letras:

<div class="dRA">Este es un div con fondo azul</div>

Si este ahorro los multiplicamos por cada linea de las n páginas que puede tener un sitio web, al final el tiempo de carga que reducimos es más importante de lo que puede paracer a primera vista. Para que nos hagamos una idea, cada 1000 caracteres es 1 kB.

Artículos relacionados