Accéléer le chargement des fontes et feuilles CSS

Bonjour,

Je rebondis sur deux articles de Raphaël.

Les aides au préchargement de ressources

CSS font-display et le chargement des polices web

Je charge quatre polices, un Roboto avec divers font-style et font-weight, avec font-face dans la feuille de style, par exemple :

@font-face
{
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'),
url(../font/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'),
url(../font/KFOmCnqEu92Fr1Mu4mxM.woff) format('woff');
font-display: swap;
}

@font-face
{
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto'),
url(../font/KFOkCnqEu92Fr1Mu51xIIzI.woff2) format('woff2'),
url(../font/KFOkCnqEu92Fr1Mu51xIIzQ.woff) format('woff');
font-display: swap;
}

PageSpeed Insights a écrit :
Navigation initiale
/j.php?refcable=85&a=A8CM%255E85(www.monsite.com)
- 188?ms, 7,18 KiB
/cs/cf.css(www.monsite.com)
- 288?ms, 5,20 KiB
/font/KFOmCnqEu….woff2(www.monsite.com)
- 435?ms, 16,12 KiB
/font/KFOkCnqEu….woff2(www.monsite.com)
- 438?ms, 17,67 KiB
/font/KFOlCnqEu….woff2(www.monsite.com)
- 389?ms, 16,25 KiB
/font/KFOlCnqEu….woff2(www.monsite.com)
- 389?ms, 16,19 KiB
/cs/f.css(www.monsite.com)
- 302?ms, 5,18 KiB
/dp/j.js(www.monsite.com)
- 311?ms, 2,88 KiB

First Contentful Paint
1,2 s
Largest Contentful Paint
1,4 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0
Speed Index
3,7 s

Bon, PageSpeed Insights semble dire que le chargement des deux feuilles de style, des fontes et du script JS doivent être optimisés.

Ce que je pense faire et quelques questions.

Le script JS ne joue aucun rôle dans l'affichage de la page.
Dans le html :

<script defer src="/dp/j.js">

Les fontes sont bloquantes, il faut les charger en priorité.
Dans le HEAD :

<link rel="preload" as="font" href="../font/KFOmCnqEu92Fr1Mu4mxK.woff2" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="../font/KFOkCnqEu92Fr1Mu51xIIzQ.woff" type="font/woff" crossorigin="anonymous">

Là je ne suis pas sûr, le chemin est donné dans la feuille de style, faut-il le redonner dans le HEAD ?

Pour prioritiser les feuilles de style, je suppose qu'il faut ajouter rel=prelaod dans l'appel par le HEAD :

<link rel="preload" as "stylesheet" type="text/css" href="cs/cf.css">

Qu'en pensez-vous ?
Modifié par boteha_2 (24 Aug 2025 - 13:02)