SlideShare une entreprise Scribd logo
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,
service client en chat…)
II Les Publicités
@theystolemynick
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
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
Qui a tué le site ?
Crédits iconographie : voir slide finale
+
Les sysadmins ?
+
Un tiers ?
+
Les services
marketing et
commercial ?
+
Les dévs ?
</>
@theystolemynick
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.)
• 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
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 serveur qui ne répond pas : Webpagetest.org, Advanced Settings > SPOF
Solutions
1. Asynchrone
2. Rapatriement des ressources
jugées critiques
– Librairies JS et CSS
– Polices
– Test A/B (alternative : timeout)
@theystolemynick
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
Résultat classique #2
@theystolemynick
Tu attends quoi pour
exécuter ton code ?
DOMContentLoaded
$(document).ready
window.load
document.readyState === 'complete'
Dans le head !
Juste après le formulaire
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
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
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-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
Outils de mesure CPU
• Outils navigateurs
• yellowlab.tools
• webpagetest.org
3rd-party-abuser
3rd-party-abuser : github.com/jpvincent/3rd-party-cpu-abuser
On partage ? C’est gratuit !
Page parodique : worldsmostshareablewebsite.greig.cc
3 Mo, saturation du CPU pendant 20 secondes sur mobile
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 affichage
Test WebPageTest (connexion type ADSL): http://wpt.fasterize.com/video/compare.php?tests=161027_KT_15,161027_3X_14
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
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/
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
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/
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/
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
• Vert, violet, rouge : tiers
1er niveau : 15 tiers inclus
volontairement
Outil de visualisation requestmap.webperf.tools/
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/
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
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
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
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
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
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
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
• Après 20 secondes, ne restent que les fidèles
←Pages/session
→
← Temps de chargement total →
Graphiques et analytics performance / business : OnFocus
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
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
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
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
• Revalorisation de l’inventaire
– Achat à la visibilité garantie plutôt
qu’au hit
– Moins d’emplacement contre plus de
visibilité
@theystolemynick
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
régie ou l’annonceur
pirate.
MalwareBytes : https://blog.malwarebytes.com/threat-analysis/2016/01/msn-home-page-drops-more-malware-via-malvertising/
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
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 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
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
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 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
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)
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
CONCLUSION
@theystolemynick
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
Solutions
Sites
• Monitorer
• Définir des limites
• Intégrer
correctement
• Dialoguer
Tiers
• Montrer le respect
de standards de
qualité
• Partager ses
métriques
@theystolemynick
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

Contenu connexe

Tendances

La casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfaitLa casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfait
Aymeric Bouillat
 
Core Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEOCore Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEO
Digimood - Agence SEO / SEA
 
SEO des images : enjeux et stratégies gagnantes de la recherche visuelle #SMX...
SEO des images : enjeux et stratégies gagnantes de la recherche visuelle #SMX...SEO des images : enjeux et stratégies gagnantes de la recherche visuelle #SMX...
SEO des images : enjeux et stratégies gagnantes de la recherche visuelle #SMX...
iProspect France
 
Réussir sa stratégie SEO à l'international : la checklist technique
Réussir sa stratégie SEO à l'international : la checklist techniqueRéussir sa stratégie SEO à l'international : la checklist technique
Réussir sa stratégie SEO à l'international : la checklist technique
Semrush France
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
Brigitte Marandon
 
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Olivier Andrieu
 
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
iProspect France
 
Introduction à la webperf
Introduction à la webperfIntroduction à la webperf
Introduction à la webperf
Jean-Pierre Vincent
 
L'impact sur le SEO de Googlebot Evergreen
L'impact sur le SEO de Googlebot EvergreenL'impact sur le SEO de Googlebot Evergreen
L'impact sur le SEO de Googlebot Evergreen
Philippe YONNET
 
Utilisation avancée d'un crawler - SEO Camp'us 2015
Utilisation avancée d'un crawler - SEO Camp'us 2015Utilisation avancée d'un crawler - SEO Camp'us 2015
Utilisation avancée d'un crawler - SEO Camp'us 2015
Philippe YONNET
 
Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?
Madeline Pinthon
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Kenny Dits
 
