Ce document présente un webinaire sur les actions à entreprendre pour améliorer les performances d'affichage d'un site web, en se concentrant sur les leviers techniques. Les points abordés incluent l'optimisation des requêtes HTTP, la configuration des serveurs, la gestion des bases de données, et l'importance des performances d'affichage dans l'expérience utilisateur. Enfin, il souligne qu'une optimisation efficace peut entraîner une augmentation significative des résultats commerciaux.

1. Quelles actions pour améliorer les
performances d'affichage de votre site
dans les navigateurs Web ?
8 décembre 2015
Webinar aYaline
Performances
aYaline – contact@ayaline.com - 0549414600

2. PAGE 2
Qui est aYaline ?
Depuis 1995, un positionnement
d’entreprise intégrée dans une seule
technologie [Open Source] afin de garantir
le succès des projets de ses clients
aYaline, partenaire &
Solutions :
• E-Tourisme
• E-Commerce
• E-Collectivités
• Open Source
100%
En France sur Poitiers, Nantes, Paris, au
Maroc et en Tunisie

3. PAGE 3
Animateur
Pascal Borreli, Architecte PHP
Symfony Core Contributeur

4. PAGE 4
Quelles actions pour améliorer les
performances d'affichage de votre site dans
les navigateurs Web ?

5. PAGE 5
Introduction
Leviers fonctionnels / métiers
Leviers marketing
Leviers techniques
Cette conférence se concentre sur les leviers
techniques
Augmentation des performances du site
=
Augmentation du chiffre d'affaires

6. PAGE 6
Quelques problèmes ayant une
influence sur les performances

7. PAGE 7
Saturation à l’ouverture des Soldes
Très (trop) grand nombre de visiteurs en très peu
de temps
Trafic plus important que prévu
Campagne marketing générant un trafic vers une
page trop gourmande en ressources, c’est-à-
dire non optimisée

8. PAGE 8
Ralentissements, pages trop longues à s'ouvrir, abandons de
paniers...
Plus le site est rapide, plus les clients
achètent !
Exemple de temps de parcours optimisé jusqu'à la
commande
Villatech.fr : 15 étapes en 18 secondes

9. PAGE 9
Dépendance aux opérateurs télécom
Coupure totale possible si une seule liaison Internet
Saturation de la bande passante
Problème de réciprocité (peering) entre fournisseurs de
réseau Internet
Internet est un réseau de réseaux, d’où les accords de réciprocité

10. PAGE 10
Évolution de la volumétrie
Augmentation du nombre de sites (plateforme multi-site),
du nombre de produits, de traitements, etc.
Tâches planifiées (crons) de synchronisation entre
systèmes d’informations
Trop de requêtes sur la base de données, surcharge des
serveurs

11. PAGE 11
Interruption de service
Les interruptions planifiées
Pour des mises à jour applicatives
Les interruptions non planifiées
Surcharge entraînant un blocage
Coupure Internet
Panne matérielle
Défaillance logicielle
Attaques informatiques
Etc.
Rendre transparent les interruptions de service

12. PAGE 12
Quels sont les points d’amélioration ?

13. PAGE 13
Les points d'amélioration de la performance
1 Requête vers le site
2 Infrastructure du site
3 Traitement de génération de la réponse
4 Envoi de la réponse
5 Affichage de la page demandée

14. PAGE 14
Axe d'optimisation : Performances
de traitements des requêtes HTTP

15. PAGE 15
Solliciter le moins possible les serveurs d'exécution
Temps d'utilisation moyen des ressources
ms ms 0,1 s X s 0,X s
ms

16. PAGE 16
Mes pages sont trop/très lentes…
La meilleure façon d'économiser les ressources ?
 c'est encore de ne pas les solliciter
Mise en œuvre de caches via reverse proxy
Ex. Varnish, Nginx, Squid, HAProxy, etc.
Permet de mettre en cache des pages HTML complètes
donc sans solliciter les environnements d'exécution
des pages dynamiques
gain spectaculaire : de plusieurs secondes à 0.1s
Attention : tout le site ne peut pas être en mis en cache (ex. : processus
commande, espace client...)
Solliciter le moins possible les serveurs d'exécution

17. PAGE 17
Mes pages sont trop/très lentes…
Première requête faite au reverse proxy
Avec appel à l'environnement d'exécution
Solliciter le moins possible les serveurs d'exécution
1
2
3
4
Reverse
proxy
Application
PHP/Java
1 à 5s

18. PAGE 18
Mes pages sont trop/très lentes…
Première requête : 1 à 5s
Solliciter le moins possible les serveurs d'exécution
0,1s
Requêtes suivantes : 0,1s

19. PAGE 19
Ma plateforme est surchargée
Optimisation de la configuration serveur :
Sélectionner les versions les plus performantes des briques logicielles (en
général les dernières), par ex PHP :
PHP 7 est env. 2 fois plus rapide que PHP 5.6
PHP 5.6 est env. 10% plus rapide que PHP 5.5
PHP 5.5 est env. 10% plus rapide que PHP 5.4
PHP 5.4 est env. 20% plus rapide que PHP 5.3
PHP 5.3 est env. 30% plus rapide que PHP 5.2
Accélérateurs PHP (mise en cache des opcodes - pré-compilation) =>
Opcache (PHP 5.5+), APC, eAccelerator, etc. Gain temps d'exécution :
20 à 30%
Optimisation du système d'exploitation
Externaliser les éléments statiques
CDN ou serveur dédié aux éléments statiques
Configuration durée de vie des caches
Balises d’entêtes HTTP : mod_expires / Etags
Les caches ne suffisent pas

20. PAGE 20
Ma base de données est ‘overbookée’
Surveiller / détecter les requêtes lentes (longues)
les analyser et les optimiser régulièrement
génération d'index / optimisations requêtes SQL
MySQL
Bien choisir les types de tables (MyISAM ou InnoDB)
privilégier InnoDB pour les accès concurrents lecture /
écriture
Optimisation configuration serveur base de données
caches SQL / taille des buffers
en fonction de l'évolution de la volumétrie et du
comportement de la base sur une période donnée
Optimiser la base de données

21. PAGE 21
Mon code
Lors des développements (debug)
Organiser des revues de code par des pair
Profiling précis pour les transactions lentes ou
importantes (tunnel de commande) avec des outils
comme :
Blackfire.io (de préférence)
XHProf ou Xdebug.
En analysant les logs Intégration / Recette / Prod (RUM)
En utilisant des outils comme New Relic permettant de
montrer les temps frontend et backend de toutes les
requêtes non cachées
Optimiser le code source

22. PAGE 22
Axe d'optimisation : Performances
d'affichage Navigateur Web

23. PAGE 23
Performances d'affichage Navigateur Web
A quoi sert de très bons temps de réponse…
… si la page met plusieurs secondes à s'afficher sur le
navigateur ?
… si la page ne permet pas à l'internaute d'interagir
avant la fin de son chargement ?

24. PAGE 24
Performances d'affichage Navigateur Web
Étapes clés dans l'affichage d'une page web
19/09/201219/09/2012
Affichage du Titre
(Time To Title)
Début de l'affichage
(Time To First Paint)
Temps d'affichage
(Time To Display)
Temps avant interaction /
Temps de chargement
(Time To Interact / Load
Time) déclenchement du
DomReady

25. PAGE 25
Performances d'affichage Navigateur Web
Minifier JS/CSS/HTML : organiser le contenu des
fichiers html/css/js (espaces, tabulations, etc.)
Compression par le serveur (Gzip) des contenus textes
(html/css/js/xml/json/etc.)
Compression lossless/lossy des images
Optimisation du HTML (web sémantique)
Utilisation du SVG (haute résolution / peu de place) en
lieu et place de certaines images (pixélisées)
Réduire la taille des objets

26. PAGE 26
Performances d'affichage Navigateur Web
Limiter le nombre de requêtes HTTP (sprite css,
base64, combiner, utilisation des caches navigateur,
etc.)
Utilisation de CDN
Pre-calcul du DNS des différent domaines de la page
(prefetch)
Minimiser les appels DNS (limiter les temps de
résolution)
Eliminer les Redirections
Optimiser le temps de chargement

27. PAGE 27
Performances d'affichage Navigateur Web
Expiration des pages : bien paramétrer les durées de
vie pour éviter des appels inutiles
Permettre la mise en cache des requêtes Ajax : éviter
des appels inutiles
Pas de CSS/JS inclus dans la page : à externaliser en
fichier externe
Bien gérer les caches

28. PAGE 28
Performances d'affichage Navigateur Web
Chargement des CSS en haut de page
Fichier JavaScript en bas de page
Pas d’expression CSS
Asynchroniser les JavaScript (async, defer, ..)
Optimiser le temps d'interprétation

29. PAGE 29
Performances d'affichage Navigateur web
Outils en ligne

30. PAGE 30
Conclusion

31. PAGE 31PAGE 31
Conclusion
Ne pas négliger les performances d’affichage sur le
navigateur Web
20% d’efforts pour améliorer de 80% ses résultats !!!
80% de effets produits par 20% des causes
Economiser l’environnement d’exécution
en utilisant les caches
en optimisant la configuration des serveurs
et en optimisant la base de données

32. PAGE 32
Vos questions

33. PAGE 33
Les experts aYaline à votre service
Audit du site actuel
Préconisations sur les performances
Maintenance corrective et évolutive
Hébergement et infogérance H24

34. Vos contacts
4 allée des frères Montgolfier
86360 Chasseneuil-du-Poitou - France
Tel : 05 49 41 46 00 - contact@ayaline.com
www.ayaline.com
Pascal BORRELI – Expert technique
pborreli@ayaline.com
Sébastien DAUNIT – Directeur de projets
sdaunit@ayaline.com