Numero 3 – LoadCSS: Librería JavaScript para cargar CSS asincrono
Cuando hablamos de velocidad de carga para web existen muchas técnicas para optimizar, una de ellas es cargar CSS asíncrono, pero nativamente no es posible y para ello se recurre a JavaScript.
Esta librería es solo una función que permite cargar CSS asíncrono, de esta forma no tenemos que esperar a que cargue todo lo demás y puede agregarse en un archivo independiente para organizar código.
Acepta 3 argumentos:
- href – Para agregar la URL del css fuente.
- before – Agrega el CSS antes del elemento que especifiques.
- media – Es el media type, por defecto es “all”.
Como pueden ver es muy simple pero de gran ayuda, para usarla solo descargas o puedes usar con bower.
https://github.com/filamentgroup/loadCSS
Numero 2 – Critical: Herramienta para detectar CSS critico
Continuando con la optimización en tiempo de carga para un sitio web, tenemos otra técnica, consiste en detectar el CSS critico, es decir, el CSS indispensable para que la primera presentación del sitio web sea posible dejando a un lado el CSS que no es necesario hasta que el usuario interactuar con la web.
Esta herramienta detecta CSS critico y lo distribuye para organizarlo de tal manera que podamos dar prioridad de carga a este.
Características:
- Podemos usarlo con Grunt o Gulp.
- Es altamente configurable
- Genera y alinea las fuentes de CSS criticas
- Minifica el CSS
- Generar basado en resoluciones
- Y mucho mas…
La instalación por supuesto es vía NPM, así que ya saben que es muy fácil.
https://github.com/addyosmani/critical
Numero 1 – Materialize CSS: Framework front-end basado en material design
Después de dar 2 tips muy buenos para optimizar, es hora de dar el mejor tip, un framework para desarrollo de interfaces basado en material design, incluye casi todo lo que podrías esperar de esta tendencia en diseño.
Materialize CSS es nuevo pero al ver todo lo que incluye puedes entender por que se está haciendo tan popular y no tanto por traer material design a un framework, si no por la facilidad de uso.
Características:
Por supuesto tiene un Grid
- Manejo de medie, tablas, tipografia y demás con CSS
- Componentes complejos, por ejemplo Cards, Collections, Forms, Icons, Etc.
- Componentes que requieren Javascript como Dropdowns, Modals, etc.
- Y puede ser modificado con Sass
Puede ser instalado con NPM o Bower, así que no tendrás problema, si te gusta visita el sitio web oficial.
