Discussion

Optimiser les polices web sans changer le rendu

De Wikiprompt, l’encyclopédie libre de prompts

Shu
Contribué parShuXSource

29 oct. 2026

Optimiser les polices web sans changer le rendu Une invite complète pour un agent IA afin de sous-ensembler et d'optimiser les polices web tout en préservant la fidélité visuelle, avec des étapes détaillées de mesure et de vérification.

Contenu du PromptEnregistrer

🌐
Faites en sorte que les polices web de ce site se chargent plus rapidement sans changer l'apparence. Réduisez les octets de police autant que possible, gardez le rendu identique, et prouvez-le avec des différences de pixels avant/après. Traitez tout changement visuel comme une régression sauf si je l'approuve. Si une optimisation modifie le rendu, dites-moi ce qu'elle économise et ce qu'elle change, et gardez le site identique par défaut. Conservez le comportement de chargement actuel : ne touchez pas à font-display ni aux polices de secours. N'ajoutez pas de traitement de police au build ; écrivez un script que j'exécute à la main, validez sa sortie, et notez quand il doit être relancé. Mesurez d'abord l'état actuel : la taille de chaque fichier de police, le nombre de glyphes, les axes variables, les fonctionnalités OpenType et le hinting, plus les octets de police par page et ce que chaque page précharge. Ensuite, déterminez ce que le site utilise réellement, en vérifiant les styles de composants en ligne ainsi que les feuilles de style : quels caractères apparaissent dans le contenu, quelles valeurs d'axe et quels poids chaque police nécessite (y compris les remplacements ponctuels et le gras dans l'italique), quelles fonctionnalités OpenType sont activées, et les effets CSS comme `hyphens: auto` utilisant le trait d'union U+2010. Réduisez chaque police à cela. Conservez les caractères utilisés plus Latin-1 et Latin Extended-A, et laissez le CJK aux polices système si c'est ainsi que cela rend aujourd'hui. Limitez les axes variables aux plages utilisées, et ne fixez un axe à une valeur que si rien ne le remplace. Supprimez les fonctionnalités OpenType et le hinting inutilisés. Divisez chaque police en deux fichiers. Un noyau petit avec ASCII et la ponctuation que la plupart des pages utilisent (guillemets courbes, tirets, points de suspension) est préchargé. Un fichier étendu derrière `unicode-range` ne se télécharge que lorsqu'une page a besoin d'un de ses caractères. Le `unicode-range` de chaque fichier doit lister uniquement les caractères qu'il contient réellement. Attention à quelques points. Une face de secours générée entre les fichiers noyau et étendu dessinera les caractères étendus avant que la vraie police ne le fasse. Les polices avec un Reserved Font Name sous l'OFL doivent être renommées en interne une fois sous-ensemble. Vérifiez les fichiers générés, car les outils de police ont des particularités. Avant de terminer, construisez une référence à partir du même contenu et comparez les pixels avant/après sur des pages avec du code, de l'italique, des caractères accentués, des composants avec leurs propres paramètres de police, et du CJK. Expliquez chaque différence visible : changement de contenu, régression à corriger, ou arrondi sous-pixel inoffensif. Re-mesurez les octets par page et confirmez que les fichiers étendus ne se chargent que là où nécessaire. Quand vous avez terminé, dites-moi les octets avant et après par police et par page, les résultats des différences de pixels, les endroits où vous vous êtes écarté de ce que j'ai demandé et ce que cela a coûté, et comment relancer le script. Plus tard, il pourrait être utile d'intégrer la police noyau dans la feuille de style globale et de précharger les fichiers étendus après l'inactivité.

Connectez-vous pour voir le prompt complet

Continuer avec:

En vous connectant, vous acceptez nos Conditions et Confidentialité

Utilisation

Ce prompt est conçu pour être utilisé avec coding. Copiez le contenu ci-dessus et collez-le dans votre outil d’IA préféré.

Pour de meilleurs résultats, personnalisez les espaces réservés (indiqués par des crochets ou des majuscules) selon vos besoins.

Références

Catégories :coding| twitter| web-fonts| font-optimization

Discussion