{"id":71167,"date":"2024-11-25T07:00:00","date_gmt":"2024-11-25T15:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=71167"},"modified":"2025-05-26T07:38:10","modified_gmt":"2025-05-26T14:38:10","slug":"core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr\/","title":{"rendered":"Core Web Vitals : Comment \u00e9viter les pi\u00e8ges de performances des polices web"},"content":{"rendered":"\n<p>Les polices web donnent de la personnalit\u00e9 \u00e0 ton site, mais elles ajoutent aussi du poids.<\/p>\n\n\n<p>Et si tes polices mettent trop de temps \u00e0 charger, les utilisateurs restent fix\u00e9s sur un \u00e9cran vide. Pire encore, ton site peut sembler instable car le texte se d\u00e9place de mani\u00e8re inattendue.<\/p>\n\n\n<p>Cela nuit \u00e9galement aux <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/improve-core-web-vitals\/\" rel=\"noopener\">Core Web Vitals<\/a> \u2014 les indicateurs qui affectent directement votre classement dans les recherches et l&#8217;exp\u00e9rience utilisateur.<\/p>\n\n\n<p>Ici, chaque milliseconde compte.<\/p>\n\n\n<p>Alors, comment peux-tu conserver ton choix de polices web sans sacrifier les performances ?<\/p>\n\n\n<p>D\u00e9composons cela, \u00e9tape par \u00e9tape.<\/p>\n\n\n<p>Mais d&#8217;abord, que sont exactement les polices s\u00fbres pour le web et les polices web ?<\/p>\n\n\n<h2 id=\"h-what-are-web-safe-fonts\" class=\"wp-block-heading\">Quelles Sont Les Polices S\u00fbres Pour Le Web ?<\/h2>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/web-safe-fonts\/\" rel=\"noopener\">Les polices s\u00fbres pour le web<\/a> sont les options \u00e9prouv\u00e9es qui fonctionnent partout. Ce sont des polices que la plupart des appareils poss\u00e8dent d\u00e9j\u00e0, ce qui signifie que tu peux compter sur elles pour se charger rapidement.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"877\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_.webp\" alt=\"Diagramme expliquant ce que sont les polices s\u00e9curis\u00e9es pour le web; montrant un serveur se connectant \u00e0 un navigateur et vice versa, et le navigateur \u00e0 l'ordinateur de l'utilisateur et les polices de retour au navigateur\" class=\"wp-image-58001 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-300x164.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1024x561.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-768x421.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1536x842.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-600x329.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1200x658.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-730x400.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1460x800.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-784x430.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-1568x859.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/01_what_are_websafe_fonts_-877x481.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/877;\" \/><\/figure>\n\n\n<p>Voici les polices s\u00fbres pour le web que tu peux utiliser :<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Arial<\/li>\n\n\n\n<li>Times New Roman<\/li>\n\n\n\n<li>Verdana<\/li>\n\n\n\n<li>Trebuchet MS<\/li>\n\n\n\n<li>Courier<\/li>\n\n\n\n<li>Impact<\/li>\n\n\n\n<li>Georgia<\/li>\n\n\n\n<li>Comic Sans MS<\/li>\n\n\n<\/ul>\n\n\n<p>M\u00eame avec des choix limit\u00e9s, un designer comp\u00e9tent peut utiliser ces polices de mani\u00e8re cr\u00e9ative.<\/p>\n\n\n<p>Mais, les polices adapt\u00e9es au web sont souvent surutilis\u00e9es et donnent \u00e0 ton site web une sensation de \u00ab<em>similarit\u00e9<\/em>\u00bb \u2014 m\u00eame lorsque tu as investi beaucoup d&#8217;effort et d&#8217;argent dans la conception du site.<\/p>\n\n\n<p>Alors, comment le rendre plus joli ?<\/p>\n\n\n<p>Avec des polices web.<\/p>\n\n\n<h2 id=\"h2_what-are-web-fonts\" class=\"wp-block-heading\">Quelles Sont Les Polices Web ?<\/h2>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"885\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts.webp\" alt=\"exemple de diff\u00e9rentes polices Google montrant l'exemple avec la phrase &quot;Tout le monde a le droit \u00e0 la libert\u00e9 de pens\u00e9e&quot; dans trois types de polices diff\u00e9rents\" class=\"wp-image-58002 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-300x166.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1024x566.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-768x425.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1536x850.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-600x332.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1200x664.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-730x404.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1460x808.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-784x434.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-1568x867.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/02_google_fonts-877x485.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/885;\" \/><\/figure>\n\n\n<p>Les polices Web te permettent de t&#8217;\u00e9loigner des polices websafe souvent trop utilis\u00e9es.<\/p>\n\n\n<p>Au lieu de d\u00e9pendre des polices disponibles sur l&#8217;appareil d&#8217;un utilisateur, les polices web peuvent \u00eatre t\u00e9l\u00e9charg\u00e9es depuis une source externe comme <a target=\"_blank\" href=\"https:\/\/fonts.google.com\/\" rel=\"noopener\">Google Fonts<\/a> ou directement depuis votre serveur sur l&#8217;appareil de votre utilisateur <em>(temporairement).<\/em><\/p>\n\n\n<p>Cela te permet d&#8217;utiliser n&#8217;importe quelle police personnalis\u00e9e qui correspond \u00e0 ta marque ou \u00e0 tes besoins de conception.<\/p>\n\n\n<p>Nous avons \u00e9galement s\u00e9lectionn\u00e9 les <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/best-google-fonts\/\" rel=\"noopener\">meilleures polices Google<\/a> pour t&#8217;aider \u00e0 commencer.<\/p>\n\n\n<p>Lorsqu&#8217;un utilisateur visite ton site, la police web est t\u00e9l\u00e9charg\u00e9e temporairement et appliqu\u00e9e au texte \u00e0 l&#8217;aide de la r\u00e8gle <strong><code>@font-face<\/code><\/strong> en CSS.<\/p>\n\n\n<p>Les polices Web commencent alors \u00e0 se comporter comme des polices locales \u2014 Elles s&#8217;ajustent automatiquement aux tailles d&#8217;\u00e9cran tout en gardant votre site web net.<\/p>\n\n\n<p>Les polices ont \u00e9galement \u00e9volu\u00e9 au fil du temps pour avoir des formats de stockage plus efficaces. Comme les <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/optimize-images-for-web\/\" rel=\"noopener\">formats d&#8217;image<\/a>, les polices disposent de TTF, WOFF, WOFF2 et EOT.<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Embedded OpenType (EOT) :<\/strong> Compatible avec les anciennes versions d&#8217;Internet Explorer (avant IE9). Non compress\u00e9 par d\u00e9faut, mais la compression GZIP peut \u00eatre appliqu\u00e9e.<\/li>\n\n\n\n<li><strong>TrueType (TTF) :<\/strong> Pris en charge par les anciens navigateurs Android (avant la version 4.4). Il est non compress\u00e9 par d\u00e9faut mais peut \u00eatre compress\u00e9 en GZIP.<\/li>\n\n\n\n<li><strong>Web Open Font Format (WOFF) :<\/strong> Pris en charge par la plupart des navigateurs modernes et inclut une compression int\u00e9gr\u00e9e.<\/li>\n\n\n\n<li><strong>Web Open Font Format 2 (WOFF2) :<\/strong> Compatible avec les navigateurs qui le supportent, offrant des algorithmes de compression personnalis\u00e9s qui r\u00e9duisent la taille du fichier d&#8217;environ 30% par rapport aux autres formats.<\/li>\n\n\n<\/ul>\n\n\n<p>Les formats modernes offrent une compression pour de meilleures performances et aident \u00e0 conserver \u00e0 votre site un design fonctionnel et visuellement distinct.<\/p>\n\n\n<h2 id=\"h2_what-are-core-web-vitals-cwv-metrics\" class=\"wp-block-heading\">Quels Sont Les Indicateurs Des Signes Vitaux Du Web (CWV) ?<\/h2>\n\n\n<p>Voici le truc : Google veut que tous ses utilisateurs aient une excellente exp\u00e9rience.<\/p>\n\n\n<p>Le site web ou l&#8217;application qui offre la meilleure exp\u00e9rience aux utilisateurs de Google recevra plus d&#8217;\u00ab amour \u00bb de la part des algorithmes de Google.<\/p>\n\n\n<p>Et comment cette \u00ab&nbsp;<strong><em>exp\u00e9rience<\/em><\/strong>&nbsp;\u00bb est-elle mesur\u00e9e&nbsp;?<\/p>\n\n\n<p>Google a lanc\u00e9 les Core Web Vitals <a target=\"_blank\" href=\"https:\/\/web.dev\/articles\/vitals#core-web-vitals\" rel=\"noopener\">au d\u00e9but de 2020<\/a> dans cet objectif.<\/p>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/improve-core-web-vitals\/\" rel=\"noopener\">CWV<\/a> est un ensemble de trois indicateurs qui indiquent \u00e0 Google comment ton site web ou application se comporte pour les utilisateurs qu&#8217;ils y envoient.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1468\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls.webp\" alt=\"LCP vs INP vs CLS montrant diff\u00e9rentes mesures sur une \u00e9chelle de Bon-\u00c0 Am\u00e9liorer-Mauvais\" class=\"wp-image-58003 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-300x275.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1024x940.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-768x705.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1536x1409.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-600x551.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1200x1101.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-730x670.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1460x1340.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-784x719.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-1568x1439.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/03_lcp_inp_cls-877x805.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1468;\" \/><\/figure>\n\n\n<p>Des scores plus \u00e9lev\u00e9s sur ces m\u00e9triques peuvent t&#8217;aider \u00e0 mieux te classer sur Google. Passons rapidement en revue ces m\u00e9triques.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Peinture la Plus Grande et Contentueuse (LCP)<\/h3>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/largest-contentful-paint\/\" rel=\"noopener\"><strong>LCP<\/strong><\/a><strong> mesure le temps que prend le plus grand \u00e9l\u00e9ment visible de ta page \u00e0 charger.<\/strong><\/p>\n\n\n<p>Ceci est g\u00e9n\u00e9ralement une image ou une vid\u00e9o mais pourrait \u00eatre un grand bloc de texte ou une vid\u00e9o int\u00e9gr\u00e9e.<\/p>\n\n\n<p>Plus cela se produit rapidement, mieux votre site se comporte aux yeux des utilisateurs et des moteurs de recherche.<\/p>\n\n\n<p>Un bon score LCP signifie que les utilisateurs n&#8217;attendent pas que ton contenu principal apparaisse.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-interaction-to-next-paint-inp\">Interaction jusqu&#8217;au prochain rendu (INP)<\/h3>\n\n\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/glossary\/seo\/inp-interaction-to-next-paint\/\" rel=\"noopener\"><strong>INP<\/strong><\/a><strong> mesure le temps entre une interaction de l&#8217;utilisateur (comme cliquer ou taper) et le moment o\u00f9 la page r\u00e9pond visuellement.<\/strong><\/p>\n\n\n<p>Il donne une image plus pr\u00e9cise de l&#8217;interactivit\u00e9 que le FID, car il prend en compte le parcours complet de l&#8217;utilisateur plut\u00f4t que la premi\u00e8re interaction uniquement.<\/p>\n\n\n<p>Un faible score INP signifie que ton site est r\u00e9actif, ce qui am\u00e9liore l&#8217;engagement et la satisfaction des utilisateurs.<\/p>\n\n\n<h3 class=\"wp-block-heading\">D\u00e9calage cumulatif de la mise en page (CLS)<\/h3>\n\n\n<p><strong>CLS mesure la stabilit\u00e9 de ta page pendant le chargement.<\/strong><\/p>\n\n\n<p>Lorsque des \u00e9l\u00e9ments se d\u00e9placent de mani\u00e8re inattendue, cela frustre les utilisateurs et rend la page peu fiable.<\/p>\n\n\n<p>Un faible score CLS signifie que ta page se charge de mani\u00e8re fluide, sans d\u00e9placements de mise en page qui perturbent l&#8217;exp\u00e9rience utilisateur.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h2 id=\"h2_how-to-optimize-web-fonts-for-better-core-web-vitals\" class=\"wp-block-heading\">Comment Optimiser Les Polices Web Pour De Meilleurs Core Web Vitals<\/h2>\n\n\n<p>Alors, quel est tout ce remue-m\u00e9nage concernant la performance des polices web ?<\/p>\n\n\n<p>Pourquoi ne pouvons-nous pas simplement ajouter des polices web et consid\u00e9rer que c&#8217;est termin\u00e9\u00a0? Eh bien, tu peux.<\/p>\n\n\n<p>Mais comme nous l&#8217;avons d\u00e9j\u00e0 dit, les polices web ne sont pas locales. Elles sont r\u00e9cup\u00e9r\u00e9es depuis un serveur, t\u00e9l\u00e9charg\u00e9es et appliqu\u00e9es \u00e0 ton site, et c\u2019est l\u00e0 que le probl\u00e8me se pose.<\/p>\n\n\n<p><strong>Cela prend du temps.<\/strong><\/p>\n\n\n<p>Et si cela prend trop de temps, cela affecte tes Core Web Vitals et <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/increase-website-conversion-rate\/\" rel=\"noopener\">le taux de conversion de ton site web.<\/a><\/p>\n\n\n<p>Regardons quelques moyens d&#8217;optimiser les polices web pour de meilleurs signes vitaux du web principal.<\/p>\n\n\n<h3 class=\"wp-block-heading\">1. Pr\u00e9chargement des Polices<\/h3>\n\n\n<p>Tu veux que tes polices soient pr\u00eates d\u00e8s que la page commence \u00e0 charger.<\/p>\n\n\n<p>Alors quand la page est pr\u00eate pour l&#8217;utilisateur, la police l&#8217;est aussi.<\/p>\n\n\n<p>Cela s&#8217;appelle <a target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Attributes\/rel\/preload\" rel=\"noopener\"><strong>pr\u00e9charger<\/strong><\/a>.<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"627\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1024x627.webp\" alt=\"Temps de pr\u00e9chargement dans un graphique \u00e0 barres horizontal : index.html s'\u00e9tend de 0ms \u00e0 280ms, main.css de 50ms \u00e0 380 ms et ainsi de suite\" class=\"wp-image-58004 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1024x627.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-300x184.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-768x470.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1536x940.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-600x367.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1200x734.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-730x447.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1460x893.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-784x480.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-1568x959.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading-877x537.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/04_font_preloading.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/627;\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/www.bramstein.com\/writing\/preload-hints-for-web-fonts.html\" target=\"_blank\" rel=\"noreferrer noopener\">Source<\/a><\/figcaption><\/figure>\n\n\n<p>Le pr\u00e9chargement indique au navigateur, \u00ab <em>Hey, cette police est importante. Charge-la tout de suite.<\/em> \u00bb<\/p>\n\n\n<p>Disons que tu utilises la <a target=\"_blank\" href=\"https:\/\/fonts.google.com\/specimen\/Roboto\" rel=\"noopener\">police Google populaire, Roboto<\/a>.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"814\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font.webp\" alt=\"capture d'\u00e9cran d'un exemple de Google Fonts utilisant Roboto avec le texte en police Roboto &quot;Alors que le m\u00e9pris et le d\u00e9dain des droits de l'homme ont abouti&quot; \" class=\"wp-image-58005 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-300x153.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1024x521.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-768x391.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1536x781.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-600x305.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1200x611.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-730x371.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1460x743.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-784x399.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-1568x798.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/05_roboto_font-877x446.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/814;\" \/><\/figure>\n\n\n<p>Tu dois ajouter un seul attribut \u00e0 ton code HTML pour pr\u00e9charger la police : <strong><code>rel = \u201cpreload\u201d<\/code><\/strong><\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preload\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap\" as=\"font\" type=\"font\/woff2\" crossorigin&gt;<\/code><\/pre>\n\n\n<p>Apr\u00e8s cela, le navigateur sait qu&#8217;il doit prioriser le t\u00e9l\u00e9chargement de Roboto, ainsi ton texte appara\u00eet stylis\u00e9 avec la bonne police plus rapidement.<\/p>\n\n\n<p>Cela r\u00e9duit le temps n\u00e9cessaire pour que le plus grand bloc de texte (LCP) s&#8217;affiche, ainsi les utilisateurs voient la version finale de ton site plus rapidement.<\/p>\n\n\n<h3 class=\"wp-block-heading\">2. Contr\u00f4lez Le Comportement De Chargement Des Polices Avec La Propri\u00e9t\u00e9 Font-Display<\/h3>\n\n\n<p>Toutefois, le pr\u00e9chargement pourrait augmenter l\u00e9g\u00e8rement le temps de chargement initial puisque les polices sont prioritaires.<\/p>\n\n\n<p>La <strong><code>propri\u00e9t\u00e9 font-display<\/code><\/strong> te permet de contr\u00f4ler le comportement de ton texte pendant que les polices personnalis\u00e9es sont encore en chargement.<\/p>\n\n\n<p>Cela peut t&#8217;aider \u00e0 \u00e9viter le redoutable <strong>Flash de Texte Invisible (FOIT),<\/strong> o\u00f9 les utilisateurs voient des espaces vides, et le <strong>Flash de Texte Non Stylis\u00e9 (FOUT),<\/strong> o\u00f9 la page appara\u00eet avec des polices de secours pendant une seconde puis bascule imm\u00e9diatement sur des polices personnalis\u00e9es.<\/p>\n\n\n<p>La <code>propri\u00e9t\u00e9 font-display<\/code> dispose de quatre mani\u00e8res de g\u00e9rer le comportement du texte : block, swap, fallback et optional.<\/p>\n\n\n<p>Regardons les deux dont tu aurais besoin.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1243\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load.webp\" alt=\"graphiques lin\u00e9aires illustrant l'impact des valeurs d'affichage des polices sur le chargement de la page entre block, swap, fallback, et optional\" class=\"wp-image-58006 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-300x233.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1024x796.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-768x597.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1536x1193.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-600x466.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1200x932.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-730x567.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1460x1134.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-784x609.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-1568x1218.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/06_impact_of_font_display_values_on_page_load-877x681.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1243;\" \/><\/figure>\n\n\n<p><strong><code>font-display: swap<\/code><\/strong> \u2014 Cette option est le choix le plus s\u00fbr pour la plupart des sites. Elle garantit que le texte appara\u00eet imm\u00e9diatement avec une police de secours et passe \u00e0 la police personnalis\u00e9e une fois qu\u2019elle est pr\u00eate.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');\n  font-display: swap;\n}<\/code><\/pre>\n\n\n<p>Ici, la police de secours (comme Arial ou une autre police syst\u00e8me) se chargera instantan\u00e9ment, gardant la page lisible.<\/p>\n\n\n<p>Lorsque Roboto est t\u00e9l\u00e9charg\u00e9, il remplace la police de secours sans laisser d&#8217;espace vide \u00e0 l&#8217;\u00e9cran.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"624\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display.webp\" alt=\"capture d\u2019\u00e9cran &quot;font-display:swap&quot; avec texte : voici un paragraphe. Voici du texte plus lourd (en gras). Voici du texte accentu\u00e9 (en italique). Voici du texte plus lourd et accentu\u00e9 (en italique et gras). \" class=\"wp-image-58007 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-300x117.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1024x399.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-768x300.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1536x599.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-600x234.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1200x468.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-730x285.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1460x569.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-784x306.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-1568x612.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/07_font_swap_display-877x342.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/624;\" \/><\/figure>\n\n\n<p>Voici une <a target=\"_blank\" href=\"https:\/\/www.zachleat.com\/web-fonts\/demos\/font-display.html\" rel=\"noopener\">d\u00e9monstration de ce que l&#8217;\u00e9change de font-display<\/a> se comporte dans le monde r\u00e9el.<\/p>\n\n\n<p><strong><code>font-display: optional<\/code><\/strong> \u2014 Si tu te soucies de la vitesse, cela indique au navigateur de sauter la police personnalis\u00e9e si elle ne se charge pas assez rapidement. Cela fonctionne lorsque tu ne te soucies pas que le substitut reste en place.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');\n  font-display: optional;\n}<\/code><\/pre>\n\n\n<p>Cette option est judicieuse lorsque la performance est plus critique que le design, la rendant parfaite pour un site qui privil\u00e9gie la vitesse.<\/p>\n\n\n<p>Voici <a target=\"_blank\" href=\"https:\/\/www.zachleat.com\/web-fonts\/demos\/font-display-optional.html\" rel=\"noopener\">un exemple<\/a> de ce \u00e0 quoi cela ressemble dans le monde r\u00e9el. Tu ne remarqueras pas le changement ici puisque la plupart des polices se chargent assez rapidement.<\/p>\n\n\n<p>Cependant, l&#8217;argument optionnel est excellent au cas o\u00f9 ton serveur de polices tomberait en panne ou serait lent.<\/p>\n\n\n<h3 class=\"wp-block-heading\">3. Sous-ensemble De Polices<\/h3>\n\n\n<p>La plupart des polices contiennent des centaines, voire des milliers de caract\u00e8res.<\/p>\n\n\n<p>Il est probable que tu n&#8217;aies besoin que d&#8217;une petite partie de ceux-ci. Leur suppression est appel\u00e9e sous-ensemble de polices.<\/p>\n\n\n<p>C\u2019est vrai, tu peux supprimer les caract\u00e8res inutiles pour r\u00e9duire la taille du fichier de police.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"800\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting.webp\" alt=\"une illustration abstraite montrant la sous-ensemble de polices, o\u00f9 la lettre &quot;a&quot; est extraite et s\u00e9par\u00e9e d'un fichier de polices plus grand\" class=\"wp-image-58008 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-300x150.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1024x512.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-768x384.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1536x768.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-600x300.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1200x600.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-730x365.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1460x730.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-784x392.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-1568x784.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/08_font_subsetting-877x439.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/800;\" \/><\/figure>\n\n\n<p>Supposons que ton site ait uniquement besoin de caract\u00e8res anglais.<\/p>\n\n\n<p>Un outil comme <a target=\"_blank\" href=\"https:\/\/github.com\/fonttools\/fonttools\" rel=\"noopener\">FontTools<\/a> peut t&#8217;aider \u00e0 sous-ensemble ta police pour n&#8217;inclure que les caract\u00e8res que tu utiliseras r\u00e9ellement.<\/p>\n\n\n<p>Cela signifie que tous les caract\u00e8res Unicode qui ne sont pas n\u00e9cessaires en anglais peuvent \u00eatre supprim\u00e9s pour r\u00e9duire la taille du fichier.<\/p>\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Unicode<\/h3>\n    <p>La norme Unicode est un syst\u00e8me de codage international. Elle attribue un num\u00e9ro unique \u00e0 chaque caract\u00e8re de chaque langue afin que le caract\u00e8re puisse \u00eatre affich\u00e9 sur des appareils, des plateformes et des langues diff\u00e9rents.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/unicode\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Lire la suite                    <\/a>\n\n<\/div>\n\n\n<p>Cela r\u00e9duit la taille du fichier, disons, de 80 Ko \u00e0 30 Ko.<\/p>\n\n\n<p>Des fichiers plus petits signifient des t\u00e9l\u00e9chargements plus rapides, am\u00e9liorant \u00e0 la fois LCP et CLS puisque la police se charge rapidement et ne modifie pas la mise en page.<\/p>\n\n\n<p>Voici un exemple de comment tu pourrais supprimer tout sauf les caract\u00e8res anglais en utilisant FontTools :<\/p>\n\n\n<pre class=\"wp-block-code\"><code>pyftsubset Roboto-Regular.ttf --unicodes=U+0020-007F<\/code><\/pre>\n\n\n<p>Maintenant, ta police Roboto ne contient que les caract\u00e8res latins basiques n\u00e9cessaires pour le texte en anglais, ce qui la rend beaucoup plus rapide \u00e0 charger.<\/p>\n\n\n<p>Si tu pr\u00e9f\u00e8res une approche bas\u00e9e sur une interface graphique, tu peux aussi <a target=\"_blank\" href=\"https:\/\/www.fontsquirrel.com\/tools\/webfont-generator\" rel=\"noopener\">essayer font-squirrel<\/a>. Une fois que tu as t\u00e9l\u00e9charg\u00e9 un fichier de police, tu obtiens pas mal d&#8217;options de personnalisation \u00e0 ajouter ou \u00e0 retirer<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1112\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel.webp\" alt=\"Une interface web pour le g\u00e9n\u00e9rateur de Webfont de Font Squirrel montrant les options de conversion de police et les param\u00e8tres de format.\" class=\"wp-image-58009 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-300x209.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1024x712.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-768x534.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1536x1068.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-600x417.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1200x834.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-730x507.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1460x1015.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-784x545.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-1568x1090.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/09_web_font_generator_font_squirrel-877x610.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1112;\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\">4. Compression Des Polices<\/h3>\n\n\n<p>Les formats de polices modernes comme le WOFF2 offrent une compression qui peut r\u00e9duire la taille des polices jusqu&#8217;\u00e0 30 % par rapport aux anciens formats comme le TTF.<\/p>\n\n\n<p>Utiliser la version la plus compress\u00e9e de ta police peut r\u00e9duire consid\u00e9rablement son impact sur le temps de chargement de la page.<\/p>\n\n\n<p>Par exemple, voici comment tu peux t&#8217;assurer que tu utilises WOFF2 :<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('roboto.woff2') format('woff2'),\n       url('roboto.woff') format('woff');\n  font-weight: 400;\n}<\/code><\/pre>\n\n\n<p>Ainsi, les navigateurs qui prennent en charge WOFF2 l&#8217;utiliseront par d\u00e9faut, r\u00e9duisant les temps de chargement tout en affichant une police nette et de haute qualit\u00e9.<\/p>\n\n\n<p>Cependant, si un navigateur ne peut pas utiliser WOFF2, il utilise par d\u00e9faut WOFF.<\/p>\n\n\n<h3 class=\"wp-block-heading\">5. Codage Base64<\/h3>\n\n\n<p>Ceci est une autre pratique couramment utilis\u00e9e pour optimiser tes polices web.<\/p>\n\n\n<p>Cependant, tu dois faire attention \u00e0 quand utiliser des polices encod\u00e9es en Base64.<\/p>\n\n\n<p><strong>L&#8217;encodage Base64 est surtout utile pour les petites polices ou les ic\u00f4nes.<\/strong><\/p>\n\n\n<p>Si elle est trop utilis\u00e9e, tu peux alourdir le CSS, augmentant le temps de chargement de la page plus que si tu utilisais juste la police elle-m\u00eame.<\/p>\n\n\n<p>Si tu souhaites utiliser l&#8217;encodage Base64 pour une police d&#8217;ic\u00f4nes, tu devrais d&#8217;abord convertir le fichier de police au format Base64. Voici \u00e0 quoi cela pourrait ressembler :<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'CustomIcons';\n  src: url('data:font\/woff2;base64,d09GRgABAAAAAAn4ABAAAAAAB...') format('woff2');\n  font-weight: normal;\n  font-style: normal;\n}<\/code><\/pre>\n\n\n<p>Cette m\u00e9thode fonctionne bien pour les petites polices d&#8217;ic\u00f4nes que tu utilises fr\u00e9quemment sur le site.<\/p>\n\n\n<p>Le fichier CSS se charge avec la police int\u00e9gr\u00e9e, \u00e9liminant une requ\u00eate HTTP suppl\u00e9mentaire.<\/p>\n\n\n<p>Cependant, \u00e9vite cela pour les polices de corps de texte larges, car cela peut ralentir le rendu initial de la page.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-6-lt-link-vs-css-import-for-fonts\">6. <code>&lt;link&gt;<\/code> vs. CSS <code>@import<\/code> pour les Polices<\/h3>\n\n\n<p><code>&lt;link&gt;<\/code> et <code>@import<\/code> pr\u00e9sentent une diff\u00e9rence significative en termes de performance de chargement.<\/p>\n\n\n<p>La balise <code>&lt;link&gt;<\/code> charge les polices de mani\u00e8re asynchrone, ce qui signifie qu&#8217;elle ne retarde pas le reste de votre page \u00e0 se rendre, tandis que <code>@import<\/code> est un peu plus lent.<\/p>\n\n\n<p><strong>Utilise <code>&lt;link><\/code> d\u00e8s que possible.<\/strong><\/p>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u00ab Dans plus de 90 % des cas, tu devrais probablement utiliser la balise <code>&lt;link><\/code>. En r\u00e8gle g\u00e9n\u00e9rale, tu veux \u00e9viter les r\u00e8gles <code>@import<\/code> car elles retardent le chargement de la ressource incluse jusqu&#8217;\u00e0 ce que le fichier soit r\u00e9cup\u00e9r\u00e9. \u00bb <\/em><a href=\"https:\/\/stackoverflow.com\/questions\/12316501\/including-google-fonts-link-or-import\" target=\"_blank\" rel=\"noopener\"><em>Ilya Grigorik<\/em><\/a><em>, Ing\u00e9nieur et Conseiller technique aupr\u00e8s du PDG de Shopify<\/em><\/p>\n\n\n<\/blockquote>\n\n\n<p>Il charge les polices ind\u00e9pendamment, permettant au reste de la page de se charger sans attendre le fichier de police.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href= \"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap\"><\/code><\/pre>\n\n\n<p>Ceci est la m\u00e9thode pr\u00e9f\u00e9r\u00e9e pour charger Google Fonts ou des services de polices externes similaires.<\/p>\n\n\n<p>Plac\u00e9 dans la section <code>&lt;head><\/code> de ton HTML, il garantit que la police commence \u00e0 se charger t\u00f4t sans bloquer d&#8217;autres ressources.<\/p>\n\n\n<p><strong>\u00c9vite <code>@import<\/code> pour les polices critiques.<\/strong><\/p>\n\n\n<p><code>@import<\/code> attend que le fichier CSS soit enti\u00e8rement charg\u00e9, ce qui peut augmenter le temps de chargement et nuire \u00e0 la LCP.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400&amp;display=swap');<\/code><\/pre>\n\n\n<p>Utiliser <code>@import<\/code> pour les polices fonctionne uniquement pour les polices secondaires ou moins importantes. En pratique, \u00e9vite de l&#8217;utiliser pour tout ce qui est sur le premier \u00e9cran de contenu.<\/p>\n\n\n<h3 class=\"wp-block-heading\">7. R\u00e9duire Les D\u00e9calages Visuels\/CLS Par l&#8217;Adaptation des Polices et l&#8217;Ajustement de la Taille<\/h3>\n\n\n<p>Les d\u00e9calages visuels \u2014 ou d\u00e9placements cumulatifs de mise en page (CLS), comme les appelle Google \u2014 se produisent lorsque la mise en page change de mani\u00e8re inattendue, souvent en raison de changements de polices.<\/p>\n\n\n<p>Pour minimiser cet effet, choisis des polices de secours qui ressemblent \u00e9troitement au style et aux dimensions de ta police personnalis\u00e9e.<\/p>\n\n\n<p>La propri\u00e9t\u00e9 <strong><code>CSS size-adjust<\/code><\/strong> te permet \u00e9galement de contr\u00f4ler la taille de la police de secours, r\u00e9duisant les d\u00e9calages visuels lorsque la police personnalis\u00e9e se charge.<\/p>\n\n\n<p>Si ta police personnalis\u00e9e est Roboto et une police de secours, ajuste sa taille pour correspondre \u00e0 Roboto, rendant la transition presque sans couture.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  src: url('roboto.woff2') format('woff2');\n  font-display: swap;\n  size-adjust: 100%;\n}<\/code><\/pre>\n\n\n<p>Ici, la police de secours de Roboto (par exemple, Arial) conserve une taille constante, r\u00e9duisant tout mouvement notable lorsque Roboto se charge compl\u00e8tement.<\/p>\n\n\n<p>Une fois que tu as align\u00e9 la taille et l&#8217;espacement du secours avec ta police personnalis\u00e9e, tu assures que lorsque Roboto remplace Arial, le changement est minimal, ce qui maintient un CLS bas et am\u00e9liore l&#8217;exp\u00e9rience utilisateur.<\/p>\n\n\n<h3 class=\"wp-block-heading\">8. Trouver le Bon Endroit pour H\u00e9berger les Polices Web<\/h3>\n\n\n<p>H\u00e9berger toi-m\u00eame tes polices ne signifie pas toujours une meilleure performance.<\/p>\n\n\n<p>De nombreuses options tierces fonctionnent \u00e9galement bien\u2014et parfois, elles peuvent m\u00eame se charger plus rapidement.<\/p>\n\n\n<p>L&#8217;<a target=\"_blank\" href=\"https:\/\/almanac.httparchive.org\/en\/2020\/fonts#fig-7\" rel=\"noopener\">Almanach du Web<\/a> a r\u00e9v\u00e9l\u00e9 que certains sites utilisant des polices tierces se chargeaient plus rapidement que ceux avec des polices auto-h\u00e9berg\u00e9es.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1500\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_.webp\" alt=\"Diagramme en barres comparant les temps de chargement FCP et LCP pour les m\u00e9thodes d'h\u00e9bergement de polices auto-h\u00e9berg\u00e9es, externes et combin\u00e9es, indiquant que l'h\u00e9bergement combin\u00e9 est le plus lent.\" class=\"wp-image-58010 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-300x281.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1024x960.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-768x720.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1536x1440.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-600x563.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1200x1125.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-730x684.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1460x1369.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-784x735.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-1568x1470.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/10_web_font_hosting_performance_desktop_-877x822.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1500;\" \/><\/figure>\n\n\n<p>En fin de compte, la performance des polices d\u00e9pend moins du choix de l&#8217;h\u00e9bergement et plus de trois facteurs cl\u00e9s :<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>R\u00e9seau De Livraison De Contenu (CDN) :<\/strong> Assure une livraison plus rapide en servant les polices depuis plusieurs emplacements dans le monde.<\/li>\n\n\n\n<li><strong>HTTP\/2 :<\/strong> Am\u00e9liore la vitesse de chargement en g\u00e9rant plusieurs requ\u00eates en parall\u00e8le, r\u00e9duisant ainsi la latence.<\/li>\n\n\n\n<li><strong>Politique De Mise En Cache Web :<\/strong> Met en cache les polices efficacement, de sorte qu&#8217;elles ne n\u00e9cessitent pas de re-t\u00e9l\u00e9chargement \u00e0 chaque visite.<\/li>\n\n\n<\/ul>\n\n\n<p>Au lieu de rester bloqu\u00e9 sur le d\u00e9bat de l&#8217;h\u00e9bergement, concentre-toi sur la mise en place de ces \u00e9l\u00e9ments essentiels pour assurer le chargement fluide de tes polices, peu importe o\u00f9 elles sont h\u00e9berg\u00e9es.<\/p>\n\n\n<h2 id=\"h2_how-to-simplify-web-performance-optimization\" class=\"wp-block-heading\">Comment Simplifier L&#8217;Optimisation De La Performance Web<\/h2>\n\n\n<p>Si les techniques mentionn\u00e9es ci-dessus te semblent trop complexes, un <a target=\"_blank\" href=\"https:\/\/automattic.pxf.io\/OrN6xZ\" rel=\"noopener\">plugin comme Jetpack<\/a> peut simplifier les choses.<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"602\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1024x602.webp\" alt=\"Page de destination marketing montrant les fonctionnalit\u00e9s d'optimisation de WordPress par Jetpack avec des graphiques de m\u00e9triques de performance et des appareils mobiles.\" class=\"wp-image-58011 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1024x602.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-300x176.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-768x452.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1536x903.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-600x353.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1200x706.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-730x429.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1460x859.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-784x461.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-1568x922.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack-877x516.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/11_jetpack.webp 1600w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/602;\" \/><\/figure>\n\n\n<p>Jetpack, <a target=\"_blank\" href=\"https:\/\/github.com\/Automattic\/jetpack\" rel=\"noopener\">d\u00e9velopp\u00e9 par Automattic<\/a> (les cr\u00e9ateurs de WordPress), est une solution tout-en-un con\u00e7ue sp\u00e9cifiquement pour les sites WordPress.<\/p>\n\n\n<p>Il combine des fonctionnalit\u00e9s essentielles pour la s\u00e9curit\u00e9, la performance et le marketing, toutes g\u00e9r\u00e9es depuis une seule plateforme.<\/p>\n\n\n<p>M\u00eame si tu n&#8217;es pas technique, Jetpack peut aider \u00e0 am\u00e9liorer la vitesse du site, renforcer la s\u00e9curit\u00e9 et am\u00e9liorer l&#8217;exp\u00e9rience utilisateur. (Aucune configuration complexe n\u00e9cessaire !)<\/p>\n\n\n<h2 id=\"h2_create-the-perfect-balance-between-beauty-and-performance\" class=\"wp-block-heading\">Cr\u00e9ez L&#8217;\u00c9quilibre Parfait Entre Beaut\u00e9 Et Performance<\/h2>\n\n\n<p>Les polices web donnent \u00e0 ton site un aspect unique et magnifique.<\/p>\n\n\n<p>Cependant, sans les ajustements appropri\u00e9s, ils peuvent \u00e9galement le ralentir et frustrer les utilisateurs.<\/p>\n\n\n<p>Bien que nous ayons couvert les techniques essentielles d&#8217;optimisation des polices, affiner les performances implique d&#8217;innombrables d\u00e9tails techniques.<\/p>\n\n\n<p>Et obtenir les meilleurs r\u00e9sultats peut sembler accablant.<\/p>\n\n\n<p>C&#8217;est l\u00e0 que <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/pro-services\/\" rel=\"noopener\">les services professionnels de d\u00e9veloppement web de DreamHost<\/a> interviennent.<\/p>\n\n\n<p>Nous veillerons \u00e0 ce que ton site soit beau et optimis\u00e9 pour la vitesse et l&#8217;exp\u00e9rience utilisateur.<\/p>\n\n\n<p>Laisse-nous g\u00e9rer les aspects techniques pendant que tu te concentres sur la cr\u00e9ation d\u2019un site qui se d\u00e9marque vraiment.<\/p>\n\n\n\n<div class=\"article-cta-shared article-cta-small article-cta--product\">\n\t<div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-pro-services-development-877x586.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-pro-services-development.webp 2x\"  \/><\/div>\n\n\t<a href='https:\/\/www.dreamhost.com\/pro-services\/development\/' class='link-top' target='_blank' rel='noopener noreferrer'>\n\t\t<span>Pro Services &#8211; Development<\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\" width=\"15\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n\n\t<div class=\"content-btm\">\n\t\t<h2 class=\"h2--md\">\n\t\t\tYou Dream It, We Code It\n\t\t<\/h2>\n\t\t<p class=\"p--md\">\n\t\t\tTap into 20+ years of development expertise. Just let us know what you want for your site \u2013 we\u2019ll take it from there.\n\t\t<\/p>\n\n\t\t        <a\n            href=\"https:\/\/www.dreamhost.com\/pro-services\/development\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            See More                    <\/a>\n\n\t<\/div>\n<\/div>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<p><em>Cette page contient des liens d&#8217;affiliation. Cela signifie que nous pouvons gagner une commission si tu ach\u00e8tes des services via notre lien sans aucun co\u00fbt suppl\u00e9mentaire pour toi.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les polices web peuvent affecter les principaux indicateurs Web de votre site. Apprends des astuces simples pour optimiser les polices web et garder ton site rapide et convivial.<\/p>\n","protected":false},"author":1058,"featured_media":58013,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Les polices web peuvent affecter les Core Web Vitals de ton site. D\u00e9couvre des conseils simples pour optimiser les polices web et garder ton site rapide et facile \u00e0 utiliser.","toc_headlines":"[[\"h-what-are-web-safe-fonts\",\"Quelles Sont Les Polices S\u00fbres Pour Le Web ?\"],[\"h2_what-are-web-fonts\",\"Quelles Sont Les Polices Web ?\"],[\"h2_what-are-core-web-vitals-cwv-metrics\",\"Quels Sont Les Indicateurs Des Signes Vitaux Du Web (CWV) ?\"],[\"h2_how-to-optimize-web-fonts-for-better-core-web-vitals\",\"Comment Optimiser Les Polices Web Pour De Meilleurs Core Web Vitals\"],[\"h2_how-to-simplify-web-performance-optimization\",\"Comment Simplifier L'Optimisation De La Performance Web\"],[\"h2_create-the-perfect-balance-between-beauty-and-performance\",\"Cr\u00e9ez L'\u00c9quilibre Parfait Entre Beaut\u00e9 Et Performance\"]]","hide_toc":false,"footnotes":""},"categories":[15005],"tags":[],"class_list":["post-71167","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design-fr"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Core Web Vitals : Comment \u00e9viter les pi\u00e8ges de performances des polices web - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Les polices web peuvent affecter les Core Web Vitals de ton site. D\u00e9couvre des conseils simples pour optimiser les polices web et garder ton site rapide et facile \u00e0 utiliser.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/fr\/core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Core Web Vitals : Comment \u00e9viter les pi\u00e8ges de performances des polices web\" \/>\n<meta property=\"og:description\" content=\"Les polices web peuvent affecter les Core Web Vitals de ton site. D\u00e9couvre des conseils simples pour optimiser les polices web et garder ton site rapide et facile \u00e0 utiliser.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/fr\/core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-25T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T14:38:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Core Web Vitals : Comment \u00e9viter les pi\u00e8ges de performances des polices web - DreamHost Blog","description":"Les polices web peuvent affecter les Core Web Vitals de ton site. D\u00e9couvre des conseils simples pour optimiser les polices web et garder ton site rapide et facile \u00e0 utiliser.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr\/","og_locale":"en_US","og_type":"article","og_title":"Core Web Vitals : Comment \u00e9viter les pi\u00e8ges de performances des polices web","og_description":"Les polices web peuvent affecter les Core Web Vitals de ton site. D\u00e9couvre des conseils simples pour optimiser les polices web et garder ton site rapide et facile \u00e0 utiliser.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-11-25T15:00:00+00:00","article_modified_time":"2025-05-26T14:38:10+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","type":"image\/webp"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"Core Web Vitals : Comment \u00e9viter les pi\u00e8ges de performances des polices web","datePublished":"2024-11-25T15:00:00+00:00","dateModified":"2025-05-26T14:38:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr\/"},"wordCount":2932,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","articleSection":["Design de Site Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr\/","name":"Core Web Vitals : Comment \u00e9viter les pi\u00e8ges de performances des polices web - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","datePublished":"2024-11-25T15:00:00+00:00","dateModified":"2025-05-26T14:38:10+00:00","description":"Les polices web peuvent affecter les Core Web Vitals de ton site. D\u00e9couvre des conseils simples pour optimiser les polices web et garder ton site rapide et facile \u00e0 utiliser.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/fr\/core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/11\/1460x1095_blog_hero_core_web_vitals_how_to_avoid_the_performance_pitfalls_of_web_fonts.webp","width":1460,"height":1095,"caption":"Core Web Vitals: How to Avoid the Performance Pitfalls of Web Fonts"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/core-web-vitals-comment-viter-les-piges-de-performances-des-polices-web-fr\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Core Web Vitals : Comment \u00e9viter les pi\u00e8ges de performances des polices web"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"fr","translations":{"fr":71167,"es":58033,"en":58000,"it":68795,"nl":71194,"pt":72377,"uk":72392,"pl":72423,"de":73073,"ru":73076},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/71167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=71167"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/71167\/revisions"}],"predecessor-version":[{"id":71169,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/71167\/revisions\/71169"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/58013"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=71167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=71167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=71167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}