SlideShare a Scribd company logo
1 of 33
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

More Related Content

What's hot

Browser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsBrowser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsLuís Bastião Silva
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010Nicholas Zakas
 
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web SitesWeb 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web SitesSteve Souders
 
Automatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabsAutomatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabsJoseph Chiang
 
20160905 - BrisJS - nightwatch testing
20160905 - BrisJS - nightwatch testing20160905 - BrisJS - nightwatch testing
20160905 - BrisJS - nightwatch testingVladimir Roudakov
 
Clojure Web Development
Clojure Web DevelopmentClojure Web Development
Clojure Web DevelopmentHong Jiang
 
@media - Even Faster Web Sites
@media - Even Faster Web Sites@media - Even Faster Web Sites
@media - Even Faster Web SitesSteve Souders
 
High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)Nicholas Zakas
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! HomepageNicholas Zakas
 
Going Node At Netflix
Going Node At NetflixGoing Node At Netflix
Going Node At NetflixRyan Anklam
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)Steve Souders
 
Cross-browser testing in the real world
Cross-browser testing in the real worldCross-browser testing in the real world
Cross-browser testing in the real worldMartin Kleppmann
 
Testing nightwatch, by David Torroija
Testing nightwatch, by David TorroijaTesting nightwatch, by David Torroija
Testing nightwatch, by David TorroijaDavid Torroija
 
Testing Web Applications
Testing Web ApplicationsTesting Web Applications
Testing Web ApplicationsSeth McLaughlin
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010Nicholas Zakas
 
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceNicholas Zakas
 
State of the resource timing api
State of the resource timing apiState of the resource timing api
State of the resource timing apiAaron Peters
 
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)
Automate testing with behat, selenium, phantom js and nightwatch.js (5)Faichi Solutions
 

What's hot (20)

Browser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsBrowser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.js
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
 
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web SitesWeb 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web Sites
 
Automatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabsAutomatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabs
 
20160905 - BrisJS - nightwatch testing
20160905 - BrisJS - nightwatch testing20160905 - BrisJS - nightwatch testing
20160905 - BrisJS - nightwatch testing
 
Clojure Web Development
Clojure Web DevelopmentClojure Web Development
Clojure Web Development
 
@media - Even Faster Web Sites
@media - Even Faster Web Sites@media - Even Faster Web Sites
@media - Even Faster Web Sites
 
High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
 
Responsive interfaces
Responsive interfacesResponsive interfaces
Responsive interfaces
 
Going Node At Netflix
Going Node At NetflixGoing Node At Netflix
Going Node At Netflix
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
 
Cross-browser testing in the real world
Cross-browser testing in the real worldCross-browser testing in the real world
Cross-browser testing in the real world
 
Testing nightwatch, by David Torroija
Testing nightwatch, by David TorroijaTesting nightwatch, by David Torroija
Testing nightwatch, by David Torroija
 
Testing Web Applications
Testing Web ApplicationsTesting Web Applications
Testing Web Applications
 
Design+Performance
Design+PerformanceDesign+Performance
Design+Performance
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010
 
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
 
State of the resource timing api
State of the resource timing apiState of the resource timing api
State of the resource timing api
 
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)
Automate testing with behat, selenium, phantom js and nightwatch.js (5)
 

Viewers also liked

The Perception of Speed
The Perception of SpeedThe Perception of Speed
The Perception of SpeedSteve Souders
 
High Performance Web Components
High Performance Web ComponentsHigh Performance Web Components
High Performance Web ComponentsSteve Souders
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?Steve Souders
 
Design+Performance Velocity 2015
Design+Performance Velocity 2015Design+Performance Velocity 2015
Design+Performance Velocity 2015Steve Souders
 

Viewers also liked (6)

do u webview?
do u webview?do u webview?
do u webview?
 
The Perception of Speed
The Perception of SpeedThe Perception of Speed
The Perception of Speed
 
High Performance Web Components
High Performance Web ComponentsHigh Performance Web Components
High Performance Web Components
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?
 
Metrics of Joy
Metrics of JoyMetrics of Joy
Metrics of Joy
 
Design+Performance Velocity 2015
Design+Performance Velocity 2015Design+Performance Velocity 2015
Design+Performance Velocity 2015
 

Similar to High Performance Snippets

"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
"Your script just killed my site" by Steve SoudersDmitry Makarchuk
 
JavaScript Perfomance
JavaScript PerfomanceJavaScript Perfomance
JavaScript PerfomanceAnatol Alizar
 
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...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Patrick Meenan
 
Building and deploying React applications
Building and deploying React applicationsBuilding and deploying React applications
Building and deploying React applicationsAstrails
 
Widget Summit 2008
Widget Summit 2008Widget Summit 2008
Widget Summit 2008Volkan Unsal
 
Introduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and SilverlightIntroduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and SilverlightPeter Gfader
 
Service Worker - Reliability bits
Service Worker - Reliability bitsService Worker - Reliability bits
Service Worker - Reliability bitsjungkees
 
