UX-Design - Optimisation des applications web

QUELQUES CHIFFRES

QUELQUES CHIFFRES
Amazon
100 ms de temps chargement supplémentaire fait
perdre 1 % des ventes.
1 s de chargement supplémentaire ferait perdre 1,6
milliard de dollars de manque à gagner par an.

QUELQUES CHIFFRES
Yahoo
400 ms de plus et c’est 5 à 9 % de départs avant la
fin du chargement complet de la page.

QUELQUES CHIFFRES
Google
500 ms supplémentaires réduit le nombre de
recherche de 20 %.
Si Google perdait 30 % de son poids,
ce serait 30 % de trafic supplémentaire.

QUELQUES CHIFFRES
Technologie Fin 2013 Fin 2014 Augmentation
HTML 57 Ko 59 Ko + 4 %
CSS 46 Ko 57 Ko + 24 %
JavaScript 276 Ko 295 Ko + 7 %
Images 1 030 Ko 1 243 Ko + 21 %
Flash 87 Ko 76 Ko - 13 %
Other 205 Ko 223 Ko + 9 %
Total 1 701 Ko 1 953 Ko + 15 %
En 2014, le poids moyen des pages Web a augmenté de 15 %
pour atteindre presque 2 Mo (1 953 Ko) avec 95 requêtes.

PROGRESSION DANS LE TEMPS
Période : 28 décembre 2010 au 1 janvier 2015
717 Ko à 1925 Ko (environ 168 % de plus)
77 à 95 requêtes (environ 23 % de plus) Source : http://httparchive.org

ENCORE DES CHIFFRES !
95 requêtes HTTP par page.
Les ressources sont téléchargées à partir de 16 domaines avec un
maximum de 52 requêtes par domaine.
La moyenne du score sur PageSpeed est de 78 sur 100.

46 % des pages utilisent
des librairies Google

47 % des pages utilisent
des Custom Fonts

79 % des pages sont
Compressées

14 % des pages
utilisent Https

65 % des pages
utilisent des Iframes
(des vidéos et des publicités pour la plupart)

74 % des pages contiennent
au moins une redirection

COMMENT OPTIMISER ?
Optimisations serveur
Optimisation sur le poids de l’application
Optimisation sur l’exécution de l’application
Il y a plusieurs façons d’optimiser une application :

OPTIMISATIONS SERVEUR
Compression GZIP
Utiliser le cache du navigateur
Utiliser un CDN (Content Delivery Network)
Il y a plusieurs façons d’optimiser une application :

OPTIMISATION DU POIDS

Il y a plusieurs façons d’optimiser son code :
Il y a plusieurs façons d’optimiser les Images :
Utiliser le bon format d’image
Redimensionner les images trop grandes
Compresser les images
Supprimer les fonts inutiles
Supprimer les ressources et morceaux de codes inutiles
Concaténer et minifier les fichiers CSS et JavaScript

Autres méthodes :
Utiliser le lazyloading (ou on-demand content)
Remplacer les images avec des effets CSS3
Utiliser des sprites
Utiliser les data URI (base64)
Considérer le SVG (Scalable Vector Graphics)
Remplacer les images par des icon fonts

Boutons de partage des réseaux sociaux :
Facebook like 270 Ko
Google+ share 135 Ko
Twitter share 95 Ko
LinkedIn 80 Ko
Ajouter des social buttons légers :
http://www.sitepoint.com/social-media-button-links/

OPTIMISATION DE L’EXÉCUTION
Remplacer les animations JavaScript avec des effets et animations CSS3
Mass Element Injection
Event delegation

TOUJOURS PLUS LOIN
Ne jamais faire confiance à un code tiers
Une librairie JavaScript est bien suffisante
Se méfier des templates sur les CMS
Supprimer l’inutile dans les frameworks
Amélioration progressive
Adopter un processus de développement
Connaître son code
Simplifier son application
Changer son style de développement

UX-Design - Optimisation des applications web

UX-Design - Optimisation des applications web

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (18)

Mehr von UX REPUBLIC

Mehr von UX REPUBLIC (20)

UX-Design - Optimisation des applications web