18087 sujets

Questions générales et questions de débutants

Accélérer 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 (11 Sep 2025 - 19:17)
Salut,
je n'ai pas une réponse précise à ta question, mais puique personne ne répond, je te donne ce que j'ai mis en place et qui ne provoque ni alerte ni retard sur Lighthouse ou autres tests en ligne :
<link rel="preload" href="style.css" as="style">
    <link rel="stylesheet" href="style.css">
    <link rel="preload" href="satisfy-v11-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
    <script src="script.js" defer></script>

Je crois qu'aujourd'hui, il n'est plus nécessaire de proposer woff1. Il me semble que Raphael en parle, wolff2 suffit. Aussi, je refuse de télécharger des fontes externes, toutes sont sur mon serveur. C'est là un point important. Le nombre de sites très connus qui ont une alerte sur les potentiels retards dus aux sources extérieures. Sans compter qu'il faut les déclarer si on applique une politique CSP.
Modifié par Bongota (27 Aug 2025 - 17:18)
Bonjour Bontonga,

Merci de ton suivi.

Bontonga a écrit :
Je crois qu'aujourd'hui, il n'est plus nécessaire de proposer woff1

C'est noté.

Bontonga a écrit :
JAussi, je refuse de télécharger des fontes externes, toutes est sur mon serveur.


Mes fontes sont sur mon serveur.

La question qui me turlupine est que l'URL étant déclarée dans la feuille de style faut-il la re-déclarer dans le head ?
drphilgood a écrit :
la déclaration dans le css suffit pour que çà fonctionne


Certes, cela fonctionne, mais la question est d'accélérer le chargement, ou au moins de répondre au problème soulevé par PageSpeed Insights qui dit que le chargement des polices pourrait être accéléré.
Bonjour,

Vous avez raison de dire qu'il faut télécharger les polices à partir de votre site, éventuellement à partir d'un autre domaine qui vous appartient, mais évitez absolument des solutions non performantes, telles que Google Font ou autres outils du même genre : si le service devient lent, ou même down, et bien votre site aussi.

Je vais présenter deux solutions qui ne réduisent pas le chargement initial, mais qui permettent de mettre en cache certaines ressources du site pour une prochaine visite, ou pour le prochain chargement d'une page sur le site, ce qui est déjà énorme.

Déjà, pour une optimisation dans le but de précharger des ressources non encore appelée (mais vous savez que vous allez en avoir besoin), vous pouvez mettre une balise de ce type à adapter dans votre <head> :
<link rel="preload" href="/fonts/notoSans-Regular.woff2" as="font" type="font/woff2" crossorigin="">

Pour une mise en cache plus poussée, c'est totalement possible, mais il faudra alors passer par un service worker, on se rapproche alors d'une PWA, exemple :

const CACHE_NAME = 'v1'

const resourcesToCache = [
  '/',
  '/styles/main.css',
  '/scripts/main.js',
  '/fonts/notoSans-Regular.woff2',
  '/fonts/notoSerif-Regular.woff2',
  '/sprites/util.svg',
  '/medias/images/logo/logo.svg',
]

// Fonction pour ajouter des ressources au cache
async function addResourcesToCache(resources) {
  try {
    const cache = await caches.open(CACHE_NAME)
    await cache.addAll(resources)
  } catch (error) {
    console.error(`Erreur lors de l'ajout des ressources au cache: ${error}`)
  }
}

Voir ce code dans son contexte ici : GitHub

Notez-bien que cette dernière technique n'a rien à voir avec la mise en cache du navigateur, c'est une mise en cache de haut niveau prévu par l'API Cache native à JavaScript.
Modifié par Olivier C (28 Aug 2025 - 18:42)
Bonjour,

Pour faire la synthèse de tout ce qui a été écrit, voilà ce que je compte faire.

1) Je vire la fonte Woff devenue inutile.

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


Je "preload" la font dans le head.:

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


Mon site est déjà très rapide, je n'utilise pas le code Javascript sophistique d'Olivier C que je ne maîtrise pas...

Je "preload" la feuille de style dans le head.

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


J'ai copié le code de Bongota sur deux lignes.

Je "defer" le script JS à la fin du body.

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


Cela vous parait-il correct ?
J'attends votre avis avant de lancer le test.



.
Modifié par boteha_2 (06 Sep 2025 - 17:24)
Bonjour,

Prelaod des fontes.

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


La console de Firefox signale :
La ressource à l’adresse « https://www.monsite.com/font/KFOmCnqEu92Fr1Mu4mxK.woff2 » préchargée avec le préchargement de lien n’a pas été utilisée après quelques secondes. Assurez-vous que tous les attributs de la balise de préchargement sont définis correctement.

Puis-je ignorer cette alerte de la console ?
Administrateur
boteha_2 a écrit :
Puis-je ignorer cette alerte de la console ?
Cette alerte mentionne simplement que le fichier préchargé n'a pas été demandé par le navigateur avant un certain temps (en gros la police n'a pas été affichée et qu'elle n'est pas si "critique" que ça).
Cela signifie globalement que ton preload n'a servi à rien. Ce n'est pas gênant de le laisser quand même... sauf si tu preloades beaucoup d'autrs fichiers (qui pourraient - eux - être critiques).
Bonjour Raphaël,

Pourtant, dans la feuille de style :

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

/* Et 3 autres variantes de Roboto */

body {font-family: Roboto, Helvetica, Arial, sans-serif}


J'appelle bien en priorité la police Roboto.

Le message dans la console n'est-il pas dû à la mise en cache de la police ?

