23
© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot

UX-Design - Optimisation des applications web

Embed Size (px)

Citation preview

Page 1: UX-Design - Optimisation des applications web

© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot

Page 2: UX-Design - Optimisation des applications web

QUELQUES CHIFFRES

© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot

Page 3: UX-Design - Optimisation des applications web

QUELQUES CHIFFRESAmazon

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

Page 4: UX-Design - Optimisation des applications web

QUELQUES CHIFFRESYahoo

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

Page 5: UX-Design - Optimisation des applications web

QUELQUES CHIFFRESGoogle

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

Page 6: UX-Design - Optimisation des applications web

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

Page 7: UX-Design - Optimisation des applications web

PROGRESSION DANS LE TEMPS

Période : 28 décembre 2010 au 1 janvier 2015717 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

Page 8: UX-Design - Optimisation des applications web

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

Page 9: UX-Design - Optimisation des applications web

46 % des pages utilisent des librairies Google

© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot

Page 10: UX-Design - Optimisation des applications web

47 % des pages utilisent des Custom Fonts

© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot

Page 11: UX-Design - Optimisation des applications web

79 % des pages sont Compressées

© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot

Page 12: UX-Design - Optimisation des applications web

14 % des pages utilisent Https

© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot

Page 13: UX-Design - Optimisation des applications web

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

Page 14: UX-Design - Optimisation des applications web

74 % des pages contiennent au moins une redirection

© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot

Page 15: UX-Design - Optimisation des applications web

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

Page 16: UX-Design - Optimisation des applications web

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

Page 17: UX-Design - Optimisation des applications web

OPTIMISATION DU POIDS

© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot

Page 18: UX-Design - Optimisation des applications web

OPTIMISATION DU POIDSIl 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

Page 19: UX-Design - Optimisation des applications web

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

Page 20: UX-Design - Optimisation des applications web

OPTIMISATION DU POIDSBoutons 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

Page 21: UX-Design - Optimisation des applications web

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

Page 22: UX-Design - Optimisation des applications web

TOUJOURS PLUS LOINNe 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