Les bonnes pratiques
de l’hébergement d’un CMS
pour une meilleure expérience utilisateur
… le vôtre
Oxalide & les CMS
Edouard LY
@oxalide
Responsable Marketing et Communication
Ancien MOA/MOE
Nicolas Silberman
@nsilberman
Consultant Vanille Caramel
Ancien CTO de Médiapart
Welcome
Tu devrais plutôt
demander : « Mais
merde, quand
sont-ils ?! »
Mais merde,
où sont-ils ?!
Poser les 4 bonnes questions
pour s’inscrire dans
Les bonnes pratiques de l’hébergement
Votre activité digitale est un
partie essentielle de votre
stratégie ?
1
Ne fais pas attention à
l'aspect rudimentaire de
cette maquette, je n'ai pas
eu le temps de la faire à
l’échelle ni de la peindre.   
Fondation
légère
Brique Mur Cathédrale
Fondation
intermédiaire
Fondations
avancées
Peu critique Très critique
Oxalide © 2014 – Documents confidentiels
Quelle est la QoS et quelles sont les garanties
que vous exigez ?
Une stratégie d’entreprise qui
repose MAJORITAIREMENT
sur le digital
Une stratégie d’entreprise qui
repose PEU sur le digital
Quel est votre tactique
digital ? (mobile, cross, …)
Alors voilà, nous fixons un
câble électrique de type
industriel au sommet de
l’hôtel de ville et nous le
suspendons au dessus de la
rue entre ses deux
réverbères.
PRODUCT
f
g t
p
f
g t
p
MEDIA
Quelle communication avez-vous mis en place ?
Quel volumétrie de trafic attendez-vous ?
Communication qui s’appuie
sur le buzz produit ?
Communication qui s’appuie
sur un plan média
« complet » ?
A quels usages sont destinés
vos sites ou applications?
Tu lances le moteur, tu
démarres de l’autre bout de
la rue et tu fonces pour
atteindre les 88 miles à
l’heure à la hauteur de
câble. (…) Et te voilà reparti
en 1985.
2
LinéaireCommunication
Transactionnel
Les types d’usage Projection de croissance
LOGO
lifestyle
Exponentielle
Quel type de contenu statique ou dynamique ?
Quelle est la volumétrie dans les 3,6,12 prochains mois ?
Comment sont constituées et
organisées vos équipes pour le
digital ?
Auparavant, nous avons
équipés la machine à
voyager dans le temps
d’une perche et d’un
crochet directement reliés
au convecteur temporel. A
l’instant « T », calculé à la
seconde près.
3
La taille de vos équipes Workflow
Les compétences en interne
L’organisation des projets digitaux
Niveau : utilisateurs
Niveau : développement
Utilisez-vous une partie du
temps de développeur pour
gérer l’infrastructure ? Si oui,
quel temps ne passent-il pas à
travailler sur les fonctionnalités
Est-ce que une
dégradation du backoffice
à un impact sur la
productivité des utilisateurs
internes ?
Est-ce vos développeur
sont outillé pour relever les
challenges constant du
web ?
Quel budget consacrez-vous
à « l’hébergement » ?
Un éclair devrait atteindre le
sommet de l’hôtel de ville et
électrifier le câble à l’instant
précis ou le crochet fera
contact, projetant ainsi 2,21
Gigowatts dans le
convecteur temporel.
4
€
A la hauteur
de votre chiffre d’affaires
ou votre image de marque
•  Criticité de votre activité
•  Des objectifs / projections
•  Qualité de service / UX
Considérez	
  l’hébergement	
  comme	
  un	
  inves6ssement	
  plus	
  
qu’une	
  dépense.	
  Votre	
  ac6vité	
  digitale	
  repose	
  sur	
  ce<e	
  
fonda6on.	
  Le	
  budget	
  est-­‐il	
  à	
  la	
  hauteur	
  de	
  la	
  cri6cité	
  de	
  vos	
  
objec6fs	
  ?	
  
Quel est la tactique pour les atteindre ?
€
€€
€€€
Quel niveau de criticité à votre activité digitale à terme ?
Quels sont les objectifs à court et moyen/long terme ?
Quel est le budget alloué ?
€
Une architecture d’infrastructure et logicielle adaptée
Garantir une
expérience utilisateur
constante et de qualité
Parenthèse : dette technique
Serveur Web (Apache, Ngnix, …)
Langage (PHP, Java,…)
CMS (Drupal, WP, eZ, Typo3,...) Bases de
données
Moteur de
recherche
faible important
Temps de traitement et de réponse
Visiteurs et utilisateurs Ressources limitées
Efficience applicative
Parenthèse : ressources limitées
Application
CMS
Applications
sur les frontaux
Cache
frontaux
Cache
applicatif
Backend
Backoffice
Application
CMS
Des fondations modulables : scalables
La protection
des ressources
© 2013 Ironhide Game Studio. All rights reserved.
Distributeur de contenu spécialisé
dans la livraison de contenus
à haut débit
Traitement d’une requête avec du
contenus
CACHE APPLICATIONS
Le résultat stocké
dans le cache
Cache navigateur, CDN, cache « visiteurs », cache applicatif
Parenthèse : le cache
La protection des ressources
APC
Memcached
Query
Cache
10 %100 % 90 %
1er rempart 2ème rempart 3ème rempart 4ème rempart
CACHE
Contenu
Statique
Varnish / ESI
Pages
CMS
Home
Page
Médias
Autres
Pages
Contenu
Dynamique
Ajax / Cookie
Bannières Notifications
Informations client
Personnalisation
Applicatif
APC
Memcache
Query Cache
Config Caches Indexes / Flat
Application
Dashboard
DEFINIR, MESURER, MONITORER
LA PERFORMANCE
DIGITAL
CAPACITY
KPI
Le monitoring technique et UX
KPI
technique
KPI
UX
Connaissez-­‐vous	
  la	
  capacité	
  d’accueil	
  de	
  
visiteurs	
  sur	
  vos	
  sites	
  dans	
  de	
  bonnes	
  
condi6ons	
  de	
  naviga6on	
  ?	
  (sans	
  que	
  le	
  site	
  
«	
  rame	
  »)	
  	
  
Il	
  faut	
  définir	
  et	
  partager	
  des	
  
indicateurs	
  communs	
  entre	
  le	
  
MOA/MOE/OPS	
  pour	
  apprécier	
  la	
  
qualité	
  de	
  service	
  
Test #1
Aucune optimisation
Aucun Best Practice cité
Test #2
htaccess dans apache
Sans les logs
.htaccess désactives
Test #3
Ajout d’APC TEMPS	
  DE	
  REPONSES	
  DIVISER	
  PAR	
  2	
  
521	
  ms	
  
519	
  ms	
  
228	
  ms	
  
228	
  ms	
  
230	
  ms	
  
CHARGE	
  CPU	
  A	
  100%	
  
Test #4
Tuning MySQL
innodb, query cache, table cache
Test #5
APC : apc.stats=0 (le « mythe »)
Test #5
CPU
Test #6
On active la cache drupal
Test #7
Charge CPU
22,9ms	
  
TEMPS	
  DE	
  REPONSES	
  DIVISER	
  PAR	
  10	
  	
  
CHARGE	
  CPU	
  REDUITE	
  SIGNIFICATIVEMENT	
  
« le code/application reste
LES LEVIERS les plus importants
sur la dette technique »
DEFINIR, MESURER, MONITORER
LA PERFORMANCE
DITIGAL
CAPACITY
KPI
L’amélioration continue
KPI
technique
KPI
UX
L’améliora6on	
  con6nue	
  passe	
  toujours	
  par	
  
ces	
  référen6els	
  communs	
  
