SlideShare ist ein Scribd-Unternehmen logo
1 von 61
Downloaden Sie, um offline zu lesen
Your script just
  killed my site



stevesouders.com/docs/paypal-spof-20121115.pptx
Disclaimer: This content does not necessarily reflect the opinions of my employer.
SPOF
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
synchronous scripts block
all following elements
from rendering
in all browsers
#fail
async


#fail
async

           sync

   async
Frontend
 SPOF
http://www.webpagetest.org/result/120529_41_HWV/
"Your script just killed my site" by Steve Souders
entire BODY blocked
   from rendering
http://www.webpagetest.org/result/120529_41_HWV/
"Your script just killed my site" by Steve Souders
mysql>
mysql> select p.url, wptid
mysql> select p.url, wptid
from pages as p, requests as r
mysql> select p.url, wptid
from pages as p, requests as r
where p.pageid >= 844954 and
p.pageid <= 1564447 and
p.pageid = r.pageid and
mysql> select p.url, wptid
from pages as p, requests as r
where p.pageid >= 844954 and
p.pageid <= 1564447 and
p.pageid = r.pageid and
rank < 20000 and
mysql> select p.url, wptid
from pages as p, requests as r
where p.pageid >= 844954 and
p.pageid <= 1564447 and
p.pageid = r.pageid and
rank < 20000 and
resp_content_type like “%script%” and
mysql> select p.url, wptid
from pages as p, requests as r
where p.pageid >= 844954 and
p.pageid <= 1564447 and
p.pageid = r.pageid and
rank < 20000 and
resp_content_type like “%script%” and
time > 10000 and
mysql> select p.url, wptid
from pages as p, requests as r
where p.pageid >= 844954 and
p.pageid <= 1564447 and
p.pageid = r.pageid and
rank < 20000 and
resp_content_type like “%script%” and
time > 10000 and
renderStart > 10000
mysql> select p.url, wptid
from pages as p, requests as r
where p.pageid >= 844954 and
p.pageid <= 1564447 and
p.pageid = r.pageid and
rank < 20000 and
resp_content_type like “%script%” and
time > 10000 and
renderStart > 10000
group by p.pageid;
"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
"Your script just killed my site" by Steve Souders
blog.catchpoint.com/2012/06/01/facebook-outage-wake-up-call-for-websites/
"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
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
async!
"Your script just killed my site" by Steve Souders
async!


#fail
    sync
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
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
                                                          with   Stoyan Stefanov




stevesouders.com/blog/2012/05/22/self-updating-scripts/
client                  server
bootstrap.js:               current version
  var v=“1.7”;                   is 1.7
  scriptelem.src =    200
  “beacon.js?v=”+v;   maxage=604800


beacon.js:        ?v=1.7&log...

                      204
client                   server
next day…
 bootstrap.js:                     bootstrap.js
  read from cache                 updated to 1.8




 beacon.js:           ?v=1.7&log...

                         200

                var iframe1 =
                  document.createElement("iframe");
                iframe1.style.display = "none”;
                iframe1.src = ”update.php";
                document.body.appendChild(iframe1);
client                     server
 update.php
                           200
bootstrap.js is still    <script src=“bootstrap.js">
read from cache          </script>
                         <script>
                         if (location.hash === '') {
                           location.hash = "check”;
                           location.reload(true);
                         }
                         </script>
on reload bootstrap.js
is re-requested and
overwrites cache           200
voilà
bootstrap scripts can have long
 cache times
AND
get updated when necessary
caveat
the update is used on the next
 page view (like app cache)
lognormal.com/blog/2012/06/05/updating-cached-boomerang/
lognormal.com/blog/2012/06/05/updating-cached-boomerang/
dynamic symbol loading: C
 void *handle;
 double (*cosine)(double);

 handle = dlopen("/lib/libm.so.6", RTLD_LAZY);
 if ( !handle ) {
     exit(1);
 }

 cosine = dlsym(handle, "cos");
 if ( dlerror() != NULL ) {
     exit(1);
 }
