L’optimització d’un lloc web pot arribar a ser un desafiament molt gran. Entre les coses a millorar, destaca el bloqueig dels elements mentre carrega la pàgina: css, javascript, fonts, vídeos.
Des de fa un temps,HTML5 ha implementat la precàrrega d’aquestos elements, el que ens farà millorar el temps de càrrega i la optimització en PageSpeed Insights.
Aquests codis van entre <head></head>. Ací teniu uns exemples.
Preload per a fulles d’estils CSS:
<link rel="preload" href="style.css" as="style">
Preload per a arxius Javascript:
<link rel="preload" href="main.js" as="script">
Preload per a Vídeos
<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
<link rel="preload" href="sintel-short.webm" as="video" type="video/webm">
Tipografies com FontAwesome i altres:
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin>
Preload per a Imatges:
<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
Fonts de Informació
Preload key requests en WebDev
Preloading content with rel=”preload” – Mozilla Developers.