Combien coûte l'affichage d'une pub ? — On sait que la pub fait ramer les sites, on va essayer d'estimer ce que ça coûte, et trouver des solutions
. Présentation de Jean-Pierre Vincent

1. Combien vous coûte cet
emplacement pub ?
Les tiers et leurs coûts cachés
Jean-Pierre Vincent
@theystolemynick

2. Jean-Pierre VINCENT
Accélérateur de page
Contact
• @theystolemynick
• jp@braincracking.fr
@theystolemynick

3. Les coûts cachés des pubs
• Perte sèche d’activité
• Ralentissements et manque à gagner
• Image de marque entamée
• Ouverture au piratage industriel
• Distraction du visiteur
@theystolemynick

4. Pub
Coûts supposés
• Ce qui est écrit sur le
contrat avec la régie
Coûts effectifs
• ?
@theystolemynick

5. 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

6. 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

7. Qui a tué le site ?
Crédits iconographie : voir slide finale
+
Les sysadmins ?
+
Un tiers ?
+
Les services
marketing et
commercial ?
+
Les dévs ?
</>
@theystolemynick

8. C’EST TOUJOURS LA FAUTE DU
TIERS (OU PAS)
« L’enfer c’est les autres »
J.P. Sartre
@theystolemynick

9. 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

10. SAVOIR INTÉGRER LES TIERS
« Si c’est rapide à intégrer, c’est que ça va ramer »
- La Logique
@theystolemynick

11. Situation classique
« insérez ce script dans le head »
@theystolemynick

12. 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

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. Résultat classique #2
@theystolemynick

15. Tu attends quoi pour exécuter ton code
?
DOMContentLoaded
$(document).read
y
window.load
document.readyState === 'complete'
Dans le head
!
Juste après le formulaire

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.readyState
=== 'complete'
@theystolemynick

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. LES TIERS DES TIERS DE VOS
TIERS
« Quand il n’y en a qu’un ça va… »
Un ministre de l’Intérieur
@theystolemynick

19. 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/

20. 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/

21. 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

22. 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

23. 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

24. 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

25. LES PERFORMANCES DE RENDU
« Je vois pas le problème, vraiment »
Un utilisateur d’iPhone 7
@theystolemynick

26. Après le chargement
Le processeur plafonne… Mais c’est pas mon code!
@theystolemynick

27. L’outil au cas par cas

28. Outils de mesure CPU
• Outils navigateurs
• yellowlab.tools
• webpagetest.org
3rd-party-cpu-abuser
3rd-party-abuser : github.com/jpvincent/3rd-party-cpu-abuser

29. 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

30. 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

31. 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

32. Pubs trop lourdes ?
Essayez avec moins!
@theystolemynick

33. Pubs trop lourdes ?
Essayez avec moins!
@theystolemynick

34. Pubs trop lourdes ?
Essayez avec moins!
@theystolemynick

35. 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

36. LES AUTRES COÛTS CACHÉS DE
LA PUB
Image de marque

37. Toutes les pubs sont
elles bonnes ?

38. Un design uniforme
Slides volées à Renaud Forestié : https://vimeo.com/136370421

39. 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/

40. 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

41. Qui paye la non-qualité ?
Publicités en erreur

42. 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

43. 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

44. SURVEILLER LES TIERS
On ne corrige pas ce que l’on ne voit pas
@theystolemynick

45. 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

46. 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)

47. 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

48. CONCLUSION
@theystolemynick

49. 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

50. Solutions
Sites
• Monitorer
• Définir des limites
• Intégrer correctement
• Dialoguer
Tiers
• Montrer le respect de
standards de qualité
• Partager ses métriques
@theystolemynick

51. 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

52. Merci ! Et ensuite ?
Prochaines fois
• Prochains sujets ?
– Discussion sur le forum du
meetup
– Suivi d’un vote
• PROPOSEZ !
Ce soir
• Maintenant : PIZZA TIME!
• Après 21H :
– Le Fox café, 97 Avenue
Philippe-Auguste, 75011
Paris (pour encore plus de
bières)
#webperf