3rd party footprint - a publisher's take on controlling 3rd party scripts

#WDC14

3RD PARTY FOOTPRINT

BARBARA BERMES | @BBINTO

A PUBLISHER'S TAKE ON CONTROLLING 3RD PARTY SCRIPTS

#WDC14

I LIVE IN TORONTO, CANADA

#WDC14

I LOVE BURRITOS

#WDC14

I’M PASSIONATE ABOUT WEB PERF

#WDC14

LET’S GET THIS PARTY STARTED

#WDC14

–Ben Vinegar, Author of “Third-Party Script”

“In the strictest sense, anything served to the client that’s provided by an organization that’s not the website provider is considered to be

third-party”

#WDC14

TYPES OF 3RD PARTY SCRIPTSAds Tracking and Analytics Fonts Social Media Libraries and Frameworks

#WDC14

WHAT’S THE #1 USED 3RD SCRIPT?

#WDC14

STATS FROM BIG QUERY

#WDC14

#WDC14

31%

34.5%

38%

2011 2013 2014

32%

36%

38%

3rd party content

DISTRIBUTION OF 3RD PARTY SCRIPTS VS. 1ST PARTY

#WDC14

#WDC14

Advertising

Analytics

Personalization

Marketing

Tag Management

Search

Social Media

0 25 50 75 100

23

45

53

53

62

92

92

Percentage of sites with each third party function present

Source: Intechnica - The impact of third party content on retail web performance

#WDC14

VISUALIZE THE IMPACT OF 3RD PARTY SCRIPTS

#WDC14

#WDC14

#WDC14

#WDC14

FOREIGN CONTENT OVERLOAD

#WDC14

EXAMPLE: WIRED

#WDC14

#WDC14

BUT WHAT’S THE ISSUE?

#WDC14

THINGS TO TALK ABOUT TODAY

#WDC14

THE ISSUES AND NEGATIVE IMPACTS

PerformanceFront-end Single Point of Failure (SPOF) Privacy

#WDC14

POTENTIAL SOLUTIONS

Safe snippetsCaching and Hosted Libraries Tools and Initiatives

#WDC14

PERFORMANCE

#WDC14

The value you get out of the widget needs to be greater than the performance hit you are taking

- John HjelmstadGoogle I/O 2012 (How we Make JavaScript Widgets Scream)

RULE OF THUMB

#WDC14

A user who has to endure an 8-second download delay

spends only 1% of their total viewing time looking at the

featured promotional space on a landing page.

In contrast, a user who receives instantaneous page rendering

spends 20% of viewing time within the promotional area (source: Jakob Nielsen)

PERCEPTION OF PROMOTIONAL SPACE

#WDC14

WHAT WOULD A LIFE WITHOUT ADS FEEL LIKE?

#WDC14

THE PERFORMANCE IMPACT OF ADS

#WDC14

#WDC14

Using no (client-side) ad code reduced CBC’s page load time by 40%

40%

<script/>

#WDC14

MONITOR FOREIGN CONTENT, CONSTANTLY!

#WDC14

Arit

hmet

ic M

ean

in s

0

2.5

5

7.5

10

10/4/12 10/31/12

BAD 3RD PARTIES (CBC TOUCH SITE)

Smooth sailing

Client-side Ads

Ads turned offServer-side Ads

Source: Keynote Daily Reports

We noticed a spike

#WDC14

#WDC14

SINGLE POINT OF FAILURE

#WDC14

A single point of failure (SPOF) is a part of a system that, if it fails, will stop the entire system from working

–Wikipedia

#WDC14

THE OFFENDER

It will block rendering anything after this line

#WDC14

YEAH….BUT DO THIRD PARTY PROVIDERS EVER GO DOWN??

#WDC14

OH YES. THEY DO!

#WDC14#WDC14

#WDC14#WDC14

#WDC14#WDC14

#WDC14

THE GREAT FIREWALL OF CHINA

