Ver todos
  • Escrito por Alan Gerardo Márquez
  • Rol en Mixen: Desarrollo Front End

Consejos y Trucos CSS que deberías saber: Parte 5

5. Buenas practicas css para mejorar velocidad de carga

La velocidad de carga de una web es uno de los factores más importantes en el desarrollo web (Google ya incluyo la velocidad de carga dentro del posicionamiento web), y aunque existen muchas maneras de disminuir la velocidad de carga, esta vez voy a hablar únicamente del CSS.

Estas reglas que mencionaré son desde que se hace el maquetado de la web.

1.    Códigos hexadecimales en colores.
Existen diferentes formas para declarar colores en CSS, pero lo que nos importa es que ocupen menos bytes.
Por ejemplo: color: #FFFFFF; nos ocupa mas bytes que color: #FFF;.

2.    Prefijos para compatibilidad de navegadores que ya no se usan.
Cuando los navegadores empiezan a implementar nuevas propiedades es común usar prefijos para que funcionen correctamente. Con el paso del tiempo, los navegadores empiezan integrando las propiedades sin el uso de los prefijos. 
Por ejemplo: 
-webkit-transform: value;
-moz-transform: value;
-ms-transform: value;
-o-transform: value;

transform: value;
Lo importante es conocer las novedades del nuevo “CSS4”.

3.    Uso de propiedades shorthand.
Regla General: Siempre que declaremos mas de un valor para una propiedad, ejemplo margin, debemos usar el shorthand para ahorrar espacio.

4.    Omitir el 0
Recuerda que en CSS el valor de 0 siempre es 0, por lo que cualquier unidad que te quieras referir (px, em, rem, etc..) no necesitas escribir la unidad.
Por ejemplo: 
margin: 0 20px 1.5rem .78em;

 

Es muy importante que apliquemos estas buenas practicas de CSS desde la fase de maquetación para ahorrarnos unos cuantos bytes y posicionar mejor dentro del buscador.