Meetup Performance
Meetup PerformanceMeetup Performance
Meetup PerformanceGreg Whalin
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web AppsFITC
 
using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'susing Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'sAntônio Roberto Silva
 
Search and play more than 50 clips
Search and play more than 50 clipsSearch and play more than 50 clips
Search and play more than 50 clipsphanhung20
 
SXSW: Even Faster Web Sites
SXSW: Even Faster Web SitesSXSW: Even Faster Web Sites
SXSW: Even Faster Web SitesSteve Souders
 
Google在Web前端方面的经验
Google在Web前端方面的经验Google在Web前端方面的经验
Google在Web前端方面的经验yiditushe
 
Bringing the JAMstack to the Enterprise
Bringing the JAMstack to the EnterpriseBringing the JAMstack to the Enterprise
Bringing the JAMstack to the EnterpriseJamund Ferguson
 
Profiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / WebgrindProfiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / WebgrindSam Keen
 

Similar to High Performance Snippets (20)

"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
"Your script just killed my site" by Steve Souders
 
JavaScript Perfomance
JavaScript PerfomanceJavaScript Perfomance
JavaScript Perfomance
 
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...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
 
Building and deploying React applications
Building and deploying React applicationsBuilding and deploying React applications
Building and deploying React applications
 
Widget Summit 2008
Widget Summit 2008Widget Summit 2008
Widget Summit 2008
 
Introduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and SilverlightIntroduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and Silverlight
 
Service Worker - Reliability bits
Service Worker - Reliability bitsService Worker - Reliability bits
Service Worker - Reliability bits
 
Meetup Performance
Meetup PerformanceMeetup Performance
Meetup Performance
 
Meetup Performance
Meetup PerformanceMeetup Performance
Meetup Performance
 
Sanjeev ghai 12
Sanjeev ghai 12Sanjeev ghai 12
Sanjeev ghai 12
 
Web-Performance
Web-PerformanceWeb-Performance
Web-Performance
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'susing Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API's
 
Search and play more than 50 clips
Search and play more than 50 clipsSearch and play more than 50 clips
Search and play more than 50 clips
 
Sxsw 20090314
Sxsw 20090314Sxsw 20090314
Sxsw 20090314
 
SXSW: Even Faster Web Sites
SXSW: Even Faster Web SitesSXSW: Even Faster Web Sites
SXSW: Even Faster Web Sites
 
Google在Web前端方面的经验
Google在Web前端方面的经验Google在Web前端方面的经验
Google在Web前端方面的经验
 
Bringing the JAMstack to the Enterprise
Bringing the JAMstack to the EnterpriseBringing the JAMstack to the Enterprise
Bringing the JAMstack to the Enterprise
 
Profiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / WebgrindProfiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / Webgrind
 

More from Steve Souders

Make JavaScript Faster
Make JavaScript FasterMake JavaScript Faster
Make JavaScript FasterSteve Souders
 
High Performance Web Components
High Performance Web ComponentsHigh Performance Web Components
High Performance Web ComponentsSteve Souders
 
Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Steve Souders
 
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)Steve Souders
 
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)Steve Souders
 
Web Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesWeb Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesSteve Souders
 
Souders WPO Web 2.0 Expo
Souders WPO Web 2.0 ExpoSouders WPO Web 2.0 Expo
Souders WPO Web 2.0 ExpoSteve Souders
 
Even Faster Web Sites at jQuery Conference '09
Even Faster Web Sites at jQuery Conference '09Even Faster Web Sites at jQuery Conference '09
Even Faster Web Sites at jQuery Conference '09Steve Souders
 
Browserscope Launch at TAE
Browserscope Launch at TAEBrowserscope Launch at TAE
Browserscope Launch at TAESteve Souders
 
Even Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax ExperienceEven Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax ExperienceSteve Souders
 

More from Steve Souders (12)

Make JavaScript Faster
Make JavaScript FasterMake JavaScript Faster
Make JavaScript Faster
 
High Performance Web Components
High Performance Web ComponentsHigh Performance Web Components
High Performance Web Components
 
Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013
 
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
 
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
 
Web Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesWeb Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web Sites
 
Souders WPO Web 2.0 Expo
Souders WPO Web 2.0 ExpoSouders WPO Web 2.0 Expo
Souders WPO Web 2.0 Expo
 
JSConf US 2010
JSConf US 2010JSConf US 2010
JSConf US 2010
 
CouchDB Google
CouchDB GoogleCouchDB Google
CouchDB Google
 
Even Faster Web Sites at jQuery Conference '09
Even Faster Web Sites at jQuery Conference '09Even Faster Web Sites at jQuery Conference '09
Even Faster Web Sites at jQuery Conference '09
 
Browserscope Launch at TAE
Browserscope Launch at TAEBrowserscope Launch at TAE
Browserscope Launch at TAE
 
Even Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax ExperienceEven Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax Experience
 

Recently uploaded

Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 

Recently uploaded (20)

Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 

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/