Articles mot-clétés performances
Quand ne faut-il pas mettre en ligne un site Web ?
9 décembre 2010 18 commentaires — bonnes pratiques, parisweb, performances, serveurs, webdev
Il y a mieux à faire
les vendredis…
- Le vendredi
- Le soir
- À un pic de fréquentation
Merci.
L’importance des performances Web
30 octobre 2010 1 commentaire — bonnes pratiques, paris web, performances, web
« Motion blur » de theomonnie
Pourquoi faut-il prendre du temps à optimiser une page web pour qu’elle se charge rapidement ? Quelques statistiques tirées de conférences Paris Web.
- Amazon : un délai de 100ms c’est -1% de ventes
- Yahoo! : un délai de 400ms c’est +5 à +9% d’abandon sur un site éditorial
- Google : un délai de 500ms c’est -20% de trafic
- Google : -25% de poids de page c’est +25% d’utilisateurs deux semaines plus tard
- Google UK : les clics sur les pubs doublent en passant de 3s à 0.5s de temps de chargement
- Shopzilla : 5-12% de chiffre d’affaires en plus en passant de 6s à 1.6s
- AOL : 2 à 3 fois plus de pages vues pour des pages optimisées
- Bing : un délai de 2s c’est -4% de revenu par utilisateur
Sources :
- Performances Web de Jean-Pierre Vincent à Paris Web 2010
- Performances Web Côté Client d’Eric Daspet et Nicole Sullivan à Paris Web 2008 (Yahoo!)
- Impact of web latency on conversion rates de Alistair Croll
- Marissa Mayer (Google)
Utiliser font-face pour des images ?
18 juin 2010 3 commentaires — font-face, html, images, performances, sprites, unicode, web
Depuis que @font-face est utilisable partout, on a envie de pousser les limites de son utilisation. Utiliser des générateurs automatiques, créée des police d’écritures qui ne transforment que le caractère &, etc.
Dans l’article ever- thought about using font face for icons? ils expliquent comment faire une page où toutes les images seraient contenues dans un fichier de police. En appliquant chaque icône à une lettre, on a des images dans la police d’écriture
Cela donne des images :
- qui s’agrandissent sans perte de qualité ;
- très faciles à colorer, agrandir, souligner en CSS ;
- rapides à charger car cela ne fait qu’une requête HTTP pour tout le paquet d’icônes.
Mais cette technique souffre de serieux points faibles. En plus d’être plus difficile à maintenir, il faut choisir entre un HTML qui n’a aucun sens comme <span class="phone-icon">a</span> ou une feuille de style CSS imbitable qui ne fonctionne pas sous IE :
.phone-number:before {
content: 'a';
font-family: "Mes Icônes"
}La solution serait de ne remplacer que les quelques caractères Unicode qui représentent déjà des icônes. Ainsi on garde du sens à l’HTML et on peut profiter de la cascade des polices d’écriture disponibles.
