ON VEUT DES CHIFFRES ! Sites e-commerce et attente client 57 % des visiteurs quittent un site e-commerce s'il met plus de 4 secondes à s'afficher – PhoCusWright / Akamai (2010) “
26 % des visiteurs quittent un site e-commerce s'il met plus de 2 secondes à s'afficher – PhoCusWright / Akamai (2010) “ ON VEUT DES CHIFFRES ! Sites e-commerce et attente client
ON VEUT DES CHIFFRES ! C'est pire sur mobile ! 60% des mobinautes s'attendent à un chargement de 3s maximum pour un site mobile – Compuware (2011) “ … Et 74% quittent une page après 5 secondes d'attente – Compuware (2011) “
MAIS AUSSI (SURTOUT ?) ... Sources : WebRankInfo / 1ere-position.fr / silicon.fr En 2010, Google a annoncé officiellement qu'il tenait compte de la rapidité des sites dans son algorithme de positionnement. Google recommande un délai moyen de 1,5 seconde pour l’affichage d’une page web. ❶ ❷
LE TYPE DE CONNEXION 3G 20 minutes ➞ 3G+ 1min 15s ➞ 4G 10 secondes ➞ Concrètement... Source : Orange (bon OK c'est un peu bullshit marketing) Téléchargement d'un album de musique :
LE POIDS DES RESSOURCES Images 700 Ko ➞ JavaScript 230 Ko ➞ CSS 37 Ko ➞ HTML 45 Ko ➞ Autres 188 Ko ➞ 1,2Mo au total en moyenne : Source : AlexaRank Top 1000 (janvier - août 2013)
LE NOMBRE DE REQUÊTES Images 60 requêtes ➞ JavaScript 17 requêtes ➞ CSS 3,5 requêtes ➞ HTML 10 requêtes ➞ Autres 7 requêtes ➞ 98 requêtes en moyenne : Source : AlexaRank Top 1000 (janvier - août 2013)
LE NOMBRE DE REQUÊTES … à cause de la latence Latence ● dépend du serveur, du DNS ● dépend de la connexion : ● 20-60ms via ADSL ● 200-600ms en 3G Chargement ● dépend du poids
MANUELLEMENT Extensions : YSlow et PageSpeed YSlow (Yahoo!) : plugin disponible sur Firefox, Chrome, Safari, Opera PageSpeed (Google) : plugin Chrome, Firefox et en ligne
EN DÉTAIL Hébergez les ressources sur plusieurs domaines « » Hébergez les ressources (images, médias) sur plusieurs domaines différents. Cette technique favorise leur téléchargement en parallèle. Un sous-domaine fonctionne aussi (ex. media.alsacreations.com), et un domaine sans cookies est encore plus performant. Source : Yahoo!UI blog Opera : 8 / IE10 : 8 / Chrome : 6 / Firefox : 6 / IE8/IE9 : 6 / Safari : 4 / IE6/IE7 : 2 ❶
RÉDUIRE LE POIDS DES RESSOURCES Minifiez les fichiers CSS Minifiez les fichiers JS Compressez les images Choississez le bon format d'image (.png, .gif, .jpg) Optez pour des fontes légères (.woff est généralement plus léger) ❷
RÉDUIRE LES REQUÊTES Réunissez les feuilles de styles CSS en une seule si possible Réduisez / réunifiez le nombre de fichiers JavaScript externes si possible N'utilisez pas (ou presque pas) d'images ! → Sprites CSS, → Data-URI, → Caractères unicodes, → Font Icons, ... ❸
NE CHARGER QUE LE NÉCESSAIRE Chargez les scripts externes en Asynchrone et/ou Différé N'utilisez pas display : none pour masquer un élément jQuery est parfois inutile et remplaçable par jQuip ou Zepto.js, plus légers Triez les scripts nécessaires et les scripts de confort JavaScript est parfois avantageusement remplaçable par CSS3 : bordures, arrondis, ombrages, animations, formes simples (triangles, ronds, carrés) Pensez à faire du chargement conditionnel de ressources (selon taille d'écran, pixel-ratio, ...) ❹
CÔTÉ SERVEUR Compressez les fichiers texte côté serveur (HTML, CSS, JS) Générez certaines pages « à l'avance » (ex. flux RSS) Gérez les durées de cache des éléments ❺
goetter
tajima_kaho
hjmkth
akwkm
cyberagentdevelopers
uxevents
shoty_k2
cyrilmottier
findyinc
loglass2019
koel
akinen
jennybc
shlominoach
lara
tmm1
tanoku
rmw
morganepeng
denniskardys
soudai
scottboms
rasmusluckow
davidbonilla