2017-09-25 5 views
2

J'envoie un en-tête de préchargement Link dans la réponse HTTP2. Comme celui-ci:Les polices Web HTTP2 n'ont pas été utilisées

Link: </assets/script/main.js?h=1795387974>; rel=preload; as=script, </assets/font/sourcesanspro_regular.woff2>; rel=preload; as=font 

les scripts, les styles et les images ne causent aucun problème - ils sont poussés et utilisés. Mais les polices sont poussées et demandé/nouveau et la récupérés console de chrome se plaint:

La ressource https://example.com/assets/font/sourcesanspro_regular.woff2 a été préchargé à l'aide de pré-charge lien, mais pas utilisé en quelques secondes de l'événement de chargement de la fenêtre. S'il vous plaît assurez-vous que ce n'était pas préchargé pour rien.

Voici les en-têtes de réponse de la police mentionnée.

Poussé:

accept-ranges:bytes 
cache-control:max-age=5184000, public 
content-length:16892 
content-type:application/octet-stream 
date:Mon, 25 Sep 2017 09:22:05 GMT 
last-modified:Mon, 18 Sep 2017 14:33:31 GMT 
pragma:public 
status:200 
x-content-type-options:nosniff 
x-frame-options:SAMEORIGIN 
x-http2-push:pushed 
x-xss-protection:1; mode=block 

demandé après pression:

accept-ranges:bytes 
cache-control:max-age=5184000, public 
content-length:16892 
content-type:application/octet-stream 
date:Mon, 25 Sep 2017 09:22:05 GMT 
last-modified:Mon, 18 Sep 2017 14:33:31 GMT 
pragma:public 
status:200 
x-content-type-options:nosniff 
x-frame-options:SAMEORIGIN 
x-xss-protection:1; mode=block 

Qu'est-ce que je fais mal?

Répondre

1

Vous devez ajouter crossorigin pour les polices:

Link: </assets/font/sourcesanspro_regular.woff2>; rel=preload; as=font crossorigin 

Pour plus d'informations, voir ici: https://github.com/w3c/preload/issues/32 et ici: https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/.

Un point intéressant d'aller sur: Vous devez ajouter un attribut crossorigin lors de la récupération des polices, car ils sont récupérés en utilisant le mode anonyme CORS. Oui, même si vos polices ont la même origine que la page. Pardon.