Mejora la velocidad de carga de tus páginas web (II)

Coloca las hojas de estilo (CSS) al inicio de la página

Si colocas las hojas de estilo en la cabecera de la página (en el HEAD), aparentemente la página carga más rápido. Esto se debe a que colocar las hojas de estilo en el HEAD, permite a la página cargarse de forma progresiva.

Logo CSS La carga progresiva significa que el navegador muestra cualquier contenido que tenga tan pronto como le sea posible. Esto es especialmente importante en páginas de mucho contenido y para usuarios con conexiones a Internet lentas. La importancia de mostrar a los usuarios un "feedback visual", como indicadores de progreso, está bien documentado.

En el caso que nos ocupa, el indicador de progreso es la propia página web. Cuando el navegador carga la página de forma progresiva, la cabecera, la barra de navegación, el logo, etc., todo sirve como respuesta visual para el usuario que está esperando que la página cargue por completo. Esto mejora la experiencia de usuario.

El problema con poner las hojas de estilo cerca del final de la página, es que no permite la carga progresiva en muchos navegadores, incluido Internet Explorer. Estos navegadores bloquean la carga para evitar tener que redibujar elementos de la página si cambia su estilo. En este caso el usuario se queda esperando, mirando una página en blanco.

Las especificaciones HTML establecen con claridad que las hojas de estilo se incluyan dentro de la cabecera (HEAD) de la página. No lo dudes, y sigue esta regla. Es la mejor solución para mejorar la experiencia de tus usuarios.

Fuente: http://developer.yahoo.com/performance/rules.html#css_top

Compartir

Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+