comparte el articulo 

Comprimir el CSS y el JavaScript de tu página web para hacerla más rápida

Actualizado el 09/10/2013 < > 5 Cometarios

Una técnica muy útil cuando diseñamos páginas web que requieren el uso de JavaScript, o que por motivos de diseño necesitan más de una Hoja de Estilos, es minificar el código, en ingles minify.

¿Mini- qué?

Simple, se trata de comprimir el código CSS y/o JavaScript para que la página cargue más rápido. O lo que es lo mismo, Minificación es la práctica de la eliminación de caracteres innecesarios del código para reducir su tamaño, mejorando así los tiempos de carga.

Cuando hacemos esto, generalmente eliminamos todos los comentarios, los espacios en blanco, los saltos de línea y las tabulaciones. Como resultado queda un código dificilmente comprensible de entender, pero que cumple bien su función de reducir el tamaño de los archivos y así reducir el tiempo de carga (y II).

Lo normal cuando se usan estas técnica es tener dos versiones de tus JS y tus CSS, una versión minificada y otra para desarrollo, con los comentarios, espacios, tabulaciones y demás intactos. Cuando haces cambios en algún archivo hay que volver a comprimir los archivos y guardarlos, pero no olvidar nunca tener una copia legible del código para poder editarlo con facilidad.

Dos herramientas bastante populares para reducir el código son JSMin y YUI Compressor.Pero también tienes: minify JavaScript y minify CSS.

Publicado el 04/05/2010, última actualización 09/10/2013.

Licencia: Eres libre de distribuir este artículo siempre que mantengas los enlaces dentro del mismo intactos y des los créditos al autor.

Autor: Verónica Milán

URL: Cursos de lawebera

Añadir Comentario (Subir al texto)

5 Cometarios

  1. Proyectos Web SEO

    Nosotros pensamos que es una buena opción. Sin embargo, tener que llegar a esos extremos no creemos que sea un síntoma de un Código CSS bien estructurado. Así lo advierten los Organismos oficiales competentes en la materia y principales Herramientas de análisis SEO.

    Martes, 18 de mayo 2010

  2. DisenoWebz

    ¡Creo que es una opción muy válida!
    Hay que optimizar nuestras webs aunque esto requiera esfuerzos, el tiempo de carga cada vez esta más penalizado; porcentaje de rebote y poscionamiento.

    Creo que comprimir css es un hacierto, quiero compartir con los usuarios algunas técnicas más, donde también se encuentra la mentionada. El link es un poco largo : S pero aqui lo dejo!
    http://www.disenowebz.com/diseno-web-online/optimiza-wordpress-mejora-la-velocidad-carga/

    Viernes, 21 de mayo 2010

  3. Diseño Web Toledo

    Creo que, antes de embarcarse en este tipo de optimizaciones, muchas webs deberían optimizar lo obvio; las imágenes, cuyo tamaño en algunas web hace dudar sobre si saben para que existe la comprensión con pérdida o si son conscientes de las posibilidades de los background repetidos, ajustados, o el uso de un simple png con transparencia.
    Apurar 50kb comprimiendo un html para volverlo ‘ilegible’ es algo carente de sentido si la imagen de fondo ocupa 160kb o si las imágens de la página estan redimensionadas a menos.

    Vamos, que no es por no optimizar pero… empecemos por lo gordo.

    Jueves, 24 de junio 2010

  4. Verónica Milán

    Desde luego que sí, hay cosas más importantes para optimizar. Evidentemente este post no pretende cubrirlas todas ni mucho menos, sólo mostrar al lector una opción más de las existentes a la hora de optimizar páginas web.

    Mismamente en otros post y artículos hemos escrito algunas cosas sobre el tema que comentas:

    http://www.blog.lawebera.es/uso-de-imagenes-en-los-blogs/
    http://www.blog.lawebera.es/redimensionar-imagenes-online/
    http://www.lawebera.es/de0/imagenes-web.php
    http://www.lawebera.es/de0/anadir-imagenes-web.php

    Saludos,

    Miércoles, 14 de julio 2010

  5. Jessica

    Yo uso este recurso y también el plug-in de Google llamado PageSpeed
    que nos da una lista completa de lo que debemos mejorar para que la
    carga sea más veloz.

    Sábado, 21 de abril 2012

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras