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@theystolemynickjp@braincracking.fr

@theystolemynick

Expertise frontend, webperf 10 ansLa raison pour laquelle on ma demand dcrire ce talk, perf sujet matris mais souci avec les tiers2

Tiers ?I Les tiers classiquesAnalytics et trackersBoutons de partageA/B testingWidgets (cartes, commentaires, service client en chat)II Les Publicits@theystolemynick

Apport de gains direct, apport de service3

Cots cachs des tiersPerte sche dactivitRalentissements et manque gagnerImage de marque entameOuverture au piratage industriel@theystolemynick

Solutions techniques et business4

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 Cluedo5

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 jQuery6

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 paiement8

Savoir intgrer les tiersSi cest rapide intgrer, cest que a va ramer- La Logique@theystolemynick

La partie technique du talk9

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 font10

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 mme11

SolutionsAsynchroneRapatriement des ressources juges critiquesLibrairies JS et CSSPolicesTest A/B (alternative : timeout)@theystolemynick

JS : si pas damlioration progressive. Police si dans luxe. Test A/B : KameleoonDans la presse : analytics subventions

12

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

Aprs le chargementLe processeur plafonneMais cest pas mon code!@theystolemynick

Jai dj eu le cas avec les boutons G+, Facebook, Gmaps

18

Cas : Glamour Po.st

Tiers : boutons sociaux, liens courts et analytics

@theystolemynick

Galerie dimages en SPA150 images, pas peur mais a se gre19

Cas : Glamour Po.st

5 secondes de blocage au dmarrage, dont 3s dans le widget plusieurs secondes de modifications du DOM (recherche et cration du bouton)150 requtes montantes20

Cas : Glamour Po.st

Cette fois ci, cest bien de la faute du tiers hein ?@theystolemynick

Si cest rapide intgrer, cest que a va ramerSurveiller le DOM : boucle infinie, DOMMutationObserver21

Cas : Glamour Po.stPour tout widget :Lire les docs !Initialisation puis excution JIT (au dernier moment)

Que lorsque limage est sur le point dtre vueMme mthode pour google maps, pour les boutons G+ et facebook, commentaires, de loginsSi cest pas prvu, tu dgages le tiers22

Cas : Glamour Po.stIntgrer un tiers (correctement) ne prend JAMAIS 10 minutes

Chercher : dsactiver auto-initialisation et autres mthodes magiquesLes mthodes asynchrones pour inclure et excuterRejeter le tiers si il ne la pas prvuFaire un tude de profilage de code avant et aprs intgration@theystolemynick

Mme mthode pour google maps, pour adsense, pour les boutons G+ et facebook23

Outils de mesure CPU

Outils navigateursyellowlab.tools

webpagetest.org3rd-party-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 pubs24

On partage ? Cest gratuit !

Page parodique : worldsmostshareablewebsite.greig.cc 3 Mo, saturation du CPU pendant 20 secondes sur mobile

Je prends lexemple des widgets de partage FB, G+, twitter et les autres.12 MN : zapper25

Boutons de partageCots supposs0$Quelques heures dintgration

Cots effectifs?@theystolemynick

Rajout de 5 boutons de partage 400Ko, 22 requtes, 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

page wordpress simple, acclre grce un plugin de performance clbreVS 5 boutons de partageMauvaise pratique dintgration de Reddit27

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

Raisons possible : distraction, sentiment ngatif avec stats des boutons proches de 0Smashing mag : pass aux boutons statiques depuis + bouton facebook sharer28

Arrter de nourrir les concurrentsCes widgets permettent leurs propritaires de suivre et qualifier leurs utilisateurs en dehors de leurs murs

G+ et FB sont vos concurrents :Google 42% du CA de la pubFacebook 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 prive : https://www.miximum.fr/blog/conf-pw-2017/

Sans impts !Sans mme parler de la vie prive je parle business29

Boutons de partage natifsCots supposs0$Quelques heures dintgration

Cots envisager performanceDistrait lutilisateurRenforce les leaders@theystolemynick

Solutions ?30

Boutons faits main

Possible en pur HTML/CSS/image, grce aux liens prvus par les plateformes.Scripts open-source pour rcuprer les fonctionnalits de compteurs ou danalyticsDes services tiers existent aussi, mais attention bien les benchmarker : diffrence de chargement du simple au triple

Gnrateur dURL statiques : github.com/bradvin/social-share-urlsEx. open-source de script performant : github.com/finderau/share-buttons Benchmark des tiers : www.xfive.co/blog/social-media-buttons-test-performance-privacy-features/

Diffrence : 100 ms (images + un petit script)Tiers type addThis, shareThis, shareAholic (dont le business model est de revendre les donnes utilisateur) 31

Boutons faits main

Respect de la charte graphiquePlus souple intgrer, y compris en responsiveAmlioration progressive : statiques dabord, puis rajout de fonctionnalits JSRapides !Moins dinfos chez les concurrents

Gnrateur dURL statiques : github.com/bradvin/social-share-urlsEx. open-source de script performant : github.com/finderau/share-buttons Benchmark des tiers : www.xfive.co/blog/social-media-buttons-test-performance-privacy-features/

Le monde : en bas darticle, et en haut droite de leur pageLexpress : gauche en sticky sur desktop, en haut droite en mobile (gros boutons, plus facile appuyer)32

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)34

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 : targeting35

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

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 37

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 : 38

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

piwik39

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 dj optimiss supportent la chargeLes tiers revendeurs dinformations ont peu dimpact sur lUX

tude Fasterize www.fasterize.com/fr/blog/etude-third-parties-et-webperf/ sur les 40 plus gros sites e-commerce de France, hors mobile

40

Sur bureau, 40 revendeurs dinfos en chargement diffr ont moins dimpact sur la performance perue par lutilisateur quune seule pub@theystolemynick

La pub et la performanceJe vois pas le problme, vraimentUn utilisateur diPhone 7@theystolemynick

PubCots suppossCe qui est crit sur le contrat avec la rgie

Cots effectifs?@theystolemynick

43

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 classique44

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

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 pubs46

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

Pubs trop lourdes ? Essayez avec moins!

@theystolemynick

espace en haut dj prvu pour la pub en hauteurpub sticky sur la droite48

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

Pubs trop lourdes ? Essayez avec moins!

@theystolemynick

Dgag la plupart des emplacements moins de contrainte50

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

52

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 53

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)54

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 JPEG55

What ?_?Campagne de recrutement dune rgie via la console de dveloppement donc visibles des dveloppeurs des clients de la rgie !

@theystolemynick

56

Qui paye la non-qualit ?Publicits en erreur

Erreurs qui peuvent interfrer, plafonnements CPU, 57

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 mme58

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 page61

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 passent62

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

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 66

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