UX-Design - Optimisation des applications web

QUELQUES CHIFFRES

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.

QUELQUES CHIFFRESYahoo

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

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.

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 2015717 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

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

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

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/

OPTIMISATION DE L’EXÉCUTION

Remplacer les animations JavaScript avec des effets et animations CSS3

Mass Element Injection

Event delegation

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

UX-Design - Optimisation des applications web

Design

Lettre aux actionnaires - NEURONES · • digitaliser le «parcours client » (applications mobiles, UX/ UI, sites « % CAmobile first », marketing digital…), • utiliser les

Cabinet Fauche Ux

Ux junior, c'est quoi ?

Optimisation sur les graphes et applications aux problèmes

BABY UX ou déformation professionnelle d'une maman UX Designer

Resultats récents sur l’accélération d’ions : optimisation de faisceau et applications

FLUPA UX-Day 2013 : Fabien Marry "Comment dépasser l’écran tactile pour une meilleure accessibilité des applications smartphones et tablettes ?"

Lean UX - FLUPA UX Days 2016

Design Thinking & UX/UI

NAILL UX ACCUEIL

Adrien Frey UX / UI Designer · Création d’animation de chargement pour les applications. Premier prix du hackathon Hyblab data-sport 2016 Hackhaton faisant travailler en équipe

UX methode-paris web

Ux, l'innovation invisible waq

Planète UX

Méthode du simplexe - ift.ulaval.cadupuis/Optimisation lineaire et applications... · Méthode du simplexe Introduction, définitions et notations préliminaires, théorèmes fondamentaux,

6e Christian Soutou édition SQL - eyrolles.com · SQL Oraclepour Applications avec Java, PHP et XML Optimisation des requêtes et schémas Christian SoutouSQL Oraclepour Applications

Le design UX

Optimisation linéaire: Applications · Voir chier Ex1-Oak Products.xlsx MTH8415: Optimisation lin eaire: Applications 17/60 Solveur Excel Autres solveurs Approx. lin eaires Jeux

Revalorisez vos applications et augmentez l'adoption grâce aux nouvelles solutions UX/UI de SAP

Optimisation de diodes Schottky pour les applications THzhebergement.u-psud.fr/nanoelec-thz-team/wp-content/... · Titre : Optimisation de diodes Schottky pour les applications THz