Optimizar el orden de los estilos y scripts

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.

¿Te ha gustado?

Te estaría muy agradecido si pudieras valorar esta entrada y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este {blog} y ayudas a otras personas que desean aprender.

Valora esta entrada

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas

(2 votos, promedio: 5,00 de 5)

Cargando…

Recibe notificaciones de nuevos artículos

Suscríbete para recibir notificaciones de nuevos artículos en tu correo.

Cuéntanos, ¿qué tal te la has pasado?

Deja un comentario si tienes alguna duda o comparte como ha sido tu experiencia. No necesitas registrarte para comentar. Cuando vayas a escribir tu nombre, marca la casilla Prefiero comentar como invitado y envía tu comentario.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos requeridos están marcados *

Publicar comentario