AÑADE Y MINIMIZA EL CSS NECESARIO

Es muy común cargar todas las reglas CSS aunque algunas de ellas sólo se utilicen en un 2% de nuestra página. ¿Por qué hacemos esto? lo más lógico es que dividamos el CSS por uso y carguemos por cada página solo aquellas reglas que se van a utilizar, así evitamos saturar con archivos muy grandes todo el sitio.

Además de simplificar el fichero, podemos minimizar su tamaño con aplicaciones como YUI Compressor o cssmin.js que se encargarán de eliminar espacios, comentarios y duplicidades, generando un fichero mucho más ligero pero con la misma funcionalidad.

MINIMIZA Y OPTIMZA EL CÓDIGO JAVASCRIPT

Al igual que con los ficheros CSS, es necesario optimizar para reducir el tamaño de los ficheros Javascript, tendremos que reducir el número de peticiones y asegurarnos de que ejecutamos lo justo y necesario para nuestra página. También, al igual que en el caso anterior, tendremos que comprimir y reducir su tamaño y para ello deberemos utilizar aplicaciones como Closure Compiler, JSMin o, nuevamente,  YUI Compressor.

Si utilizas Wordpress tienes plugins de optimzación que te ayudarán en proceso.

OPTIMIZA LAS IMÁGENES

Las imágenes suelen ser los elementos de mayor tamaño de una página web y si los optimizamos de forma correcta será la forma más rápida de ver una mejora en el tiempo de carga. Es recomendable evitar formatos como BMP, TIF o GIFs y centrarnos en utilizar PNG y JPGs ya que son más óptimos desde el punto de vista del tamaño.

Algunas consideraciones acerca de la optimización de las imágenes:

1. Podemos utilizar programas como Gimp para eliminar comentarios, profundidad de color y otros extras que añaden peso adicional a las imágenes.
2. Hay múltiples aplicaciones que automatizan la optimización de imágenes como jpegtran,  jpegoptim, OptiPNG o PNGOUT.
3. Debemos especificar las dimensiones de las imágenes dentro del código HTML, así los navegadores no tienen que esperar a que se descargue.
4. Utiliza imágenes escalables. Si tienes una imagen de 60x60 pero la vas a mostrar de 50x50, escalala y genera una del tamaño concreto con el que se va a visualizar. 

MINIMIZA EL CÓDIGO HTML

Por último, el código global que mostraremos será un HTML que incluye imágenes, CSS y Javascript, ente otros ficheros. Este código también tendrá que ser optimizado y para ello deberemos de tener algunos puntos en cuenta:

1. Eliminar comentarios
2. Eliminar espacios en blanco

Al igual que en los casos anteriores, podemos utilizar herramientas como HTML Compressor que nos facilitarán la tarea.