Les défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEOLes défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEO
Daniel Roch - SeoMix
 
Evolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEOEvolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEO
Dimitri Brunel
 
Performance web et PageSpeed : du SEO à la qualité web
Performance web et PageSpeed : du SEO à la qualité webPerformance web et PageSpeed : du SEO à la qualité web
Performance web et PageSpeed : du SEO à la qualité web
Semrush France
 
Réussir son SEO à l’international - iProspect France
Réussir son SEO à l’international - iProspect FranceRéussir son SEO à l’international - iProspect France
Réussir son SEO à l’international - iProspect France
iProspect France
 
Webperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performanceWebperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performance
Refficience
 
Tuniseo 2017 année charnière pour le SEO ?
Tuniseo  2017 année charnière pour le SEO ?Tuniseo  2017 année charnière pour le SEO ?
Tuniseo 2017 année charnière pour le SEO ?
Philippe YONNET
 
Du Crawl à l’indexation : les prérequis pour bien ranker
Du Crawl à l’indexation : les prérequis pour bien rankerDu Crawl à l’indexation : les prérequis pour bien ranker
Du Crawl à l’indexation : les prérequis pour bien ranker
Semrush France
 
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échouéLe Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Philippe YONNET
 

Tendances (20)

La casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfaitLa casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfait
 
Core Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEOCore Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEO
 
SEO des images : enjeux et stratégies gagnantes de la recherche visuelle #SMX...
SEO des images : enjeux et stratégies gagnantes de la recherche visuelle #SMX...SEO des images : enjeux et stratégies gagnantes de la recherche visuelle #SMX...
SEO des images : enjeux et stratégies gagnantes de la recherche visuelle #SMX...
 
Réussir sa stratégie SEO à l'international : la checklist technique
Réussir sa stratégie SEO à l'international : la checklist techniqueRéussir sa stratégie SEO à l'international : la checklist technique
Réussir sa stratégie SEO à l'international : la checklist technique
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
 
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
 
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
 
Introduction à la webperf
Introduction à la webperfIntroduction à la webperf
Introduction à la webperf
 
L'impact sur le SEO de Googlebot Evergreen
L'impact sur le SEO de Googlebot EvergreenL'impact sur le SEO de Googlebot Evergreen
L'impact sur le SEO de Googlebot Evergreen
 
Utilisation avancée d'un crawler - SEO Camp'us 2015
Utilisation avancée d'un crawler - SEO Camp'us 2015Utilisation avancée d'un crawler - SEO Camp'us 2015
Utilisation avancée d'un crawler - SEO Camp'us 2015
 
Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
 
Les défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEOLes défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEO
 
Evolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEOEvolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEO
 
Performance web et PageSpeed : du SEO à la qualité web
Performance web et PageSpeed : du SEO à la qualité webPerformance web et PageSpeed : du SEO à la qualité web
Performance web et PageSpeed : du SEO à la qualité web
 
Réussir son SEO à l’international - iProspect France
Réussir son SEO à l’international - iProspect FranceRéussir son SEO à l’international - iProspect France
Réussir son SEO à l’international - iProspect France
 
Webperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performanceWebperformance : mobile, monitoring, http/2, budget performance
Webperformance : mobile, monitoring, http/2, budget performance
 
Tuniseo 2017 année charnière pour le SEO ?
Tuniseo  2017 année charnière pour le SEO ?Tuniseo  2017 année charnière pour le SEO ?
Tuniseo 2017 année charnière pour le SEO ?
 
Du Crawl à l’indexation : les prérequis pour bien ranker
Du Crawl à l’indexation : les prérequis pour bien rankerDu Crawl à l’indexation : les prérequis pour bien ranker
Du Crawl à l’indexation : les prérequis pour bien ranker
 
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échouéLe Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
 

En vedette

Et si nous faisions le point sur HTTP/2
Et si nous faisions le point sur HTTP/2Et si nous faisions le point sur HTTP/2
Et si nous faisions le point sur HTTP/2
Web Performance Paris
 
