# Précharger les polices d’une fiche produit avec un lien rel=preload plutôt qu’un import CSS

> Un import de police via @font-face dans une feuille CSS retarde son chargement d'un aller-retour réseau complet. La solution : un preload ciblé, étape par étape.

- Auteur : WordPress Développement
- Publié le : 2024-06-30
- Mis à jour le : 2024-06-30
- Catégorie : E-commerce
- URL : https://www.wpmoderne.fr/ecommerce/precharger-polices-fiche-produit-preload-woocommerce/

## L’essentiel

- Une police déclarée seulement en CSS charge en retard
- Le preload doit cibler le fichier réel, pas la feuille de style
- Un preload mal ciblé peut ralentir le reste de la page

Une police déclarée uniquement via une règle `@font-face` dans une feuille CSS ne commence à être demandée par le navigateur qu'après le téléchargement et l'analyse complète de cette feuille de style. Sur une fiche produit où le prix ou le titre utilise une police personnalisée, ce délai suffit à provoquer un changement visible de mise en page une fois la police enfin chargée, ce qui dégrade le score de stabilité visuelle de la page.

Le lien `rel="preload"` permet de démarrer le téléchargement de cette police en parallèle, sans attendre l'analyse de la feuille de style. Voici comment le mettre en place correctement sur une fiche produit WooCommerce, étape par étape.

## Étape 1 : identifier la police réellement critique

Précharger toutes les polices du site produirait l'effet inverse de celui recherché, en saturant la bande passante disponible dès le début du chargement de la page. Seule la police utilisée dans le contenu visible dès l'affichage initial de la fiche produit — généralement celle du titre ou du prix — mérite ce traitement, pas une police utilisée uniquement dans le pied de page ou dans un contenu situé sous la ligne de flottaison.

## Étape 2 : retrouver le chemin exact du fichier de police

Le lien de préchargement doit cibler directement le fichier de police physique, dans le format effectivement servi au navigateur, et non l'URL de la feuille de style qui le déclare. Ce chemin se retrouve généralement dans l'onglet réseau des outils de développement du navigateur, en filtrant sur les requêtes de type police, une fois la page chargée normalement une première fois.

## Étape 3 : ajouter le lien de préchargement dans l'en-tête du document

```
add_action( 'wp_head', function () {
    if ( ! is_product() ) {
        return;
    }
    $chemin_police = get_stylesheet_directory_uri() . '/polices/titre-produit.woff2';
    printf(
        '<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>',
        esc_url( $chemin_police )
    );
}, 1 );
```

La condition `is_product()` limite ce préchargement aux seules fiches produit, ce qui évite d'imposer ce coût réseau sur des pages où la police concernée n'est pas utilisée. L'attribut `crossorigin` est nécessaire même pour une police servie depuis le même domaine, faute de quoi le navigateur télécharge la police une seconde fois lors de son usage réel.

> L'essentiel à retenir : Une police déclarée seulement en CSS charge en retard ; Le preload doit cibler le fichier réel, pas la feuille de style ; Un preload mal ciblé peut ralentir le reste de la page

## Étape 4 : vérifier que la police est bien réutilisée, pas rechargée

Une erreur fréquente consiste à oublier l'attribut `crossorigin`, ou à préciser un type MIME incorrect dans l'attribut `type` : dans les deux cas, le navigateur télécharge la police une première fois via le préchargement, puis une seconde fois lorsqu'elle est réellement demandée par la feuille de style, ce qui annule tout le bénéfice recherché et alourdit la page au lieu de l'alléger.

La vérification se fait dans l'onglet réseau des outils de développement : une seule requête doit apparaître pour le fichier de police concerné, marquée comme initiée par le lien de préchargement plutôt que par la feuille de style.

## Étape 5 : mesurer l'effet sur la stabilité visuelle

- Comparer la valeur du score de décalage cumulé de mise en page avant et après l'ajout du préchargement, sur un échantillon de plusieurs chargements.
- Vérifier que le préchargement ne retarde pas d'autres ressources critiques, en particulier l'image principale du produit, en observant l'ordre des requêtes dans l'onglet réseau.
- Répéter la mesure sur une connexion simulée plus lente, car l'effet du préchargement est plus visible sur un réseau contraint que sur une connexion rapide de développement.

### Un cas limite : la police variable

Sur une fiche produit qui utilise une police variable plutôt que plusieurs fichiers statiques par graisse, le préchargement doit cibler le fichier variable unique, et non l'une des graisses qu'il expose. Une erreur fréquente consiste à précharger un fichier statique conservé par ailleurs pour un usage secondaire, alors que la police réellement demandée par la règle `@font-face` critique est le fichier variable : dans ce cas, le préchargement ne sert à rien, puisqu'il ne correspond à aucune requête effectivement déclenchée par la feuille de style.

## En résumé

Ce préchargement ciblé ne remplace pas une bonne stratégie générale de chargement de polices, mais il traite spécifiquement le cas d'une police critique déclarée trop tard dans la chaîne de chargement d'une fiche produit. Bien ciblé, il économise un aller-retour réseau complet ; mal ciblé, il peut au contraire retarder d'autres ressources plus importantes pour l'affichage initial de la page.