© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
QUELQUES CHIFFRES
© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
QUELQUES CHIFFRES
Amazon
100 ms de temps chargement supplémentaire fait
perdre 1 % des ventes.
1 s de chargement supplémen...
QUELQUES CHIFFRES
Yahoo
400 ms de plus et c’est 5 à 9 % de départs avant la
fin du chargement complet de la page.
© Copyri...
QUELQUES CHIFFRES
Google
500 ms supplémentaires réduit le nombre de
recherche de 20 %.
Si Google perdait 30 % de son poids...
QUELQUES CHIFFRES
Technologie Fin 2013 Fin 2014 Augmentation
HTML 57 Ko 59 Ko + 4 %
CSS 46 Ko 57 Ko + 24 %
JavaScript 276 ...
PROGRESSION DANS LE TEMPS
Période : 28 décembre 2010 au 1 janvier 2015
717 Ko à 1925 Ko (environ 168 % de plus)
77 à 95 re...
ENCORE DES CHIFFRES !
95 requêtes HTTP par page.
Les ressources sont téléchargées à partir de 16 domaines avec un
maximum ...
46 % des pages utilisent
des librairies Google
© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
47 % des pages utilisent
des Custom Fonts
© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
79 % des pages sont
Compressées
© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
14 % des pages
utilisent Https
© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
65 % des pages
utilisent des Iframes
(des vidéos et des publicités pour la plupart)
© Copyright UX-Republic 2015 - blog.ux...
74 % des pages contiennent
au moins une redirection
© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
COMMENT OPTIMISER ?
Optimisations serveur
Optimisation sur le poids de l’application
Optimisation sur l’exécution de l’app...
OPTIMISATIONS SERVEUR
Compression GZIP
Utiliser le cache du navigateur
Utiliser un CDN (Content Delivery Network)
Il y a p...
OPTIMISATION DU POIDS
© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
OPTIMISATION DU POIDS
Il y a plusieurs façons d’optimiser son code :
Il y a plusieurs façons d’optimiser les Images :
Util...
OPTIMISATION DU POIDS
Autres méthodes :
Utiliser le lazyloading (ou on-demand content)
Remplacer les images avec des effet...
OPTIMISATION DU POIDS
Boutons de partage des réseaux sociaux :
Facebook like 270 Ko
Google+ share 135 Ko
Twitter share 95 ...
OPTIMISATION DE L’EXÉCUTION
Remplacer les animations JavaScript avec des effets et animations CSS3
Mass Element Injection
...
TOUJOURS PLUS LOIN
Ne jamais faire confiance à un code tiers
Une librairie JavaScript est bien suffisante
Se méfier des te...
UX-Design - Optimisation des applications web
Prochain SlideShare
Chargement dans…5
×

UX-Design - Optimisation des applications web

2 388 vues

Publié le

Améliorer l'expérience en optimisant les Applications Web.

UX-REPUBLIC
Agence de Design d'interfaces & Centre de formation.
www.ux-republic.com

156 boulevard Haussmann - 75008 Paris
+33 1 45 61 47 56 - hello@ux-republic.com

Par Nicolas Gillot

Publié dans : Design
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 388
Sur SlideShare
0
Issues des intégrations
0
Intégrations
125
Actions
Partages
0
Téléchargements
29
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

UX-Design - Optimisation des applications web

  1. 1. © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  2. 2. QUELQUES CHIFFRES © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  3. 3. 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. © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  4. 4. QUELQUES CHIFFRES Yahoo 400 ms de plus et c’est 5 à 9 % de départs avant la fin du chargement complet de la page. © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  5. 5. 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. © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  6. 6. 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. © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  7. 7. 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 © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  8. 8. 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. © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  9. 9. 46 % des pages utilisent des librairies Google © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  10. 10. 47 % des pages utilisent des Custom Fonts © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  11. 11. 79 % des pages sont Compressées © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  12. 12. 14 % des pages utilisent Https © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  13. 13. 65 % des pages utilisent des Iframes (des vidéos et des publicités pour la plupart) © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  14. 14. 74 % des pages contiennent au moins une redirection © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  15. 15. 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 : © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  16. 16. 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 : © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  17. 17. OPTIMISATION DU POIDS © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  18. 18. 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 © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  19. 19. OPTIMISATION DU POIDS 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 © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  20. 20. OPTIMISATION DU POIDS 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/ © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  21. 21. OPTIMISATION DE L’EXÉCUTION Remplacer les animations JavaScript avec des effets et animations CSS3 Mass Element Injection Event delegation © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
  22. 22. 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 © Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot

×