High Performance Snippets

High Performance
Snippets



        stevesouders.com/docs/fluent-snippets-20120530.pptx
      Disclaimer: This content does not necessarily reflect the opinions of my employer.
High Performance Snippets
synchronous scripts block
all following elements
from rendering
in all browsers
High Performance Snippets
async


#fail
async

           sync

   async
Frontend
 SPOF
http://www.webpagetest.org/result/120529_41_HWV/
http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
/etc/hosts:
72.66.115.13 apis.google.com
72.66.115.13 www.google-analytics.com
72.66.115.13 static.ak.fbcdn.net
72.66.115.13 connect.facebook.net
72.66.115.13 platform.twitter.com
72.66.115.13 widgets.twimg.com


WebPagetest:
setDnsName apis.google.com blackhole.webpagetest.org
setDnsName www.google-analytics.com blackhole.webpagetest.org
setDnsName static.ak.fbcdn.net blackhole.webpagetest.org
setDnsName connect.facebook.net blackhole.webpagetest.org
setDnsName platform.twitter.com blackhole.webpagetest.org
setDnsName widgets.twimg.com blackhole.webpagetest.org
navigate http://www.businessinsider.com/
High Performance Snippets
High Performance Snippets
High Performance Snippets
original snippet
<script src="http://widgets.twimg.com/j/2/widget.js">
</script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  ...
}).render().setUser('souders').start();
</script>
<script>                           asyncified snippet
function doTwitter() {
  if ( this.readyState && this.readyState != "complete"
       && this.readyState != "loaded" ) {
    return;
  }
  this.onload = this.onreadystatechange = null;
  new TWTR.Widget({
    version: 2,
    type: 'profile',
    ...
  }).render().setUser('souders').start();
}
var ts = document.createElement("script");
ts.async = true;
ts.onload = ts.onreadystatechange = doTwitter;
ts.src = "http://widgets.twimg.com/j/2/widget.js";
var s0 = document.getElementsByTagName('script')[0];
s0.parentNode.insertBefore(ts, s0);
</script>
But... you can’t make a script async if it does
 document.write

widget.js does document.write:
init: function(x) {
  ...
  this.id = x.id || "twtr-widget-" + this._widgetNumber;
  if (!x.id) {
    document.write('<div class="twtr-widget" id="' +
                 this.id + '"></div>')
  }
}


What if we create the DIV and specify the id?
asyncified snippet plus DIV
<div class=‘twtr-widget’ id=‘souderstwitter’></div>
<script>
function doTwitter() {
  if ( this.readyState && this.readyState != "complete"
       && this.readyState != "loaded" ) {
    return;
  }
  this.onload = this.onreadystatechange = null;
  new TWTR.Widget({
    id: ‘souderstwitter’,
    version: 2,
    type: 'profile',
    ...
  }).render().setUser('souders').start();
}
var ts = document.createElement("script");
ts.async = true;
...
before
after
While placing JavaScript files at the bottom of the
page is a best practice for website performance,
when including the anywhere.js file, always place
the file as close to the top of the page as possible.
The anywhere.js file is small (<3KB) and is delivered
to the page GZIP'd.
Further, all dependancies for @Anywhere features
are loaded asynchronously, on-demand so as to not
impact performance of the host page.
three facts:
 1. failures happen
 2. 304 & 200 both produce
    frontend SPOF
 3. anywhere.js expires after
    15 minutes
snippet cache times
http://platform.twitter.com/widgets.js - 30 mins
http://connect.facebook.net/en_US/all.js - 15 mins
http://www.google-analytics.com/ga.js - 120 mins
“bootstrap scripts” often have short
 cache times
more frequent Conditional GET requests
 means frontend SPOF is more likely
but short cache times is the only way
 snippet owners can push updates
or is it?
self-updating bootstrap scripts




stevesouders.com/blog/2012/05/22/self-updating-scripts/
part 1: update notification
piggyback on dynamic request
pass cached version # to
 server: ?v=127
server returns:
 204 – no update
 JS – new version available
part 2: overwrite cache
re-request dynamically
rev the URL (querystring)
XHR w/ setRequestHeader
reload iframe containing
 bootstrap script