Startup : on s'est planté parce qu'on avait trop d'argent
Startup : on s'est planté parce qu'on avait trop d'argentStartup : on s'est planté parce qu'on avait trop d'argent
Startup : on s'est planté parce qu'on avait trop d'argent
Jean-Pierre Vincent
 
Quoi de neuf dans la webperf ?
Quoi de neuf dans la webperf ?Quoi de neuf dans la webperf ?
Quoi de neuf dans la webperf ?
Web Performance Paris
 
You probably don't need microservices
You probably don't need microservicesYou probably don't need microservices
You probably don't need microservices
inovia
 
Api Gateway - What's the use of an api gateway?
Api Gateway - What's the use of an api gateway?Api Gateway - What's the use of an api gateway?
Api Gateway - What's the use of an api gateway?
inovia
 

En vedette (6)

mejora continua
mejora continuamejora continua
mejora continua
 
Et si nous faisions le point sur HTTP/2
Et si nous faisions le point sur HTTP/2Et si nous faisions le point sur HTTP/2
Et si nous faisions le point sur HTTP/2
 
Startup : on s'est planté parce qu'on avait trop d'argent
Startup : on s'est planté parce qu'on avait trop d'argentStartup : on s'est planté parce qu'on avait trop d'argent
Startup : on s'est planté parce qu'on avait trop d'argent
 
Quoi de neuf dans la webperf ?
Quoi de neuf dans la webperf ?Quoi de neuf dans la webperf ?
Quoi de neuf dans la webperf ?
 
You probably don't need microservices
You probably don't need microservicesYou probably don't need microservices
You probably don't need microservices
 
Api Gateway - What's the use of an api gateway?
Api Gateway - What's the use of an api gateway?Api Gateway - What's the use of an api gateway?
Api Gateway - What's the use of an api gateway?
 

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

Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018
Aymen Loukil
 
Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018
Aymen Loukil
 
Paul valery et les Web components
Paul valery et les Web componentsPaul valery et les Web components
Paul valery et les Web components
Francois ANDRE
 
Cecyf / Coriin - mimikatz et la mémoire de Windows
Cecyf / Coriin - mimikatz et la mémoire de WindowsCecyf / Coriin - mimikatz et la mémoire de Windows
Cecyf / Coriin - mimikatz et la mémoire de Windows
Benjamin Delpy
 
Seo camp'us 2017 utiliser google analytics comme un voyou - aristide riou
Seo camp'us 2017   utiliser google analytics comme un voyou - aristide riouSeo camp'us 2017   utiliser google analytics comme un voyou - aristide riou
Seo camp'us 2017 utiliser google analytics comme un voyou - aristide riou
Prénom Nom de famille
 
Bien présenter les KPI analytics via Excel au client
Bien présenter les KPI analytics via Excel au clientBien présenter les KPI analytics via Excel au client
Bien présenter les KPI analytics via Excel au client
Polo_Seo
 
Mesurer la performance : onload, pages
Mesurer la performance : onload, pagesMesurer la performance : onload, pages
Mesurer la performance : onload, pages
Jean-Pierre Vincent
 
Comment l’architecture événementielle révolutionne la communication dans le S...
Comment l’architecture événementielle révolutionne la communication dans le S...Comment l’architecture événementielle révolutionne la communication dans le S...
Comment l’architecture événementielle révolutionne la communication dans le S...
Vincent Lepot
 
CCC-CONNECTION - etablir une strategie ecommerce efficace: abandon de panier,...
CCC-CONNECTION - etablir une strategie ecommerce efficace: abandon de panier,...CCC-CONNECTION - etablir une strategie ecommerce efficace: abandon de panier,...
CCC-CONNECTION - etablir une strategie ecommerce efficace: abandon de panier,...
Eric Culnaert
 
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir..."Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
Boris SCHAPIRA
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibes
iProspect France
 
DAM et Drive : 2 nouveautés phares pour la Plateforme Nuxeo
DAM et Drive : 2 nouveautés phares pour la Plateforme NuxeoDAM et Drive : 2 nouveautés phares pour la Plateforme Nuxeo
DAM et Drive : 2 nouveautés phares pour la Plateforme Nuxeo
Nuxeo
 
