Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

849 views

Published on

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

Published in: Technology
  • Be the first to comment

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

×