third party footprint: evaluating the performance of external scripts

Third Party FootprintBarbara Bermes

#velocityconf

3RD PARTY FOOTPRINT

BARBARA BERMES | @BBINTO

EVALUATING THE PERFORMANCE OF EXTERNAL SCRIPTS

#velocityconf

I LIVE IN TORONTO, CANADA

#velocityconf

I LOVE BURRITOS

#VELOCITYBURRITO

#velocityconf

I’M PASSIONATE ABOUT WEB PERF

#velocityconf

LET’S GET THIS PARTY STARTED

#velocityconf

–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”

#velocityconf

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

#velocityconf

WHAT’S THE #1 USED 3RD PARTY SCRIPT?

#velocityconf

STATS FROM BIG QUERY

#velocityconf

#velocityconf

STATS FROM BIG QUERY

#velocityconf

16%

22%62%

Google Facebook Twitter

#velocityconf

31%

34.5

%38

%

2011 2013 2014

32%

36%

38%

DISTRIBUTION OF 3RD PARTY SCRIPTS VS. 1ST PARTY

#velocityconf

Source: http://bigqueri.es/t/what-is-the-distribution-of-1st-party-vs-3rd-party-resources/100

Perc

enta

ge

http://bigqueri.es/t/what-is-the-distribution-of-1st-party-vs-3rd-party-resources/100

#velocityconf

VISUALIZE THE IMPACT OF 3RD PARTY SCRIPTS

#velocityconf

#velocityconf

FOREIGN CONTENT OVERLOAD!

#velocityconf

EXAMPLE: WIRED

#velocityconf

#velocityconf

BUT WHAT’S THE ISSUE?

#velocityconf

THE ISSUES AND NEGATIVE IMPACTS

PerformanceFront-end Single Point of Failure (SPOF) Privacy

#velocityconf

POTENTIAL SOLUTIONS

Safe Snippets Caching and Hosted Libraries Tools and Initiatives

#velocityconf

PERFORMANCE

#velocityconf

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

RULE OF THUMB

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

#velocityconf

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

#velocityconf

A WEBSITE WITHOUT ADS???

#velocityconf

THE PERFORMANCE IMPACT OF ADS

#velocityconf

#velocityconf

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

40%

<script/>

#velocityconf

MONITOR FOREIGN CONTENT. CONSTANTLY!

#velocityconf

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

#velocityconf

#velocityconf

SINGLE POINT OF FAILURE

#velocityconf

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

–Wikipedia

#velocityconf

THE OFFENDER

It will block rendering anything after this line

#velocityconf

YEAH….WHATEVER

3RD PROVIDERS DON’T REALLY GO DOWN…

#velocityconf

OH YES. THEY DO!

#velocityconf#velocityconf

#velocityconf

THE GREAT FIREWALL OF CHINA

#velocityconf

SIMULATING SPOF ON TECHCRUNCH

#velocityconf

#velocityconf

SPOF-O-Matic

#velocityconf

#velocityconf

SPOF WIRED

Without SPOFWith SPOF: Visually complete 40s

#velocityconf

LET’S CRASH THE PARTY

#velocityconf

#velocityconf

INITIALIZING CLIENT-SIDE SCRIPTS

#velocityconf

SAFEST (PREVIOUS) WAY: DYNAMIC SCRIPT TAG

(to cover most of the browsers)

#velocityconf

ASYNCHRONOUS LOADING

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

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

#velocityconf

ASYNCHRONOUS LOADING

#velocityconf

BEFORE

#velocityconf

5 seconds 25 seconds

#velocityconf

AFTER

#velocityconf

AFTER5 seconds

#velocityconf

#velocityconf

THE FUTURE

#velocityconf

ASYNC OR DEFER JS

#velocityconf

ASYNC AND DEFER JS

//suggested by W3C

#velocityconf

PROTECT YOURSELF WITH THE HELP OF TOOLS

Ad-hoc browser tools Continuous integration & deployment tools

#velocityconf

CACHING?Don’t always rely on it!

#velocityconf

CACHE POLICIES

30min.

30 min

12 hrs

20 min

1 hr

336 hrs

no cache

1 hr

3 min

#velocityconf

#velocityconf

WHAT ABOUT HOSTED LIBRARIES?

#velocityconf

GOOGLE HOSTED LIBRARIES

#velocityconf

Pages using Google CDN(Top Alexa Websites)

0%

0.2%

0.4%

Jan '11 Jan '13 Jan '13 Jan '14

11%

17%

26%

37%

Perc

enta

ge

#velocityconf

DON’T JUST COPY AND PASTE

#velocityconf

Anywhere?

#velocityconf

SPOF ALERT

#velocityconf

DON’T DO THIS….

#velocityconf

RATHER DO THIS: SILENTLY FAIL

#velocityconf

GOOGLE’S HOSTED JQUERY FRAGMENTATION

Source: Aug 2014, Big Query result on jQuery from Google CDNs #velocityconf

#velocityconf

SO, WHATS THE VERDICT: HOSTED LIBRARIES OR NOT?

#velocityconf

PRIVACY

#velocityconf

https://developers.facebook.com/docs/plugins/like-button/

https://developers.facebook.com/docs/plugins/like-button/

#velocityconf

What they don’t really tell you that they maybe….track the visited website, your IP, and more….????Did you agree to that?

#velocityconf

OPEN SOURCE INITIATIVES AND RESOURCES

#velocityconf

PRIVACY HERO HEISE’S OPT-IN SOLUTION

#velocityconf

3RD PARTY PERF HEROES PHILIP TELLIS & STOYAN STEFANOV

#velocityconf

MEASURING 3RD PARTY CONTENT ON YOUR SITE

Navigation timing APIResource timing API

#velocityconf

0

85

170

Jan '14 Feb '14 Mar '14 Apr '14 May '14 Jun '14 Jul '14

82 86 8699

130

157168

ADOPTION OF TIMING-ALLOW-ORIGIN HEADER (TOP ALEX WEBSITES)

#velocityconf

Facebook Google

Akamai Disqus Typekit Optimizely

Cedexis Twitter

CDNPlanet Walmart

#velocityconf

JSMANNERS

#velocityconf

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

#velocityconf

#velocityconf

NEXT TIME BEFORE YOU COPY AND PASTE

#velocityconf

WHAT TO DO AS A PUBLISHER & DEVELOPER

• Refuse 3rd party content that doesn’t provide async options or is not minified

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

• Review jsmanners

• Educate other (junior) developers

• Test it via navigation and resource timing where applicable

#velocityconf

• Ask for server-side options

• Evaluate tag managers

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

• Monitor, monitor, ….and monitor

• Evaluate the need of the script with marketing and sales

WHAT TO DO AS A PUBLISHER & DEVELOPER

#velocityconf

WHAT TO DO AS A SCRIPT PROVIDER

• Provide non-blocking code samples and snippets

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

#velocityconf

THE PARTY’S OVER THANK YOU

#velocityconf

SHAMELESS PLUG I’m writing a book: Lean Websites (SitePoint)

VELOCITY OFFICE HOUR 2pm Table 1 (Sponsor Pavilion)

bit.ly/velocityconf14-3rdpartyQUESTIONS?

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

#velocityconf

BUT WHEN TO USE WHAT NOW?

third party footprint: evaluating the performance of external scripts

Technology