2 heures de présentation sur les techniques de performance Web, leurs limites et la raison de le faire

1. Techniques d’accélération des pages Web
Jean-Pierre VINCENT
Consultant indépendant
#WebPerf - @theystolemynick
Braincracking.org

2. Bonjour, je m’appelle Jean-Pierre
● 5 10 13 ans de Web
● PHP, JavaScript, HTML5, CSS
● Ex :
– startups, Yahoo!, houra.fr
● Expert frontend indépendant
● Veilleur :
– braincracking.org
– @theystolemynick

3. Performance Web ?
Les 10 14 35 commandements
http://developer.yahoo.com/performance/rules.html

4. Comment faire le tri ?
● Yahoo! Best Practices (35 ● Nouveaux navigateurs
● Nouveaux besoins
règles)
● Mobile
● Google PageSpeed (31 règles)
● Test Opquast (41 règles)
● En vrai : 500+ pratiques

5. Pourquoi la performance ?
● SEO
– 1 critère de référencement
chez Google
– Métrique : temps « onload »
– Mesurée par les utilisateurs
http://googlewebmastercentral.blogspot.fr/2010/04/using-site-speed-in-web-search-ranking.html

6. Pourquoi la performance ?
● Un administrateur système
heureux

7. Pourquoi la performance ?
● Qualité perçue
$$
● Ergonomie
● Réponse à un besoin
● Métrique : premier rendu

8. Combien coûte une seconde ?

9. Combien coûte une seconde ?
Tunnel d’achat :
1s = -7% de
conversion

10. Combien coûte une seconde ?
Vidéo :
1s =-6% de vue
Akamai 2012

11. Combien coûte une seconde ?
Voyage
4s = -60% de vue

12. Combien coûte une seconde ?
Search
● Bing : 1 s =
- 3 % de CA
● Yahoo! : 1 s =
+ 10 % de rebond

13. Combien coûte une seconde ?
Mobile
● 1 s = -10% de pages vues
● Après 4 s : 60% d'abandon
http://www.themediabriefing.com/article/2012-10-02/speed-is-a-feature-why-a-slow-mobile-web-experience-means-lost-revenue
http://www.strangeloopnetworks.com/resources/infographics/2012-state-of-mobile-ecommerce-performance/poster
/

14. Chantier Webperf
Comment ne pas rater un chantier Webperf ?

15. Chantier Webperf
● Objectifs
● Que voient les utilisateurs ?
● Quelles techniques ?
● Quel suivi ?

16. Objectifs
Interactivité avec la fonctionnalité <5s

17. Objectifs
Interactivité avec la fonctionnalité <5s
Premier rendu <2s

18. Objectifs
Interactivité avec la fonctionnalité <5s
Premier rendu <2s
Réponse HTML <1s

19. Objectifs
Interactivité avec la fonctionnalité <5s
Premier rendu <2s
Réponse HTML <1s
Chargement de la page < 20 s ?

20. Les utilisateurs
● Grand public français :
● IE 7 is dead !
● Arrivée via réseaux mobiles
● Connexions moyennes :
ADSL Mobiles
Débit 4, 8 Mb/s 2,5 Mb/s
Latence 95 ms 200 ms

21. Les utilisateurs
Répartition des débits (ligne fixe)
• La moyenne n’est pas
représentative 5-10 Mb/s
> 10 Mb/s < 1 Mb/s
1 - 2 Mb/s
● 25% des utilisateurs
ont moins de 2,5 Mb/s
4 - 5 Mb/s 2 - 3 Mb/s
3 - 4 Mb/s

22. Les utilisateurs
Connexion réseau à cibler :
ADSL Mobiles
Débit 2,5 Mb/s 2,5 Mb/s
Latence 110 ms 200 ms
+25% de perte
Navigateurs à cibler :
IE 8
Safari iOS
Android 2.3.x et 4.x

23. Les techniques
Par où commencer ?
Yahoo! Best Practices (35 règles)
Google PageSpeed (31 règles)
Test Opquast (41 règles)
En vrai : 500+ pratiques

24. Configuration serveur
1. Configuration du keep-alive :
KeepAlive On
KeepAliveTimeout 5
Timeout 10
2. Activer la compression

25. Gérer son cache
→

26. Gérer son cache
Efficace mais :
50% des sites oublient
30% ont un TTL < 30
jours

