Page speed faire en sorte que le texte reste visible

[base888]

Bonjour à tous

Prestashop 1.6.1.16 / thème de base default-bootstrap 

Page Speed Insights me notifie :

" Assurez-vous que le texte reste visible pendant le chargement des polices Web " avec comme recommandation :" Utilisez la fonction d'affichage de la police CSS afin que le texte soit visible par l'utilisateur pendant le chargement des polices Web"

Après avoir effectué des recherches, j'ai rajouté un font-display dans le css de mon thème à la règle @font-face.

J'ai choisi comme variable et l'ai donc rajouté au global.css :

font-display: block

J'ai également rajouté au header.tpl demon thème :

<link rel="preload" href="FontAwesome.woff2" as="font"
      type="font/woff2" crossorigin="anonymous">

Mais rien n'y fait, Google me notifie toujours le problème.

Que faire pour résoudre ce point ?

Merci pour votre aide, je désespère de le résoudre et pourtant ce n'est pas faute d'avoir cherché !

 

 

 

 

Edited March 14, 2019 by base888 (see edit history)

[Eolia]

C'est pile l'exemple de perte de temps^^

- 1) Google n'a jamais sorti sa carte bleue pour acheter quoique ce soit

- 2) La police sera peut-être plus longue à charger à la première page mais pour la suite l'utilisateur l'a en cache

- 3) Tous les navigateurs du monde chargent une police par défaut si ils n'ont pas l'autre en attendant

- 4) Ne perdez pas de temps avec ça mais optimisez vos images, navigations et contenus, l'UX est primordiale^^

[doekia]

Et d'ailleurs le message dit: assurez-vous! Pas vous avez-un problème.

Google est de pire en pire avec ces recommandations et ceux qui utilise ces outils sont également de plus en plus à mécomprendre ce qui est recommandé.

[base888]

Bonjour

Je vous remercie pour vos réponses mais si je m'y intéresse, c'est que j'ai dans l'outil un triangle rouge (le seul) signifiant sûrement que ce point mérite mon attention.

Mais malheureusement vos réponses ne m'aident guère, sinon je suis d'accord avec vous pour dire qu'il ne faut pas prendre au pied de la lettre tous les résultats de ces audits.

Auriez-vous une piste pour m'aider à résoudre ce point : " Utilisez la fonction d'affichage de la police CSS afin que le texte soit visible par l'utilisateur pendant le chargement des polices "

Je pensais le résoudre en rajoutant font-display mais visiblement cela ne suffit pas à Google.

Merci pour votre attention 

[doekia]

Donc si on te répond avec un triangle rouge, tu vas considérer la réponse:

🔻

1/ peu importe, ça ne sert à rien réellement

2/ remplacer une font qui doit être chargé par une fonte qui doit être chargé ne sert à rien

3/ faire une règle en tout début => font-display: fallback ou swap

[base888]

Ok, je m'incline si ca ne sert à rien mais ca me chiffonne, j'aimerais comprendre pourquoi Google ne prend pas en compte mon display-font !

pour la règle comme ceci, dans le global css :

 

@font-face {
  font-family: 'FontAwesome';

font-display : swap ou fallback;

  src: url("../fonts/fontawesome-webfont.eot?v=4.3.0");
  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
   }

et dans le header :

 

<link rel="preload" href="FontAwesome.woff2" as="font"
      type="font/woff2" crossorigin="anonymous">

 

Merci pour votre temps

[claire301]

Bonjour, 

J'ai fait pareil que vous, précharger la police dans le header et j'ai toujours l'alerte de google. Avez-vous réussi ? 

[Mediacom87]

https://www.roquette.bzh/chargement-optimisation-police-site-internet-807-z/

[claire301]

J'ai mis un link preload dans le header et importé la font dans le css avec @font-face. Mais j'ai toujours cette erreur dans le page speed insight 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.