18086 sujets

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

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)
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)
Prévenir un modérateur
Répondre au sujet
Aller à