SlideShare a Scribd company logo
1 of 60
Download to read offline
Morning Tech #2
Démarche de performance
Les événements Oxalide
• Objectif : présentation d’une thématique métier ou technique
• Tout public : 80 à 100 personnes
• Déroulé : 1 soir par trimestre de 18h à 21h
• Introduction de la thématique par un partenaire
• Tour de table avec des clients et non clients
• Echange convivial autour d’un apéritif dînatoire
• Objectif : présentation d’une technologie
• Réservé aux clients : public technique avec laptop – 30 personnes
• Déroulé : 1 matinée par trimestre de 9h à 13h
• Présentation de la technologie
• Tuto pour la configuration en ligne de commande
• Objectif : présentation d’une thématique métier ou technique
• Réservé aux clients : 30 personnes
• Déroulé : 1 matin par trimestre de 9h à 12h
• Big picture
• Démonstration et retour d’expérience
Apérotech
Workshop
Morning Tech
Contactez-nous à job@oxalide.com
recrute !
Speakers
Adrien le Priol
ITWO Customer Team 1
@Priolix @lpiot
Ludovic Piot
Resp. du pôle Conseil,
Architecture et DevOps
Introduction
● Les enjeux de la performance sur le Web
● Les différents éléments de performance d'un
site Web
Les bonnes pratiques
● Limiter le trafic non monétisable
● Infrastructure (HTTP/2 HTTPs, architecture
technique, tuning, architecture applicative,
WebPerf
● AMP by Google
● Les quickwins par grands thèmes
(infra / archi tech / archi appli / WebPerf)
● compression gzip, taille des images…
cas de Leroy-Merlin (règles de 10 images de
100 Ko maxi).
● Caches, upscaling, outscaling, sharding
Agenda
L’obsession de la mesure
● Les outils
● La démarche de test de charge
● Méthodologie, outils, types de test, données de
test
La démarche PDCA
● Intégrer les tests de charge au cycle de
développement (tests de non-regression)
● Environnements éphémères
Performance Web :
les enjeux
I amar prestar aen
The world has changed…
- Galadriel
source : Warner Bros & NewLine Cinema
Le monde a changé
SO
cial
LO
cal
MO
bile
+1 second could cost Amazon
$1.6 Billion in Sales
source : https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
+0.4 second and Google could lose
8 millions searches per day
source : https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
Statistiques d’usage d’Internet en 2016
source : https://hostingfacts.com/internet-facts-stats-2016/
Pour ce qui est des performances, les
développeurs pensent souvent avoir
livré ça…
En réalité, assez souvent, quand on le
fait tourner en production, ça
ressemble plutôt à ça…
Les enjeux de la performance sur le Web
Les performances d’un
système sont une
spécification fonctionnelle
implicite du système.
source : http://www.arthursclipart.org
Les enjeux de la performance sur le Web
La performance du
système doit être une
préoccupation
perpétuelle du cycle de
développement.
source : http://www.geantsduweb.com/
Les différentes composantes de la performance d’un site Web
Navigateur Web
Cache
Moteur JS
Interpréteur
HTML
Connexions
HTTP
Equipements
réseau
Serveur DNS
Routeurs
Firewall
Proxies
Serveur Cache
Statiques
Config.
Routage
backends
Refactoring
HTML
Serveur Web
Workers
Config.
Rewrite
ruless
Redirect
Reverse-Proxy
Algo. TLS
ACL
Rewrite rules
Protocoles
HTTP
Serveur App
Workers
Config.
Protocole d’
échange
Stockage
statiques
Message broker
Queues
TTL
Protocole d’
échange
Patterns de
diffusion
App
Sync / Async
Cache appli.
Langage
Qualité du
code
Plateforme
load-balance
# instances
sizing & unit
perfs
Tuning
Base de données
Size
Cache
Sharding
Stats /
Explain plan
My Platform… well… sort of…
Performance Web :
les bonnes pratiques
Identifier le trafic monétisable
Connaître son auditoire.
Éliminer les parasites:
outils d’intelligence concurrentielle
bases de données marketing
monitoring média, clipping
agences SEO
Badbots*
*les bad bots représentaient jusqu’à 35% du nombre total de visites - (source : Datadome)
Limiter le trafic non-monétisable
Robot.txt
User-agent: ArchitextSpider
Disallow: *
Améliorer le référencement
Bloquer le référencement de certaines ressources.
Déclaratif
Limiter le trafic non-monétisable
GeoIP filtering
Limiter le trafic non-monétisable
Solutions SaaS : Datadome
Quoi
● User agent
● IP owner
● Géolocalisation
Comment
● Nombre de hits par adresse IP
● Vitesse de crawl
● Récurrence des hits
● Nombre de hits générant des erreurs 404
● Cookies
Apache
Nginx
Varnish (4.0 - 4.1 - 5.0, 3.0)
IIS module (ASP.Net)
Wordpress plugin
DATADOME
Perception d’un chargement rapide… ou pas…
Architecture applicative & physique
Web perf : priorité au client… et à l’affichage
Web perf : priorité au client… et à l’affichage
Morning tech #2 - Démarche performance slides
Web perf : priorité au client… et à l’affichage
Quickwin
& bon sens
Optimiser la taille/nombre des images
Minifier CSS/JS
Activer le Gzip
Exécuter les JS en fin de chargement
Limiter les ressources externes (JS, annonceurs, statistiques … )
Optimiser la taille/nombre des images
Minifier CSS/JS
Les Headers
Piloter les caches
ETag:"e7d8e34a27cb1b77c9114da75ca21397"
Expires:Tue, 28 Feb 2017 01:33:01 GMT
Last-Modified:Sun, 04 Sep 2016 03:08:00 GMT
Piloter le cache :
● Navigateur
● Varnish
● CDN
Activer Gzip
Apache
<IfModule mod_deflate.c>
AddOutputFilterByType
DEFLATE text/html
text/plain text/xml
text/css
text/javascript
application/javascript
</IfModule>
Varnish
if (beresp.http.content-type ~ "text") {
set beresp.do_gzip = true;
}
Non conseillé
Nginx
gzip on;
gzip_types text/css
text/plain text/xml text/css
text/javascript
application/javascript
Activer Gzip
<IfModule mod_headers.c>
RewriteCond "%{HTTP:Accept-encoding}" "gzip"
RewriteCond "%{REQUEST_FILENAME}.gz" "-s"
RewriteRule "^(.*).css" "$1.css.gz" [QSA]
RewriteRule ".css.gz$" "-" [T=text/css,E=no-gzip:1]
<FilesMatch "(.js.gz|.css.gz)$">
Header append Content-Encoding gzip
Header append Vary Accept-Encoding
</FilesMatch>
</IfModule>
Exécuter les JS en fin de chargement
Et prioriser les CSS
HTML
JS CSS
Blocks parsing Blocks rendering
...
Exécuter les JS en fin de chargement
Et prioriser les CSS
HTML
JS CSS
Blocks parsing Blocks rendering
Limiter les ressources externes
(JS, annonceurs, statistiques … )
● Appels DNS
● Réduire le nombre de syn/ack
● Bande passante
● limiter les redirections
Préfetch DNS resoltion:
<html>
<head>
<link rel="dns-prefetch"
href="//www.domain1.com">
<link rel="dns-prefetch"
href="//www.domain2.com">
</head>
<body>
<img src="www.domain1.com/image1.jpeg">
<script src="www.domain2.com/script1.js">
</body>
</html>
Fainéantise
Lazy-load
Lazy-load:
1. Bande passante
2. Rapidité
3. Gaspillage
Triche
● 0-200ms instante i made good
● 200 - 1000ms Computer compture its
● 1s+ I'm waiting ...
● 10+ I'm gone
1. Spinner
2. Ecran de transition
3. Substitution
Triche
● 0-200ms instante i made good
● 200 - 1000ms Computer compture its
● 1s+ I'm waiting ...
● 10+ I'm gone
1. Spinner
2. Ecran de transition
3. Substitution
Triche
● 0-200ms instante i made good
● 200 - 1000ms Computer compture its
● 1s+ I'm waiting ...
● 10+ I'm gone
1. Spinner
2. Ecran de transition
3. Substitution
Protocole HTTP/2
Protocole HTTP/2
Performance Web :
l’obsession de la mesure
L’obsession de la mesure
La mesure de
performance doit être au
cœur du processus de
développement
informatique.
source : http://www.geantsduweb.com/
Les tests de charge
Différents types de test de charge
Objectif : mesurer la performance unitaire
Ex. : le use case de souscription est testé pour 1 utilisateur et, pour chaque étape du use
case, on mesure le temps passé dans les différents composants de l’application.
Test de
performance
unitaire
Test de
charge
Test de
rupture
Test de
vieillissement
Objectif : mesurer la tenue en charge de l’application sur la population cible
Ex. : on simule l’utilisation de l’application par 200 utilisateurs en parallèle pendant 2 heures.
Objectif : déterminer les limites de l’application
Ex. : on augmente le nombre d’utilisateurs en parallèle sur l’application jusqu’à ce que le
taux d’erreurs / les temps de réponse ne soient plus acceptables.
Objectif : déterminer la capacité de l’application à fonctionner sur une période étendue
Ex. : on simule l’utilisation de l’application pendant 48h, avec une charge constante et égale
à la charge moyenne.
Tests de charge
But:
Connaître les limites de la plateforme
Déterminer les goulets d’étranglement
Optimiser le paramétrage middleware et applicatif
Cibler d'éventuelles anomalies de conception logiciel,
architecture.
Méthodologie d’un tir de charge
Définition du plan et
des cas de test
Création des scénarii et
des scripts de tests
Enregistrement des
métriques
Consolidation des
métriques et édition
d’un rapport de test
Analyse du rapport de
test et émission des
préconisations
1
2
3
4
5
Plan de test Cas de test Création des
paliers de données1
Scripts de test Scénarii de test
Capture des
métriques
Données de test
3
Métriques
Contrôleur
Rapport d’analyse
Rapport de test
charge
monitoring
pilotage
Injecteurs
Exécution : simulation
d’utilisateurs3
Application cible
Tests de charge
Qualité du tir de charge
dépend que la qualité du
scénario
Connaître le comportement
de ses utilisateurs (RUM:
Google analytics, Newrelic)
Gatling
Exemple Scala
Gatling
Exemple Scala
Gatling
Options de lancement
Tests de charge
Les outils : Gatling - NewRelic
Performance Web :
la démarche PDCA
Premature optimization is the root
of all evil
- Donald Knuth
L’optimisation ne vaut que par l’expérimentation
Code
Measure
Optimize
Whereneeded!
Les tests de perf dans un cycle projet
Mode Waterfall
PROD
Archi
Dev
Perf
Les tests de perf dans un cycle projet
Mode agile
PROD
Archi
Dev
Perf
1. Conception
des tests
2. Automatisation
des tests
3. Développement
logiciel
#1 #2 #3
4. Exécution auto-
matique des tests
Les tests de perf dans un cycle projet
Mode “dans la vraie vie”
PROD
Archi
Dev
Perf
1. Conception
des tests
2. Automatisation
des tests
3. Développement
logiciel
#1 #2 #3
4. Exécution auto-
matique des tests
PERFORMANCES
CATASTROPHIQUES
MEP À L’ARRACHE
Délai
OPTIMISATIONS
COMME ON PEUT
Les tests de perf dans un cycle projet
Mode “Etat de l’art”
PROD
Archi
Dev
Tests de charge en continu
1. Conception
des tests
2. Automatisation
des tests
3. Développement
logiciel
#1 #2 #3
4. Exécution auto-
matique des tests
2
1
3
4
AMI
0
Cloud-init
EC2
Chef-solo CodeDeploy
ECR
S3 bucket
Tirs de performance automatisés
Environnements éphémères
1
• Terraform provisionne des instances EC2 sur AWS
(accès via SSH possible)
• Utilisation d’AMIs spécifiques enrichies avec un chef-solo
2
3
• CodeDeploy déclenche l’exécution de Chef-solo
• Chef-solo récupère les cookbooks sur un bucket S3
• Installation des packages et configuration OS +
middleware
4
• CodeDeploy lance le déploiement de l’application
• Récupération des artefacts applicatifs sur des dépôts (git,
nexus, registry Docker)
• Déploiement de l’application
5 • Déclenchement des scénarios Gatling
• job lancé en automatique via un pipeline Gitlab-CI0
• Scripts de démarrage cloud-init
• Déclenchement de CodeDeploy
Questions ?
Réponses…

More Related Content

Viewers also liked

Reflexogia podal podologia
Reflexogia podal    podologiaReflexogia podal    podologia
Reflexogia podal podologiaStephan Mazzaro
 
Actividad de-laboratorio
Actividad de-laboratorioActividad de-laboratorio
Actividad de-laboratorioKevinBenitez99
 
TCS: Keyword Tools, SEO Tools + Traffic Tools 2017
TCS: Keyword Tools, SEO Tools + Traffic Tools 2017TCS: Keyword Tools, SEO Tools + Traffic Tools 2017
TCS: Keyword Tools, SEO Tools + Traffic Tools 2017Roland Frasier
 
BlueMonkeyプロジェクトのご紹介
BlueMonkeyプロジェクトのご紹介BlueMonkeyプロジェクトのご紹介
BlueMonkeyプロジェクトのご紹介Yoshito Tabuchi
 
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017Olivier Andrieu
 
The State of Sales & Marketing at the 50 Fastest-Growing B2B Companies
The State of Sales & Marketing at the 50 Fastest-Growing B2B CompaniesThe State of Sales & Marketing at the 50 Fastest-Growing B2B Companies
The State of Sales & Marketing at the 50 Fastest-Growing B2B CompaniesMattermark
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with DataSeth Familian
 
Infographic: Innovating Energy and Utilities
Infographic: Innovating Energy and UtilitiesInfographic: Innovating Energy and Utilities
Infographic: Innovating Energy and UtilitiesWestbase.io
 
Супровідний лист до анкети-заявки на участь у конкурсі
Супровідний лист до анкети-заявки на участь у конкурсіСупровідний лист до анкети-заявки на участь у конкурсі
Супровідний лист до анкети-заявки на участь у конкурсіUSAID LEV
 

Viewers also liked (18)

Reflexogia podal podologia
Reflexogia podal    podologiaReflexogia podal    podologia
Reflexogia podal podologia
 
Revisionspåtegninger
RevisionspåtegningerRevisionspåtegninger
Revisionspåtegninger
 
Actividad de-laboratorio
Actividad de-laboratorioActividad de-laboratorio
Actividad de-laboratorio
 
Abastecimento de imunobiológicos (soros e vacinas)
Abastecimento de imunobiológicos (soros e vacinas)Abastecimento de imunobiológicos (soros e vacinas)
Abastecimento de imunobiológicos (soros e vacinas)
 
Búsqueda en base de datos PUBMED
Búsqueda en base de datos PUBMEDBúsqueda en base de datos PUBMED
Búsqueda en base de datos PUBMED
 
Raiva - Humano Rede de Laboratório
Raiva - Humano Rede de LaboratórioRaiva - Humano Rede de Laboratório
Raiva - Humano Rede de Laboratório
 
Filipino Thesis
Filipino ThesisFilipino Thesis
Filipino Thesis
 
TCS: Keyword Tools, SEO Tools + Traffic Tools 2017
TCS: Keyword Tools, SEO Tools + Traffic Tools 2017TCS: Keyword Tools, SEO Tools + Traffic Tools 2017
TCS: Keyword Tools, SEO Tools + Traffic Tools 2017
 
BlueMonkeyプロジェクトのご紹介
BlueMonkeyプロジェクトのご紹介BlueMonkeyプロジェクトのご紹介
BlueMonkeyプロジェクトのご紹介
 
MAGCOM n°5
MAGCOM n°5MAGCOM n°5
MAGCOM n°5
 
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
 
Blah Blah Land
Blah Blah LandBlah Blah Land
Blah Blah Land
 
The State of Sales & Marketing at the 50 Fastest-Growing B2B Companies
The State of Sales & Marketing at the 50 Fastest-Growing B2B CompaniesThe State of Sales & Marketing at the 50 Fastest-Growing B2B Companies
The State of Sales & Marketing at the 50 Fastest-Growing B2B Companies
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 
Infographic: Innovating Energy and Utilities
Infographic: Innovating Energy and UtilitiesInfographic: Innovating Energy and Utilities
Infographic: Innovating Energy and Utilities
 
Studenti fuorisede e privacy
Studenti fuorisede e privacyStudenti fuorisede e privacy
Studenti fuorisede e privacy
 
Market Flash
Market FlashMarket Flash
Market Flash
 
Супровідний лист до анкети-заявки на участь у конкурсі
Супровідний лист до анкети-заявки на участь у конкурсіСупровідний лист до анкети-заявки на участь у конкурсі
Супровідний лист до анкети-заявки на участь у конкурсі
 

Similar to Morning tech #2 - Démarche performance slides

Université de la performance - Devoxx France
Université de la performance - Devoxx FranceUniversité de la performance - Devoxx France
Université de la performance - Devoxx FranceMarc Bojoly
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Brigitte Marandon
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetDevclic
 
Introduction aux web components
Introduction aux web componentsIntroduction aux web components
Introduction aux web componentsFrancois ANDRE
 
Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !Cédric Leblond
 
Performance ug#1
Performance ug#1Performance ug#1
Performance ug#1Marc Bojoly
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement webHouda TOUKABRI
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostDamien Jubeau
 
Développer ou debugger ?
Développer ou debugger ? Développer ou debugger ?
Développer ou debugger ? Microsoft
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Fasterize
 
Université de la performance
Université de la performanceUniversité de la performance
Université de la performancepkernevez
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Alexandre Marie
 
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp012014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01MongoDB
 
Workshop HTML5 : référencement grâce à la sémantique
Workshop HTML5 : référencement grâce à la sémantiqueWorkshop HTML5 : référencement grâce à la sémantique
Workshop HTML5 : référencement grâce à la sémantiqueLes-Tilleuls.coop
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...ENSIBS
 
Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Cellenza
 

Similar to Morning tech #2 - Démarche performance slides (20)

Université de la performance - Devoxx France
Université de la performance - Devoxx FranceUniversité de la performance - Devoxx France
Université de la performance - Devoxx France
 
Perf university
Perf universityPerf university
Perf university
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internet
 
Introduction aux web components
Introduction aux web componentsIntroduction aux web components
Introduction aux web components
 
Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !
 
Performance ug#1
Performance ug#1Performance ug#1
Performance ug#1
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 
Développer ou debugger ?
Développer ou debugger ? Développer ou debugger ?
Développer ou debugger ?
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
 
Université de la performance
Université de la performanceUniversité de la performance
Université de la performance
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
 
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp012014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01
 
Workshop HTML5 : référencement grâce à la sémantique
Workshop HTML5 : référencement grâce à la sémantiqueWorkshop HTML5 : référencement grâce à la sémantique
Workshop HTML5 : référencement grâce à la sémantique
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
 
Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1
 
Catalogue PFE 2019
Catalogue PFE 2019Catalogue PFE 2019
Catalogue PFE 2019
 

More from Oxalide

Terraform & Vault - Un duo d'enfer!
Terraform & Vault - Un duo d'enfer!Terraform & Vault - Un duo d'enfer!
Terraform & Vault - Un duo d'enfer!Oxalide
 
Workshop Docker & Kubernetes - Oxalide Academy
Workshop Docker & Kubernetes - Oxalide AcademyWorkshop Docker & Kubernetes - Oxalide Academy
Workshop Docker & Kubernetes - Oxalide AcademyOxalide
 
Morning Tech#1 BigData - Oxalide Academy
Morning Tech#1 BigData - Oxalide AcademyMorning Tech#1 BigData - Oxalide Academy
Morning Tech#1 BigData - Oxalide AcademyOxalide
 
Oxalide Workshop #4 - Docker, des tours dans le petit bassin
Oxalide Workshop #4 - Docker, des tours dans le petit bassinOxalide Workshop #4 - Docker, des tours dans le petit bassin
Oxalide Workshop #4 - Docker, des tours dans le petit bassinOxalide
 
Oxalide Academy : Workshop #3 Elastic Search
Oxalide Academy : Workshop #3 Elastic SearchOxalide Academy : Workshop #3 Elastic Search
Oxalide Academy : Workshop #3 Elastic SearchOxalide
 
Paris hackers Meetup #12 - How to handle large audience
Paris hackers Meetup #12 - How to handle large audienceParis hackers Meetup #12 - How to handle large audience
Paris hackers Meetup #12 - How to handle large audienceOxalide
 
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...Oxalide
 
La performance de vos applications Drupal
La performance de vos applications DrupalLa performance de vos applications Drupal
La performance de vos applications DrupalOxalide
 
Les bonnes pratiques d'une architecture logicielle et infrastructure de l'héb...
Les bonnes pratiques d'une architecture logicielle et infrastructure de l'héb...Les bonnes pratiques d'une architecture logicielle et infrastructure de l'héb...
Les bonnes pratiques d'une architecture logicielle et infrastructure de l'héb...Oxalide
 
201211 drupagora hostingdrupal
201211 drupagora hostingdrupal201211 drupagora hostingdrupal
201211 drupagora hostingdrupalOxalide
 
Cloud & physique, mauvaises et bonnes solutions
Cloud & physique, mauvaises et bonnes solutionsCloud & physique, mauvaises et bonnes solutions
Cloud & physique, mauvaises et bonnes solutionsOxalide
 
Comprendre pour choisir son hébergement
Comprendre pour choisir son hébergementComprendre pour choisir son hébergement
Comprendre pour choisir son hébergementOxalide
 
Gérer 100 000 visites par jour avec Magento - Les enjeux e-commerce de Prisma...
Gérer 100 000 visites par jour avec Magento - Les enjeux e-commerce de Prisma...Gérer 100 000 visites par jour avec Magento - Les enjeux e-commerce de Prisma...
Gérer 100 000 visites par jour avec Magento - Les enjeux e-commerce de Prisma...Oxalide
 
Performance barcampfinal
Performance barcampfinalPerformance barcampfinal
Performance barcampfinalOxalide
 
Clusif panoramadelacybercrimalite2009
Clusif panoramadelacybercrimalite2009Clusif panoramadelacybercrimalite2009
Clusif panoramadelacybercrimalite2009Oxalide
 
Clusif panoramadelacybercrimalite2009
Clusif panoramadelacybercrimalite2009Clusif panoramadelacybercrimalite2009
Clusif panoramadelacybercrimalite2009Oxalide
 
Clusif cloud-2010-datacenter
Clusif cloud-2010-datacenterClusif cloud-2010-datacenter
Clusif cloud-2010-datacenterOxalide
 
Clusif cloud-2010-securite
Clusif cloud-2010-securiteClusif cloud-2010-securite
Clusif cloud-2010-securiteOxalide
 
Monitoring Des Applications Php, Salon Des Solutions Linux Open Source
Monitoring Des Applications Php, Salon Des Solutions Linux Open SourceMonitoring Des Applications Php, Salon Des Solutions Linux Open Source
Monitoring Des Applications Php, Salon Des Solutions Linux Open SourceOxalide
 
Les bonnes pratiques de l'hébergement e-commerce open-source (Conférence E Co...
Les bonnes pratiques de l'hébergement e-commerce open-source (Conférence E Co...Les bonnes pratiques de l'hébergement e-commerce open-source (Conférence E Co...
Les bonnes pratiques de l'hébergement e-commerce open-source (Conférence E Co...Oxalide
 

More from Oxalide (20)

Terraform & Vault - Un duo d'enfer!
Terraform & Vault - Un duo d'enfer!Terraform & Vault - Un duo d'enfer!
Terraform & Vault - Un duo d'enfer!
 
Workshop Docker & Kubernetes - Oxalide Academy
Workshop Docker & Kubernetes - Oxalide AcademyWorkshop Docker & Kubernetes - Oxalide Academy
Workshop Docker & Kubernetes - Oxalide Academy
 
Morning Tech#1 BigData - Oxalide Academy
Morning Tech#1 BigData - Oxalide AcademyMorning Tech#1 BigData - Oxalide Academy
Morning Tech#1 BigData - Oxalide Academy
 
Oxalide Workshop #4 - Docker, des tours dans le petit bassin
Oxalide Workshop #4 - Docker, des tours dans le petit bassinOxalide Workshop #4 - Docker, des tours dans le petit bassin
Oxalide Workshop #4 - Docker, des tours dans le petit bassin
 
Oxalide Academy : Workshop #3 Elastic Search
Oxalide Academy : Workshop #3 Elastic SearchOxalide Academy : Workshop #3 Elastic Search
Oxalide Academy : Workshop #3 Elastic Search
 
Paris hackers Meetup #12 - How to handle large audience
Paris hackers Meetup #12 - How to handle large audienceParis hackers Meetup #12 - How to handle large audience
Paris hackers Meetup #12 - How to handle large audience
 
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meill...
 
La performance de vos applications Drupal
La performance de vos applications DrupalLa performance de vos applications Drupal
La performance de vos applications Drupal
 
Les bonnes pratiques d'une architecture logicielle et infrastructure de l'héb...
Les bonnes pratiques d'une architecture logicielle et infrastructure de l'héb...Les bonnes pratiques d'une architecture logicielle et infrastructure de l'héb...
Les bonnes pratiques d'une architecture logicielle et infrastructure de l'héb...
 
201211 drupagora hostingdrupal
201211 drupagora hostingdrupal201211 drupagora hostingdrupal
201211 drupagora hostingdrupal
 
Cloud & physique, mauvaises et bonnes solutions
Cloud & physique, mauvaises et bonnes solutionsCloud & physique, mauvaises et bonnes solutions
Cloud & physique, mauvaises et bonnes solutions
 
Comprendre pour choisir son hébergement
Comprendre pour choisir son hébergementComprendre pour choisir son hébergement
Comprendre pour choisir son hébergement
 
Gérer 100 000 visites par jour avec Magento - Les enjeux e-commerce de Prisma...
Gérer 100 000 visites par jour avec Magento - Les enjeux e-commerce de Prisma...Gérer 100 000 visites par jour avec Magento - Les enjeux e-commerce de Prisma...
Gérer 100 000 visites par jour avec Magento - Les enjeux e-commerce de Prisma...
 
Performance barcampfinal
Performance barcampfinalPerformance barcampfinal
Performance barcampfinal
 
Clusif panoramadelacybercrimalite2009
Clusif panoramadelacybercrimalite2009Clusif panoramadelacybercrimalite2009
Clusif panoramadelacybercrimalite2009
 
Clusif panoramadelacybercrimalite2009
Clusif panoramadelacybercrimalite2009Clusif panoramadelacybercrimalite2009
Clusif panoramadelacybercrimalite2009
 
Clusif cloud-2010-datacenter
Clusif cloud-2010-datacenterClusif cloud-2010-datacenter
Clusif cloud-2010-datacenter
 
Clusif cloud-2010-securite
Clusif cloud-2010-securiteClusif cloud-2010-securite
Clusif cloud-2010-securite
 
Monitoring Des Applications Php, Salon Des Solutions Linux Open Source
Monitoring Des Applications Php, Salon Des Solutions Linux Open SourceMonitoring Des Applications Php, Salon Des Solutions Linux Open Source
Monitoring Des Applications Php, Salon Des Solutions Linux Open Source
 
Les bonnes pratiques de l'hébergement e-commerce open-source (Conférence E Co...
Les bonnes pratiques de l'hébergement e-commerce open-source (Conférence E Co...Les bonnes pratiques de l'hébergement e-commerce open-source (Conférence E Co...
Les bonnes pratiques de l'hébergement e-commerce open-source (Conférence E Co...
 

Morning tech #2 - Démarche performance slides

  • 1. Morning Tech #2 Démarche de performance
  • 2. Les événements Oxalide • Objectif : présentation d’une thématique métier ou technique • Tout public : 80 à 100 personnes • Déroulé : 1 soir par trimestre de 18h à 21h • Introduction de la thématique par un partenaire • Tour de table avec des clients et non clients • Echange convivial autour d’un apéritif dînatoire • Objectif : présentation d’une technologie • Réservé aux clients : public technique avec laptop – 30 personnes • Déroulé : 1 matinée par trimestre de 9h à 13h • Présentation de la technologie • Tuto pour la configuration en ligne de commande • Objectif : présentation d’une thématique métier ou technique • Réservé aux clients : 30 personnes • Déroulé : 1 matin par trimestre de 9h à 12h • Big picture • Démonstration et retour d’expérience Apérotech Workshop Morning Tech
  • 4. Speakers Adrien le Priol ITWO Customer Team 1 @Priolix @lpiot Ludovic Piot Resp. du pôle Conseil, Architecture et DevOps
  • 5. Introduction ● Les enjeux de la performance sur le Web ● Les différents éléments de performance d'un site Web Les bonnes pratiques ● Limiter le trafic non monétisable ● Infrastructure (HTTP/2 HTTPs, architecture technique, tuning, architecture applicative, WebPerf ● AMP by Google ● Les quickwins par grands thèmes (infra / archi tech / archi appli / WebPerf) ● compression gzip, taille des images… cas de Leroy-Merlin (règles de 10 images de 100 Ko maxi). ● Caches, upscaling, outscaling, sharding Agenda L’obsession de la mesure ● Les outils ● La démarche de test de charge ● Méthodologie, outils, types de test, données de test La démarche PDCA ● Intégrer les tests de charge au cycle de développement (tests de non-regression) ● Environnements éphémères
  • 7. I amar prestar aen The world has changed… - Galadriel source : Warner Bros & NewLine Cinema
  • 8. Le monde a changé SO cial LO cal MO bile
  • 9. +1 second could cost Amazon $1.6 Billion in Sales source : https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
  • 10. +0.4 second and Google could lose 8 millions searches per day source : https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
  • 11. Statistiques d’usage d’Internet en 2016 source : https://hostingfacts.com/internet-facts-stats-2016/
  • 12. Pour ce qui est des performances, les développeurs pensent souvent avoir livré ça… En réalité, assez souvent, quand on le fait tourner en production, ça ressemble plutôt à ça…
  • 13. Les enjeux de la performance sur le Web Les performances d’un système sont une spécification fonctionnelle implicite du système. source : http://www.arthursclipart.org
  • 14. Les enjeux de la performance sur le Web La performance du système doit être une préoccupation perpétuelle du cycle de développement. source : http://www.geantsduweb.com/
  • 15. Les différentes composantes de la performance d’un site Web Navigateur Web Cache Moteur JS Interpréteur HTML Connexions HTTP Equipements réseau Serveur DNS Routeurs Firewall Proxies Serveur Cache Statiques Config. Routage backends Refactoring HTML Serveur Web Workers Config. Rewrite ruless Redirect Reverse-Proxy Algo. TLS ACL Rewrite rules Protocoles HTTP Serveur App Workers Config. Protocole d’ échange Stockage statiques Message broker Queues TTL Protocole d’ échange Patterns de diffusion App Sync / Async Cache appli. Langage Qualité du code Plateforme load-balance # instances sizing & unit perfs Tuning Base de données Size Cache Sharding Stats / Explain plan My Platform… well… sort of…
  • 17. Identifier le trafic monétisable Connaître son auditoire. Éliminer les parasites: outils d’intelligence concurrentielle bases de données marketing monitoring média, clipping agences SEO Badbots* *les bad bots représentaient jusqu’à 35% du nombre total de visites - (source : Datadome)
  • 18. Limiter le trafic non-monétisable Robot.txt User-agent: ArchitextSpider Disallow: * Améliorer le référencement Bloquer le référencement de certaines ressources. Déclaratif
  • 19. Limiter le trafic non-monétisable GeoIP filtering
  • 20. Limiter le trafic non-monétisable Solutions SaaS : Datadome Quoi ● User agent ● IP owner ● Géolocalisation Comment ● Nombre de hits par adresse IP ● Vitesse de crawl ● Récurrence des hits ● Nombre de hits générant des erreurs 404 ● Cookies Apache Nginx Varnish (4.0 - 4.1 - 5.0, 3.0) IIS module (ASP.Net) Wordpress plugin DATADOME
  • 21. Perception d’un chargement rapide… ou pas…
  • 23. Web perf : priorité au client… et à l’affichage
  • 24. Web perf : priorité au client… et à l’affichage
  • 26. Web perf : priorité au client… et à l’affichage
  • 27. Quickwin & bon sens Optimiser la taille/nombre des images Minifier CSS/JS Activer le Gzip Exécuter les JS en fin de chargement Limiter les ressources externes (JS, annonceurs, statistiques … )
  • 30. Les Headers Piloter les caches ETag:"e7d8e34a27cb1b77c9114da75ca21397" Expires:Tue, 28 Feb 2017 01:33:01 GMT Last-Modified:Sun, 04 Sep 2016 03:08:00 GMT Piloter le cache : ● Navigateur ● Varnish ● CDN
  • 31. Activer Gzip Apache <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript </IfModule> Varnish if (beresp.http.content-type ~ "text") { set beresp.do_gzip = true; } Non conseillé Nginx gzip on; gzip_types text/css text/plain text/xml text/css text/javascript application/javascript
  • 32. Activer Gzip <IfModule mod_headers.c> RewriteCond "%{HTTP:Accept-encoding}" "gzip" RewriteCond "%{REQUEST_FILENAME}.gz" "-s" RewriteRule "^(.*).css" "$1.css.gz" [QSA] RewriteRule ".css.gz$" "-" [T=text/css,E=no-gzip:1] <FilesMatch "(.js.gz|.css.gz)$"> Header append Content-Encoding gzip Header append Vary Accept-Encoding </FilesMatch> </IfModule>
  • 33. Exécuter les JS en fin de chargement Et prioriser les CSS HTML JS CSS Blocks parsing Blocks rendering ...
  • 34. Exécuter les JS en fin de chargement Et prioriser les CSS HTML JS CSS Blocks parsing Blocks rendering
  • 35. Limiter les ressources externes (JS, annonceurs, statistiques … ) ● Appels DNS ● Réduire le nombre de syn/ack ● Bande passante ● limiter les redirections Préfetch DNS resoltion: <html> <head> <link rel="dns-prefetch" href="//www.domain1.com"> <link rel="dns-prefetch" href="//www.domain2.com"> </head> <body> <img src="www.domain1.com/image1.jpeg"> <script src="www.domain2.com/script1.js"> </body> </html>
  • 37. Triche ● 0-200ms instante i made good ● 200 - 1000ms Computer compture its ● 1s+ I'm waiting ... ● 10+ I'm gone 1. Spinner 2. Ecran de transition 3. Substitution
  • 38. Triche ● 0-200ms instante i made good ● 200 - 1000ms Computer compture its ● 1s+ I'm waiting ... ● 10+ I'm gone 1. Spinner 2. Ecran de transition 3. Substitution
  • 39. Triche ● 0-200ms instante i made good ● 200 - 1000ms Computer compture its ● 1s+ I'm waiting ... ● 10+ I'm gone 1. Spinner 2. Ecran de transition 3. Substitution
  • 43. L’obsession de la mesure La mesure de performance doit être au cœur du processus de développement informatique. source : http://www.geantsduweb.com/
  • 44. Les tests de charge Différents types de test de charge Objectif : mesurer la performance unitaire Ex. : le use case de souscription est testé pour 1 utilisateur et, pour chaque étape du use case, on mesure le temps passé dans les différents composants de l’application. Test de performance unitaire Test de charge Test de rupture Test de vieillissement Objectif : mesurer la tenue en charge de l’application sur la population cible Ex. : on simule l’utilisation de l’application par 200 utilisateurs en parallèle pendant 2 heures. Objectif : déterminer les limites de l’application Ex. : on augmente le nombre d’utilisateurs en parallèle sur l’application jusqu’à ce que le taux d’erreurs / les temps de réponse ne soient plus acceptables. Objectif : déterminer la capacité de l’application à fonctionner sur une période étendue Ex. : on simule l’utilisation de l’application pendant 48h, avec une charge constante et égale à la charge moyenne.
  • 45. Tests de charge But: Connaître les limites de la plateforme Déterminer les goulets d’étranglement Optimiser le paramétrage middleware et applicatif Cibler d'éventuelles anomalies de conception logiciel, architecture.
  • 46. Méthodologie d’un tir de charge Définition du plan et des cas de test Création des scénarii et des scripts de tests Enregistrement des métriques Consolidation des métriques et édition d’un rapport de test Analyse du rapport de test et émission des préconisations 1 2 3 4 5 Plan de test Cas de test Création des paliers de données1 Scripts de test Scénarii de test Capture des métriques Données de test 3 Métriques Contrôleur Rapport d’analyse Rapport de test charge monitoring pilotage Injecteurs Exécution : simulation d’utilisateurs3 Application cible
  • 47. Tests de charge Qualité du tir de charge dépend que la qualité du scénario Connaître le comportement de ses utilisateurs (RUM: Google analytics, Newrelic)
  • 51. Tests de charge Les outils : Gatling - NewRelic
  • 53. Premature optimization is the root of all evil - Donald Knuth
  • 54. L’optimisation ne vaut que par l’expérimentation Code Measure Optimize Whereneeded!
  • 55. Les tests de perf dans un cycle projet Mode Waterfall PROD Archi Dev Perf
  • 56. Les tests de perf dans un cycle projet Mode agile PROD Archi Dev Perf 1. Conception des tests 2. Automatisation des tests 3. Développement logiciel #1 #2 #3 4. Exécution auto- matique des tests
  • 57. Les tests de perf dans un cycle projet Mode “dans la vraie vie” PROD Archi Dev Perf 1. Conception des tests 2. Automatisation des tests 3. Développement logiciel #1 #2 #3 4. Exécution auto- matique des tests PERFORMANCES CATASTROPHIQUES MEP À L’ARRACHE Délai OPTIMISATIONS COMME ON PEUT
  • 58. Les tests de perf dans un cycle projet Mode “Etat de l’art” PROD Archi Dev Tests de charge en continu 1. Conception des tests 2. Automatisation des tests 3. Développement logiciel #1 #2 #3 4. Exécution auto- matique des tests
  • 59. 2 1 3 4 AMI 0 Cloud-init EC2 Chef-solo CodeDeploy ECR S3 bucket Tirs de performance automatisés Environnements éphémères 1 • Terraform provisionne des instances EC2 sur AWS (accès via SSH possible) • Utilisation d’AMIs spécifiques enrichies avec un chef-solo 2 3 • CodeDeploy déclenche l’exécution de Chef-solo • Chef-solo récupère les cookbooks sur un bucket S3 • Installation des packages et configuration OS + middleware 4 • CodeDeploy lance le déploiement de l’application • Récupération des artefacts applicatifs sur des dépôts (git, nexus, registry Docker) • Déploiement de l’application 5 • Déclenchement des scénarios Gatling • job lancé en automatique via un pipeline Gitlab-CI0 • Scripts de démarrage cloud-init • Déclenchement de CodeDeploy