Microsoft Syntex - Digitalisez vos contenus d'entreprise @MWCP21 20/01/2021
Microsoft Syntex - Digitalisez vos contenus d'entreprise @MWCP21 20/01/2021Microsoft Syntex - Digitalisez vos contenus d'entreprise @MWCP21 20/01/2021
Microsoft Syntex - Digitalisez vos contenus d'entreprise @MWCP21 20/01/2021
Sébastien Paulet
 
Développer ou debugger ?
Développer ou debugger ? Développer ou debugger ?
Développer ou debugger ?
Microsoft
 
Cours referencement web_analytics
Cours referencement web_analyticsCours referencement web_analytics
Cours referencement web_analytics
RYMAA
 
Core web vitals - Webinar Neper du 3 décembre 2020
Core web vitals - Webinar Neper du 3 décembre 2020Core web vitals - Webinar Neper du 3 décembre 2020
Core web vitals - Webinar Neper du 3 décembre 2020
Philippe YONNET
 
Placez votre site Internet en pôle position
Placez votre site Internet en pôle positionPlacez votre site Internet en pôle position
Placez votre site Internet en pôle position
Sylvie de Meeûs
 
Chirurgie SEO / Solution répulsive contre les pandas #SEOCamp
Chirurgie SEO / Solution répulsive contre les pandas #SEOCampChirurgie SEO / Solution répulsive contre les pandas #SEOCamp
Chirurgie SEO / Solution répulsive contre les pandas #SEOCamp
Htitipi
 
Conférence Tracking analytics et protections des données: les équilibristes d...
Conférence Tracking analytics et protections des données: les équilibristes d...Conférence Tracking analytics et protections des données: les équilibristes d...
Conférence Tracking analytics et protections des données: les équilibristes d...
ChristopheVidal15
 
Cmp, bandeau de cookie consent, cnil &amp; cie measure camp nantes 2018
Cmp, bandeau de cookie consent, cnil &amp; cie   measure camp nantes 2018Cmp, bandeau de cookie consent, cnil &amp; cie   measure camp nantes 2018
Cmp, bandeau de cookie consent, cnil &amp; cie measure camp nantes 2018
Prénom Nom de famille
 

Similaire à Performance des tiers : combien coûte cet emplacement pub ? (20)

Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018
 
Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018
 
Paul valery et les Web components
Paul valery et les Web componentsPaul valery et les Web components
Paul valery et les Web components
 
Cecyf / Coriin - mimikatz et la mémoire de Windows
Cecyf / Coriin - mimikatz et la mémoire de WindowsCecyf / Coriin - mimikatz et la mémoire de Windows
Cecyf / Coriin - mimikatz et la mémoire de Windows
 
Seo camp'us 2017 utiliser google analytics comme un voyou - aristide riou
Seo camp'us 2017   utiliser google analytics comme un voyou - aristide riouSeo camp'us 2017   utiliser google analytics comme un voyou - aristide riou
Seo camp'us 2017 utiliser google analytics comme un voyou - aristide riou
 
Bien présenter les KPI analytics via Excel au client
Bien présenter les KPI analytics via Excel au clientBien présenter les KPI analytics via Excel au client
Bien présenter les KPI analytics via Excel au client
 
Mesurer la performance : onload, pages
Mesurer la performance : onload, pagesMesurer la performance : onload, pages
Mesurer la performance : onload, pages
 
Comment l’architecture événementielle révolutionne la communication dans le S...
Comment l’architecture événementielle révolutionne la communication dans le S...Comment l’architecture événementielle révolutionne la communication dans le S...
Comment l’architecture événementielle révolutionne la communication dans le S...
 
CCC-CONNECTION - etablir une strategie ecommerce efficace: abandon de panier,...
CCC-CONNECTION - etablir une strategie ecommerce efficace: abandon de panier,...CCC-CONNECTION - etablir une strategie ecommerce efficace: abandon de panier,...
CCC-CONNECTION - etablir une strategie ecommerce efficace: abandon de panier,...
 
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir..."Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibes
 
