Fake It Until You Make It
Combien vous cote cet emplacement pub ?Les tiers et leurs cots
cachs
Jean-Pierre Vincent@theystolemynick
1
Jean-Pierre VINCENTAcclrateur de page
Contact@[email protected]
@theystolemynick
Expertise frontend, webperf 10 ansLa raison pour laquelle on ma
demand dcrire ce talk, perf sujet matris mais souci avec les
tiers2
Les cots cachs des pubsPerte sche dactivitRalentissements et
manque gagnerImage de marque entameOuverture au piratage
industrielDistraction du visiteur@theystolemynick
PubCots suppossCe qui est crit sur le contrat avec la rgie
Cots effectifs?@theystolemynick
4
Vitesse et businessUtilisateurs adblock : +50%
engagementUtilisateurs normaux :Aprs 5 secondes, lengagement
chuteAprs 20 secondes, ne restent que les fidles
Pages / session Temps de chargement total Graphiques et
analytics performance / business : OnFocus
Profil de courbe similaire entre clientsLa limite de 5 secondes
est un classique5
Lindisponibilit du samedi aprs-midi signale par la direction
20 secondes de page blancheSimulation de serveur qui ne rpond
pas : Webpagetest.org, Advanced Settings > SPOF
L commence une partie de Cluedo6
Qui a tu le site ?Crdits iconographie : voir slide finale
+Les sysadmins ?+
Un tiers ?
+Les services marketing et commercial ?
+Les dvs ?
@theystolemynick
Sysadmin : mieux quips monitoring ce petit fichier JSAdserver,
test A/B, fichier jQuery7
Cest toujours la faute du tiers (ou pas)Lenfer cest les
autresJ.P. Sartre@theystolemynick
Pourquoi le tiers ne rpond pas ?
Attaque DDoS sur DNS (22 oct.)Erreurs rseau WTF (DNS orange et
google le 17 oct.)Firewall dtat (la Chine)Wifi gratuitLa boite a
coulcode.jquery.com oublie de renouveler son certificat SSL
Bref : a va planter@theystolemynick
Il y a 2 semainesAncienne version du bouton twitter2 ans Alerte
de scurit pendant quelques heures sur tunnel de paiement9
Savoir intgrer les tiersSi cest rapide intgrer, cest que a va
ramer- La Logique@theystolemynick
La partie technique du talk10
Situation classique insrez ce script dans le
head@theystolemynick
On peut tester cette solution ? ll y en a pour 5 minutes, a dit
:Dev seul : CDN jquery, google font11
Rsultat classique #1Le Single Point Of Failure (SPOF) :
dpendance critique un seul maillon de la chaine
Simulation de serveur qui ne rpond pas : Webpagetest.org,
Advanced Settings > SPOF
Gnralement la raction cest de mettre en bas de page.iOS attend
quand mme12
Dtecter et prvenir les SPOF clientSPOF-o-MaticSPOF-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
Extension chrome avertit et simuleSPOF-check ligne de commande,
intgration continue. Un peu vieux, faux positifs13
Rsultat classique #2
@theystolemynick
Page globalement utilisable, mais pas damlioration progressive
sur le moteurIci on attend adSense qui est pourtant inclus en
asynchrone (ancienne version)document.readyState ===
'complete'14
Tu attends quoi pour excuter ton code ?
DOMContentLoaded$(document).readywindow.loaddocument.readyState
=== 'complete'Dans le head !Juste aprs le formulaire
Document ready attend les scripts standards, defer et surtout
document.write()Onload : iframe, images, scripts trop tt en async
(comme lancien code de adsense)15
Tu attends quoi pour excuter ton code ?DOMContentLoadedattend
:Les scripts standardLes scripts en deferdocument.write()
quivalent : $(document).ready() ou $()window.onloadattend en
plus :Les imagesLes iframesLes scripts inclus trop tt en
asynchrone
quivalent : document.readyState ===
'complete'@theystolemynick
16
Intgrer un JS tiers sans heurtUtiliser lattribut async ( >
IE9)Hors pub, refuser les document.write()
Vrifiez et mettez jour vos intgrations actuellesInclusion
asynchrone avant IE 10 :
https://gist.github.com/jpvincent/51321638dee74e2dd8f53bada8a47ee5
17
Les tiers des tiers de vos tiersQuand il ny en a quun a vaUn
ministre de lIntrieurque 15@theystolemynick
Les amis de mes amis sont ils mes amis ?Flches : appels rseauEn
bleu : le HTMLEn jaune : JS / CSS / imagesVert, violet, rouge :
tiers
1er niveau : 15 tiers inclus volontairement
Outil de visualisation requestmap.webperf.tools/
3 solutions danalytics, solution de test A/B, tracking de rseau
social, moteur de recommandation darticle (outbrain)19
Les amis de mes amis sont ils mes amis ?
2nd niveau (smartAd) : 10 tiers3me niveau (casaleMedia) : 20
nouveaux tiers4me niveau (Turn) : 20 autres tiersOutil
requestmap.webperf.tools/
smartAd : rgie pub contact pas qualifi casaleMedia : RTB Turn :
targeting20
Les amis de mes amis sont ils mes amis ?Il est techniquement
possible :De modifier la pageDy rcuprer des informationsSavoir qui
est inclus :LightBeam, privacy-badgerSolutions commerciales, dont
GhosteryVrifier les contrats :La liste des partenaires de votre
partenaire vous convient-elle ?Les engagements sur moyens et
pnalitsPoint rgulier tiersde 1er niveau@theystolemynick
Modifier la page : pubs qui en remplace une autreRcupration
dinformation : espionnage industriel. Possible davoir une bonne
estimation des ventes dun site de e-commerce21
Le point rgulier tierstablir un dialogue rgulier entre
utilisateurs des tiers et ITOrdre du jour :ITInventaire des
tiersventuels problmes remontsBusiness : importance de chaque
tiersDcisions :SuppressionsOrdre de chargementConf demain matin 1re
heure : Design de la Performance sur limportance du dialogue
inter-quipes pour la performance
Tous les 3 mois. Les gens du produit, community manager, le
marketing, les boutonsDcisions impossibles : priorit haute entre
test A/B, analytics, player video, les pubs, gmaps, les boutons de
partage 22
Limiter les risques de vols de vos donnes par des tiers
inconnusInclusion des pubs en iframeIncompatible avec certains
formatsEfface linconvnient de document.write()
@theystolemynick
Sandbox permet dautoriser popups, accs la page parente, la mme
origineEn plus moderne on a aussi CSPE-commerce : 23
Limiter les risques de vols de vos donnes par des tiers
inconnusAutoriser les domaines qui incluent du JSHeader
Content-Security-Policy: script-src 'self' tiers1 tiers2 Refuser
laccs aux cookiesheader Set-Cookie:;HttpOnly Incompatible avec la
plupart des analytics JS
@theystolemynick
piwik24
Les performances de renduJe vois pas le problme, vraimentUn
utilisateur diPhone 7@theystolemynick
Aprs le chargementLe processeur plafonneMais cest pas mon
code!@theystolemynick
Jai dj eu le cas avec les boutons G+, Facebook, Gmaps
26
Loutil au cas par cas
5 secondes de blocage au dmarrage, dont 3s dans le widget
plusieurs secondes de modifications du DOM (recherche et cration du
bouton)150 requtes montantes27
Outils de mesure CPU
Outils navigateursyellowlab.tools
webpagetest.org3rd-party-cpu-abuser3rd-party-abuser :
github.com/jpvincent/3rd-party-cpu-abuser
Trs peu doutil, mme en payant. Outils payants comme
speedCurveExcution sur une tablette android milieu de gamme site
avec bcp de pubs28
Quel mobile viser ?Vos visiteurs : valeur moyenne 380 (top
25)March franais : valeur mdiane entre 100 et 150
Top 25 des mobiles de 2 journaux FR en RWD, octobre 2016, via
Google Analyticstude 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%
Mdiane 100-150
3G
Sondage : Qui possde un tlphone qui valait plus de 380 ?Gardez
la main leve : qui teste son site sur un tlphone ou une tablette
moins cher ?29
Quel mobile viser ?Afficher une page de journal sur un mobile de
moins de 300 est pnible80% des blocages sont dus aux
tiers3rd-party-abusertablette Android 200,page article
@theystolemynick
Arrter de compter en MhzExcution sur une tablette android milieu
de gamme site avec bcp de pubs30
PubCots suppossCe qui est crit sur le contrat avec la rgie
Cots effectifsSite lent = moins dengagement et de conversionLa
majorit du parc mobile franais peine afficher les sites
pub@theystolemynick
Vont rester sur les applications genre FB, mail, Gmaps une page
est un moment dsagrable.Succs de Google AMP ou FB instant
articleSolution ?31
Pubs trop lourdes ? Essayez avec moins!
@theystolemynick
espace en haut dj prvu pour la pub en hauteurpub sticky sur la
droite32
Pubs trop lourdes ? Essayez avec moins!
@theystolemynick
Yahoo (les inventeurs de la webperf 10 ans) : contenu dabord, 1
position droite, 1 petite lgre gauche (Unicef)33
Pubs trop lourdes ? Essayez avec moins!
@theystolemynick
Dgag la plupart des emplacements moins de contrainte34
Moins de pub, plus visibleMeilleures perfsAmlioration de lUX
revenusPlus inclusif revenusRevalorisation de linventaireAchat la
visibilit garantie plutt quau hitMoins demplacement contre plus de
visibilit@theystolemynick
Les autres cots cachs de la pubImage de marque
36
Toutes les pubs sont elles bonnes ?
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 bikiniLe monde : en fin darticle sur le CETA
on me propose 37
Un design uniforme
Slides voles Renaud Foresti : https://vimeo.com/136370421
largeur de 1000px 20 prs, tous centrs, pav de droite dans les
800 premiers pixelsDur dimposer sa marque ou de tenter des formats
de contenu spciaux (graphiques et autres)38
Image de marque et scuritLa diffusion des virus via pub
Cest la marque de lditeur dont on parle ngativement, pas la rgie
ou lannonceur pirate.
MalwareBytes :
https://blog.malwarebytes.com/threat-analysis/2016/01/msn-home-page-drops-more-malware-via-malvertising/
Pas juste les vieux navigateurs et les plugins : iOS 10.0 est
attaquable via laffichage dun JPEG39
What ?_?Campagne de recrutement dune rgie via la console de
dveloppement donc visibles des dveloppeurs des clients de la rgie
!
@theystolemynick
40
Qui paye la non-qualit ?Publicits en erreur
Erreurs qui peuvent interfrer, plafonnements CPU, 41
Qui paye la non-qualit ?17 secondes, cest long
Vendue au nombre dappels : lannonceur est flou (56% des pubs ne
sont pas vues)Vendue la visibilit : lditeur a un manque gagnerLa
rgie ne perd rien dans les deux cas
56% des pubs affiches ne sont pas vues, by Google :
https://www.thinkwithgoogle.com/infographics/5-factors-of-viewability.html
Rgie vendent un nombre daffichage garantiLes acteurs de la pub
ne vont pas se rguler deux mme42
Quelles solutions la non-qualit ?Aujourdhui :
Dtection manuelle par lditeurLes rgies font un peu de prvention
et sont surtout ractives@theystolemynick
Surveiller les tiersOn ne corrige pas ce que lon ne voit
pas@theystolemynick
Ce sont aux diteurs dexiger plus de qualitCahier des
chargesPoids maximum des crations ou des vidosUtilisation
CPUActions techniques classiques webperf (gzip, cache, moins de
requtes )Ex: IAB USContraintes IAB US :
http://www.iab.com/wp-content/uploads/2015/11/IAB_Display_Mobile_Creative_Guidelines_HTML5_2015.pdf
IAB : groupement des pros de la pub.Un skyscraper doit pas
dpasser 200Ko linitialisation, puis 300Ko aprs le chargement de la
page45
Quelles solutions la non-qualit ?Dtection automatise de problmes
techniques
SiteSpeed.io
https://dashboard.sitespeed.io/dashboard/db/3rd-vs-1st-party ou
SpeedCurve (commercial)
Surveiller les temps de rponse des tiers ou leurs poids, les
erreurs, loccupation CPUPointe orange : pubs de 10 Mo qui
passent46
Surveiller les tiersMonitoring techniqueDisponibilit et temps de
rponseQualit techniqueRessenti utilisateurTemps avant affichage
utile (off-site)Temps dexcution sur une machine lambda
@theystolemynick
Tablette android 200 par ex.47
Conclusion
@theystolemynick
Les cots cachs des tiersPerte sche dactivitRalentissements et
manque gagnerImage de marque entameOuverture au piratage
industrielDistraction du visiteur@theystolemynick
SolutionsSitesMonitorerDfinir des limitesIntgrer
correctementDialoguerTiers Montrer le respect de standards de
qualitPartager ses mtriques@theystolemynick
Mtriques de chargement ou de 50
Crdits
Telephone by Magicon from the Noun ProjectWeight by Evan Shuster
from the Noun ProjectEthernet Cable by Oliviu Stoian from the Noun
ProjectKeyboard by Bernar Novalyi from the Noun ProjectAngry people
set by Stefania Servidio from the Noun Project
CEO by Mark Bult from the Noun ProjectAirplane by Viktor
Vorobyev from the Noun Project
@theystolemynick
Merci ! Et ensuite ?Prochaines foisProchains sujets ?Discussion
sur le forum du meetupSuivi dun vote
PROPOSEZ !Ce soirMaintenant : PIZZA TIME!
Aprs 21H : Le Fox caf, 97 Avenue Philippe-Auguste, 75011 Paris
(pour encore plus de bires)#webperf