L’amélioration continue
Intégration Staging Pré-production Production
Codes source
Staging Pré-production Production
Pré-production
Production
Zone #1
Production
Zone #2
Projet 1
Projet 2
Projet X
Piloter vos déploiements
Bonnes pratiques : pas que techniques
1
2
3
Intégrer la performance
dès le BUILD et
dans les plans market&comm
Discutez des impacts #devops
du code et
des opérations market & comm
sur l’infrastructure
Créer et partagez des
référentiels communs
Merci… des questions ?

AgoraCMS 2014 : Les bonnes pratiques de l'hébergement d'un CMS pour une meilleure expérience utilisateur

  • 1.
    Les bonnes pratiques del’hébergement d’un CMS pour une meilleure expérience utilisateur
  • 2.
  • 3.
    Edouard LY @oxalide Responsable Marketinget Communication Ancien MOA/MOE Nicolas Silberman @nsilberman Consultant Vanille Caramel Ancien CTO de Médiapart Welcome
  • 4.
    Tu devrais plutôt demander :« Mais merde, quand sont-ils ?! » Mais merde, où sont-ils ?! Poser les 4 bonnes questions pour s’inscrire dans Les bonnes pratiques de l’hébergement
  • 5.
    Votre activité digitaleest un partie essentielle de votre stratégie ? 1 Ne fais pas attention à l'aspect rudimentaire de cette maquette, je n'ai pas eu le temps de la faire à l’échelle ni de la peindre.   
  • 6.
    Fondation légère Brique Mur Cathédrale Fondation intermédiaire Fondations avancées Peucritique Très critique Oxalide © 2014 – Documents confidentiels Quelle est la QoS et quelles sont les garanties que vous exigez ? Une stratégie d’entreprise qui repose MAJORITAIREMENT sur le digital Une stratégie d’entreprise qui repose PEU sur le digital
  • 7.
    Quel est votretactique digital ? (mobile, cross, …) Alors voilà, nous fixons un câble électrique de type industriel au sommet de l’hôtel de ville et nous le suspendons au dessus de la rue entre ses deux réverbères.
  • 8.
    PRODUCT f g t p f g t p MEDIA Quellecommunication avez-vous mis en place ? Quel volumétrie de trafic attendez-vous ? Communication qui s’appuie sur le buzz produit ? Communication qui s’appuie sur un plan média « complet » ?
  • 9.
    A quels usagessont destinés vos sites ou applications? Tu lances le moteur, tu démarres de l’autre bout de la rue et tu fonces pour atteindre les 88 miles à l’heure à la hauteur de câble. (…) Et te voilà reparti en 1985. 2
  • 10.
    LinéaireCommunication Transactionnel Les types d’usageProjection de croissance LOGO lifestyle Exponentielle Quel type de contenu statique ou dynamique ? Quelle est la volumétrie dans les 3,6,12 prochains mois ?
  • 11.
    Comment sont constituéeset organisées vos équipes pour le digital ? Auparavant, nous avons équipés la machine à voyager dans le temps d’une perche et d’un crochet directement reliés au convecteur temporel. A l’instant « T », calculé à la seconde près. 3
  • 12.
    La taille devos équipes Workflow Les compétences en interne L’organisation des projets digitaux Niveau : utilisateurs Niveau : développement Utilisez-vous une partie du temps de développeur pour gérer l’infrastructure ? Si oui, quel temps ne passent-il pas à travailler sur les fonctionnalités Est-ce que une dégradation du backoffice à un impact sur la productivité des utilisateurs internes ? Est-ce vos développeur sont outillé pour relever les challenges constant du web ?
  • 13.
    Quel budget consacrez-vous à« l’hébergement » ? Un éclair devrait atteindre le sommet de l’hôtel de ville et électrifier le câble à l’instant précis ou le crochet fera contact, projetant ainsi 2,21 Gigowatts dans le convecteur temporel. 4
  • 14.
    € A la hauteur devotre chiffre d’affaires ou votre image de marque •  Criticité de votre activité •  Des objectifs / projections •  Qualité de service / UX Considérez  l’hébergement  comme  un  inves6ssement  plus   qu’une  dépense.  Votre  ac6vité  digitale  repose  sur  ce<e   fonda6on.  Le  budget  est-­‐il  à  la  hauteur  de  la  cri6cité  de  vos   objec6fs  ?  
  • 15.
    Quel est latactique pour les atteindre ? € €€ €€€ Quel niveau de criticité à votre activité digitale à terme ? Quels sont les objectifs à court et moyen/long terme ? Quel est le budget alloué ? € Une architecture d’infrastructure et logicielle adaptée Garantir une expérience utilisateur constante et de qualité
  • 16.
    Parenthèse : dettetechnique Serveur Web (Apache, Ngnix, …) Langage (PHP, Java,…) CMS (Drupal, WP, eZ, Typo3,...) Bases de données Moteur de recherche faible important Temps de traitement et de réponse
  • 17.
    Visiteurs et utilisateursRessources limitées Efficience applicative Parenthèse : ressources limitées
  • 18.
  • 19.
    La protection des ressources ©2013 Ironhide Game Studio. All rights reserved.
  • 20.
    Distributeur de contenuspécialisé dans la livraison de contenus à haut débit Traitement d’une requête avec du contenus CACHE APPLICATIONS Le résultat stocké dans le cache Cache navigateur, CDN, cache « visiteurs », cache applicatif Parenthèse : le cache
  • 21.
    La protection desressources APC Memcached Query Cache 10 %100 % 90 % 1er rempart 2ème rempart 3ème rempart 4ème rempart
  • 22.
    CACHE Contenu Statique Varnish / ESI Pages CMS Home Page Médias Autres Pages Contenu Dynamique Ajax/ Cookie Bannières Notifications Informations client Personnalisation Applicatif APC Memcache Query Cache Config Caches Indexes / Flat Application
  • 23.
  • 24.
    DEFINIR, MESURER, MONITORER LAPERFORMANCE DIGITAL CAPACITY KPI Le monitoring technique et UX KPI technique KPI UX Connaissez-­‐vous  la  capacité  d’accueil  de   visiteurs  sur  vos  sites  dans  de  bonnes   condi6ons  de  naviga6on  ?  (sans  que  le  site   «  rame  »)     Il  faut  définir  et  partager  des   indicateurs  communs  entre  le   MOA/MOE/OPS  pour  apprécier  la   qualité  de  service  
  • 25.
    Test #1 Aucune optimisation AucunBest Practice cité Test #2 htaccess dans apache Sans les logs .htaccess désactives Test #3 Ajout d’APC TEMPS  DE  REPONSES  DIVISER  PAR  2   521  ms   519  ms   228  ms  
  • 26.
    228  ms   230  ms   CHARGE  CPU  A  100%   Test #4 Tuning MySQL innodb, query cache, table cache Test #5 APC : apc.stats=0 (le « mythe ») Test #5 CPU
  • 27.
    Test #6 On activela cache drupal Test #7 Charge CPU 22,9ms   TEMPS  DE  REPONSES  DIVISER  PAR  10     CHARGE  CPU  REDUITE  SIGNIFICATIVEMENT  
  • 28.
    « le code/application reste LESLEVIERS les plus importants sur la dette technique »
  • 29.
    DEFINIR, MESURER, MONITORER LAPERFORMANCE DITIGAL CAPACITY KPI L’amélioration continue KPI technique KPI UX L’améliora6on  con6nue  passe  toujours  par   ces  référen6els  communs  
  • 30.
    L’amélioration continue Intégration StagingPré-production Production Codes source Staging Pré-production Production Pré-production Production Zone #1 Production Zone #2 Projet 1 Projet 2 Projet X Piloter vos déploiements
  • 31.
    Bonnes pratiques :pas que techniques 1 2 3 Intégrer la performance dès le BUILD et dans les plans market&comm Discutez des impacts #devops du code et des opérations market & comm sur l’infrastructure Créer et partagez des référentiels communs
  • 32.