Le document aborde les techniques d'accélération des pages web, soulignant l'importance de la performance pour le référencement et l'expérience utilisateur. Il détaille des pratiques optimales et des outils pour améliorer la vitesse de chargement, gérer le cache et optimiser les images. La synthèse propose également des recommandations sur le code front-end et les bonnes pratiques de développement pour maximiser l'efficacité des sites web.

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/