example
 load bootstrap script:
 var s1=document.createElement('script');
 s1.async=true;
 s1.src='http://souders.org/tests/selfupdating/boo
   tstrap.js’;
 var
   s0=document.getElementsByTagName('script’)[0];
 s0.parentNode.insertBefore(s1, s0);




stevesouders.com/tests/selfupdating/
send beacon:
 http://souders.org/tests/selfupdating/beacon.js?v
   =02:29:53


 beacon response triggers
  update:
 var iframe1 = document.createElement("iframe");
 iframe1.style.display = "none”;
 iframe1.src =
   "http://souders.org/tests/selfupdating/update.p
   hp?v=02:29:53";
 document.body.appendChild(iframe1);
stevesouders.com/tests/selfupdating/
iframe reloads itself:
 <script
   src="http://souders.org/tests/selfupdating/boot
   strap.js">
 </script>
 <script>
 if (location.hash === '') {
   location.hash = "check”;
   location.reload(true);
 }
 </script>

 reload triggers Conditional GET
 cached script is updated
stevesouders.com/tests/selfupdating/
voilà
bootstrap scripts can have long
 cache times
AND
get updated when necessary
caveats
the update is used on the next
 page view (like app cache)
1 reported IE8 issue
takeaways
load 3rd party scripts async
test your site with
 blackhole.webpagetest.org
have RUM timeout
make bootstrap scripts self-
 updating & increase cache
 times
High Performance Snippets
Steve Souders
                                        @souders
stevesouders.com/docs/fluent-snippets-20120530.pptx
1 of 33

Recommended

Your Script Just Killed My Site by
Your Script Just Killed My SiteYour Script Just Killed My Site
Your Script Just Killed My SiteSteve Souders
10.5K views30 slides
Cache is King by
Cache is KingCache is King
Cache is KingSteve Souders
6.6K views70 slides
Frontend SPOF by
Frontend SPOFFrontend SPOF
Frontend SPOFPatrick Meenan
4.2K views30 slides
High Performance JavaScript (Amazon DevCon 2011) by
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)Nicholas Zakas
4.6K views155 slides
High Performance JavaScript (CapitolJS 2011) by
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)Nicholas Zakas
57.5K views125 slides
High Performance JavaScript - jQuery Conference SF Bay Area 2010 by
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010Nicholas Zakas
47.7K views103 slides

More Related Content

What's hot

Browser Automated Testing Frameworks - Nightwatch.js by
Browser Automated Testing Frameworks - Nightwatch.jsBrowser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsLuís Bastião Silva
7K views20 slides
High Performance JavaScript - WebDirections USA 2010 by
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010Nicholas Zakas
59.7K views105 slides
Web 2.0 Expo: Even Faster Web Sites by
Web 2.0 Expo: Even Faster Web SitesWeb 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web SitesSteve Souders
6.6K views34 slides
Automatic Functional Testing with Selenium and SauceLabs by
Automatic Functional Testing with Selenium and SauceLabsAutomatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabsJoseph Chiang
2.3K views25 slides
20160905 - BrisJS - nightwatch testing by
20160905 - BrisJS - nightwatch testing20160905 - BrisJS - nightwatch testing
20160905 - BrisJS - nightwatch testingVladimir Roudakov
756 views52 slides
Clojure Web Development by
Clojure Web DevelopmentClojure Web Development
Clojure Web DevelopmentHong Jiang
1.3K views13 slides

What's hot(20)

