Pensez aux favicon

Le favicon je pense que vous voyez ce que c’est : cette petite icône bête et méchante qu’on voit à côté de l’URL dans la barre d’adresse du navigateur. Là où c’est moins intuitif c’est que ce favicon peut avoir un impact important dans les performances de votre site.

Qu’est ce qu’il se passe ? à chaque visite le navigateur va chercher cette icône. Le traffic lié à cette icône peut dépasser 10% du traffic total, principalement sur des sites « de passage » (9% sur Yahoo! Search nous dit Stoyan Stefanov). Une petite optimisation aura alors une grande influence. Alors cherchons les problèmes un à un :

Premier échec

Vous n’avez pas fait de favicon.ico, ou cette icône n’est pas à l’emplacement cherché par le navigateur. Ce dernier va donc télécharger… votre page d’erreur 404, donc probablement quelques kilo-octets de HTML inutiles. On en revient à ce dont nous avions parlé précédemment : faites des pages d’erreurs courtes et légères. Mais surtout, prévoyez toujours un fichier /favicon.ico pour éviter de tomber sur la page d’erreur 404.

Second échec

Vous n’avez pas mis un bête fichier dans /favicon.ico sans vous embêter plus. Le navigateur télécharge ce fichier à chaque nouvelle visite. L’utilisateur perd du temps, occupe sa file de téléchargements avec une requête inutile, et surcharge votre serveur. Mettez une entête d’expiration explicite sur le favicon. Il change de toutes façons rarement et une expiration à deux mois ne gênera vraiment personne.

Troisième échec

Votre favicon contient une version 16x16px, une 32x32px, une 48x48px, toutes en millions de couleurs. Le format permet en effet d’avoir plusieurs images de différentes tailles, et des couleurs sur 24 bits. Le format 16px est utilisé pour la barre d’adresse, les suivants peuvent être utilisés quand vous faites glisser un raccourci sur votre bureau. Évidemment le marketing est formel, l’icône en 24 bits est bien plus jolie. Le résultat c’est que votre simple icône va finir par faire 5 à 10ko, c’est à dire beaucoup trop. Sérieux, au delà de 900 octets, vous êtes en faute. Gardez une icône de 16x16px en 256 couleurs. Pour ce qui en est fait par les visiteurs, c’est largement suffisant.

Si votre marketing insiste faites une détection de navigateur et proposez une image PNG pour les navigateur récents, une icône Microsoft en 16x16px sur 256 couleurs pour les autres (Internet Explorer 6 par exemple). Grâce à la compression vous atteindrez des tailles et des qualités bien meilleures tout en restant en dessous du kilo-octet.

Quatrième échec

Vous avez gardé le chemin par défaut de /favicon.ico. Le résultat c’est que vous n’utilisez pas votre CDN et tous les avantages qu’il procure. Insérez un lien dans les entêtes de vos pages HTML pour donner un chemin explicite à votre favicon. Le téléchargement du favicon sera plus rapide (parce que sur le CDN), profitera des entêtes de cache du CDN, et sera sur un domaine tiers qui n’handicapera pas les files de téléchargement du domaine principal. Par contre gardez toujours une icône de base sur le chemin par défaut, au cas où et pour les documents qui ne sont pas en HTML (sinon vous retombez dans le premier échec).

<link rel="shortcut icon" 
      type="image/png"
      href="//CDN.example.org/favicon" />