En un diseño web vamos a tener una serie de recursos o componentes que deben descargarse al browser. Estos recursos son principalmente:
- El HTML
- Los archivos CSS
- Los archivos JavaScript
- Las fuentes e
- Imágenes
Todo lo anterior a excepción del HTML debe estar solicitado de forma optima.
Los archivos CSS
El CSS ya he explicado que se divide en CSS crítico y CSS no crítico. El CSS crítico es el que se necesita para el renderizado de la página por encima del folio, es decir, lo primero que el usuario verá al descargarse la página.
Ese código CSS crítico debe estar insertado inline en la cabecera del archivo HTML entre las etiquetas <head></head>. El resto de los códigos CSS, los no críticos, deben estar solicitarse por medio de una etiqueta <link> pero de forma diferida, preferiblemente con el siguiente formato:
<link rel="preload" as="style" id="style-css" href="styles.css" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>Los archivos Javascripts
Parecido a los archivos CSS, los archivos Javascript deben tener una referencia en la cabecera del archivo HTML entre las etiquetas <head></head>; y debes ser cargador de manera diferida con el atributo defer, como se muestra abajo:
<script type="text/javascript" defer src="script.js" id="script-js" ></script>Sería ideal que los códigos js no sean necesario para el renderizado de la página, pero si lo fuese alguno, entonces habría que insertar ese código de manera inline en la cabecera de la página entre etiquetas <script></script>.
Las fuentes
Las fuentes deben estar cargadas en el servidor, no obstante, se les debe realizar una precarga antes de que el renderizado llegue a la parte del HTML que las solicita, eso se hace colocando referencias a ellas en la cabecera de la página en etiquetas <link> insertando el parámetro rel=»preload» as=»font», como se muestra abajo:
<link rel="preload" as="font" href="fa-brands-400.woff2" crossorigin>Las imágenes
Todas las imágenes que van a ser insertadas en la página solicitada, especialmente las que están por encima del folio, deben precargarse; así entonces el browser no tiene que llegar hasta la parte del HTML en que se le solicita alguna imagen.
Esa precarga se solicita igualmente en la cabecera de la página con la etiqueta <link> y con los parámetros rel=»preload» as=»image», de la siguiente manera:
<link rel="preload" href="imagen.jpg" as="image">