High Performance JavaScript - WebDirections USA 2010 by Nicholas Zakas
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Nicholas Zakas59.7K views
Web 2.0 Expo: Even Faster Web Sites by Steve Souders
Web 2.0 Expo: Even Faster Web SitesWeb 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web Sites
Steve Souders6.6K views
Automatic Functional Testing with Selenium and SauceLabs by Joseph Chiang
Automatic Functional Testing with Selenium and SauceLabsAutomatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabs
Joseph Chiang2.3K views
Clojure Web Development by Hong Jiang
Clojure Web DevelopmentClojure Web Development
Clojure Web Development
Hong Jiang1.3K views
@media - Even Faster Web Sites by Steve Souders
@media - Even Faster Web Sites@media - Even Faster Web Sites
@media - Even Faster Web Sites
Steve Souders11.5K views
High Performance JavaScript (YUIConf 2010) by Nicholas Zakas
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)
Nicholas Zakas61.8K views
Performance on the Yahoo! Homepage by Nicholas Zakas
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
Nicholas Zakas7.9K views
Going Node At Netflix by Ryan Anklam
Going Node At NetflixGoing Node At Netflix
Going Node At Netflix
Ryan Anklam3.7K views
JavaScript Performance (at SFJS) by Steve Souders
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
Steve Souders22.8K views
Cross-browser testing in the real world by Martin Kleppmann
Cross-browser testing in the real worldCross-browser testing in the real world
Cross-browser testing in the real world
Martin Kleppmann5.3K views
Testing nightwatch, by David Torroija by David Torroija
Testing nightwatch, by David TorroijaTesting nightwatch, by David Torroija
Testing nightwatch, by David Torroija
David Torroija1.3K views
High Performance JavaScript - Fronteers 2010 by Nicholas Zakas
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010
Nicholas Zakas4.2K views
JavaScript Timers, Power Consumption, and Performance by Nicholas Zakas
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
Nicholas Zakas54.4K views
State of the resource timing api by Aaron Peters
State of the resource timing apiState of the resource timing api
State of the resource timing api
Aaron Peters4.7K views
Automate testing with behat, selenium, phantom js and nightwatch.js (5) by Faichi Solutions
Automate testing with behat, selenium, phantom js and nightwatch.js (5)Automate testing with behat, selenium, phantom js and nightwatch.js (5)
Automate testing with behat, selenium, phantom js and nightwatch.js (5)
Faichi Solutions856 views

Viewers also liked

do u webview? by
do u webview?do u webview?
do u webview?Steve Souders
7.1K views41 slides
The Perception of Speed by
The Perception of SpeedThe Perception of Speed
The Perception of SpeedSteve Souders
4.1K views40 slides
High Performance Web Components by
High Performance Web ComponentsHigh Performance Web Components
High Performance Web ComponentsSteve Souders
6.2K views63 slides
How fast are we going now? by
How fast are we going now?How fast are we going now?
How fast are we going now?Steve Souders
37.5K views62 slides
Metrics of Joy by
Metrics of JoyMetrics of Joy
Metrics of JoySteve Souders
2.8K views34 slides
Design+Performance Velocity 2015 by
Design+Performance Velocity 2015Design+Performance Velocity 2015
Design+Performance Velocity 2015Steve Souders
18.3K views59 slides

Viewers also liked(6)

The Perception of Speed by Steve Souders
The Perception of SpeedThe Perception of Speed
The Perception of Speed
Steve Souders4.1K views
High Performance Web Components by Steve Souders
High Performance Web ComponentsHigh Performance Web Components
High Performance Web Components
Steve Souders6.2K views
How fast are we going now? by Steve Souders
How fast are we going now?How fast are we going now?
How fast are we going now?
Steve Souders37.5K views
Design+Performance Velocity 2015 by Steve Souders
Design+Performance Velocity 2015Design+Performance Velocity 2015
Design+Performance Velocity 2015
Steve Souders18.3K views

Similar to High Performance Snippets

"Your script just killed my site" by Steve Souders by
"Your script just killed my site" by Steve Souders"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve SoudersDmitry Makarchuk
1.5K views61 slides
JavaScript Perfomance by
JavaScript PerfomanceJavaScript Perfomance
JavaScript PerfomanceAnatol Alizar
10.1K views49 slides
Google I/O 2012 - Protecting your user experience while integrating 3rd party... by
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Patrick Meenan
3K views51 slides
Building and deploying React applications by
Building and deploying React applicationsBuilding and deploying React applications
Building and deploying React applicationsAstrails
2.1K views67 slides
Widget Summit 2008 by
Widget Summit 2008Widget Summit 2008
Widget Summit 2008Volkan Unsal
778 views52 slides
Introduction to JQuery, ASP.NET MVC and Silverlight by
Introduction to JQuery, ASP.NET MVC and SilverlightIntroduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and SilverlightPeter Gfader
7.9K views105 slides

Similar to High Performance Snippets(20)