DAM et Drive : 2 nouveautés phares pour la Plateforme Nuxeo
DAM et Drive : 2 nouveautés phares pour la Plateforme NuxeoDAM et Drive : 2 nouveautés phares pour la Plateforme Nuxeo
DAM et Drive : 2 nouveautés phares pour la Plateforme Nuxeo
 
Microsoft Syntex - Digitalisez vos contenus d'entreprise @MWCP21 20/01/2021
Microsoft Syntex - Digitalisez vos contenus d'entreprise @MWCP21 20/01/2021Microsoft Syntex - Digitalisez vos contenus d'entreprise @MWCP21 20/01/2021
Microsoft Syntex - Digitalisez vos contenus d'entreprise @MWCP21 20/01/2021
 
Développer ou debugger ?
Développer ou debugger ? Développer ou debugger ?
Développer ou debugger ?
 
Cours referencement web_analytics
Cours referencement web_analyticsCours referencement web_analytics
Cours referencement web_analytics
 
Core web vitals - Webinar Neper du 3 décembre 2020
Core web vitals - Webinar Neper du 3 décembre 2020Core web vitals - Webinar Neper du 3 décembre 2020
Core web vitals - Webinar Neper du 3 décembre 2020
 
Placez votre site Internet en pôle position
Placez votre site Internet en pôle positionPlacez votre site Internet en pôle position
Placez votre site Internet en pôle position
 
Chirurgie SEO / Solution répulsive contre les pandas #SEOCamp
Chirurgie SEO / Solution répulsive contre les pandas #SEOCampChirurgie SEO / Solution répulsive contre les pandas #SEOCamp
Chirurgie SEO / Solution répulsive contre les pandas #SEOCamp
 
Conférence Tracking analytics et protections des données: les équilibristes d...
Conférence Tracking analytics et protections des données: les équilibristes d...Conférence Tracking analytics et protections des données: les équilibristes d...
Conférence Tracking analytics et protections des données: les équilibristes d...
 
Cmp, bandeau de cookie consent, cnil &amp; cie measure camp nantes 2018
Cmp, bandeau de cookie consent, cnil &amp; cie   measure camp nantes 2018Cmp, bandeau de cookie consent, cnil &amp; cie   measure camp nantes 2018
Cmp, bandeau de cookie consent, cnil &amp; cie measure camp nantes 2018
 

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

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

