3rd Party Footprint @ Webrebels
-
Upload
barbara-bermes -
Category
Documents
-
view
112 -
download
0
Transcript of 3rd Party Footprint @ Webrebels
#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