"Your script just killed my site" by Steve Souders by Dmitry Makarchuk
"Your script just killed my site" by Steve Souders"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
Dmitry Makarchuk1.5K views
JavaScript Perfomance by Anatol Alizar
JavaScript PerfomanceJavaScript Perfomance
JavaScript Perfomance
Anatol Alizar10.1K views
Google I/O 2012 - Protecting your user experience while integrating 3rd party... by Patrick Meenan
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Patrick Meenan3K views
Building and deploying React applications by Astrails
Building and deploying React applicationsBuilding and deploying React applications
Building and deploying React applications
Astrails2.1K views
Introduction to JQuery, ASP.NET MVC and Silverlight by Peter Gfader
Introduction to JQuery, ASP.NET MVC and SilverlightIntroduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and Silverlight
Peter Gfader7.9K views
Service Worker - Reliability bits by jungkees
Service Worker - Reliability bitsService Worker - Reliability bits
Service Worker - Reliability bits
jungkees821 views
Meetup Performance by Greg Whalin
Meetup PerformanceMeetup Performance
Meetup Performance
Greg Whalin21.1K views
[convergese] Adaptive Images in Responsive Web Design by Christopher Schmitt
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
Christopher Schmitt4.8K views
Progressive Web Apps by FITC
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
FITC549 views
Search and play more than 50 clips by phanhung20
Search and play more than 50 clipsSearch and play more than 50 clips
Search and play more than 50 clips
phanhung20292 views
Google在Web前端方面的经验 by yiditushe
Google在Web前端方面的经验Google在Web前端方面的经验
Google在Web前端方面的经验
yiditushe1.2K views
SXSW: Even Faster Web Sites by Steve Souders
SXSW: Even Faster Web SitesSXSW: Even Faster Web Sites
SXSW: Even Faster Web Sites
Steve Souders9.4K views
Bringing the JAMstack to the Enterprise by Jamund Ferguson
Bringing the JAMstack to the EnterpriseBringing the JAMstack to the Enterprise
Bringing the JAMstack to the Enterprise
Jamund Ferguson657 views
Profiling PHP with Xdebug / Webgrind by Sam Keen
Profiling PHP with Xdebug / WebgrindProfiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / Webgrind
Sam Keen43.8K views

More from Steve Souders

Make JavaScript Faster by
Make JavaScript FasterMake JavaScript Faster
Make JavaScript FasterSteve Souders
2.9K views47 slides
High Performance Web Components by
High Performance Web ComponentsHigh Performance Web Components
High Performance Web ComponentsSteve Souders
10.3K views45 slides
Prebrowsing - Velocity NY 2013 by
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Steve Souders
4.3K views60 slides
High Performance Mobile (SF/SV Web Perf) by
High Performance Mobile (SF/SV Web Perf)High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)Steve Souders
18.6K views68 slides
High Performance HTML5 (SF HTML5 UG) by
High Performance HTML5 (SF HTML5 UG)High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)Steve Souders
15.3K views43 slides
Web Directions South - Even Faster Web Sites by
Web Directions South - Even Faster Web SitesWeb Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesSteve Souders
2.8K views56 slides

More from Steve Souders(12)

Make JavaScript Faster by Steve Souders
Make JavaScript FasterMake JavaScript Faster
Make JavaScript Faster
Steve Souders2.9K views
High Performance Web Components by Steve Souders
High Performance Web ComponentsHigh Performance Web Components
High Performance Web Components
Steve Souders10.3K views
Prebrowsing - Velocity NY 2013 by Steve Souders
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013
Steve Souders4.3K views
High Performance Mobile (SF/SV Web Perf) by Steve Souders
High Performance Mobile (SF/SV Web Perf)High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
Steve Souders18.6K views
High Performance HTML5 (SF HTML5 UG) by Steve Souders
High Performance HTML5 (SF HTML5 UG)High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
Steve Souders15.3K views
Web Directions South - Even Faster Web Sites by Steve Souders
Web Directions South - Even Faster Web SitesWeb Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web Sites
Steve Souders2.8K views
Souders WPO Web 2.0 Expo by Steve Souders
Souders WPO Web 2.0 ExpoSouders WPO Web 2.0 Expo
Souders WPO Web 2.0 Expo
Steve Souders6.9K views
Even Faster Web Sites at jQuery Conference '09 by Steve Souders
Even Faster Web Sites at jQuery Conference '09Even Faster Web Sites at jQuery Conference '09
Even Faster Web Sites at jQuery Conference '09
Steve Souders1.2K views
Browserscope Launch at TAE by Steve Souders
Browserscope Launch at TAEBrowserscope Launch at TAE
Browserscope Launch at TAE
Steve Souders708 views
Even Faster Web Sites at The Ajax Experience by Steve Souders
Even Faster Web Sites at The Ajax ExperienceEven Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax Experience
Steve Souders1.2K views

