Consejos para acelerar el blog en Blogger [Parte 2]

Hace algún tiempo hice una entrada en la que explicaba cómo acelerar el blog con distintos consejos y usos correctos en su plantilla, también hablamos de CSS Sprites y compresores de scripts como Bananascript. En esta oportunidad veremos otros métodos para acelerar aún más el blog sin sacrificar ninguna función ya existente en él.

No son muchos consejos, pero advierto que si dan mucho trabajo y que absorben mucho tiempo.

Consejos para los scripts del blog:

Consejo 1: Alojar los scripts en archivos .js:

Habíamos hablado anteriormente de cómo lograr este objetivo [tutorial aquí] pero no vimos claramente de qué se beneficia el blog:

• Tanto archivos .CSS como .JS son guardados en la caché del navegador, por lo que al añadir nuestros scripts en un archivo externo, el navegador no deberá cargar el script cada vez que se abra una página (Menos peticiones HTTP).

Consejo 2: Reemplaza jQuery por su versión comprimida:

Si usas algún script escrito en jQuery este paso puede serte útil. La última versión de jQuery pesa 242KB, es demasiado y puede retrasar por varios segundos la carga del blog.

Con Bananascript he probado comprimir este plugin y he conseguido un peso de 58.6KB (Un 24% del tamaño original), que sin duda acelerará mucho más el blog:

Para poder usar esta versión, suprime el código con la URL normal de jQuery y en su lugar reemplázala por este código:

<script charset='ISO-8859-1' src='http://dl.dropbox.com/u/28164309/AyudaBloggers/Final/jquery-latest.js' type='text/javascript'/>

Consejos para el CSS del blog:

Nota: Estos consejos son para usuarios parcialmente experimentados con la hoja de estilos en cascada (CSS).

Consejo 1: Uso correcto de los Identificadores y Clases:

Recuerda que las clases son para crear objetos que pueden repetirse en la plantilla, mientras que los identificadores (ID), pueden variar. Puedes aprovechar las clases para ahorrar líneas de atributos usando estilos predefinidos, veamos un ejemplo:

.sombra {
box-shadow:1px 1px 0 #CCC;
}

.fuentes-grandes {
font-size:300%;
}

.izquierda {
float:left;
}

Cuando quisieras aplicar estos efectos a algún elemento bastaría con incluir la clase, recuerda que puedes usar más de una class en un objeto:

<div class="sombra fuentes-grandes izquierda">Ejemplo usando correctamente clases</div>

Consejo 2:  Aplicar atributos a varios elementos a la vez:

Si tienes algunos selectores con atributos muy similares puedes optar por ahorrar código separando cada contenedor con una coma (,) y añadiendo los atributos de la siguiente forma:

#caja1, #caja2, #caja3 {
background:#F8F8F8;
}

Consejo 3: Elimina los comentarios:

Generalmente cuando buscas algún elemento para añadir a tu blog, los códigos vienen con un comentario el cual está escrito de la siguiente forma:

.lorem-ipsum {
font-size:20px; /*Tamaño de fuente*/
font-family:Century Gothic; /*Tipografía*/
}

Los códigos destacados en color verde son comentarios que no sirven en la interpretación de los códigos, pero sirven a los usuarios para orientar acerca del uso de las funciones o bien como recordatorios. Pueden ser útiles al principio, pero es recomendado eliminarlos ya que aumentan el tamaño de la plantilla.