Las etiquetas de estilo y las llamadas a las hojas de estilo CSS deben ser colocados antes de los scripts.

Si lo haces así, tu página cargará más rápido, como lo vamos a describir a continuación.

La solución es simplemente asegurarse de que los estilos CSS están por encima de los scripts en la página.

Google ha llegado a esta conclusión probando varios escenarios y combinaciones de estilos y scripts diferentes, sin embargo, hay una razón principal por la que lo siguiente es más rápido:

Optimiza el orden de los estilos y scripts de tu código HTML.
Optimiza el orden de los estilos y scripts de tu código HTML.

Cuando un navegador carga la página web, este lee el código HTML y luego comienza a cargar todo lo que está declarado en el HTML (CSS, scripts, imágenes, etc). Cuando los navegadores comienzan a descargar un script, estos dejan de cargar cualquier otro recurso hasta que se cargue el script.

Google afirma que “las páginas web habituales pasan del 80-90% del tiempo de carga esperando por la red. Una técnica poderosa para reducir la cantidad de tiempo utilizado en espera de la red es deshacerse de los patrones que causan algunos navegadores para descargas recursos en serie.”
¿Cómo optimizar el orden de los estilos y scripts?
Esto se puede hacer cambiando unas líneas en tu código HTML. El lugar donde se declaran los estilos y scripts en el HTML es la cabecera. Aquí hay un ejemplo de una cabecera en HTML:
<head>
<meta name=description content="description"/>
<title>title</title>
<style>
Las instruccions CSS van aquí
</style>
<script type="text/javascript">
Las instrucciones JavaScript van aquí
</script>
</head>
En el código anterior se puede apreciar que las instrucciones de estilo CSS están sobre las instrucciones JavaScript. Si en tu código HTML sucede lo contrario, solo deberás cambiar el orden como se muestra en el código anterior.

A continuación te dejo un video (en inglés) del ingeniero en software de Google, Tony Gentilcore, que nos explica las razones para optimizar el orden de los scripts y estilos CSS.

¿Quieres más?

No te pierdas las actualizaciones del blog y recibe mas información en tu email sobre el correcto “Posicionamiento en Google“.

¡Suscríbete y mantente al día!

Suscríbete…

¿Me Compartes?
Me gustaría conocer tu opinión sobre este artículo en la sección de comentarios que encontrarás a continuación y que lo compartas para que otras personas lo puedan disfrutar. Gracias.
Share on Facebook0Tweet about this on TwitterShare on Google+0

2 comentarios para: Orden de CSS y JS

  1. Nicolás Marchal

    Mi mas sincera enhorabuena.

    Has sido todo un profesional a la hora de aclarar este tema para mi, ya que soy nulo en el tema de html, has hecho fácil lo difícil.

    Un saludo.

    • Gian Oliveira

      Muchas gracias Nicolás. Estoy en fase de actualización de este blog y en breve instalaré la nueva versión. Suscríbete al blog para mantenerte informado de los cambios y actualizaciones. Un saludo!

Deja un comentario

Los campos marcados con * son obligatorios.

Borrar formularioEnviar Comentario