Recently uploaded

STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf by
STKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdfSTKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdf
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdfDr. Jimmy Schwarzkopf
19 views29 slides
The Research Portal of Catalonia: Growing more (information) & more (services) by
The Research Portal of Catalonia: Growing more (information) & more (services)The Research Portal of Catalonia: Growing more (information) & more (services)
The Research Portal of Catalonia: Growing more (information) & more (services)CSUC - Consorci de Serveis Universitaris de Catalunya
80 views25 slides
Kyo - Functional Scala 2023.pdf by
Kyo - Functional Scala 2023.pdfKyo - Functional Scala 2023.pdf
Kyo - Functional Scala 2023.pdfFlavio W. Brasil
368 views92 slides
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... by
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...Bernd Ruecker
37 views69 slides
Network Source of Truth and Infrastructure as Code revisited by
Network Source of Truth and Infrastructure as Code revisitedNetwork Source of Truth and Infrastructure as Code revisited
Network Source of Truth and Infrastructure as Code revisitedNetwork Automation Forum
26 views45 slides
Democratising digital commerce in India-Report by
Democratising digital commerce in India-ReportDemocratising digital commerce in India-Report
Democratising digital commerce in India-ReportKapil Khandelwal (KK)
15 views161 slides

Recently uploaded(20)

STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf by Dr. Jimmy Schwarzkopf
STKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdfSTKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdf
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... by Bernd Ruecker
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
Bernd Ruecker37 views
Powerful Google developer tools for immediate impact! (2023-24) by wesley chun
Powerful Google developer tools for immediate impact! (2023-24)Powerful Google developer tools for immediate impact! (2023-24)
Powerful Google developer tools for immediate impact! (2023-24)
wesley chun10 views
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... by Jasper Oosterveld
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors by sugiuralab
TouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective SensorsTouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective Sensors
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors
sugiuralab19 views
PharoJS - Zürich Smalltalk Group Meetup November 2023 by Noury Bouraqadi
PharoJS - Zürich Smalltalk Group Meetup November 2023PharoJS - Zürich Smalltalk Group Meetup November 2023
PharoJS - Zürich Smalltalk Group Meetup November 2023
Noury Bouraqadi127 views
SAP Automation Using Bar Code and FIORI.pdf by Virendra Rai, PMP
SAP Automation Using Bar Code and FIORI.pdfSAP Automation Using Bar Code and FIORI.pdf
SAP Automation Using Bar Code and FIORI.pdf
Data Integrity for Banking and Financial Services by Precisely
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial Services
Precisely21 views
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院 by IttrainingIttraining
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
6g - REPORT.pdf by Liveplex
6g - REPORT.pdf6g - REPORT.pdf
6g - REPORT.pdf
Liveplex10 views

