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.
- Página para la minificación de archivos CSS: Cssminifier
- Página para la minificación de archivos JS: Javascript Minifier
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
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.