Tutorial WPO: Optimizando el Front-end III

velocity

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:

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:

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:

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...

3 comentarios en “Tutorial WPO: Optimizando el Front-end III

    1. Hola Javier,
      en principio la parte del front-end está terminada (aunque quedan cosillas más de pro).

      Algún día haré un par de entradas del lado del servidor o cosas que queden por ahí.

      Saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.

¡Únete ya a BFLabs GRATIS! Estreno próximamente... Más información