sofiasoldano / finlandia

0 stars 1 forks source link

Implementación separación above/below #4

Open Martin-IyM opened 6 years ago

Martin-IyM commented 6 years ago

Para una mejor experiencia de usuario el código debe estar pensado para mostrar de la manera más eficiente el primer scroll o el "above the fold". Para esto solo se debe incluir en el head lo mínimo indispensable, y en lo posible solo estilos (javascript bloquea carga, salvo que sea async).

Los estilos below the fold se deben incluir en la posición que ocurre el fold, luego del html que genera el primer scroll.

Los scripts o deben incluirse async y tener código para detectar el momento de sincronización (al estilo del ready de jQuery), o incluirse una vez generado el html que manejan. Por ejemplo, el script para el above the fold se puede incluir en el momento del fold y el script para el below al final del html.

Las fuentes es preferible incluirlas al momento del fold, y si hay texto que usa la fuente, esconderlo hasta que se incluya la fuente. Dependiendo del navegador, el render puede bloquearse a la espera de que se termine de cargar la tipografia utilizada. Y si es posible utilizar mecanismos asincronicos de carga de fuentes usando la API javascript del proveedor, y aplicar reglas CSS que oculten los textos mientras la tipografia es descargada.

Martin-IyM commented 6 years ago

Olvide comentar que el contenido del menu no debe considerarse above the fold aún cuando el boton que lo abre lo esté.

En estos casos el botón debería quedar oculto hasta que se cargue el script below the fold. Asimismo el contenido del menu deberia quedar relegado al final de la pagina, ya que al estar oculto inicialmente no tiene prioridad en mostrarse, o mejor dicho tiene menor prioridad que el resto de la página.

fedefog commented 6 years ago

Tincho sobre esto hablemos que no entendemos como implementar esto.

Martin-IyM commented 6 years ago

Dale, de todas maneras mi intención era ir armandolo en el código para que lo vean.