Sunfox


Articles mot-clétés performances

Quand ne faut-il pas mettre en ligne un site Web ?

décembre 9th, 2010 , 18 commentaires.

Sur votre calendrier, remplacez mise en ligne les vendredi à 19:00 par sodomie
Il y a mieux à faire
les vendredis…

  • Le vendredi
  • Le soir
  • À un pic de fréquentation

Merci.

L’importance des performances Web

octobre 30th, 2010 , 1 commentaire.

Motion blur
« 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 :

Utiliser font-face pour des images ?

juin 18th, 2010 , 3 commentaires.

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

Représentation de l'association de lettres de A-Z et a-z à des icônes

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.

<li> +33-666-42-42-50</li>

:D Sunny Ripert

est un développeur web vivant à Paris. Contact


Textes et contenus sous licence Creative Commons. Site propulsé par WordPres