dynamic symbol loading: JavaScript
 <script src='mycombo.js'></script>

 <script>
 $('.content a, .huffpo-wide-container
   a').mousedown(function() {...
 </script>




         Wha?!
ejohn.org/blog/degrading-script-tags/
dynamic symbol loading: JavaScript
 <script src='mycombo.js'></script>
 <script src='mycombo.js'>
 <script>
 $('.content a, .huffpo-wide-container
 $('.content a, .huffpo-wide-container
   a').mousedown(function() {...
   a').mousedown(function() {...
 </script>
 </script>
 at the end of mycombo.js:
 var scripts = document.getElementsByTagName("script");
 for ( var cntr = scripts.length; cntr > 0; cntr-- ) {
   var curScript = scripts[cntr-1];
   if (curScript.src.indexOf('mycombo.js') != -1) {
     eval( curScript.innerHTML );
     break;
   }
 }
we’re JavaScript



& we mean business
takeaways
load 3rd party scripts async
test with WebPagetest SPOF
have RUM timeout
self-update bootstrap scripts
 & increase cache times
harden JS loading
what’s your website’s
weakest link?
Steve Souders
                                    @souders
stevesouders.com/docs/paypal-spof-20121115.pptx
"Your script just killed my site" by Steve Souders
Patrick Meenan
Nicholas Zakas
Guy Podjarny
Stoyan Stefanov
Tim Kadlec
Brian Pane
Josh Fraser
Steve Souders
Betty Tso
Israel Nir
Marcel Duran
Éric Daspet
Alois Reitbauer
Matthew Prince
Buddy Brewer
Alexander Podelko
Estelle Weyl
Aaron Peters
Tony Gentilcore
Matthew Steele
Bryan McQuade
Tobie LangelBilly Hoffman
Joshua Bixby
Sergey Chernyshev
JP Castro
Pavel Paulau
David Calhoun
Nicole Sullivan
James Pearce
Tom Hughes-Croucher

Weitere ähnliche Inhalte

Was ist angesagt?

[PHP 也有 Day] 垃圾留言守城記 - 用 Laravel 阻擋 SPAM 留言的奮鬥史
[PHP 也有 Day] 垃圾留言守城記 - 用 Laravel 阻擋 SPAM 留言的奮鬥史[PHP 也有 Day] 垃圾留言守城記 - 用 Laravel 阻擋 SPAM 留言的奮鬥史
[PHP 也有 Day] 垃圾留言守城記 - 用 Laravel 阻擋 SPAM 留言的奮鬥史Shengyou Fan
 
Banshun - OSGi-less modularity for Spring
Banshun - OSGi-less modularity for SpringBanshun - OSGi-less modularity for Spring
Banshun - OSGi-less modularity for Springm-khl
 
Ionic으로 모바일앱 만들기 #4
Ionic으로 모바일앱 만들기 #4Ionic으로 모바일앱 만들기 #4
Ionic으로 모바일앱 만들기 #4성일 한
 
Service Worker 201 (en)
Service Worker 201 (en)Service Worker 201 (en)
Service Worker 201 (en)Chang W. Doh
 
Hitchhiker's guide to the front end development
Hitchhiker's guide to the front end developmentHitchhiker's guide to the front end development
Hitchhiker's guide to the front end development정윤 김
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0Takuya Tejima
 
Instant and offline apps with Service Worker
Instant and offline apps with Service WorkerInstant and offline apps with Service Worker
Instant and offline apps with Service WorkerChang W. Doh
 
REST to JavaScript for Better Client-side Development
REST to JavaScript for Better Client-side DevelopmentREST to JavaScript for Better Client-side Development
REST to JavaScript for Better Client-side DevelopmentHyunghun Cho
 
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
 
Integrating Browserify with Sprockets
Integrating Browserify with SprocketsIntegrating Browserify with Sprockets
Integrating Browserify with SprocketsSpike Brehm
 
Building Isomorphic Apps (JSConf.Asia 2014)
Building Isomorphic Apps (JSConf.Asia 2014)Building Isomorphic Apps (JSConf.Asia 2014)
Building Isomorphic Apps (JSConf.Asia 2014)Spike Brehm
 
Webpack Introduction
Webpack IntroductionWebpack Introduction
Webpack IntroductionAnjali Chawla
 
XSS Defeating Trick ~=ABK=~ WhitePaper
XSS Defeating Trick ~=ABK=~ WhitePaperXSS Defeating Trick ~=ABK=~ WhitePaper
XSS Defeating Trick ~=ABK=~ WhitePaperAbhishek Kumar
 
Introduction to AJAX In WordPress
Introduction to AJAX In WordPressIntroduction to AJAX In WordPress
Introduction to AJAX In WordPressCaldera Labs
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseAaron Silverman
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.jsTechExeter
 

Was ist angesagt? (20)

[PHP 也有 Day] 垃圾留言守城記 - 用 Laravel 阻擋 SPAM 留言的奮鬥史
[PHP 也有 Day] 垃圾留言守城記 - 用 Laravel 阻擋 SPAM 留言的奮鬥史[PHP 也有 Day] 垃圾留言守城記 - 用 Laravel 阻擋 SPAM 留言的奮鬥史
[PHP 也有 Day] 垃圾留言守城記 - 用 Laravel 阻擋 SPAM 留言的奮鬥史
 
Banshun - OSGi-less modularity for Spring
Banshun - OSGi-less modularity for SpringBanshun - OSGi-less modularity for Spring
Banshun - OSGi-less modularity for Spring
 
Ionic으로 모바일앱 만들기 #4
Ionic으로 모바일앱 만들기 #4Ionic으로 모바일앱 만들기 #4
Ionic으로 모바일앱 만들기 #4
 
Service Worker 201 (en)
Service Worker 201 (en)Service Worker 201 (en)
Service Worker 201 (en)
 
Hitchhiker's guide to the front end development
Hitchhiker's guide to the front end developmentHitchhiker's guide to the front end development
Hitchhiker's guide to the front end development
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
 
Workshop 21: React Router
Workshop 21: React RouterWorkshop 21: React Router
Workshop 21: React Router
 
Web-Performance
Web-PerformanceWeb-Performance
Web-Performance
 
Instant and offline apps with Service Worker
Instant and offline apps with Service WorkerInstant and offline apps with Service Worker
Instant and offline apps with Service Worker
 
REST to JavaScript for Better Client-side Development
REST to JavaScript for Better Client-side DevelopmentREST to JavaScript for Better Client-side Development
REST to JavaScript for Better Client-side Development
 
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
 
Integrating Browserify with Sprockets
Integrating Browserify with SprocketsIntegrating Browserify with Sprockets
Integrating Browserify with Sprockets
 
Browserify
BrowserifyBrowserify
Browserify
 
Building Isomorphic Apps (JSConf.Asia 2014)
Building Isomorphic Apps (JSConf.Asia 2014)Building Isomorphic Apps (JSConf.Asia 2014)
Building Isomorphic Apps (JSConf.Asia 2014)
 
Webpack Introduction
Webpack IntroductionWebpack Introduction
Webpack Introduction
 
An Intro into webpack
An Intro into webpackAn Intro into webpack
An Intro into webpack
 
XSS Defeating Trick ~=ABK=~ WhitePaper
XSS Defeating Trick ~=ABK=~ WhitePaperXSS Defeating Trick ~=ABK=~ WhitePaper
XSS Defeating Trick ~=ABK=~ WhitePaper
 
Introduction to AJAX In WordPress
Introduction to AJAX In WordPressIntroduction to AJAX In WordPress
Introduction to AJAX In WordPress
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash Course
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
 

Andere mochten auch

2012 11-28 rich web data modeling with graphs-1
2012 11-28 rich web data modeling with graphs-12012 11-28 rich web data modeling with graphs-1
2012 11-28 rich web data modeling with graphs-1Dmitry Makarchuk
 
A random forest approach to skin detection with r
A random forest approach to skin detection with rA random forest approach to skin detection with r
A random forest approach to skin detection with rDmitry Makarchuk
 
Hadoop and mysql by Chris Schneider
Hadoop and mysql by Chris SchneiderHadoop and mysql by Chris Schneider
Hadoop and mysql by Chris SchneiderDmitry Makarchuk
 
RBrowserPlugin Project (Gabriel Becker)
RBrowserPlugin Project (Gabriel Becker)RBrowserPlugin Project (Gabriel Becker)
RBrowserPlugin Project (Gabriel Becker)Dmitry Makarchuk
 
Mongo DB in gaming industry
Mongo DB in gaming industryMongo DB in gaming industry
Mongo DB in gaming industryDmitry Makarchuk
 
2012 11-28 rich web data modeling with graphs-1
2012 11-28 rich web data modeling with graphs-12012 11-28 rich web data modeling with graphs-1
2012 11-28 rich web data modeling with graphs-1Dmitry Makarchuk
 

Andere mochten auch (8)

2012 11-28 rich web data modeling with graphs-1
2012 11-28 rich web data modeling with graphs-12012 11-28 rich web data modeling with graphs-1
2012 11-28 rich web data modeling with graphs-1
 
A random forest approach to skin detection with r
A random forest approach to skin detection with rA random forest approach to skin detection with r
A random forest approach to skin detection with r
 
Hadoop and mysql by Chris Schneider
Hadoop and mysql by Chris SchneiderHadoop and mysql by Chris Schneider
Hadoop and mysql by Chris Schneider
 
RBrowserPlugin Project (Gabriel Becker)
RBrowserPlugin Project (Gabriel Becker)RBrowserPlugin Project (Gabriel Becker)
RBrowserPlugin Project (Gabriel Becker)
 
I search powerpoint
I search powerpointI search powerpoint
I search powerpoint
 
Linzer slides-barug
Linzer slides-barugLinzer slides-barug
Linzer slides-barug
 
Mongo DB in gaming industry
Mongo DB in gaming industryMongo DB in gaming industry
Mongo DB in gaming industry
 
2012 11-28 rich web data modeling with graphs-1
2012 11-28 rich web data modeling with graphs-12012 11-28 rich web data modeling with graphs-1
2012 11-28 rich web data modeling with graphs-1
 

Ähnlich wie "Your script just killed my site" by Steve Souders

High Performance Snippets
High Performance SnippetsHigh Performance Snippets
High Performance SnippetsSteve Souders
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)Steve Souders
 
JavaScript Perfomance
JavaScript PerfomanceJavaScript Perfomance
JavaScript PerfomanceAnatol Alizar
 
Build Your Own CMS with Apache Sling
Build Your Own CMS with Apache SlingBuild Your Own CMS with Apache Sling
Build Your Own CMS with Apache SlingBob Paulin
 
Deploying configurable frontend web application containers
Deploying configurable frontend web application containersDeploying configurable frontend web application containers
Deploying configurable frontend web application containersJosé Moreira
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patternsStoyan Stefanov
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance PatternsStoyan Stefanov
 
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyConsegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyFabio Akita
 
Chanhao Jiang And David Wei Presentation Quickling Pagecache
Chanhao Jiang And David Wei Presentation Quickling PagecacheChanhao Jiang And David Wei Presentation Quickling Pagecache
Chanhao Jiang And David Wei Presentation Quickling PagecacheAjax Experience 2009
 
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
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFabio Akita
 
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
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web appsFastly
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gearsdion
 
AFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack EncoreAFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack EncoreEngineor
 

Ähnlich wie "Your script just killed my site" by Steve Souders (20)

High Performance Snippets
High Performance SnippetsHigh Performance Snippets
High Performance Snippets
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
 
JavaScript Perfomance
JavaScript PerfomanceJavaScript Perfomance
JavaScript Perfomance
 
Sanjeev ghai 12
Sanjeev ghai 12Sanjeev ghai 12
Sanjeev ghai 12
 
Build Your Own CMS with Apache Sling
Build Your Own CMS with Apache SlingBuild Your Own CMS with Apache Sling
Build Your Own CMS with Apache Sling
 
Deploying configurable frontend web application containers
Deploying configurable frontend web application containersDeploying configurable frontend web application containers
Deploying configurable frontend web application containers
 
JavaScript performance patterns
JavaScript performance patternsJavaScript performance patterns
JavaScript performance patterns
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance Patterns
 
WCLA12 JavaScript
WCLA12 JavaScriptWCLA12 JavaScript
WCLA12 JavaScript
 
Webpack
Webpack Webpack
Webpack
 
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com RubyConsegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
 
Chanhao Jiang And David Wei Presentation Quickling Pagecache
Chanhao Jiang And David Wei Presentation Quickling PagecacheChanhao Jiang And David Wei Presentation Quickling Pagecache
Chanhao Jiang And David Wei Presentation Quickling Pagecache
 
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...
 
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com RubyFisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
 
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前端方面的经验
 
Progressive web apps
Progressive web appsProgressive web apps
Progressive web apps
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears
 
AFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack EncoreAFUP Lorraine - Symfony Webpack Encore
AFUP Lorraine - Symfony Webpack Encore
 

Kürzlich hochgeladen

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
 
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
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
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
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
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
 
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
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
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
 
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
 

Kürzlich hochgeladen (20)

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
 
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...
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
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
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
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
 
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
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
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.
 
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...
 

"Your script just killed my site" by Steve Souders

  • 1. Your script just killed my site stevesouders.com/docs/paypal-spof-20121115.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
  • 5. synchronous scripts block all following elements from rendering in all browsers
  • 7. async #fail async sync async
  • 11. entire BODY blocked from rendering
  • 16. mysql> select p.url, wptid from pages as p, requests as r
  • 17. mysql> select p.url, wptid from pages as p, requests as r where p.pageid >= 844954 and p.pageid <= 1564447 and p.pageid = r.pageid and
  • 18. mysql> select p.url, wptid from pages as p, requests as r where p.pageid >= 844954 and p.pageid <= 1564447 and p.pageid = r.pageid and rank < 20000 and
  • 19. mysql> select p.url, wptid from pages as p, requests as r where p.pageid >= 844954 and p.pageid <= 1564447 and p.pageid = r.pageid and rank < 20000 and resp_content_type like “%script%” and
  • 20. mysql> select p.url, wptid from pages as p, requests as r where p.pageid >= 844954 and p.pageid <= 1564447 and p.pageid = r.pageid and rank < 20000 and resp_content_type like “%script%” and time > 10000 and
  • 21. mysql> select p.url, wptid from pages as p, requests as r where p.pageid >= 844954 and p.pageid <= 1564447 and p.pageid = r.pageid and rank < 20000 and resp_content_type like “%script%” and time > 10000 and renderStart > 10000
  • 22. mysql> select p.url, wptid from pages as p, requests as r where p.pageid >= 844954 and p.pageid <= 1564447 and p.pageid = r.pageid and rank < 20000 and resp_content_type like “%script%” and time > 10000 and renderStart > 10000 group by p.pageid;
  • 37. async! #fail sync
  • 40. 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.
  • 41. three facts: 1. failures happen 2. 304 & 200 both produce frontend SPOF 3. anywhere.js expires after 15 minutes
  • 42. 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
  • 43. “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?
  • 44. self-updating bootstrap scripts with Stoyan Stefanov stevesouders.com/blog/2012/05/22/self-updating-scripts/
  • 45. client server bootstrap.js: current version var v=“1.7”; is 1.7 scriptelem.src = 200 “beacon.js?v=”+v; maxage=604800 beacon.js: ?v=1.7&log... 204
  • 46. client server next day… bootstrap.js: bootstrap.js read from cache updated to 1.8 beacon.js: ?v=1.7&log... 200 var iframe1 = document.createElement("iframe"); iframe1.style.display = "none”; iframe1.src = ”update.php"; document.body.appendChild(iframe1);
  • 47. client server update.php 200 bootstrap.js is still <script src=“bootstrap.js"> read from cache </script> <script> if (location.hash === '') { location.hash = "check”; location.reload(true); } </script> on reload bootstrap.js is re-requested and overwrites cache 200
  • 48. voilà bootstrap scripts can have long cache times AND get updated when necessary
  • 49. caveat the update is used on the next page view (like app cache)
  • 52. dynamic symbol loading: C void *handle; double (*cosine)(double); handle = dlopen("/lib/libm.so.6", RTLD_LAZY); if ( !handle ) { exit(1); } cosine = dlsym(handle, "cos"); if ( dlerror() != NULL ) { exit(1); }
  • 53. dynamic symbol loading: JavaScript <script src='mycombo.js'></script> <script> $('.content a, .huffpo-wide-container a').mousedown(function() {... </script> Wha?!
  • 55. dynamic symbol loading: JavaScript <script src='mycombo.js'></script> <script src='mycombo.js'> <script> $('.content a, .huffpo-wide-container $('.content a, .huffpo-wide-container a').mousedown(function() {... a').mousedown(function() {... </script> </script> at the end of mycombo.js: var scripts = document.getElementsByTagName("script"); for ( var cntr = scripts.length; cntr > 0; cntr-- ) { var curScript = scripts[cntr-1]; if (curScript.src.indexOf('mycombo.js') != -1) { eval( curScript.innerHTML ); break; } }
  • 56. we’re JavaScript & we mean business
  • 57. takeaways load 3rd party scripts async test with WebPagetest SPOF have RUM timeout self-update bootstrap scripts & increase cache times harden JS loading
  • 59. Steve Souders @souders stevesouders.com/docs/paypal-spof-20121115.pptx
  • 61. Patrick Meenan Nicholas Zakas Guy Podjarny Stoyan Stefanov Tim Kadlec Brian Pane Josh Fraser Steve Souders Betty Tso Israel Nir Marcel Duran Éric Daspet Alois Reitbauer Matthew Prince Buddy Brewer Alexander Podelko Estelle Weyl Aaron Peters Tony Gentilcore Matthew Steele Bryan McQuade Tobie LangelBilly Hoffman Joshua Bixby Sergey Chernyshev JP Castro Pavel Paulau David Calhoun Nicole Sullivan James Pearce Tom Hughes-Croucher

Hinweis der Redaktion

  1. http://www.flickr.com/photos/jocelynaubert/3100384270/
  2. http://www.flickr.com/photos/darwinbell/465459020/
  3. http://en.wikipedia.org/wiki/Single_point_of_failure
  4. WidgetsAdsAnalytics
  5. ----- Meeting Notes (11/15/12 16:02) -----If the backend server took 20-120 seconds to finish pagers would be going off.
  6. Later in the docs they talk about how the LATER resources are loaded async, but not this bootstrap script.All it takes is one.
  7. http://httparchive.webpagetest.org/result/120401_40_WFQG/
  8. http://httparchive.webpagetest.org/result/120515_5_4S4C/plusone.js and all.js are synchronous
  9. http://httparchive.webpagetest.org/result/120515_0_DNT/glamadapt_jsrv.act is inserted by wChannelModule.act using document.writelikecool is ranked 11KGlam Media is “the leader in curated social media content”
  10. http://httparchive.webpagetest.org/result/120301_AP_P4W3/rank #19Kall.js, widgets.js, eluminate.js all loaded sync
  11. http://httparchive.webpagetest.org/result/120401_8H_VTA3/
  12. http://httparchive.webpagetest.org/result/120315_VQ_QCZP/fonts
  13. http://httparchive.webpagetest.org/result/120515_0_35V/Their own CSS file
  14. http://www.flickr.com/photos/rusty-projector/225212919/Thanks for listening to my cautionary tale of woe and foreboding. But it’s not all doom and gloom.
  15. There is a brighter future where snippets aren’t a frontend SPOF.
  16. http://www.webpagetest.org/result/121115_B2_XM6/
  17. flickr.com/photos/wwarby/3296379139/
  18. flickr.com/photos/juditk/5024772809/whether it’s 1 or 5 requests, frontend SPOF will still happen
  19. http://tldp.org/HOWTO/Program-Library-HOWTO/dl-libraries.html
  20. http://tldp.org/HOWTO/Program-Library-HOWTO/dl-libraries.html
  21. http://tldp.org/HOWTO/Program-Library-HOWTO/dl-libraries.html
  22. http://www.flickr.com/photos/jpellgen/3345383578/
  23. flickr.com/photos/myklroventine/4062102754/
  24. http://www.flickr.com/photos/darwinbell/465459020/