Tutorial WPO: Optimizando el Front-end III

Tal y como avisé, este tutorial será algo largo o, al menos, no serán tres simples entradas en las que contar qué es WPO y poco más.

Me gustaría hacerlo lo más completo posible y para ello es necesario analizar los problemas y plantear soluciones, cosa que no se hace en dos o tres entradas.

En esta entrada continúo con la tercera parte de WPO para front-end, donde analizaremos más problemas y sus posibles soluciones.

Plan de vuelo:

• WPO: ¿Qué es y por qué utilizarlo?
• Optimizando el Front-end I
• Optimizando el Front-end II
• Optimizando el Front-end III

Externalizar contenidos CSS y JS

Hoy en día no tenemos por qué tener todos los ficheros que conforman nuestro sitio web en el mismo servidor, sino que se pueden externalizar o, dicho con algo que a todo el mundo debería sonarles, «divide y vencerás».

Algunas de las cosas que debemos atender al externalizar ficheros CSS y JS son:

Ficheros .css y .js cacheables
Podemos controlar si un fichero ha cambiado o no e indicarle al navegador que debe actualizarlo o, por lo contrario, servirá una versión cacheada, mucho más rápida.

También, al ser ficheros de texto y no ser programados, no necesitan cookies (podemos enviarlo a un dominio para estáticos sin cookies) y se podrán enviar comprimidos mediante gzip.

Utilizar <link> en vez de @import para los CSS
Si bien hay muchas formas de incluir ficheros externos en nuestras hojas de estilos o nuestro sitio web, es más recomendable utilizar los tags <link> antes que el @import en las propias hojas de estilos.

Un único archivo para gobernarlos a todos
Es más, si quieres rizar el rizo, mejor utilizar un sistema que te minifique y combine todos los CSS que utilice tu sitio web (en el capítulo de WordPressveremos algunas formas de conseguirlo para este gestor de contenidos).

Esto «forjará» un único archivo que contendrá todo el CSS de tu sitio, pero esto ya es avanzado.

Códigos cortos de color

De cara al front-end también utilizamos colores en nuestras hojas de estilos. Sin entrar en mucho detalle, me gustaría nombrar las formas más comunes de utilizar los colores:

• RGB: Por ejemplo: background: rgb(r,g,b) -> Donde r, g y b es la cantidad de rojo, verde y azul que lleva el color.
• RGBA: Igual que el anterior, pero añadiendo el parámetro alpha, que viene a ser el canal de opacidad del color. Esto nos permite crear transparencias.
• HEX extendido: Es del formato #000000 donde cada cero toma un valor hexadecimal para conformar el color (RGB en formato de dos dígitos, los dos primeros son el rojo, los dos siguientes el verde y los dos últimos el azul).
• HEX reducido: Al igual que el anterior, tiene formato hexadecimal, pero con sólo tres digitos: #000 (primero para rojo, segundo para verde y el último para azul).

No obstante, el objetivo de esta entrada no es aprender sobre los colores, para eso tienes la que está escribiendo Alin aquí.

En fin, resumiendo, es mejor utilizar el formato #000 siempre que nos sea posible y, mejor aún, podemos colocarlos en texto plano ya que los navegadores entienden estos dieciséis colores:

• white: #fff
• yellow: #ff0
• red: #ff0
• fuchsia: #f0f
• silver: #c0c0c0
• gray: #808080
• olive: #808000
• purple: #800080
• maroon: #800000
• aqua: #f00
• lime: #0f0
• teal: #008080
• green: #008000
• blue: #00f
• navy: #000080
• black: #000

Así que ya sabes, si vas a utilizar alguno de estos colores utiliza la palabra asignada a cada uno y no su código exadecimal. En cualquier otro caso y siempre que te sea posible utilizar el hexadecimal reducido.

En cuanto a front-end, podríamos decir que ya hemos repasado lo más importante.

No obstante, puede que en un futuro saque una cuarta entrega sobre optimización de front-end.

Intentaré en próximos capítulos del tutorial de WPO hablar sobre temas de servidor, con algo más de miga y complicados, pero igualmente efectivos.

Recuerda agradecer esta entrada, agradécelo en los comentarios. La gratitud da ganas de escribir y esforzarse más.

También se agradece que lo compartas en las redes sociales (Facebook, Twitter y Google+), a la derecha tienes accesos rápidos (no cuesta nada :-D)

Derechos de imagen

Mira el resto del tutorial:
Capítulo anterior: Tutorial WPO: Optimizando el Front-end II
Capítulo siguiente: Próximamente…