Optimisation PageSpeed : FontAwesome à preload dans le header

[tyler06_34]

Bonjour,

 

En testant mon site sur Pagespeed, celui ci m'avertit du point suivant :

 

Préchargez les demandes clés                                            2,58 s

Envisagez d'utiliser `<link rel=preload>` pour hiérarchiser la récupération des ressources actuellement requises pour le chargement ultérieur de la page. En savoir plus

font/fontawesome-webfont.woff?v=3.2.1                         2 580 ms

 

Je cherche donc la technique à utiliser pour modifier le header.tpl afin de preload cette Font au chargement et ainsi gagner en performance. 

Quelqu'un s'y est il penché ? Quelle sont les lignes à ajouter ?

J'ai ça dans le header :

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

J'imagine que je dois passer en preload la font avant cet appel ? Je dois mettre en preload également cette ligne <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> ?

 

J'ai qu'il y'avait également une notion de woff2, dois je remplacer ces appels ?

 

Merci pour vos réponses.

[Eolia]

faudrait surtout stocker cette police sur votre ftp plutot que sur un cdn qui met 2.8 sec à répondre^^

[doekia]

Et j'ajouterai que les directive preload sont souvent la pire mauvaise idée. encore plus si vous utilisez un cdn grand publique

[tyler06_34]

ok ok merci.

 

Je vais regarder la piste de l'hébergement des font sur mon site.

 

Merci.

[tyler06_34]

Bonjour,

J'ai nettoyé les lignes de mon header :

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

ainsi que les 2 fonts Google qu'il y'avait. Pas d'impact sur le rendu de mon site mais des économies en terme de chargement de page. Merci pour l'astuce.

 

Je me retrouve donc avec un FontAwesome hébergé en local (c'était déjà le cas en fait).

Cependant le chargement de cette Font via le fichier css de mon thème prend plus de 2 secondes également. Je précise que les perfs serveurs sont globalement bonnes sauf pour ce chargement de font.

 

Dans mon css du theme j'ai ça :

@font-face {
  font-family: 'FontAwesome';
  src: url("../font/fontawesome-webfont.eot?v=3.2.1");
  src: url("../font/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"), url("../font/fontawesome-webfont.woff?v=3.2.1") format("woff"), url("../font/fontawesome-webfont.ttf?v=3.2.1") format("truetype"), url("../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");
  font-weight: normal;
  font-style: normal; }

 

Y'a t'il une astuce pour optimiser les performances ? changement de version ? ou compression ?

Merci pour votre aide.

[tyler06_34]

Bonjour,

J'ai résolu mon problème de performance sur le chargement des polices fontAwesome.

J'ai édité le fichier de mes polices de caractère sur :

http://fontstore.baidu.com/static/editor/index-en.html

J'ai fais une recherche de toutes les icones que je n'utilisais pas dans mon theme pour les supprimer pour ainsi réduire la taille du fichier woff stocké localement sur mon site. J'ai pu diviser la taille du fichier woff à plus de 2.

J'ai généré depuis ce même outil le fichier woff2. J'ai pu ainsi réduire la taille du fichier par 5.

J'ai externalisé le chargement de la police de caractère qui était faite depuis le global.css de mon theme vers un fichier propre : font-awesome.min.css appelé dans le header.tpl

Dans ce fichier je n'oublie pas de rajouter la ligne pour intégrer l'appel au woff2.

Je ne charge donc plus que ce qui est nécessaire dans le format optimisé woff2.

PageSpeed passe le chargement de mes fonts de 2sec à 200ms.

En espérant que cela aidera certains.

 

 

 

 

 

 

[Talas]

On 9/20/2020 at 11:59 AM, tyler06_34 said:

Bonjour,

J'ai résolu mon problème de performance sur le chargement des polices fontAwesome.

J'ai édité le fichier de mes polices de caractère sur :

http://fontstore.baidu.com/static/editor/index-en.html

J'ai fais une recherche de toutes les icones que je n'utilisais pas dans mon theme pour les supprimer pour ainsi réduire la taille du fichier woff stocké localement sur mon site. J'ai pu diviser la taille du fichier woff à plus de 2.

J'ai généré depuis ce même outil le fichier woff2. J'ai pu ainsi réduire la taille du fichier par 5.

J'ai externalisé le chargement de la police de caractère qui était faite depuis le global.css de mon theme vers un fichier propre : font-awesome.min.css appelé dans le header.tpl

Dans ce fichier je n'oublie pas de rajouter la ligne pour intégrer l'appel au woff2.

Je ne charge donc plus que ce qui est nécessaire dans le format optimisé woff2.

PageSpeed passe le chargement de mes fonts de 2sec à 200ms.

En espérant que cela aidera certains.

 

 

 

 

 

 

Merci beaucoup, pour vos explications. C'est utile en effet.