High Performance Snippets

  • 1. High Performance Snippets stevesouders.com/docs/fluent-snippets-20120530.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
  • 3. synchronous scripts block all following elements from rendering in all browsers
  • 5. async #fail async sync async
  • 9. /etc/hosts: 72.66.115.13 apis.google.com 72.66.115.13 www.google-analytics.com 72.66.115.13 static.ak.fbcdn.net 72.66.115.13 connect.facebook.net 72.66.115.13 platform.twitter.com 72.66.115.13 widgets.twimg.com WebPagetest: setDnsName apis.google.com blackhole.webpagetest.org setDnsName www.google-analytics.com blackhole.webpagetest.org setDnsName static.ak.fbcdn.net blackhole.webpagetest.org setDnsName connect.facebook.net blackhole.webpagetest.org setDnsName platform.twitter.com blackhole.webpagetest.org setDnsName widgets.twimg.com blackhole.webpagetest.org navigate http://www.businessinsider.com/
  • 13. original snippet <script src="http://widgets.twimg.com/j/2/widget.js"> </script> <script> new TWTR.Widget({ version: 2, type: 'profile', ... }).render().setUser('souders').start(); </script>
  • 14. <script> asyncified snippet function doTwitter() { if ( this.readyState && this.readyState != "complete" && this.readyState != "loaded" ) { return; } this.onload = this.onreadystatechange = null; new TWTR.Widget({ version: 2, type: 'profile', ... }).render().setUser('souders').start(); } var ts = document.createElement("script"); ts.async = true; ts.onload = ts.onreadystatechange = doTwitter; ts.src = "http://widgets.twimg.com/j/2/widget.js"; var s0 = document.getElementsByTagName('script')[0]; s0.parentNode.insertBefore(ts, s0); </script>
  • 15. But... you can’t make a script async if it does document.write widget.js does document.write: init: function(x) { ... this.id = x.id || "twtr-widget-" + this._widgetNumber; if (!x.id) { document.write('<div class="twtr-widget" id="' + this.id + '"></div>') } } What if we create the DIV and specify the id?
  • 16. asyncified snippet plus DIV <div class=‘twtr-widget’ id=‘souderstwitter’></div> <script> function doTwitter() { if ( this.readyState && this.readyState != "complete" && this.readyState != "loaded" ) { return; } this.onload = this.onreadystatechange = null; new TWTR.Widget({ id: ‘souderstwitter’, version: 2, type: 'profile', ... }).render().setUser('souders').start(); } var ts = document.createElement("script"); ts.async = true; ...
  • 18. after
  • 19. While placing JavaScript files at the bottom of the page is a best practice for website performance, when including the anywhere.js file, always place the file as close to the top of the page as possible. The anywhere.js file is small (<3KB) and is delivered to the page GZIP'd. Further, all dependancies for @Anywhere features are loaded asynchronously, on-demand so as to not impact performance of the host page.
  • 20. three facts: 1. failures happen 2. 304 & 200 both produce frontend SPOF 3. anywhere.js expires after 15 minutes
  • 21. snippet cache times http://platform.twitter.com/widgets.js - 30 mins http://connect.facebook.net/en_US/all.js - 15 mins http://www.google-analytics.com/ga.js - 120 mins
  • 22. “bootstrap scripts” often have short cache times more frequent Conditional GET requests means frontend SPOF is more likely but short cache times is the only way snippet owners can push updates or is it?
  • 24. part 1: update notification piggyback on dynamic request pass cached version # to server: ?v=127 server returns: 204 – no update JS – new version available
  • 25. part 2: overwrite cache re-request dynamically rev the URL (querystring) XHR w/ setRequestHeader reload iframe containing bootstrap script
  • 26. example load bootstrap script: var s1=document.createElement('script'); s1.async=true; s1.src='http://souders.org/tests/selfupdating/boo tstrap.js’; var s0=document.getElementsByTagName('script’)[0]; s0.parentNode.insertBefore(s1, s0); stevesouders.com/tests/selfupdating/
  • 27. send beacon: http://souders.org/tests/selfupdating/beacon.js?v =02:29:53 beacon response triggers update: var iframe1 = document.createElement("iframe"); iframe1.style.display = "none”; iframe1.src = "http://souders.org/tests/selfupdating/update.p hp?v=02:29:53"; document.body.appendChild(iframe1); stevesouders.com/tests/selfupdating/
  • 28. iframe reloads itself: <script src="http://souders.org/tests/selfupdating/boot strap.js"> </script> <script> if (location.hash === '') { location.hash = "check”; location.reload(true); } </script> reload triggers Conditional GET cached script is updated stevesouders.com/tests/selfupdating/
  • 29. voilà bootstrap scripts can have long cache times AND get updated when necessary
  • 30. caveats the update is used on the next page view (like app cache) 1 reported IE8 issue
  • 31. takeaways load 3rd party scripts async test your site with blackhole.webpagetest.org have RUM timeout make bootstrap scripts self- updating & increase cache times
  • 33. Steve Souders @souders stevesouders.com/docs/fluent-snippets-20120530.pptx

Editor's Notes

  1. flickr.com/photos/bestrated1/2141687384/
  2. WidgetsAdsAnalytics
  3. http://www.webpagetest.org/result/120530_HS_4BA/
  4. http://www.webpagetest.org/result/120530_7R_4BJ/
  5. http://www.webpagetest.org/result/120530_7R_4BJ/
  6. http://www.webpagetest.org/result/120530_8D_4BQ/
  7. flickr.com/photos/wwarby/3296379139/
  8. flickr.com/photos/juditk/5024772809/whether it’s 1 or 5 requests, frontend SPOF will still happen
  9. flickr.com/photos/myklroventine/4062102754/