amélioration des performances ecommerce - webinaire par ayaline

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

8 décembre 2015

Webinar aYalinePerformances

aYaline – [email protected] - 0549414600

mailto:[email protected]

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

Animateur

Pascal Borreli, Architecte PHP

Symfony Core Contributeur

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

Introduction

Leviers fonctionnels / métiersLeviers marketingLeviers techniques

Cette conférence se concentre sur les leviers techniques

Augmentation des performances du site=

Augmentation du chiffre d'affaires

Quelques problèmes ayant une influence sur les performances

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

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

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 InternetInternet est un réseau de réseaux, d’où les accords de

réciprocité

É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

Interruption de service

Les interruptions planifiéesPour des mises à jour applicatives

Les interruptions non planifiéesSurcharge entraînant un blocageCoupure InternetPanne matérielleDéfaillance logicielleAttaques informatiquesEtc.

Rendre transparent les interruptions de service

Quels sont les points d’amélioration ?

Les points d'amélioration de la performance

1 Requête vers le site2 Infrastructure du site3 Traitement de génération de la réponse4 Envoi de la réponse5 Affichage de la page demandée

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

Solliciter le moins possible les serveurs d'exécution

Temps d'utilisation moyen des ressourcesms ms 0,1 s X s 0,X s

ms

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 proxyEx. Varnish, Nginx, Squid, HAProxy, etc.Permet de mettre en cache des pages HTML

complètesdonc sans solliciter les environnements

d'exécution des pages dynamiquesgain spectaculaire : de plusieurs secondes à

0.1sAttention : tout le site ne peut pas être en mis en cache (ex. :

processus commande, espace client...)



Première requête faite au reverse proxyAvec appel à l'environnement d'exécution


12

3

4

Reverse proxy

ApplicationPHP/Java

1 à 5s


Première requête : 1 à 5s


0,1s

Requêtes suivantes : 0,1s

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.6PHP 5.6 est env. 10% plus rapide que PHP 5.5PHP 5.5 est env. 10% plus rapide que PHP 5.4PHP 5.4 est env. 20% plus rapide que PHP 5.3PHP 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'exploitationExternaliser les éléments statiques

CDN ou serveur dédié aux éléments statiquesConfiguration durée de vie des caches

Balises d’entêtes HTTP : mod_expires / Etags

Les caches ne suffisent pas

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

MySQLBien choisir les types de tables (MyISAM ou InnoDB)

privilégier InnoDB pour les accès concurrents lecture / écriture

Optimisation configuration serveur base de donnéescaches 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

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

Axe d'optimisation : Performances d'affichage Navigateur Web

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 ?


É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


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


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


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


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

Performances d'affichage Navigateur web

Outils en ligne

Conclusion

PAGE 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

Vos questions

Les experts aYaline à votre service

Audit du site actuel

Préconisations sur les performances

Maintenance corrective et évolutive

Hébergement et infogérance H24

Vos contacts

4 allée des frères Montgolfier 86360 Chasseneuil-du-Poitou - FranceTel : 05 49 41 46 00 - [email protected]

Pascal BORRELI – Expert [email protected]ébastien DAUNIT – Directeur de [email protected]