27. Gérer son cache
« Vide ton cache »
Sans cache :
• Phases de recette interne
• Environnements de
développement
Cache agressif :
• Cache utilisateur
• Chaîne de cache réseau

28. Gérer son cache
Cache : invalidation standard
● Serveur
eTag: "xxxxxx"
Ou
Last-Modified: DATE_W3C
• Client
If-None-Match: "xxxxxx"
Ou
If-Modified-Since: DATE_W3C
• Serveur
200 OK
Ou
304 Not Modified

29. Gérer son cache
Cache : invalidation standard
Sert à des cas spéciaux
• Polling
• Revalidation de session
• Environnement de dév.

30. Gérer son cache
Invalidation des caches longs
● Maîtrise totale des URL Mise en cache long :
● HTML
● CSS
Expires : +1 an
● JS
Cache-control :
● Processus de compilation public
● URL rendues uniques par : Vary : xxx
● Numéro de release
● Md5 du fichier

31. Gérer son cache
Le super cache
API Application Cache
● 1 application = 1 pack de
fichiers
● 1 fichier de règles
● 1 API de gestion du
cache
● Surtout sur mobiles

32. Le chemin critique
Trouver le chemin critique
Chemin critique
1er rendu

33. Le chemin critique
Côté client
Ressources bloquantes : Ressources gênantes :
● Redirections ● Images
● Génération de la page ● Iframe
● CSS ● Objets flash / vidéo
● Polices
● JS

34. Le chemin critique
Redirections
● Limiter à 1 max
● Jamais côté client
● Surtout sur mobile

35. Le chemin critique
● Moyens :
● Cache serveur
● Flush()
● Page dynamiques et XHR
● Parallélisation (Big Pipe de FB)

36. Pages statiques
Cache serveur
● Fichiers plats
● Mécanismes des CMS
● memcache
● Varnish
● CDN…
Paramétrage du temps de cache
Contenu personnalisé

37. Technique du Flush()
● Envoyer le <head> au plus tôt

38. Pages semi-dynamiques
● Cache sur les parties statiques
● Envoyer ASAP
● XHR ou SSI pour les parties dynamiques
● Ne pas oublier l'interface
Référencement

39. Le chemin critique
Inclusion des parties dynamiques
● Personnalisation :
Server Side Include

40. Pages semi-dynamiques

41. Extrêmes
Facebook Big Pipe

42. Le chemin critique
Déblayer le chemin critique
● CSS
● Concaténation
● Minification
● Inline ?

43. Le chemin critique
Polices
● Les supprimer …
● Les valider :
● poids,
● utilisée
● compatibilité
● Chargement asynchrone

44. SPOF
Dépendances à des serveurs tiers qui peuvent
bloquer le rendu
Usual suspect :
●http://platform.twitter.com/widgets.js
●https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/j
query.min.js
●http://html5shiv.googlecode.com/svn/trunk/html5.js

45. SPOF-O-Matic
Teste la fragilité aux ralentissements
des serveurs tiers
démo

46. Pause ?

47. Inclure JavaScript
Le choix des armes
● <script src> en haut
● <script src> en bas
● Inline
● defer
● Asynchrone

48. Inclure JavaScript
<script src> en haut
● Si :
● petit
● concaténé
● sans concurrence

49. Inclure JavaScript
<script src> en bas
● Si :
● Page rapide
● Gestion des dépendances
● Pas de document.write()
● Pas de iOS

50. Inclure JavaScript
<script defer>
● Retardé par le onload

51. Inclure JavaScript
Javascript asynchrone
Conditions :
● Chargeur mis inline
● Gestion d'une file de téléchargement
● Remplacer les dépendances inline par des
callback
● Découpe par module
● Téléchargement dépriorisé
● Au top: concaténation + module + asynchrone

52. Outils : analyse
ySlow

53. Outils : analyse
Google PageSpeed

54. Outils : analyse
WebPageTest

55. Outils : analyse
WebPageTest, PageSpeed, ySwow...
Ne pas se focaliser sur les notes

56. Profilers front
IE Developer tools

57. Profilers front
Dynatrace AJAX

58. RUM
✓ Collecte des temps de chargement des utilisateurs
✓ Complément des tests synthétiques
Peut ralentir la page

59. RUM
Gratuit Commercial
● Boomerang JS
● LogNormal
● Torbit
● Google Analytics
● Yottaa
● New Relic
● Cedexis
…

60. RUM
Google Analytics

