Combien vous coûte cet
emplacement pub ?
Les tiers et leurs coûts cachés
Jean-Pierre Vincent
@theystolemynick
Jean-Pierre VINCENT
Accélérateur de page
Contact
• @theystolemynick
• jp@braincracking.fr
@theystolemynick
Tiers ?
I Les tiers classiques
– Analytics et trackers
– Boutons de partage
– A/B testing
– Widgets (cartes, commentaires,...
Coûts cachés des tiers
• Perte sèche d’activité
• Ralentissements et manque à
gagner
• Image de marque entamée
• Ouverture...
L’indisponibilité du samedi
après-midi signalée par la
direction
20 secondes de page blanche
Simulation de serveur qui ne ...
Qui a tué le site ?
Crédits iconographie : voir slide finale
+
Les sysadmins ?
+
Un tiers ?
+
Les services
marketing et
co...
C’EST TOUJOURS LA FAUTE
DU TIERS (OU PAS)
« L’enfer c’est les autres »
J.P. Sartre
@theystolemynick
Pourquoi le tiers ne répond
pas ?
• Attaque DDoS sur
DNS (22 oct.)
• Erreurs réseau
WTF (DNS orange
et google le 17 oct.)
...
SAVOIR INTÉGRER LES
TIERS
« Si c’est rapide à intégrer, c’est que ça va
ramer »
- La Logique
@theystolemynick
Situation classique
« insérez ce script dans le head »
@theystolemynick
Résultat classique #1
Le Single Point Of Failure (SPOF) :
dépendance critique à un seul maillon
de la chaine
Simulation de...
Solutions
1. Asynchrone
2. Rapatriement des ressources
jugées critiques
– Librairies JS et CSS
– Polices
– Test A/B (alter...
Détecter et prévenir les SPOF
client
SPOF-o-Matic SPOF-check en CI
SPOFcheck (better CLI) : https://gist.github.com/jpvinc...
Résultat classique #2
@theystolemynick
Tu attends quoi pour
exécuter ton code ?
DOMContentLoaded
$(document).ready
window.load
document.readyState === 'complete'...
Tu attends quoi pour exécuter
ton code ?
DOMContentLoaded
attend :
• Les scripts standard
• Les scripts en defer
• documen...
Intégrer un JS tiers sans
heurt
• Utiliser l’attribut async ( > IE9)
• Hors pub, refuser les
document.write()
Vérifiez et ...
Après le chargement
Le processeur plafonne… Mais c’est pas mon
code!
@theystolemynick
Cas : Glamour – Po.st
Tiers : boutons sociaux,
liens courts et analytics
@theystolemynick
Cas : Glamour – Po.st
Cas : Glamour – Po.st
👓 Cette fois ci, c’est bien de la faute
du tiers hein ?
@theystolemynick
Cas : Glamour – Po.st
Pour tout widget :
• Lire les docs !
• Initialisation puis
exécution JIT (au
dernier moment)
Cas : Glamour – Po.st
Intégrer un tiers (correctement) ne prend
JAMAIS 10 minutes
• Chercher :
– À désactiver auto-initial...
Outils de mesure CPU
• Outils navigateurs
• yellowlab.tools
• webpagetest.org
3rd-party-abuser
3rd-party-abuser : github.c...
On partage ? C’est gratuit !
Page parodique : worldsmostshareablewebsite.greig.cc
3 Mo, saturation du CPU pendant 20 secon...
Boutons de partage
Coûts supposés
• 0$
• Quelques heures
d’intégration
Coûts effectifs
• ?
@theystolemynick
Rajout de 5 boutons de
partage
• ↗ 400Ko, ↗ 22 requêtes, ↗ CPU
• ↗ 2 s de temps de chargement
• ↗ 400 ms de premier affich...
Challenger leur
apport supposé
• Test A/B sur un site de
e-commerce :
suppression des
boutons de la page
produit  +12% de...
Arrêter de nourrir les
concurrents
• Ces widgets permettent à leurs
propriétaires de suivre et
qualifier leurs utilisateur...
Boutons de partage natifs
Coûts supposés
• 0$
• Quelques heures
d’intégration
Coûts à envisager
• ↙ performance
• Distrait...
Boutons faits
main
1. Possible en pur
HTML/CSS/image,
grâce aux liens
prévus par les
plateformes.
2. Scripts open-source
p...
Boutons faits
main
• Respect de la charte
graphique
• Plus souple à intégrer,
y compris en
responsive
• Amélioration
progr...
LES TIERS DES TIERS DE
VOS TIERS
« Quand il n’y en a qu’un ça va… »
Un ministre de l’Intérieur
@theystolemynick
Les amis de mes
amis sont ils mes
amis ?
• Flèches : appels réseau
• En bleu : le HTML
• En jaune : JS / CSS /
images
• Ve...
Les amis de mes
amis sont ils mes
amis ?
2nd niveau (smartAd) : 10
tiers
3ème niveau (casaleMedia)
: 20 nouveaux tiers
4èm...
Les amis de mes amis sont ils
mes amis ?
• Il est techniquement possible :
– De modifier la page
– D’y récupérer des infor...
Le point régulier « tiers »
Établir un dialogue régulier entre
utilisateurs des tiers et IT
Ordre du jour :
• IT
– Inventa...
Limiter les risques de vols de vos
données par des tiers inconnus
• Inclusion des pubs en iframe
– Incompatible avec certa...
Limiter les risques de vols de vos
données par des tiers inconnus
Autoriser les domaines qui incluent du
JS
– Header Conte...
Quand a-t-on trop de tiers ?
Le nombre brut est un mauvais indicateur
(hors mobile)
• ± 40 tiers chez GrosBill, 2 chez LDL...
Sur bureau, 40 revendeurs d’infos en
chargement différé ont moins
d’impact sur la performance perçue
par l’utilisateur qu’...
LA PUB ET LA
PERFORMANCE
« Je vois pas le problème, vraiment »
Un utilisateur d’iPhone 7
@theystolemynick
Pub
Coûts supposés
• Ce qui est écrit sur
le contrat avec la
régie
Coûts effectifs
• ?
@theystolemynick
Vitesse et business
Utilisateurs adblock : +50% engagement
Utilisateurs normaux :
• Après 5 secondes, l’engagement chute
•...
Quel mobile viser ?
Vos visiteurs : valeur
moyenne 380€ (top 25)
Marché français : valeur
médiane entre 100 et 150€
Top 25...
Quel mobile viser ?
• Afficher une page de
journal sur un mobile de
moins de 300€ est
pénible
• 80% des blocages sont
dus ...
Pub
Coûts supposés
• Ce qui est écrit sur
le contrat avec la
régie
Coûts effectifs
• Site lent = moins
d’engagement et
de ...
Pubs trop lourdes ?
Essayez avec moins!
@theystolemynick
Pubs trop lourdes ?
Essayez avec moins!
@theystolemynick
Pubs trop lourdes ?
Essayez avec moins!
@theystolemynick
Moins de pub, plus visible
• Meilleures perfs
– Amélioration de l’UX  ↗ revenus
– Plus inclusif  ↗ revenus
• Revalorisat...
LES AUTRES COÛTS
CACHÉS DE LA PUB
Image de marque
Toutes les pubs
sont elles
bonnes ?
Un design uniforme
Slides volées à Renaud Forestié : https://vimeo.com/136370421
Image de marque
et sécurité
La diffusion des virus via
pub
C’est la marque de
l’éditeur dont on parle
négativement, pas la...
What ?_?
• Campagne de recrutement d’une
régie via la console de
développement …
• … donc visibles des développeurs
des cl...
Qui paye la non-qualité ?
Publicités en erreur
Qui paye la non-qualité ?
17 secondes, c’est long
• Vendue au nombre d’appels : l’annonceur est
floué (56% des pubs ne son...
Quelles solutions à la non-qualité
?
Aujourd’hui :
• Détection manuelle par l’éditeur
• Les régies font un peu de
préventi...
SURVEILLER LES TIERS
On ne corrige pas ce que l’on ne voit pas
@theystolemynick
Ce sont aux éditeurs d’exiger
plus de qualité
Cahier des charges
• Poids maximum
des créations ou
des vidéos
• Utilisation...
Quelles solutions à la non-qualité
?
Détection automatisée de problèmes
techniques
SiteSpeed.io https://dashboard.sitespee...
Surveiller les tiers
• Monitoring technique
– Disponibilité et temps de réponse
– Qualité technique
• Ressenti utilisateur...
CONCLUSION
@theystolemynick
Les coûts cachés des tiers
• Perte sèche d’activité
• Ralentissements et manque à
gagner
• Image de marque entamée
• Ouver...
Solutions
Sites
• Monitorer
• Définir des limites
• Intégrer
correctement
• Dialoguer
Tiers
• Montrer le respect
de standa...
Crédits
Telephone by Magicon
from the Noun Project
Weight by Evan Shuster
from the Noun Project
Ethernet Cable by Oliviu
S...
Prochain SlideShare
Chargement dans…5
×

Performance des tiers : combien coûte cet emplacement pub ?

746 vues

Publié le

Les tiers en général et la publicité en particulier ralentissent les sites et génèrent un manque à gagner. Constats et solutions our

Publié dans : Technologie
  • Soyez le premier à commenter

Performance des tiers : combien coûte cet emplacement pub ?

  1. 1. Combien vous coûte cet emplacement pub ? Les tiers et leurs coûts cachés Jean-Pierre Vincent @theystolemynick
  2. 2. Jean-Pierre VINCENT Accélérateur de page Contact • @theystolemynick • jp@braincracking.fr @theystolemynick
  3. 3. Tiers ? I Les tiers classiques – Analytics et trackers – Boutons de partage – A/B testing – Widgets (cartes, commentaires, service client en chat…) II Les Publicités @theystolemynick
  4. 4. Coûts cachés des tiers • Perte sèche d’activité • Ralentissements et manque à gagner • Image de marque entamée • Ouverture au piratage industriel @theystolemynick
  5. 5. L’indisponibilité du samedi après-midi signalée par la direction 20 secondes de page blanche Simulation de serveur qui ne répond pas : Webpagetest.org, Advanced Settings > SPOF
  6. 6. Qui a tué le site ? Crédits iconographie : voir slide finale + Les sysadmins ? + Un tiers ? + Les services marketing et commercial ? + Les dévs ? </> @theystolemynick
  7. 7. C’EST TOUJOURS LA FAUTE DU TIERS (OU PAS) « L’enfer c’est les autres » J.P. Sartre @theystolemynick
  8. 8. Pourquoi le tiers ne répond pas ? • Attaque DDoS sur DNS (22 oct.) • Erreurs réseau WTF (DNS orange et google le 17 oct.) • Firewall d’état (la Chine) • Wifi gratuit • La boite a coulé code.jquery.com oublie de renouveler son certificat SSL Bref : ça va planter @theystolemynick
  9. 9. SAVOIR INTÉGRER LES TIERS « Si c’est rapide à intégrer, c’est que ça va ramer » - La Logique @theystolemynick
  10. 10. Situation classique « insérez ce script dans le head » @theystolemynick
  11. 11. Résultat classique #1 Le Single Point Of Failure (SPOF) : dépendance critique à un seul maillon de la chaine Simulation de serveur qui ne répond pas : Webpagetest.org, Advanced Settings > SPOF
  12. 12. Solutions 1. Asynchrone 2. Rapatriement des ressources jugées critiques – Librairies JS et CSS – Polices – Test A/B (alternative : timeout) @theystolemynick
  13. 13. Détecter et prévenir les SPOF client SPOF-o-Matic SPOF-check en CI SPOFcheck (better CLI) : https://gist.github.com/jpvincent/494117fc2806a5d14806cc96a6354cef SPOF-O-Matic : https://chrome.google.com/webstore/detail/spof-o-matic/plikhggfbplemddobondkeogomgoodeg WebPagetest scripting
  14. 14. Résultat classique #2 @theystolemynick
  15. 15. Tu attends quoi pour exécuter ton code ? DOMContentLoaded $(document).ready window.load document.readyState === 'complete' Dans le head ! Juste après le formulaire
  16. 16. Tu attends quoi pour exécuter ton code ? DOMContentLoaded attend : • Les scripts standard • Les scripts en defer • document.write() Équivalent : $(document).ready( …) ou $(…) window.onload attend en plus : • Les images • Les iframes • Les scripts inclus trop tôt en asynchrone Équivalent : document.readyStat e === 'complete' @theystolemynick
  17. 17. Intégrer un JS tiers sans heurt • Utiliser l’attribut async ( > IE9) • Hors pub, refuser les document.write() Vérifiez et mettez à jour vos intégrations actuelles Inclusion asynchrone avant IE 10 : https://gist.github.com/jpvincent/51321638dee74e2dd8f53bada8a47ee5
  18. 18. Après le chargement Le processeur plafonne… Mais c’est pas mon code! @theystolemynick
  19. 19. Cas : Glamour – Po.st Tiers : boutons sociaux, liens courts et analytics @theystolemynick
  20. 20. Cas : Glamour – Po.st
  21. 21. Cas : Glamour – Po.st 👓 Cette fois ci, c’est bien de la faute du tiers hein ? @theystolemynick
  22. 22. Cas : Glamour – Po.st Pour tout widget : • Lire les docs ! • Initialisation puis exécution JIT (au dernier moment)
  23. 23. Cas : Glamour – Po.st Intégrer un tiers (correctement) ne prend JAMAIS 10 minutes • Chercher : – À désactiver auto-initialisation et autres méthodes 🎇magiques🎇 – Les méthodes asynchrones pour inclure et exécuter • Rejeter le tiers si il ne l’a pas prévu • Faire un étude de profilage de code avant et après intégration @theystolemynick
  24. 24. Outils de mesure CPU • Outils navigateurs • yellowlab.tools • webpagetest.org 3rd-party-abuser 3rd-party-abuser : github.com/jpvincent/3rd-party-cpu-abuser
  25. 25. On partage ? C’est gratuit ! Page parodique : worldsmostshareablewebsite.greig.cc 3 Mo, saturation du CPU pendant 20 secondes sur mobile
  26. 26. Boutons de partage Coûts supposés • 0$ • Quelques heures d’intégration Coûts effectifs • ? @theystolemynick
  27. 27. Rajout de 5 boutons de partage • ↗ 400Ko, ↗ 22 requêtes, ↗ CPU • ↗ 2 s de temps de chargement • ↗ 400 ms de premier affichage Test WebPageTest (connexion type ADSL): http://wpt.fasterize.com/video/compare.php?tests=161027_KT_15,161027_3X_14
  28. 28. Challenger leur apport supposé • Test A/B sur un site de e-commerce : suppression des boutons de la page produit  +12% de conversion • Le constat de Smashing Magazine (Note : entretemps FB a sorti un widget « share ») Test A/B : https://vwo.com/blog/removing-social-sharing-buttons-from-ecommerce-product-page-increase-conversions/ Le Tweet de SM : https://twitter.com/smashingmag/status/204955763368660992
  29. 29. Arrêter de nourrir les concurrents • Ces widgets permettent à leurs propriétaires de suivre et qualifier leurs utilisateurs en dehors de leurs murs G+ et FB sont vos concurrents : – Google 42% du CA de la pub – Facebook 30% du CA du display Rapport IAB Europe 2014 : www.iabturkiye.org/sites/default/files/iab_europe_adex_benchmark_2014_report.pdf Post « la pub finance-t-elle vraiment les contenus ? » piacentino.com/jb/2015/publicite-en-ligne-ou-va-largent Vie privée : https://www.miximum.fr/blog/conf-pw-2017/
  30. 30. Boutons de partage natifs Coûts supposés • 0$ • Quelques heures d’intégration Coûts à envisager • ↙ performance • Distrait l’utilisateur • Renforce les leaders @theystolemynick
  31. 31. Boutons faits main 1. Possible en pur HTML/CSS/image, grâce aux liens prévus par les plateformes. 2. Scripts open-source pour récupérer les fonctionnalités de compteurs ou d’analytics 3. Des services tiers existent aussi, mais attention à bien les benchmarker : différence de chargement du simple au triple 1. Générateur d’URL statiques : github.com/bradvin/social-share-urls 2. Ex. open-source de script performant : github.com/finderau/share-buttons 3. Benchmark des tiers : www.xfive.co/blog/social-media-buttons-test-performance-privacy-features/
  32. 32. Boutons faits main • Respect de la charte graphique • Plus souple à intégrer, y compris en responsive • Amélioration progressive : statiques d’abord, puis rajout de fonctionnalités JS • Rapides ! • Moins d’infos chez les concurrents 1. Générateur d’URL statiques : github.com/bradvin/social-share-urls 2. Ex. open-source de script performant : github.com/finderau/share-buttons 3. Benchmark des tiers : www.xfive.co/blog/social-media-buttons-test-performance-privacy-features/
  33. 33. LES TIERS DES TIERS DE VOS TIERS « Quand il n’y en a qu’un ça va… » Un ministre de l’Intérieur @theystolemynick
  34. 34. Les amis de mes amis sont ils mes amis ? • Flèches : appels réseau • En bleu : le HTML • En jaune : JS / CSS / images • Vert, violet, rouge : tiers 1er niveau : 15 tiers inclus volontairement Outil de visualisation requestmap.webperf.tools/
  35. 35. Les amis de mes amis sont ils mes amis ? 2nd niveau (smartAd) : 10 tiers 3ème niveau (casaleMedia) : 20 nouveaux tiers 4ème niveau (Turn) : 20 autres tiers Outil requestmap.webperf.tools/
  36. 36. Les amis de mes amis sont ils mes amis ? • Il est techniquement possible : – De modifier la page – D’y récupérer des informations • Savoir qui est inclus : – LightBeam, privacy-badger – Solutions commerciales, dont Ghostery • Vérifier les contrats : – La liste des partenaires de votre partenaire vous convient-elle ? – Les engagements sur moyens … et pénalités • Point régulier tiers de 1er niveau @theystolemynick
  37. 37. Le point régulier « tiers » Établir un dialogue régulier entre utilisateurs des tiers et IT Ordre du jour : • IT – Inventaire des tiers – Éventuels problèmes remontés • Business : importance de chaque tiers Décisions : • Suppressions • Ordre de chargement Conf demain matin 1ère heure : « Design de la Performance » sur l’importance du dialogue inter-équipes pour la performance
  38. 38. Limiter les risques de vols de vos données par des tiers inconnus • Inclusion des pubs en iframe – Incompatible avec certains formats – Efface l’inconvénient de document.write() <iframe sandbox="allow-scripts" src="carre_pub.html" /> @theystolemynick
  39. 39. Limiter les risques de vols de vos données par des tiers inconnus Autoriser les domaines qui incluent du JS – Header Content-Security-Policy: script-src 'self' tiers1 tiers2 … Refuser l’accès aux cookies – header Set-Cookie:…;HttpOnly – Incompatible avec la plupart des analytics JS @theystolemynick
  40. 40. Quand a-t-on trop de tiers ? Le nombre brut est un mauvais indicateur (hors mobile) • ± 40 tiers chez GrosBill, 2 chez LDLC • Les sites déjà optimisés supportent la charge • Les tiers revendeurs d’informations ont peu d’impact sur l’UX Étude Fasterize www.fasterize.com/fr/blog/etude-third-parties-et-webperf/ sur les 40 plus gros sites e-commerce de France, hors mobile
  41. 41. Sur bureau, 40 revendeurs d’infos en chargement différé ont moins d’impact sur la performance perçue par l’utilisateur qu’une seule pub @theystolemynick
  42. 42. LA PUB ET LA PERFORMANCE « Je vois pas le problème, vraiment » Un utilisateur d’iPhone 7 @theystolemynick
  43. 43. Pub Coûts supposés • Ce qui est écrit sur le contrat avec la régie Coûts effectifs • ? @theystolemynick
  44. 44. Vitesse et business Utilisateurs adblock : +50% engagement Utilisateurs normaux : • Après 5 secondes, l’engagement chute • Après 20 secondes, ne restent que les fidèles ←Pages/session → ← Temps de chargement total → Graphiques et analytics performance / business : OnFocus
  45. 45. Quel mobile viser ? Vos visiteurs : valeur moyenne 380€ (top 25) Marché français : valeur médiane entre 100 et 150€ Top 25 des mobiles de 2 journaux FR en RWD, octobre 2016, via Google Analytics Étude GFK octobre 2015 : challenges.fr/high-tech/les-grandes-tendances-du-marche-des-smartphones-en-france_60272 70% des cartes SIM actives utilisent la 3G (ARCEP) donc ces mobiles « bas de gamme » utilisent vraiment le Web ! Le top 25 à 380€ : 15% Médiane à 100-150€ 3G
  46. 46. Quel mobile viser ? • Afficher une page de journal sur un mobile de moins de 300€ est pénible • 80% des blocages sont dus aux tiers 3rd-party-abuser tablette Android à 200€, page article @theystolemynick
  47. 47. Pub Coûts supposés • Ce qui est écrit sur le contrat avec la régie Coûts effectifs • Site lent = moins d’engagement et de conversion • La majorité du parc mobile français peine à afficher les sites à pub @theystolemynick
  48. 48. Pubs trop lourdes ? Essayez avec moins! @theystolemynick
  49. 49. Pubs trop lourdes ? Essayez avec moins! @theystolemynick
  50. 50. Pubs trop lourdes ? Essayez avec moins! @theystolemynick
  51. 51. Moins de pub, plus visible • Meilleures perfs – Amélioration de l’UX  ↗ revenus – Plus inclusif  ↗ revenus • Revalorisation de l’inventaire – Achat à la visibilité garantie plutôt qu’au hit – Moins d’emplacement contre plus de visibilité @theystolemynick
  52. 52. LES AUTRES COÛTS CACHÉS DE LA PUB Image de marque
  53. 53. Toutes les pubs sont elles bonnes ?
  54. 54. Un design uniforme Slides volées à Renaud Forestié : https://vimeo.com/136370421
  55. 55. Image de marque et sécurité La diffusion des virus via pub C’est la marque de l’éditeur dont on parle négativement, pas la régie ou l’annonceur pirate. MalwareBytes : https://blog.malwarebytes.com/threat-analysis/2016/01/msn-home-page-drops-more-malware-via-malvertising/
  56. 56. What ?_? • Campagne de recrutement d’une régie via la console de développement … • … donc visibles des développeurs des clients de la régie ! @theystolemynick
  57. 57. Qui paye la non-qualité ? Publicités en erreur
  58. 58. Qui paye la non-qualité ? 17 secondes, c’est long • Vendue au nombre d’appels : l’annonceur est floué (56% des pubs ne sont pas vues) • Vendue à la visibilité : l’éditeur a un manque à gagner La régie ne perd rien dans les deux cas 56% des pubs affichées ne sont pas vues, by Google : https://www.thinkwithgoogle.com/infographics/5-factors-of-viewability.html
  59. 59. Quelles solutions à la non-qualité ? Aujourd’hui : • Détection manuelle par l’éditeur • Les régies font un peu de prévention et sont surtout réactives @theystolemynick
  60. 60. SURVEILLER LES TIERS On ne corrige pas ce que l’on ne voit pas @theystolemynick
  61. 61. Ce sont aux éditeurs d’exiger plus de qualité Cahier des charges • Poids maximum des créations ou des vidéos • Utilisation CPU • Actions techniques classiques webperf (gzip, cache, moins de requêtes …) Ex: IAB US Contraintes IAB US : http://www.iab.com/wp-content/uploads/2015/11/IAB_Display_Mobile_Creative_Guidelines_HTML5_2015.pdf
  62. 62. Quelles solutions à la non-qualité ? Détection automatisée de problèmes techniques SiteSpeed.io https://dashboard.sitespeed.io/dashboard/db/3rd-vs-1st-party ou SpeedCurve (commercial)
  63. 63. Surveiller les tiers • Monitoring technique – Disponibilité et temps de réponse – Qualité technique • Ressenti utilisateur – Temps avant affichage utile (off-site) – Temps d’exécution sur une machine lambda @theystolemynick
  64. 64. CONCLUSION @theystolemynick
  65. 65. Les coûts cachés des tiers • Perte sèche d’activité • Ralentissements et manque à gagner • Image de marque entamée • Ouverture au piratage industriel • Distraction du visiteur @theystolemynick
  66. 66. Solutions Sites • Monitorer • Définir des limites • Intégrer correctement • Dialoguer Tiers • Montrer le respect de standards de qualité • Partager ses métriques @theystolemynick
  67. 67. Crédits Telephone by Magicon from the Noun Project Weight by Evan Shuster from the Noun Project Ethernet Cable by Oliviu Stoian from the Noun Project Keyboard by Bernar Novalyi from the Noun Project Angry people set by Stefania Servidio from the Noun Project CEO by Mark Bult from the Noun Project Airplane by Viktor Vorobyev from the Noun Project @theystolemynick

×