Upload
ux-republic
View
951
Download
0
Embed Size (px)
Citation preview
© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
QUELQUES CHIFFRES
© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
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
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
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
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
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
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
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-republic.com - Nicolas Gillot
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’application
Il y a plusieurs façons d’optimiser une application :
© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
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
OPTIMISATION DU POIDS
© Copyright UX-Republic 2015 - blog.ux-republic.com - Nicolas Gillot
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
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
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
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
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