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

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. 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. 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. 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. 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. C’EST TOUJOURS LA FAUTE
DU TIERS (OU PAS)
« L’enfer c’est les autres »
J.P. Sartre
@theystolemynick

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. SAVOIR INTÉGRER LES
TIERS
« Si c’est rapide à intégrer, c’est que ça va
ramer »
- La Logique
@theystolemynick

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

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. Solutions
1. Asynchrone
2. Rapatriement des ressources
jugées critiques
– Librairies JS et CSS
– Polices
– Test A/B (alternative : timeout)
@theystolemynick

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).ready
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.readyStat
e === '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. Après le chargement
Le processeur plafonne… Mais c’est pas mon
code!
@theystolemynick

19. Cas : Glamour – Po.st
Tiers : boutons sociaux,
liens courts et analytics
@theystolemynick

20. Cas : Glamour – Po.st

21. Cas : Glamour – Po.st
👓 Cette fois ci, c’est bien de la faute
du tiers hein ?
@theystolemynick

22. Cas : Glamour – Po.st
Pour tout widget :
• Lire les docs !
• Initialisation puis
exécution JIT (au
dernier moment)

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. Outils de mesure CPU
• Outils navigateurs
• yellowlab.tools
• webpagetest.org
3rd-party-abuser
3rd-party-abuser : github.com/jpvincent/3rd-party-cpu-abuser

25. On partage ? C’est gratuit !
Page parodique : worldsmostshareablewebsite.greig.cc
3 Mo, saturation du CPU pendant 20 secondes sur mobile

26. Boutons de partage
Coûts supposés
• 0$
• Quelques heures
d’intégration
Coûts effectifs
• ?
@theystolemynick

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. LA PUB ET LA
PERFORMANCE
« Je vois pas le problème, vraiment »
Un utilisateur d’iPhone 7
@theystolemynick

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

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. 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. 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. 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. Pubs trop lourdes ?
Essayez avec moins!
@theystolemynick

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

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

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. LES AUTRES COÛTS
CACHÉS DE LA PUB
Image de marque

53. Toutes les pubs
sont elles
bonnes ?

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

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. 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. Qui paye la non-qualité ?
Publicités en erreur

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. 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. SURVEILLER LES TIERS
On ne corrige pas ce que l’on ne voit pas
@theystolemynick

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. 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. 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. CONCLUSION
@theystolemynick

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