Twitter Bootstrap 101 Tamaño de archivo de recorte

Una de las críticas comunes de los marcos como Twitter Bootstrap es que incluyen mucho más código del que realmente usa en su sitio, lo que le deja una base de código inflada y un rendimiento deficiente del sitio. Este es un posible peligro, pero la página Personalizar de Bootstrap proporciona una excelente herramienta para solucionar el problema. Déjame guiarte en el proceso de personalizar tus archivos CSS y JavaScript para reducir enormemente el tamaño de sus archivos.

Eso se encarga del primer video, en el segundo te guiaré por otro paso importante: exprimir bits de tus archivos de imagen, usando la herramienta Smushit de Yahoo! Juntos, estos dos pasos (optimizar su código y optimizar sus imágenes) reducirán en gran medida la huella de su sitio.


Paso 1: Recortar CSS y JavaScript

Usaremos la página Personalizar de Twitter Bootstrap para seleccionar y descargar solo los componentes de CSS y JavaScript que necesitamos, lo que resultará en mucho tamaños de archivo más pequeños.

Alternativamente, descargue el video o suscríbase a Webdesigntuts + screencasts a través de iTunes o YouTube!

Capturas de pantalla: componentes CSS y JS

Las siguientes son capturas de pantalla de las selecciones que hice en el screencast.

Quiere optimizar más?

Una vez que haya descargado e implementado sus archivos CSS y JS personalizados, puede optar por obtener más beneficios mediante el uso de un complemento como los selectores Dust Me para identificar los restantes selectores no utilizados, que puede editar a mano de su archivo CSS. Esto será mucho Más fácil con el archivo personalizado más pequeño que con el archivo original.


Paso 2: Smush tus archivos de imagen

Mientras optimizamos los archivos, también podemos mencionar un paso adicional que lo ayudará con los archivos más grandes del sitio promedio: los archivos de imagen. Hay mucho que pensar al optimizar imágenes para la web. Puede que se sorprenda al saber que no todas las herramientas de compresión son iguales. El cuadro de diálogo "Guardar para web y dispositivos" en Photoshop resulta ser una de las herramientas de compresión menos eficaces que existen..

Aquí usaremos la herramienta Smushit de Yahoo! Para ayudarnos a lograr lo que Photoshop no pudo.

Alternativamente, descargue el video o suscríbase a Webdesigntuts + screencasts a través de iTunes o YouTube!

Para leer más

  • Web Performance Best Pactice - Desarrolladores de Google
  • Minimizar el tamaño de la carga útil - Google Developers
  • Optimizando Imágenes para la Web - Andy Killen
  • La herramienta de Smushit de Yahoo!