4. +
Pourquoi ?
Taux de conversion
Un acheteur n’aime pas attendre
Amazon : Perte d’1% du C.A. toutes les 100ms
2/5 visiteurs abandonnent leur panier si chargement > 3s
Référencement
Pris en compte par Google (officiel)
30% de poids en moins : 30% de trafic en plus
Augmentation de la note affectée à AdWords
5. +
Pourquoi ?
Taux de rebond
500ms de chargement : 20% de recherche en moins chez Google
Economie de bande passante
Montée en charge facilitée
6. +
Waterfall
Début du rendu, fin de la page blanche
7. +
Waterfall
Le frontend et le réseau représentent 90% du boulot
Le téléchargement dépend de
Recherche DNS (~20/100ms)
Connexion TCP
Téléchargement du contenu
Le Javascript bloque les autres téléchargements (le relou)
Les navigateurs limitent les téléchargements en parallèle par domaine (les
relous)
8. +
Les solutions côté frontend !
DNS prefetching
<link rel="dns-prefetch" href="//assets.foo.com"> # Sauf IE < 10
Déporter l’inclusion des Javascripts à la fin du <body>
Rendre asynchrone le chargement des plugins sociaux
Mettre en place des domaines spécifiques (ou CDN) pour
augmenter le chargement en parallèle
9. +
Les solutions côté frontend !
Diminuer le temps de chargement et le nombre de requêtes HTTP
Concatener et minifier les JS/CSS
Utiliser les sprites pour les images
Outil d’optimisation d’image (Pngcrush)
CDN géolocalisé (réduit la latence)
10. +
Réduire le reflow
Quand ?
Redimensionnement fenêtre
Changement taille police
Changement contenu
Pseudo classe ( :hover )
Changement de style en JS
11. +
Réduire le reflow
Comment ?
Diminuer la profondeur du DOM
Supprimer les règles CSS inutiles
Simplifier les règles CSS
Spécifier les dimensions des images
13. +
Autour du backend
Serveur WEB
Compression gzip (mod_deflate d’Apache)
Module d’expiration (mod_expire d’Apache)
Base de donnnées
Index
Optimisation des requêtes (EXPLAIN, Last_query_cost)
Table temporaire, dénormalisation
14. +
Autour du backend
Prévoir ses applications de façon scalables
Master/slave MySQL – NoSQL
Queue de message (AMQP) : RabbitMQ, ZeroMQ, ZendQueue
CRON
Appels I/O asynchrones (NodeJS)
15. +
Outils
Google page speed (module Chrome / Firefox)
Yslow (module Chrome / Firefox)
Web page test ( webpagetest.org )
