2
votes

font-display ne résout pas le problème de Page Speed Insights

J'essaie d'améliorer les performances de mon site Web et je commence par les suggestions de Google Page Speed Insights.

Je ne parviens pas à résoudre ce problème:

Il suggère d'utiliser la propriété CSS font-display sur cette page - https://developers.google.com/web/updates/2016/02/font-display

J'ai fait ceci:

@font-face {
  font-family: 'Malaga OT Reg';
  font-display: swap;
  src: url('./MalagaOT-Reg.eot');
  src: url('./MalagaOT-Reg.eot?#iefix') format('embedded-opentype'),
    url('./MalagaOT-Reg.woff2') format('woff2'), url('./MalagaOT-Reg.woff') format('woff'),
    url('./MalagaOT-Reg.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-300.eot');
  src: url('./MuseoSansRounded-300.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-300.woff2') format('woff2'),
    url('./MuseoSansRounded-300.woff') format('woff'),
    url('./MuseoSansRounded-300.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-900.eot');
  src: url('./MuseoSansRounded-900.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-900.woff2') format('woff2'),
    url('./MuseoSansRounded-900.woff') format('woff'),
    url('./MuseoSansRounded-900.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-700.eot');
  src: url('./MuseoSansRounded-700.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-700.woff2') format('woff2'),
    url('./MuseoSansRounded-700.woff') format('woff'),
    url('./MuseoSansRounded-700.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-100.eot');
  src: url('./MuseoSansRounded-100.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-100.woff2') format('woff2'),
    url('./MuseoSansRounded-100.woff') format('woff'),
    url('./MuseoSansRounded-100.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-500.eot');
  src: url('./MuseoSansRounded-500.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-500.woff2') format('woff2'),
    url('./MuseoSansRounded-500.woff') format('woff'),
    url('./MuseoSansRounded-500.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Museo';
  font-display: swap;
  src: url('./Museo-700.eot');
  src: url('./Museo-700.eot?#iefix') format('embedded-opentype'),
    url('./Museo-700.woff2') format('woff2'), url('./Museo-700.woff') format('woff'),
    url('./Museo-700.ttf') format('truetype'), url('./Museo-700.svg#Museo-700') format('svg');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Museo';
  font-display: swap;
  src: url('./Museo500-Regular.eot');
  src: url('./Museo500-Regular.eot?#iefix') format('embedded-opentype'),
    url('./Museo500-Regular.woff2') format('woff2'), url('./Museo500-Regular.woff') format('woff'),
    url('./Museo500-Regular.ttf') format('truetype'),
    url('./Museo500-Regular.svg#Museo500-Regular') format('svg');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Museo';
  font-display: swap;
  src: url('./Museo900-Regular.eot');
  src: url('./Museo900-Regular.eot?#iefix') format('embedded-opentype'),
    url('./Museo900-Regular.woff2') format('woff2'), url('./Museo900-Regular.woff') format('woff'),
    url('./Museo900-Regular.ttf') format('truetype'),
    url('./Museo900-Regular.svg#Museo900-Regular') format('svg');
  font-weight: 900;
  font-style: normal;
}

Mais cela n'a pas changé le rapport PageSpeed. J'ai essayé les valeurs swap et fallback pour la propriété font-display .

Est-ce que n'importe qui peut donner des conseils comment puis-je résoudre ce problème?

css optimization fonts pagespeed lighthouse

3 commentaires

font-display: facultatif devrait faire l'affaire.

Juste essayé. Malheureusement, cela n'a pas aidé :(

Bizarre, vu que les propriétés font-display avec des valeurs de swap , optional et fallback ne provoquent pas de < b> FOIT (Flash Of Invisible Text). Seul font-display: block provoque un FOIT. Plus d'informations peuvent être trouvées ici

3 Réponses :

1
votes

D'après mon expérience, cela fonctionne avec font-display: swap; mais cela peut prendre des jours avant que le rapport PSI note votre amélioration, en particulier Mobile.

0 commentaires

1
votes

Supprimez le woff2 et ne conservez que le format woff.
définir la propriété d'affichage des polices sur bloquer;

font-display: block;
En option, vous pouvez également supprimer les références tiff et eot pour accélérer le site.

0 commentaires

0
votes

hé, j'avais exactement les mêmes problèmes. Ensuite, j'ai ajouté ce morceau de code à mon style.css et aux sections custom> css supplémentaires de mon thème et Google a arrêté de déclencher ces avertissements:

@font-face {
  font-family: "Open Sans Regular";
  src: url("https://fonts.googleapis.com/css2?family=Open+Sans");
  font-display: swap;
}

0 commentaires

font-display ne résout pas le problème de Page Speed ​​Insights

font-display ne résout pas le problème de Page Speed Insights