Éco-conception web : comment ancrer votre entreprise dans une démarche éco-responsable ?
Saviez-vous qu’un chargement de police non optimisé ralentit le chargement de votre site web ? […]
Saviez-vous qu’un chargement de police non optimisé ralentit le chargement de votre site web ? Découvrez dans cet article toutes les étapes de chargement d’une font, et comment mettre en place une stratégie d'optimisation pour améliorer les performances de votre site internet !
Avec l’arrivée des polices personnalisées sur les pages web, il est désormais possible d’avoir un rendu très esthétique. Une énorme avancée dans le webdesign, mais cela peut poser problème si la méthode de chargement n’est pas optimisée. En effet, un fichier de font mal chargé peut aller jusqu’à bloquer l’affichage des contenus, surtout sur les terminaux mobiles.
Dans une démarche d'éco-conception, je vous dévoile les meilleures techniques pour optimiser le chargement de vos fonts.
Pour que le navigateur comprenne quelle police il doit charger et afficher, il faut lui donner toutes les informations dont il a besoin. Il suffit pour cela d’ajouter une règle ‘font-face’ dans votre css, comme ceci :
@font-face {
font-family: 'Dosis', sans-serif;
src: url('/font/dosis-medium-webfont.woff2') format('woff'),
url('/font/dosis-medium-webfont.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}
Cette déclaration doit au minimum comporter :
Les fichiers doivent être aux formats suivants :
Des propriétés additionnelles peuvent être ajoutées, comme:
Cette technique à l’avantage d’être pratique à l’utilisation, par exemple pour rajouter d’autres fichiers il suffit simplement de répéter la propriété url, et pour ajouter une variante de la font, par exemple du gras, il suffit de copier la déclaration et de changer l’url du fichier + la graisse.
Vous pouvez l’utiliser avec des webfont ou bien faire le choix d'héberger vous mêmes vos fonts pour gagner considérablement en performances !
Vous savez maintenant communiquer au navigateur l’emplacement de la font afin qu'il la charge. Je vais maintenant vous apprendre à demander au navigateur d’aller d’abord vérifier si une version locale (sur le terminal de l’internaute) existe.
Pourquoi cette méthode ? C’est très simple : Le navigateur a besoin de télécharger le fichier de la font pour pouvoir l’afficher, ce qui rajoute du temps dans le chargement total du site. En demandant au navigateur d’utiliser la font de la machine de l’internaute, il l’aura instantanément à sa disposition et n’aura donc pas besoin de la télécharger sur le serveur.
Il suffit d’ajouter la propriété dans votre déclaration font-face, et de bien la positionner avant la déclaration des urls de vos polices.
En reprenant notre déclaration de tout à l'heure nous obtenons ceci :
@font-face {
font-family: 'Dosis', sans-serif;
src: local('dosis-medium'),
url('/wp-content/themes/prod/font/dosis-medium-webfont.woff2') format('woff'),
url('/wp-content/themes/prod/font/dosis-medium-webfont.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}
Les fichiers de police sont souvent lourds et peuvent être longs à charger. Pendant le chargement et en attendant que ceux-ci soit complètement disponibles, les navigateurs adoptent plusieurs comportements, jusqu'à rendre le texte invisible. Bien connaitre ces états est vital si vous souhaitez optimiser votre site internet et avoir de meilleurs performances.
Les deux cas à bien connaître sont le ‘FOIT’ et le ‘FOUT’.
Cet état signifie ‘Flash Of Invisible Text’.
Analysons son comportement :
Cet état signifie ‘Flash Of Unstyled Text’’.
Analysons son comportement :
Comme vous le voyez, les comportements pendant le chargement d'une police peuvent être très différents, Et pour rajouter une contrainte supplémentaire, c'est le navigateur qui décide quel comportement adopter.
Voici les comportements par défauts des navigateurs :
Heureusement une propriété nous permet d'avoir le contrôle sur ces étapes et de dire au navigateur quel comportement nous voulons qu'il adopte pendant le chargement de la police. Pour utiliser la propriété font-display, ajoutez la à votre déclaration @font-face :
@font-face {
font-family: 'Dosis', sans-serif;
font-display: swap;
src: local('dosis-medium'),
url('/wp-content/themes/prod/font/dosis-medium-webfont.woff2') format('woff'),
url('/wp-content/themes/prod/font/dosis-medium-webfont.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}
Plusieurs valeurs sont disponibles, chacune ayant un comportement différent :
Voici la dernière astuce pour optimiser de A à Z vôtre chaine de rendu critique. Par défaut le navigateur va sélectionner les 'meilleurs candidats' qui devront être chargés en premier. Cela va comporter votre CSS, votre JS, et tant que ces fichiers ne seront pas complètement chargés, les fichiers de police devront attendre bien sagement.
Imaginons que votre css et js mettent au total 300ms pour se charger et s'exécuter, et qu'ensuite vos polices en mettent autant. En préchargeant vos polices, 300ms seront économisés car votre css et js ne seront plus bloquants. Et quand il est question de performances il n'y a pas de petites économies. Il faut toujours gratter ! 😉
Pour précharger vos fichiers, déclarez chaque fichier dans le head, comme ceci :
<head>
<link rel="preload" as="font" href="/chemin/font.woff2" crossorigin>
<link rel="preload" as="font" href="/chemin/font.woff" crossorigin>
</head>
Saviez-vous qu’un chargement de police non optimisé ralentit le chargement de votre site web ? […]
Saviez-vous qu’un chargement de police non optimisé ralentit le chargement de votre site web ? […]
Saviez-vous qu’un chargement de police non optimisé ralentit le chargement de votre site web ? […]
