FOIT vs FOUT : une comparaison sur le chargement des polices de caractères sur le web. Le choix entre FOIT et FOUT est un dilemme courant pour les concepteurs de sites web, car chaque mécanisme de chargement de page présente des avantages et des inconvénients. Il est donc essentiel de comprendre les détails des deux processus pour effectuer des comparaisons plus précises.
L’utilisation de polices de caractères personnalisées sur les sites web est un choix courant. Elles permettent de communiquer l’idée d’une marque, associée à une identité visuelle complète, ainsi que d’autres éléments.
Cependant, le chargement des polices personnalisées sur les sites web peut parfois poser des problèmes. C’est pourquoi il est nécessaire de discuter des différences dans la comparaison FOIT vs FOUT.
Nous parlons de deux types de chargement de polices personnalisées, mais il y a des pertes liées aux performances et à l’expérience de l’utilisateur dans les deux cas. Avec leurs avantages et leurs inconvénients respectifs, FOIT et FOUT suscitent des débats intéressants qui aident à prendre une décision sur le mécanisme à utiliser.
Dans ce contenu, nous allons comparer FOIT et FOUT, en abordant chacun de leurs détails et leur impact sur le chargement des polices personnalisées.
Comment les polices de caractères Web sont-elles chargées ?
Tout d’abord, il est essentiel de comprendre le processus de chargement d’une page. Lorsque l’on accède à une page via le navigateur web, tout le code HTML est analysé pour créer un chemin de rendu. Au cours de ce processus, les polices de caractères sont l’un des éléments qui doivent être chargés.
Lorsque le navigateur commence enfin à charger les polices, le processus de rendu de la page est bloqué, afin que la police demandée puisse être trouvée.
Si ce n’est pas le cas, le processus est prolongé, ce qui donne le choix entre deux options pour le terminer : FOIT ou FOUT. Le choix de l’une d’entre elles est essentiel pour disposer des bonnes stratégies de chargement des polices.
Qu’est-ce que FOIT ?
FOIT signifie “Flash of Invisible Text” (« Flash de texte invisible »). Ce mécanisme de chargement des polices décide que le rendu de la page laissera les extraits de texte avec des polices vides jusqu’à ce que les polices originales soient trouvées.
Dans ce cas, le concepteur a choisi de n’afficher aucune police jusqu’à ce que l’original puisse être rendu et révélé, rendant ainsi visible l’ensemble du contenu écrit.
Le temps de chargement ne dépasse pas trois secondes. Cependant, pendant ce temps, la page subit également un retard dans le chargement d’autres éléments, tels que les images.
Comme nous l’avons mentionné, tout le rendu de la mise en page est interrompu et, si le choix de chargement de la police est FOIT, il y aura par conséquent un retard pouvant aller jusqu’à 3 secondes.
Voir aussi : Conception blog : Comment concevoir des articles qui attirent l’attention ?
Qu’est-ce que le FOUT ?
FOUT signifie “Flash of Unstyled Text” (« Flash de texte non stylisé » ). Il s’agit d’un mécanisme de chargement de page qui donne la priorité à l’affichage complet du contenu le plus rapidement possible.
Pour ce faire, pendant le rendu, FOUT utilise des polices génériques jusqu’à ce que les polices originales soient trouvées et chargées. Il se concentre sur le contenu, tout en ignorant momentanément la mise en page.
L’option d’affichage d’une police standard de remplacement, même si elle est temporaire, garantit une meilleure interface utilisateur pendant le chargement de la feuille de style de la page. Ce laps de temps ne dépasse généralement pas une seconde jusqu’à ce que la police personnalisée de la page soit entièrement affichée.
Voir aussi : Un guide complet pour la migration des sites web
FOIT vs FOUT : quelles sont les principales différences ?
Dans la comparaison entre FOIT et FOUT, il convient de prendre en compte certains points essentiels. En détaillant les différences entre ces deux mécanismes de chargement, nous allons considérer trois bases d’analyse dans ce contenu – la performance, l’apparence et l’expérience de l’utilisateur.
Découvrez comment FOIT et FOUT se comportent par rapport à ces trois paramètres et comment ces mécanismes peuvent avoir un impact sur le fonctionnement d’un site.
Performance
FOUT peut présenter un avantage en termes de performances, car il garantit un chargement de la page en moins d’une seconde tout en affichant le contenu avec une police standard.
Les trois secondes nécessaires à l’affichage des polices dans FOIT ne sont pas une bonne chose, en particulier pour les utilisateurs exigeants en termes de vitesse de page. Si tel est votre choix, il est essentiel de surveiller les performances à l’aide de PageSpeed Insights.
L’apparence
En termes d’apparence, FOUT peut échouer en affichant une police différente jusqu’à ce que la police d’origine se charge. Pour l’utilisateur, cela peut être synonyme de dysfonctionnements, même si ce n’est pas le cas. Le changement de police peut donner l’impression d’un site web défectueux.
D’un autre côté, même s’il faut trois secondes pour afficher le contenu, le FOIT ne génère pas de changement de police, c’est-à-dire que tout s’affiche dans le format prévu.
Visuellement, FOIT peut être plus attrayant, car il véhicule l’idée d’un site web qui fonctionne bien, même s’il n’est pas aussi rapide, du moins dans l’esprit de l’utilisateur moyen.
Voir aussi : Comment obtenir des backlinks de qualité ? 7 tactiques à utiliser !
Expérience utilisateur
L’expérience utilisateur est un concept qui englobe plusieurs questions liées à la performance et à la conception d’un site web. Par conséquent, lorsque nous parlons de FOIT vs FOUT, il s’agit du paramètre le plus difficile à évaluer.
Cependant, passons en revue chacun des mécanismes. En ce qui concerne FOIT, les points positifs concernant l’expérience de l’utilisateur sont les suivants :
- Il n’y a pas de variations de polices.
- Le contenu, lorsqu’il est chargé, est disponible immédiatement.
En ce qui concerne les problèmes, il faut souligner :
- Le temps de chargement de trois secondes peut être considéré comme élevé.
- Pendant ces trois secondes, aucun contenu textuel n’est affiché, ce qui peut nuire à l’expérience.
En ce qui concerne le FOUT, l’expérience de l’utilisateur présente des aspects positifs :
- Des polices standard sont utilisées, ce qui permet d’anticiper le contenu pour l’utilisateur.
- Le temps de chargement de la bonne police est faible, seulement une seconde en moyenne.
Cependant, il y a un point négatif majeur :
- Le changement de police peut donner l’impression que le site web connaît des problèmes de fonctionnement mineurs.
Comment les choisir ?
Après avoir analysé les principaux aspects de chaque méthode de chargement, le choix doit répondre aux besoins du site web. Dans la comparaison FOIT vs. FOUT, il existe une définition principale pour chacun d’entre eux :
- FOIT donne la priorité à l’identité visuelle de la police choisie.
- FOUT donne la priorité au contenu textuel.
Par conséquent, pour chaque site, le concepteur web doit comprendre ce qui est le plus important entre le contenu textuel et l’apparence générale. Par exemple, les pages qui contiennent plus d’images que de texte fonctionnent mieux avec FOIT.
En revanche, les sites qui comportent de nombreux menus, titres et informations écrites pertinentes offriront une meilleure expérience à l’utilisateur s’ils choisissent FOUT.
Outre le choix d’un bon hébergeur et de plugins WordPress utiles, il est essentiel d’analyser la comparaison entre FOIT et FOUT. Pour les concepteurs de sites web, le défi consiste à déterminer ce qui est le plus important pour leur projet, en tenant compte des avantages et des inconvénients de chaque mécanisme.