Jump to content
base888

Page speed faire en sorte que le texte reste visible

Recommended Posts

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 by base888 (see edit history)

Share this post


Link to post
Share on other sites

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^^

Share this post


Link to post
Share on other sites

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é.

Share this post


Link to post
Share on other sites

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 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More