Notes de l'éditeur

  1. Expertise frontend, webperf 10 ans La raison pour laquelle on m’a demandé d’écrire ce talk, perf sujet maîtrisé mais souci avec les tiers
  2. Apport de gains direct, apport de service
  3. Solutions techniques et business
  4. Là commence une partie de Cluedo
  5. Sysadmin : mieux équipés  monitoring  ce petit fichier JS Adserver, test A/B, fichier jQuery
  6. Il y a 2 semaines Ancienne version du bouton twitter 2 ans Alerte de sécurité pendant quelques heures sur tunnel de paiement
  7. La partie technique du talk
  8. On peut tester cette solution ? ll y en a pour 5 minutes, ça dit : Dev seul : CDN jquery, google font
  9. Généralement la réaction c’est de mettre en bas de page. iOS attend quand même
  10. JS : si pas d’amélioration progressive. Police si dans luxe. Test A/B : Kameleoon Dans la presse : analytics  subventions
  11. Extension chrome  avertit et simule SPOF-check  ligne de commande, intégration continue. Un peu vieux, faux positifs
  12. Page globalement utilisable, mais pas d’amélioration progressive sur le moteur Ici on attend adSense qui est pourtant inclus en asynchrone (ancienne version) document.readyState === 'complete'
  13. Document ready attend les scripts standards, defer et surtout document.write() Onload : iframe, images, scripts trop tôt en async (comme l’ancien code de adsense)
  14. J’ai déjà eu le cas avec les boutons G+, Facebook, Gmaps
  15. Galerie d’images en SPA 150 images, pas peur  mais ça se gère
  16. 5 secondes de blocage au démarrage, dont 3s dans le widget  plusieurs secondes de modifications du DOM (recherche et création du bouton) 150 requêtes montantes
  17. « Si c’est rapide à intégrer, c’est que ça va ramer » Surveiller le DOM : boucle infinie, DOMMutationObserver
  18. Que lorsque l’image est sur le point d’être vue Même méthode pour google maps, pour les boutons G+ et facebook, commentaires, de logins Si c’est pas prévu, tu dégages le tiers
  19. Même méthode pour google maps, pour adsense, pour les boutons G+ et facebook
  20. Très peu d’outil, même en payant. Outils payants comme speedCurve Exécution sur une tablette android milieu de gamme site avec bcp de pubs
  21. Je prends l’exemple des widgets de partage FB, G+, twitter et les autres. 12 MN : zapper
  22. page wordpress simple, accélérée grâce à un plugin de performance célèbre VS 5 boutons de partage Mauvaise pratique d’intégration de Reddit
  23. Raisons possible : distraction, sentiment négatif avec stats des boutons proches de 0 Smashing mag : passé aux boutons statiques depuis + bouton facebook « sharer »
  24. Sans impôts ! Sans même parler de la vie privée…  je parle business
  25. Solutions ?
  26. Différence : 100 ms (images + un petit script) Tiers type addThis, shareThis, shareAholic (dont le business model est de revendre les données utilisateur) …
  27. Le monde : en bas d’article, et en haut à droite de leur page L’express : à gauche en sticky sur desktop, en haut à droite en mobile (gros boutons, plus facile à appuyer)
  28. 3 solutions d’analytics, solution de test A/B, tracking de réseau social, moteur de recommandation d’article (outbrain)
  29. smartAd : régie pub  contact pas qualifié  casaleMedia : RTB  Turn : targeting
  30. Modifier la page : pubs qui en remplace une autre Récupération d’information : espionnage industriel. Possible d’avoir une bonne estimation des ventes d’un site de e-commerce
  31. Tous les 3 mois. Les gens du produit, community manager, le marketing, les boutons Décisions impossibles : priorité haute entre test A/B, analytics, player video, les pubs, gmaps, les boutons de partage 
  32. Sandbox permet d’autoriser popups, accès à la page parente, la même origine En plus moderne on a aussi CSP E-commerce :
  33. piwik
  34. Profil de courbe similaire entre clients La limite de 5 secondes est un classique
  35. Sondage : Qui possède un téléphone qui valait plus de 380€ ? Gardez la main levée : qui teste son site sur un téléphone ou une tablette moins cher ?
  36. Arrêter de compter en Mhz Exécution sur une tablette android milieu de gamme site avec bcp de pubs
  37. Vont rester sur les applications genre FB, mail, Gmaps … une page est un moment désagréable. Succès de Google AMP ou FB instant article Solution ?
  38. espace en haut déjà prévu pour la pub en hauteur pub sticky sur la droite
  39. Yahoo (les inventeurs de la webperf 10 ans) : contenu d’abord, 1 position à droite, 1 petite légère à gauche (Unicef)
  40. Dégagé la plupart des emplacements  moins de contrainte
  41. Content discovery (outbrain et taboola). Parisien : 2 articles sur le sexisme ou article sur la culotte Mme Belkacem, la prise de poids et une photo de bikini Le monde : en fin d’article sur le CETA on me propose
  42. largeur de 1000px à 20 près, tous centrés, pavé de droite dans les 800 premiers pixels Dur d’imposer sa marque ou de tenter des formats de contenu spéciaux (graphiques et autres)
  43. Pas juste les vieux navigateurs et les plugins : iOS 10.0 est attaquable via l’affichage d’un JPEG
  44. Erreurs qui peuvent interférer, plafonnements CPU,
  45. Régie vendent un nombre d’affichage garanti Les acteurs de la pub ne vont pas se réguler d’eux même
  46. IAB : groupement des pros de la pub. Un skyscraper doit pas dépasser 200Ko à l’initialisation, puis 300Ko après le chargement de la page
  47. Surveiller les temps de réponse des tiers ou leurs poids, les erreurs, l’occupation CPU Pointe orange : pubs de 10 Mo qui passent
  48. Tablette android à 200€ par ex.
  49. Métriques de chargement ou de