Qu’est-ce que le préchargement et quel est son impact sur les éléments essentiels du Web et votre expérience utilisateur ?

Selon Console de recherche Google (CGC), un domaine d’amélioration que j’ai sur Martech Zone est l’amélioration de mes performances mobiles selon Éléments essentiels du Web (CWV), un ensemble de mesures que Google utilise pour évaluer les performances des pages et l’expérience utilisateur. Mon site utilise des polices personnalisées et j’ai remarqué qu’il y a un certain retard dans le chargement de la page sur les appareils mobiles, car ces polices sont chargées tardivement via CSS. J’ai pu améliorer considérablement mes performances mobiles en préchargeant mes polices.

Qu’est-ce que le préchargement ?

Le préchargement est une technique puissante utilisée dans le développement Web pour améliorer les performances de chargement d’un site Web en demandant au navigateur de prioriser des ressources spécifiques. En demandant au navigateur de charger certains éléments plus tôt qu’il ne le ferait habituellement, le préchargement améliore l’expérience utilisateur et peut avoir un impact significatif sur

Quel est l’impact du préchargement sur Core Web Vitals ?

Éléments essentiels du Web se composent de trois mesures principales :

• La plus grande peinture de contenu (PCL) Mesure la rapidité avec laquelle le contenu principal se charge sur une page Web. Cela devrait se produire dans les 2,5 secondes suivant le la page commence d’abord à se charger. Le préchargement peut contribuer à améliorer le LCP en réduisant le temps nécessaire à l’apparition du contenu essentiel (comme une image de héros ou un texte principal).
• Délai de première entrée (FID): mesure le moment où un utilisateur interagit pour la première fois avec votre site (comme cliquer sur un bouton) et le moment où le navigateur répond. Le FID doit être inférieur à 100 millisecondes. Le préchargement profite indirectement au FID en garantissant que les ressources nécessaires sont prêtes pour l’interaction, empêchant ainsi le navigateur d’être occupé à gérer des ressources retardées.
• Changement de disposition cumulatif (CLS): Mesure la stabilité visuelle d’une page. Les pages doivent avoir un score CLS inférieur à 0,1. Bien que le préchargement n’affecte pas directement CLS, il réduit les risques de retard des ressources provoquant des changements de mise en page, où les éléments de la page se déplacent de manière inattendue lors de leur chargement.

Comprendre le blocage de rendu

Certaines ressources, comme CSS et JavaScript, peuvent bloquer le rendu. Le navigateur doit charger et traiter ces fichiers avant d’afficher quoi que ce soit à l’écran. Par exemple, si le fichier CSS principal d’une page bloque le rendu, le navigateur attendra de l’afficher jusqu’à ce qu’il ait entièrement téléchargé et traité ce fichier CSS. Cette période d’attente peut retarder la mise à disposition de la page Première peintureou le moment où le contenu apparaît pour la première fois à l’écran. En préchargeant les ressources bloquant le rendu, vous pouvez réduire cette période d’attente et faire apparaître votre page plus rapidement.

Quand devriez-vous utiliser le préchargement ?

Le préchargement est plus efficace lorsque des éléments spécifiques sont essentiels au rendu initial de votre page. Il est avantageux d’utiliser le préchargement lorsque :

• Contenu critique au-dessus de la ligne de flottaison dépend d’actifs spécifiques, tels qu’une image de héros, une fonctionnalité JavaScript clé ou des polices principales. Cela garantit que les utilisateurs voient immédiatement le contenu principal.
• Grandes images ou images d’arrière-plan qui apparaissent en haut de la page doivent se charger rapidement afin que les utilisateurs ne regardent pas les espaces vides ou les espaces réservés.
• Polices personnalisées qui sont essentiels à l’identité de la marque et à l’expérience utilisateur, contribuant ainsi à éviter une Flash de texte sans style (FAUX) où le texte s’affiche initialement dans une police de secours jusqu’au chargement de la police personnalisée.
• Scripts clés et feuilles de style requis pour les fonctionnalités principales de la page sont chargés tôt pour éviter blocage du rendu des retards.

Avantages et inconvénients du préchargement

Bien que le préchargement soit un outil incroyable, il peut également être abusé et provoquer d’autres problèmes :

