#webrebels

3rd Party FootprintEVALUATING THE PERFORMANCE OF EXTERNAL SCRIPTS

BARBARA BERMES /bbinto

#webrebels

3rd Party FootprintEVALUATING THE PERFORMANCE OF EXTERNAL SCRIPTS

BARBARA BERMES /bbinto

#webrebels

I live in Toronto, Canada

#webrebels

I love burritos

#webrebels

I’m passionate about web perf

#webrebelsLet’s get this 3rd party started!

#LDNWebPerf#webrebels

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

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

What is a 3rd party script?

#LDNWebPerf#webrebels

Types of 3rd party scriptsAdvertising Tracking and Analytics Fonts Social Media Libraries and Frameworks

#webrebels

What’s the #1 used 3rd Party script?

#LDNWebPerf#webrebels

Stats from Big Query

#webrebels

AKAMAI (FB)14%

TWITTER 5%

FACEBOOK 10%

GOOGLE 71%

Top 10

#webrebels

Visualize the impact of 3rd party scripts

#webrebels

#webrebels

#webrebels

#webrebels

#webrebels

Foreign content overload

#LDNWebPerf#webrebels

Example: Wired• Body Level One

• Body Level Two

• Body Level Three

• Body Level Four

• Body Level Five

#webrebels

But what’s the issue?

#LDNWebPerf#webrebels

The Issues and Negative Impacts

PerformanceFront-end Single Point of Failure (SPOF) Privacy

#LDNWebPerf#webrebels

Potential SolutionsSafe SnippetsCaching and Hosted LibrariesTools and Initiatives

#webrebels

Performance

#webrebels

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

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

Rule of Thumb

#webrebels

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

#webrebels

A website without ads?

#LDNWebPerf#webrebels

The performance impact of ads

• Body Level One

• Body Level Two

• Body Level Three

• Body Level Four

• Body Level Five

#webrebels

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

<script/>

#webrebels

Monitor foreign content, constantly!

#LDNWebPerf#webrebels

Arith

met

ic M

ean

in s

0

2.5

5

7.5

10

10/4/12 10/31/12

Bad 3rd parties (CBC mobile Site)

Smooth sailing

Client-side Ads

Ads turned offServer-side Ads

Source: Keynote Daily Reports

We noticed a spike

#webrebels

Single point of failure

#LDNWebPerf#webrebels

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

–Wikipedia

SPOF

#LDNWebPerf#webrebels

The Offender

It will block rendering anything after this line

#webrebels

Yeah…whatever3rd providers don’t really go down…

#webrebels

Oh yes, they do!

#webrebels

#webrebels

#webrebels

#webrebels

#webrebels

#webrebels

#webrebels

#webrebels

Title TextTitle Text

#webrebels

#webrebels

The Great Firewall of China

#webrebels

Simulating SPOF on TechCrunch

#webrebels

#velocityconf

SPOF-O-Matic

#webrebels

#webrebels

SPOF WIRED

Without SPOFWith SPOF: Visually complete 40s

#webrebels

Let’s crash this party

#webrebels

Title TextTitle Text

#webrebels

#webrebels

#velocityconf#webrebels

#velocityconf#webrebels

#webrebels

Initializing client-side scripts

#webrebels

Safest (previous) way: Dynamic script tag

(to cover most of the browsers)

#webrebelshttp://www.phpied.com/social-button-bffs/

Asynchronous Loading

#webrebels

Title Text

Asynchronous Loading

#webrebels

Title Text

Asynchronous Loading

#webrebels

Title Text

Asynchronous Loading

#webrebels

Title Text

Asynchronous Loading

#webrebels

Title Text

Asynchronous Loading

#webrebels

Title Text

Asynchronous Loading

#webrebels

Before

#webrebels

5 seconds 25 seconds

#webrebels

#webrebels

After

#webrebels

AFTER5 seconds

#webrebels

#webrebels

#webrebels

The Future

#LDNWebPerf#webrebels

Async or Defer JS

#LDNWebPerf#webrebels

Async or Defer JS

#LDNWebPerf#webrebels

Async and Defer JS

#LDNWebPerf#webrebels

Protect yourself with the help of tools

Ad-hoc browser toolsContinuous integration and deployment tools

#webrebels

Caching?Don’t always rely on it!

#LDNWebPerf#webrebels

30min

3 min

Cache Policies

20 min

30 min

1 hr

20 min

#webrebels

What about hosted libraries?

#LDNWebPerf#webrebels

Pages using Google CDN(Top Alexa Websites)

0%

0.25%

0.5%

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

11%

17%

26%

37%

47%

Perc

enta

geGoogle Hosted Libraries

PAGES USING GOOGLE LIBRARIES API

52% 48%

#LDNWebPerf#webrebels

Anywhere?

Don’t just copy and paste

#webrebels

SPOF Alert!

#webrebels

Don’t do this….

#webrebels

Rather do this: Silent Fail

#webrebelsSource: May 2015, Big Query result on jQuery from Google CDNs

Google’s hostest jQuery fragmentation

OTHER 30%

1.4.2 5%1.11.0

6%1.8.2 6%

1.11.1 7%

1.9.1 8%

1.8.3 8%

1.10.2 8%

1.7.1 10%

1.7.2 12%

#webrebels

So, whats the verdict:Hosted Libraries or not?

#webrebels

Privacy

#webrebels

Title Texthttps://developers.facebook.com/docs/plugins/like-button/

#webrebels

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

#webrebels

Open Source Initiatives and Resources

#webrebels

Privacy Hero heise’s Opt-in Solution

#webrebels

#webrebels

#velocityconf

#LDNWebPerf#webrebels

Measuring 3rd party content on your site

Navigation Timing APIResource Timing API

#webrebels

0

120

240

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

82 86 8699

130

157168

232

Fastly Optimizely

Instagram Cedexis Twitter TypeKit

CDNPlanet Walmart Tumblr Disqus

Adoption of Timing-Allow-Origin Header (Top Alexa Websites)

#webrebels

Title Textjsmanners

#webrebels

#webrebels

Title Texthttps://github.com/triblondon/

Contribute on Github!

#webrebels

Next time before you copy and paste

#LDNWebPerf#webrebels

• 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

What to do as a Publisher & Developer

#LDNWebPerf#webrebels

• 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

#LDNWebPerf#webrebels

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)

#webrebels

The Party’s OverThank you

#webrebels

Questions?bit.ly/webrebels

Shameless Plug: I wrote a book “Lean Websites” (SitePoint)

Release: end of May 2015