[ Conseils ]

[Adrien Leygues]

Hello,

on vient de sortir un site avec mes collègues (je crois que Fabien est sur la liste) : http://www.louisvuitton-histoires.com/

Julien me faisait remarquer que l'"import" des webfonts bloque le chargement des ressources suivantes comme montré ici: http://www.webpagetest.org/result/130423_C8_FCY/1/details/

Est-ce qu'il y aurait un contournement possible à ce blocage ?

Et comme je vous vois venir, s'il y a une des optimisations qui valent plus la peine que celle-ci, je suis bien sur preneur ! Je crois que je vais refaire un tour sur l'optimisation des images suite à l'alerte remontée par webpagetest.

Merci,

Adrien

--
[ Adrien Leygues ]
http://www.paris-web.fr
http://www.bootleygues.net

[Cédric Morin]

Il me semble que dans ton cas, cela bloque surtout parce que ta CSS est chargée après les JS et que c'est un ordre bloquant (ce qui marche bien c'est : js inline, css externe puis js externe). 

Bizarrement, ce n'est pas le même ordre d'appel que je vois dans ton HTML quand j'affiche le code source de la page...

Cédric

--
--
Liste de diffusion sur les performances web : http://groups.google.com/group/performance-web
Plus d'informations : http://performance.survol.fr/
Se déinsinscrire : performance-w...@googlegroups.com
---
Vous recevez ce message, car vous êtes abonné au groupe Google Groupes performance-web.
Pour vous désabonner de ce groupe et ne plus recevoir d'e-mails le concernant, envoyez un e-mail à l'adresse performance-w...@googlegroups.com.
Pour plus d'options, visitez le site https://groups.google.com/groups/opt_out .
 
 

[Anthony Ricaud]

L'inclusion de vos polices se fait via un @import, ce qui est maaaal [1]. Je recommande donc déjà de mettre l'URL du @import dans le HTML plutôt que de passer par fontWebInk.css.

D'ailleurs, ce fontWebInk est le seul situé sur un domaine différent, ce qui retarde grandement son chargement. Voir à passer d'autres ressources sur ce domaine ou enlever toute référence à ce domaine.

[1] http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

[Adrien Leygues]

Merci pour vos réponses.

Concernant l'import dans la feuille de style externe, il ne faut pas perdre de vue qu'il s'agit d'un service de webfonts qui dans mon cas est fourni par la DSI de Vuitton. Par conséquent on appelle une feuille de style qui nous renvoie dynamiquement les bons formats de fontes en fonction du support du navigateur (WOFF pour FF, EOT pour IE etc...).

Je pourrais regarder les réponses sur chaque navigateur mais par conséquent d'une part je perds le bénéfice des améliorations que peut apporter le fournisseur et d'un autre côté je reprends la responsabilité et la charge des éventuelles mise à jour.

Adrien

2013/4/23 Anthony Ricaud <ant...@ricaud.me>

[jpvincent]

La solution idéale pour la Webperf, ça serait de charger les fonts en asynchrone. Ça ne bloque pas le rendu tant que la font n'est pas là. Par contre vu qu'on est dans le luxe, je peux comprendre que cela coûte en terme d'image d'afficher les textes que je vois sans la font officielle.

Du coup, vu la taille du site on peut bricoler :

- chargement en asynchrone avec timeout

- tant que la font n'est pas là, ne pas afficher les textes qui en dépendent

[Eric Daspet]

2013/4/24 jpvincent <jeanpierr...@gmail.com>:

> La solution idéale pour la Webperf, ça serait de charger les fonts en
> asynchrone. Ça ne bloque pas le rendu tant que la font n'est pas là. Par
> contre vu qu'on est dans le luxe, je peux comprendre que cela coûte en terme
> d'image d'afficher les textes que je vois sans la font officielle.
> Du coup, vu la taille du site on peut bricoler :
> - chargement en asynchrone avec timeout
> - tant que la font n'est pas là, ne pas afficher les textes qui en dépendent

Je crois que justement ça dépend des navigateurs :
* Certains affichent le texte dès qu'ils l'ont, avec la police par défaut
* D'autres n'affichent rien tant qu'ils ne l'ont pas

le problème de ton second point, c'est que ce passe-t-il si le réseau
est vraiment lent ? si la connexion s'arrête au milieu (réseau mobile)
? Je sais que tu parles de timeout mais je veux insister dessus :
c'est indispensable.

Si vraiment c'est un titre orienté "logo", alors image + texte
alternatif, sinon il faut qu'on accepte de laisser dégrader avec une
police standard.

--
Eric

Éric Daspet
http://eric.daspet.name/