Comment rédiger des directives de préchargement pour chaque type d’actif

Différents actifs ont des exigences uniques en matière de préchargement. Voici un guide pour configurer le préchargement pour différents types de ressources :

1. Polices

Les polices personnalisées bloquent souvent le rendu, surtout si elles sont essentielles pour le contenu au-dessus de la ligne de flottaison. Les utilisateurs peuvent rencontrer un flash de texte sans style (FAUX) lorsque les polices se chargent lentement, où les polices de secours s’affichent jusqu’au chargement de la police personnalisée. Vous pouvez éviter cela en utilisant le <link rel="preload"> balise avec les attributs appropriés :

<link rel="preload" href="https://martech.zone/fonts/my-custom-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

En préchargeant les polices, vous vous assurez qu’elles sont disponibles dès que nécessaire, évitant ainsi les changements de mise en page et améliorant l’expérience utilisateur. Dans WordPress, j’ai pu précharger les polices hébergées sur mon serveur en incluant la fonction suivante dans functions.php dans mon thème enfant.

Preload fonts from the site
function mtz_preload_fonts() {
    $child_theme_uri = get_stylesheet_directory_uri();

    // Preload each font on a separate line
    echo '<link rel="preload" href="' . $child_theme_uri . '/fonts/opensans_regular/OpenSans-Regular-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">';
    echo '<link rel="preload" href="' . $child_theme_uri . '/fonts/opensans_semibolditalic/OpenSans-SemiboldItalic-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">';
    echo '<link rel="preload" href="' . $child_theme_uri . '/fonts/muli_bold/muli-bold-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">';
}
add_action('wp_head', 'mtz_preload_fonts');

2. Images

Le préchargement est idéal pour les images critiques, comme une image de héros en haut de la page. Pour précharger des images, utilisez le <link rel="preload"> taguer avec as="image":

<link rel="preload" href="https://martech.zone/images/hero-image.jpg" as="image">

Cependant, limitez le préchargement aux seules images essentielles. Charger trop d’images à la fois peut surcharger le navigateur et retarder le chargement de la page.

3. Feuilles de style CSS

Les fichiers CSS bloquent souvent le rendu par défaut, ce qui signifie que le navigateur doit les télécharger et les appliquer avant d’afficher un contenu. Pour vous aider à prioriser la feuille de style principale, vous pouvez la précharger avec :

<link rel="preload" href="https://martech.zone/css/main-styles.css" as="style">

Si vous préchargez CSS, n’oubliez pas d’inclure un fichier régulier <link rel="stylesheet"> balise à des fins de secours, car le navigateur peut ne pas appliquer immédiatement les feuilles de style préchargées.

4. Fichiers JavaScript

Le préchargement de JavaScript est utile pour les scripts qui doivent être exécutés immédiatement pour garantir le bon fonctionnement de la page. N’oubliez pas que les fichiers JavaScript peuvent également bloquer le rendu, c’est donc une bonne idée de précharger uniquement les scripts essentiels :

<link rel="preload" href="https://martech.zone/js/critical-script.js" as="script">

Évitez de précharger des fichiers JavaScript qui ne sont pas cruciaux pour la fonctionnalité initiale de la page. Si le navigateur est surchargé de scripts bloquant le rendu, cela peut ralentir le rendu.

Conclusion

Le préchargement est une technique précieuse pour optimiser les performances de chargement d’un site Web et améliorer les Core Web Vitals, en particulier la métrique LCP. Lorsqu’il est utilisé de manière réfléchie, le préchargement des ressources critiques garantit que le contenu essentiel se charge rapidement, conduisant à une meilleure expérience utilisateur et à des avantages potentiels en matière de référencement. Cependant, une utilisation excessive du préchargement peut se retourner contre vous, ralentir la page et gaspiller des ressources.

Concentrez-vous sur le préchargement uniquement des éléments au-dessus de la ligne de flottaison les plus importants, tels que les polices, les images de héros et les fichiers CSS ou JavaScript essentiels. En comprenant quelles ressources bloquent le rendu et en mettant en œuvre le préchargement de manière stratégique, vous pouvez accélérer le chargement de votre site Web, créant ainsi une expérience utilisateur plus fluide et augmentant la visibilité de votre site dans les résultats de recherche.