Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.


Apoya la comunidad con $1 USD, queremos mejorar y compartir más conocimiento.

Tips #4 – LoadCSS, Critical y Materialize


  Publicado hace |  Etiquetas: , , , , , ,

Imagen de previsualización de YouTube

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.

http://materializecss.com/

comments powered by Disqus