#WDC14

SIMULATING SPOF ON TECHCRUNCH

#WDC14

#WDC14

SPOF-O-Matic

#WDC14

#WDC14#WDC14

#WDC14

SPOF WIRED

Without SPOFWith SPOF: Visually complete 40s

#WDC14

LET’S CRASH THE PARTY

#WDC14#WDC14

#WDC14

#WDC14#WDC14

#WDC14#WDC14

#WDC14

INITIALIZING CLIENT-SIDE SCRIPTS

#WDC14

ASYNC OR DEFER JS

#WDC14

ASYNC OR DEFER JS

#WDC14

SAFEST WAY: DYNAMIC SCRIPT TAG (to cover most of the browsers)

#WDC14

ASYNCHRONOUS LOADING

http://www.phpied.com/social-button-bffs/

#WDC14

ASYNCHRONOUS LOADING

#WDC14

ASYNCHRONOUS LOADING

#WDC14

ASYNCHRONOUS LOADING

#WDC14

ASYNCHRONOUS LOADING

#WDC14

ASYNCHRONOUS LOADING

#WDC14

ASYNCHRONOUS LOADING

#WDC14

BEFORE

#WDC14

5 seconds 25 seconds

#WDC14

AFTER

#WDC14

AFTER5 seconds

#WDC14

PREVENTION! PROTECT YOURSELF WITH THE HELP OF TOOLS

#WDC14

CACHING?Don’t always rely on it!

#WDC14

CACHE POLICIES

30min.

30 min

12 hrs

20 min

1 hr

336 hrs

no cache

1 hr

3 min

#WDC14

#WDC14

HOSTED LIBRARIES?

#WDC14

DON’T JUST COPY AND PASTE

#WDC14

#WDC14

SPOF ALERT

#WDC14

DON’T DO THIS….

#WDC14

RATHER DO THIS: SILENTLY FAIL

#WDC14

Other 55%

1.7.2 14%

1.7.1 13%

1.10.2 9%

1.8.3 9%

GOOGLE’S HOSTED JQUERY FRAGMENTATION

Source: March 2014, Big Query result on jQuery from Google CDNs

#WDC14

SO, WHATS THE VERDICT: HOSTED LIBRARIES OR NOT?

#WDC14

PRIVACY

#WDC14

“The Like button is the quickest way for people to share content with their

friends.

A single click on the Like button will 'like' pieces of content on the web

and share them on Facebook.”

#WDC14

What they don’t tell you….

Track the visited website, your IP, and more….????

Did you agree to that?

!

#WDC14

OPEN SOURCE INITIATIVES AND RESOURCES

#WDC14

PRIVACY HERO HEISE’S OPT-IN SOLUTION

#WDC14#WDC14

#WDC14

3RD PARTY PERF HEROES PHILIP TELLIS & STOYAN STEFANOV

#WDC14#WDC14

#WDC14

JSMANNERS

#WDC14#WDC14

#WDC14

CONTRIBUTE ON GITHUB!https://github.com/triblondon/thirdpartysla

#WDC14

#WDC14

NEXT TIME BEFORE YOU COPY AND PASTE

#WDC14

WHAT TO DO AS A PUBLISHER & DEVELOPER

• Refuse 3rd party content that doesn’t provide async options

• Put the risk in the SLA (uptime etc.)

• Review jsmanners

• Educate other (junior) developers

#WDC14

• Ask for server-side options

• Evaluate tag managers

• Investigate hosted libraries (if no own CDN is available)

• Monitor, monitor, ….and monitor

WHAT TO DO AS A PUBLISHER & DEVELOPER

#WDC14

WHAT TO DO AS A SCRIPT PROVIDER

• Provide non-blocking code samples and snippets

• Educate developers and verify the integration of your script developers (proof-check)

#WDC14

THE PARTY’S OVER !

THANK YOU

#WDC14

QUESTIONS?http://bit.ly/wdc14-3rdparty