61. RUM
Google Analytics

62. RUM
Google Analytics
Données de navigateurs
modernes

63. Monitoring
Gratuit Commercial
● WPT monitor
● Torbit
● Yottaa
● ShowSlow
● GTmetrix
● Dynatrace
…

64. Résumé
● Analyse fine et méta-outils :
● WebPageTest
● Monitoring :
● WPT Monitor
● RUM :
● Boomerang, Google Analytics
● Code Front :
● IE8 F12, Chrome

65. Les images

66. Images
Optimisations :
● Ne pas les charger !
● Charger à la demande
● Compression manuelle
● Compression automatique

67. Ne pas charger
Méthode de lazy-load :
●
charger les images visibles
mobiles
https://github.com/fasterize/lazyload

68. Remplacer les icônes
Caractères unicode
►★✓⇢✎♥☎♻⚠☻☺⇨
●Taille et couleur adaptable
⚠ servir en UTF-8
⚠ dépend du couple OS / navigateur
http://ikwebdesigner.com/special-characters/

69. Remplacer les dégradés
background: linear-gradient(top
bottom, #ffffff 0%,#131313 100%);
● Taille automatique
IE : dégradés simples
● Syntaxe lourde
http://www.colorzilla.com/gradient-editor/

70. Remplacer la décoration
● Coins arrondis
● Ombres sur texte et boîtes
● Rotation de texte
● Opacité
⚠ Attention aux perfs de rendu

71. Limiter les requêtes
● Encodage en base64
<img src="data:image/png;base64,<?=
base64_encode( file_get_contents( './image.p
ng' )); ?>">
●IE < 8 : MHTML
⚠ Performance de rendu

72. Sprites
Maintenance
Outil : Sass + Compass

73. Compression manuelle
Connaître les formats
● PNG toujours meilleur que GIF
● PNG : ultra efficace avec des aplats de couleur
● JPG : mauvais pour le texte si il est en couleurs
● Jamais de PNG entrelacé
● PNG8 alpha
● WebP : mal supporté

74. Outils de compression
● PNGOUT ● pngquant
● OptiPNG ● pngnq-s9
● Pngcrush ● Gifsicle
● JpegOptim ● jpegtran
● jpegrescan
● SVG : distribuer en
gzip

75. Interface
● PNGGauntlet

76. Interface
● ImageAlpha (pngmini.com)

77. Interface
● ImageOptim

78. Interface
● smushit.com

79. Rendu fluide
Alléger le DOM
Surveiller 2 métriques
● La profondeur max et moyenne ( < 12 )
● Le nombre de nœuds (< 1500 )
Outil : DOM Monster, WPT
● Long et périlleux si fait après coup
● Sensibilisation des intégrateurs

80. Rendu fluide - JavaScript
● Bonnes pratiques
● Peu de requêtes DOM
● Caching
● En dehors des boucles
● Manipulation du DOM par batch
● Application de classes VS $.css()
● Limiter la taille des requêtes
● $(doc.ById('monID')).find('>
div.maClasse');
● Privilégier document.querySelector()
● JavaScript lui même est rarement un problème

81. Rendu fluide
La technique du setTimeout( 0 )
En cas de blocage de l'interface :
● « casser » les boucles toutes les 50 ms
● Y revenir lorsque le navigateur est libre

82. Rendu fluide - Web Worker
Pour du calcul lourd
● Crée un nouveau thread
● Communication par événements
var worker = new Worker('my_task.js');
worker.onmessage = function(event) {
console.log("Called !n");
};
● Compatibilité navigateurs
● Organisation du code spécifique

83. S’auto-forme
r
En anglais En français
● http
● http://www.perfplanet.com/
://checklists.opquast.com/webper
● http
f/
://developer.yahoo.com/perfo ● https://groups.google.com/foru
rmance/rules.html m/?fromgroups#!forum/performan
● https://
ce-web
developers.google.com/speed/ ● @webperf_fr
docs/best-practices/rules_in et
tro ● @WebperfParis
● http:// ● https://
www.webpagetest.org/forum
github.com/edas/webperf-book
s ● http://braincracking.org

84. Crédits
● http://www.flickr.com/photos/themonnie/2495892146
● http://www.flickr.com/photos/76657755@N04/7214596024/in/photostream
● http://www.flickr.com/photos/johannes_wl/8364284798/sizes/l/in/photostre
m/