@font-face et rapidité d'affichage sous IE

Bonjour à tous !

Je fais appel à vous pour une petite affaire d'optimisation d'un site sous IE. ... Ne riez pas.

En effet, lors d'un appel @font-face qui ne pose bien entendu aucun problème sur la majorité des navigateurs, sous IE, il subsiste un instant de flottement au cours duquel IE utilise la police par défaut avant de repasser sur la bonne police.

Le code utilisé dans mon style.css est le suivant :

@font-face {
    font-family: 'nom_police';
    src: url('./fonts/nom_police.eot');
    src: url('./fonts/nom_police.eot?#iefix') format('embedded-opentype'),
         url('./fonts/nom_police.woff') format('woff'),
         url('./fonts/nom_police.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

La police en question a été retravaillée par une collègue graphiste.
Le site est disponible à cette adresse : www.acatus.fr

La question est simple : existe-t-il un moyen d'optimiser l'appel des font afin d'améliorer la vitesse d'affichage sous IE, ou est-ce dépendant de la machine et/ou du débit de connexion ?

Merci d'avance pour vos futures réponses !

Bonjour,

Vous utilisez la syntaxe normale pour un appel en font-face (hormis le SVG qui n'est pas proposé). Tout est correct, mais je ne crois pas que vous pourrez faire des miracles avec IE8 qui est un navigateur extrêmement lent par rapport aux navigateurs modernes.

Vous pouvez toujours tenter d'améliorer vos perfs en appelant certains fichier à partir d'une source externe à votre site, je veux dire : placée sur un autre nom de domaine. Cela vous permettrait d'obtenir plus de chargements simultanés de fichiers par les navigateurs, et accélérait ainsi la vitesse de téléchargement d'une page.

salut,
appeler des fonts sur un autre domaine (même sous-domaine) ne les chargera pas sur FF et Opera et je pense même pour IE.
Je ne pense pas que ça soit gênant à ce point mais il n'existe pas grand chose à faire.

Bonjour et bienvenue,

préalable : est-ce que la police est modifiable, légalement ? Je ne suis pas allé regarder sous quelle licence elle était disponible mais vous devriez (à part qu'étant disponible via Google, il est autorisé d'utiliser l'originale via @font-face, ça pas trop de doute )

Ce n'est pas une police qui est téléchargée mais 4 : 4 graisses différentes de la même police. Avez-vous vraiment besoin de plus d'1 voire 2 graisses de cette police ?
Quel poids total ? (Firebug ne me l'affiche pas et j'ai la flemme de vérifier à la main...)

Le terme qui peut aider pour une recherche Google : FLOUC ou FOUC (Flash Of Unstyled Content).

Sinon d'autres optimisations sont recommandées :
- une seule feuille de style regroupant les CSS des plugins WP,
- un minimum de fichiers JS et a priori chargés à la toute fin du code HTML, juste avant </body> (minimum : charger jQuery de préférence depuis les serveurs de Google ou équivalent et 1 seul fichier JS avec les scripts du site, ce qui fait 2 fichiers)
- le poids des images ! 1,5 Mo pour la page d'accueil c'est énorme si c'est le cas. Ah oui une animation Flash de 1,3 Mo pour IE8 et moins... oui forcément c'est un peu plus long du coup ? Je me réfère à cet outil de perf web : http://www.webpagetest.org/result/130615_KS_AQR/ , qui intègre les critères de Google Page Speed d'ailleurs (en haut à droite)
Modifié par Felipe (15 Jun 2013 - 10:22)

Bonjour !

Tout d'abord, merci beaucoup pour vos réponses et votre réactivité

Felipe a écrit :
préalable : est-ce que la police est modifiable, légalement ?

C'est ma collègue graphiste qui s'est occupée de ce point-là. Je ne suis pas au fait de tous les détails, mais je sais qu'elle a fait ça correctement

Felipe a écrit :
Avez-vous vraiment besoin de plus d'1 voire 2 graisses de cette police ?

La police de base appelée via fonts.googleapis n'avait pas un rendu extraordinaire en terme de découpage sur certaines lettres, c'est pourquoi elle a été modifiée pour pouvoir obtenir un meilleur rendu selon les pages et div voulues.

Felipe a écrit :
Quel poids total ?

Je vérifierai lundi pour apporter une réponse (je n'ai pas accès à l'ensemble de mes sources les WE).

Felipe a écrit :
Le terme qui peut aider pour une recherche Google : FLOUC ou FOUC (Flash Of Unstyled Content).

J'en prends note et verrai cela lundi également.


-------------

Ma demande initiale ne portait pas spécialement sur la page d'accueil, plutôt sur les autres pages sous IE et l'affichage des polices, mais je te remercie d'avoir évoqué les points suivant (en tant que jeune développeur, toute remarque est bonne à prendre):

Felipe a écrit :
Sinon d'autres optimisations sont recommandées :
- une seule feuille de style regroupant les CSS des plugins WP,
- un minimum de fichiers JS et a priori chargés à la toute fin du code HTML, juste avant &lt;/body&gt;

Cela peut être faisable pour les CSS, la quantité de plugins utilisés pour du contenu affiché n'étant pas énorme. Pour les fichiers JS ce sera probablement un peu plus long, ce serait-ce que pour repérer les fichiers WP où les appels sont effectués.

Felipe a écrit :
- le poids des images ! 1,5 Mo pour la page d'accueil c'est énorme si c'est le cas. Ah oui une animation Flash de 1,3 Mo pour IE8 et moins... oui forcément c'est un peu plus long du coup ?

Ça je le reconnaît, ce n'est pas optimal du tout. Mais l'animation de base étant Adobe Edge (donc CSS3 si je ne dis pas de bêtises) et que CSS3 n'est pas géré par IE8 et moins, c'est une des solutions que nous avons trouvé avec ma graphiste. Je peux toujours lui demander de voir s'il est possible de réduire la taille du fichier.
Néanmoins, l'animation Adobe fait appel dans ses sources à des polices qu'il n'utilise pas. Cela peut sans-doute jouer sur sa taille et/ou sa vitesse. Je verrai également avec ma collègue.

Felipe a écrit :
Je me réfère à cet outil de perf web : http://www.webpagetest.org/result/130615_KS_AQR/ , qui intègre les critères de Google Page Speed d'ailleurs (en haut à droite)

Adresse à garder en onglet effectivement.

Je ferai un retour plus poussé lundi dans la soirée je pense.
Merci beaucoup et bon WE en attendant
Modifié par ptoma (15 Jun 2013 - 11:28)

Bonjour à tous (désolé pour la réponse tardive).

Concernant la page d'accueil : ma collègue graphiste s'est aperçue que les images de ses animations n'étaient pas remplacée suites à nos tests d'intégrations, mais dupliquées ! D'où les temps de chargements beaucoup trop longs. De même, elle a trouvé le moyen d'alléger de façon drastique l'animation flash pour IE8 et moins. La vitesse de chargement devrait se voir nettement améliorée.

Concernant les polices, nous travaillons de notre côté pour déterminer le meilleur moyen d'appeler les polices, tant pour l'animation Adobe que le reste du site (@import url, @font-face classique, ou utilisation de script .js disponibles via le site http://html.adobe.com/fr/edge/webfonts/ ).

Vos conseils nous ont beaucoup aidé cette semaine, merci encore

PS : je laisse le sujet ouvert pour le moment tant que le l'optimisation d'import des polices n'est pas complètement résolu.