PS : j'ai lu votre littérature un peu dispersée sur les polices systèmes, je pense les mettre en œuvre, avez-vous la liste actuelle et complète ?
Administrateur
boteha_2 a écrit :
J'appelle bien en priorité la police Roboto.
Oui oui, ce n'est pas le problème.
Je n'avais pas vu le `local('Roboto')` avant.
J'ai une hypothèse à verifier : puisque ton navigateur dispose déjà de Roboto (tu lui dis de charger celle en local), il considère peut-être que tu lui as demandé de la précharger pour rien.
Est-ce que tu as toujours ce warning en supprimant le chemin local (qui me semble parfaitement inutile en général) ?
Bonjour Raphaël,

Merci de ton suivi.

Raphaël a écrit :
Est-ce que tu as toujours ce warning en supprimant le chemin local (qui me semble parfaitement inutile en général) ?


Donc j'ai enlevé le chemin local dans la feuille CSS.

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

// etc...

body {font-family: Roboto, Helvetica, Arial, sans-serif}


Dans la console de Chrome :
Aucun message à propos des fontes
Error with Feature-Policy header: Unrecognized feature: 'vibrate'.

Dans la console de Firefox :
Les mêmes alertes pour les 4 variantes.

Console Firefox a écrit :
La ressource à l’adresse « https://www.monsite.com/font/KFOkCnqEu92Fr1Mu51xIIzI.woff2 » préchargée avec le préchargement de lien n’a pas été utilisée après quelques secondes. Assurez-vous que tous les attributs de la balise de préchargement sont définis correctement.


Si je vide le cache, alors je n'ai plus qu'une seule alerte qui est celle de la police ITALIC non utilisée sur la page.
Administrateur
Oui : vider le cache était nécessaire pour vérifier, j'aurais dû te prévenir.

Le comportement pour la police "italic" est celui souhaité : il te prévient logiquement que tu précharges un fichier qui n'est pas utilisé. Mais ce n'est pas gênant du tout sauf si tu n'utilises ce fichier sur aucune autre page.

C'était donc bien le chemin local() qui biaisait la situation :
- Soit tu le conserves : tes visiteurs ne chargeront pas la police s'ils l'ont déjà en cache... mais il y aura un avertissement dans la console.
- Soit tu le supprimes : tes visiteurs chargeront forcément la police même en l'ayant déjà en cache... mais il y aura plus d'avertissement.

Pour info, j'ai déjà entendu parler d'effets "pervers" de local() : certains visiteurs disposaient en cache d'une ancienne version du fichier de police et certains caractères récents ou modifiés dans une version plus récente du fichier n'étaient alors pas affichés.
Hello,

Raphael a écrit :

C'était donc bien le chemin local() qui biaisait la situation :
- Soit tu le conserves : tes visiteurs ne chargeront pas la police s'ils l'ont déjà en cache... mais il y aura un avertissement dans la console.
- Soit tu le supprimes : tes visiteurs chargeront forcément la police même en l'ayant déjà en cache... mais il y aura plus d'avertissement.


Qu'en penses-tu ?
Charger 4 petites variantes semble très rapide.
En même temps mettre les polices en cache semble une bonne pratique. J'ai noté l'effet pervers dont tu parles mais je suppose qu'une police aussi répandue que Roboto doit être assez stable.
J'ai viré les polices Woff de secours, une bonne idée ?
Par ailleurs, j'ai lu dans votre guide que pour plus de plus de 3 variantes vous conseillez une fonte variable, dois-je chercher dans cette direction ?
Comme tu as vu, je ne preload que les 4 variantes de Roboto et 2 feuilles de style.

Pour le coup les feuilles de style sont modifiées assez souvent mais je suppose que le navigateur détecte les changements et met à jour le cache si nécessaire.

Dernier point, dans le .htaccess :

Header always set Feature-Policy "geolocation 'none'; vibrate 'none'"


Chrome semble ne pas connaître "vibrate", cette déclaration semble néanmoins conseillée un peu partout.
Modifié par boteha_2 (11 Sep 2025 - 19:16)
Administrateur
Alors, dans l'ordre :

1. "Charger 4 petites variantes semble très rapide." -> Juste pour info : chez nous au-delà de 3 variantes on préconise d'utiliser une Variable Font.

2. "J'ai viré les polices Woff de secours, une bonne idée ?" -> Oui sans aucun doute

3. "Comme tu as vu, je ne preload que les 4 variantes de Roboto et 2 feuilles de style." -> On ne preload jamais des feuilles de styles. Je pense de toute façon que le navigateur ne va pas tenir compte du preload puisque de toute façon les styles sont chargés en priorité haute (ils sont nécessaires pour construire l'arbre du document)

4. "Chrome semble ne pas connaître "vibrate"" -> Aucune idée, je n'en avais jamais entendu parler.
Bonjour Raphaël,

1. OUI, je sais, je vais creuser le sujet.

2. Ok.

3. C'est noté,
J'espère que Bongota suit toujours, lui aussi preload les CSS.

Je signale néanmoins que sans preload PageSpeed Insights signale pour les deux feuilles de style :
Les requêtes bloquent le rendu initial de la page, ce qui peut causer un retard LCP. Le report ou l'intégration de ces requêtes réseau peut les écarter du chemin critique.LCP FCP

/cs/f.css(www.monsite.com) 5,4 KiB
480?ms

/cs/cf.css(www.monsite.com) 5,4 KiB
180?ms

4. Console Chrome :

Header always set Feature-Policy "geolocation 'none'; vibrate 'none'"


Error with Feature-Policy header: Unrecognized feature: 'vibrate'.
Modifié par boteha_2 (12 Sep 2025 - 16:04)
Prévenir un modérateur
Répondre au sujet
Aller à