Compónlo en el HEAD
Martin MichálekActualizado 23/7/20252 minutos lecturaNos gusta WebExpo y nos gusta el rendimiento. Y además, nos gusta Harry Roberts porque sus charlas y artículos siempre profundizan.
Harry, en la edición de este año de WebExpo, explicó cómo el mero orden de los elementos en el <head> puede afectar la velocidad de un sitio web.
Prueba el orden correcto de elementos en <head>
En la charla, se presentó un ejemplo en el que una pequeña distracción estaba costando potencialmente millones de dólares a sus clientes. No esperes un impacto así en tus sitios web; consideramos el ejemplo de Harry como una aguja en un pajar. Un golpe de suerte en la lotería de optimización.
Sin embargo, si piensas que las grandes cuestiones de velocidad ya están resueltas o simplemente quieres comprobar si todo está en orden, utiliza su herramienta CT.CSS.
Es un pequeño fragmento de CSS que te alertará sobre posibles errores en el orden de los elementos en el <head>:
- Añádelo directamente a la página.
- Usa el bookmarklet.
- Guárdalo en Snippets dentro de Chrome DevTools.
La decisión es tuya. ¿Impaciente? Echa un vistazo al demo.
Nosotros lo hemos probado en varios sitios web. Ejemplos:
En la imagen se muestra un sitio web checo muy visitado. ¿Lo reconoces? :-)
Si ves un aviso enmarcado en rojo, tómalo en serio. Puede que justamente el tuyo sea uno de esos sitios donde la corrección puede tener un impacto significativo.
Pero también podrías descubrir que el problema de la velocidad de tu sitio web no reside aquí.
¿Cuál es el orden correcto de elementos en <head>?
Veamos cómo debería ser, al menos según Harry:
<meta charset | http-equiv | viewport>
<title>
<!-- Preconnect (https://web.dev/articles/preconnect-and-dns-prefetch) -->
<link rel="preconnect">
<!-- JS asíncrono (analítica, etc.) -->
<script src="" async></script>
<!-- CSS que contienen @import -->
<link rel="stylesheet" href="…">
<!-- JS sincrónico: -->
<script src="…"></script>
<!-- CSS sincrónico: -->
<link rel="stylesheet" href="…">
<!-- Preload (https://web.dev/articles/preload-critical-assets): -->
<link rel="preload">
<!-- JS asíncrono de baja prioridad: -->
<script src="" defer></script>
<!-- Prefetch y prerender: -->
<link rel="prefetch">
<link rel="prerender">
<!-- Y MÁS: SEO, meta tags, iconos, Open Graph… -->
¿Interesado en más? Echa un vistazo a las diapositivas de la charla de Harry.