SlideShare a Scribd company logo

Improving 3rd Party Script Performance With IFrames

1 of 42
Improving 3rd Party Script Performance with
<IFRAME>s
Philip Tellis / philip@bluesmoon.info
Velocity 2013 / 2013-06-20
Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 1
• Philip Tellis
• @bluesmoon
• philip@bluesmoon.info
• SOASTA
Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 2
Do you use JavaScript?
Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 3
<script src="..."></script>
Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 4
<script src>
• Works well with browser lookahead
• But blocks everything
• Yes, you can use async or defer
Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 5
Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 6

Recommended

Oleh Kobchenko - Configure Magento 2 to get maximum performance
Oleh Kobchenko - Configure Magento 2 to get maximum performanceOleh Kobchenko - Configure Magento 2 to get maximum performance
Oleh Kobchenko - Configure Magento 2 to get maximum performanceMeet Magento Italy
 
Magento 2 - An Intro to a Modern PHP-Based System - Northeast PHP 2015
Magento 2 - An Intro to a Modern PHP-Based System - Northeast PHP 2015Magento 2 - An Intro to a Modern PHP-Based System - Northeast PHP 2015
Magento 2 - An Intro to a Modern PHP-Based System - Northeast PHP 2015Joshua Warren
 
How To Install Magento 2 (updated for the latest version)
How To Install Magento 2 (updated for the latest version)How To Install Magento 2 (updated for the latest version)
How To Install Magento 2 (updated for the latest version)Magestore
 
Imagine recap-devhub
Imagine recap-devhubImagine recap-devhub
Imagine recap-devhubMagento Dev
 
Widget Summit 2008
Widget Summit 2008Widget Summit 2008
Widget Summit 2008Volkan Unsal
 
Magento 2 Deployment Automation: from 6 hours to 15 minutes - Max Pronko
Magento 2 Deployment Automation: from 6 hours to 15 minutes - Max PronkoMagento 2 Deployment Automation: from 6 hours to 15 minutes - Max Pronko
Magento 2 Deployment Automation: from 6 hours to 15 minutes - Max PronkoMax Pronko
 
Boost Magento perfomance with Queues
Boost Magento perfomance with QueuesBoost Magento perfomance with Queues
Boost Magento perfomance with QueuesManuele Menozzi
 

More Related Content

Viewers also liked

Learnings for Accessibility for iOS Platform
Learnings for Accessibility for iOS PlatformLearnings for Accessibility for iOS Platform
Learnings for Accessibility for iOS PlatformTasneem Sayeed
 
Dynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIADynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIAAccess iQ
 
Introduction to mobile accessibility - AccessU 2013
Introduction to mobile accessibility - AccessU 2013Introduction to mobile accessibility - AccessU 2013
Introduction to mobile accessibility - AccessU 2013Henny Swan
 
The Yahoo Social Accessibility Lab
The Yahoo Social Accessibility LabThe Yahoo Social Accessibility Lab
The Yahoo Social Accessibility LabNate Ebrahimoon
 
Ubiquitous Transactions - Financial Future and Accessibility
Ubiquitous Transactions - Financial Future and AccessibilityUbiquitous Transactions - Financial Future and Accessibility
Ubiquitous Transactions - Financial Future and AccessibilityTed Drake
 
Create Accessible Infographics
Create Accessible Infographics Create Accessible Infographics
Create Accessible Infographics Ted Drake
 
Designing for cognitive disabilities
Designing for cognitive disabilitiesDesigning for cognitive disabilities
Designing for cognitive disabilitiesRuth Ellison
 
Android Accessibility - The missing manual
Android Accessibility - The missing manualAndroid Accessibility - The missing manual
Android Accessibility - The missing manualTed Drake
 
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...Ted Drake
 
Mystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessibleMystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessibleTed Drake
 
CSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and PrioritizationCSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and PrioritizationSean Kelly
 
The 7 minute accessibility assessment and app rating system
The 7 minute accessibility assessment and app rating systemThe 7 minute accessibility assessment and app rating system
The 7 minute accessibility assessment and app rating systemAidan Tierney
 
Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)Adrian Roselli
 
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017Bill Tyler
 
Accessibility microinteractions: better user experience, happier developers
Accessibility microinteractions: better user experience, happier developersAccessibility microinteractions: better user experience, happier developers
Accessibility microinteractions: better user experience, happier developersAidan Tierney
 
A Multidisciplinary Approach to Universal Design
A Multidisciplinary Approach to Universal DesignA Multidisciplinary Approach to Universal Design
A Multidisciplinary Approach to Universal DesignAnders Skifte
 
Reusable acceptance criteria and test cases for accessibility
Reusable acceptance criteria and test cases for accessibilityReusable acceptance criteria and test cases for accessibility
Reusable acceptance criteria and test cases for accessibilityIntopia
 

Viewers also liked (18)

Random Hacks of Kindness
Random Hacks of KindnessRandom Hacks of Kindness
Random Hacks of Kindness
 
Learnings for Accessibility for iOS Platform
Learnings for Accessibility for iOS PlatformLearnings for Accessibility for iOS Platform
Learnings for Accessibility for iOS Platform
 
Dynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIADynamic and accessible web content with WAI-ARIA
Dynamic and accessible web content with WAI-ARIA
 
Introduction to mobile accessibility - AccessU 2013
Introduction to mobile accessibility - AccessU 2013Introduction to mobile accessibility - AccessU 2013
Introduction to mobile accessibility - AccessU 2013
 
The Yahoo Social Accessibility Lab
The Yahoo Social Accessibility LabThe Yahoo Social Accessibility Lab
The Yahoo Social Accessibility Lab
 
Ubiquitous Transactions - Financial Future and Accessibility
Ubiquitous Transactions - Financial Future and AccessibilityUbiquitous Transactions - Financial Future and Accessibility
Ubiquitous Transactions - Financial Future and Accessibility
 
Create Accessible Infographics
Create Accessible Infographics Create Accessible Infographics
Create Accessible Infographics
 
Designing for cognitive disabilities
Designing for cognitive disabilitiesDesigning for cognitive disabilities
Designing for cognitive disabilities
 
Android Accessibility - The missing manual
Android Accessibility - The missing manualAndroid Accessibility - The missing manual
Android Accessibility - The missing manual
 
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
 
Mystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessibleMystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessible
 
CSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and PrioritizationCSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and Prioritization
 
The 7 minute accessibility assessment and app rating system
The 7 minute accessibility assessment and app rating systemThe 7 minute accessibility assessment and app rating system
The 7 minute accessibility assessment and app rating system
 
Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)Mind your lang (for role=drinks at CSUN 2017)
Mind your lang (for role=drinks at CSUN 2017)
 
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
 
Accessibility microinteractions: better user experience, happier developers
Accessibility microinteractions: better user experience, happier developersAccessibility microinteractions: better user experience, happier developers
Accessibility microinteractions: better user experience, happier developers
 
A Multidisciplinary Approach to Universal Design
A Multidisciplinary Approach to Universal DesignA Multidisciplinary Approach to Universal Design
A Multidisciplinary Approach to Universal Design
 
Reusable acceptance criteria and test cases for accessibility
Reusable acceptance criteria and test cases for accessibilityReusable acceptance criteria and test cases for accessibility
Reusable acceptance criteria and test cases for accessibility
 

Similar to Improving 3rd Party Script Performance With IFrames

(PFC403) Maximizing Amazon S3 Performance | AWS re:Invent 2014
(PFC403) Maximizing Amazon S3 Performance | AWS re:Invent 2014(PFC403) Maximizing Amazon S3 Performance | AWS re:Invent 2014
(PFC403) Maximizing Amazon S3 Performance | AWS re:Invent 2014Amazon Web Services
 
Open Source Monitoring for Java with JMX and Graphite (GeeCON 2013)
Open Source Monitoring for Java with JMX and Graphite (GeeCON 2013)Open Source Monitoring for Java with JMX and Graphite (GeeCON 2013)
Open Source Monitoring for Java with JMX and Graphite (GeeCON 2013)Cyrille Le Clerc
 
How To Build a Multi-Field Search Page For Your XPages Application
How To Build a Multi-Field Search Page For Your XPages ApplicationHow To Build a Multi-Field Search Page For Your XPages Application
How To Build a Multi-Field Search Page For Your XPages ApplicationMichael McGarel
 
JavaScript Patterns and Principles
JavaScript Patterns and PrinciplesJavaScript Patterns and Principles
JavaScript Patterns and PrinciplesAaronius
 
MeasureCamp IX (London) - 10 JavaScript Concepts for web analysts
MeasureCamp IX (London) - 10 JavaScript Concepts for web analystsMeasureCamp IX (London) - 10 JavaScript Concepts for web analysts
MeasureCamp IX (London) - 10 JavaScript Concepts for web analystsSimo Ahava
 
Beginning AngularJS
Beginning AngularJSBeginning AngularJS
Beginning AngularJSTroy Miles
 
Monitoring using Prometheus and Grafana
Monitoring using Prometheus and GrafanaMonitoring using Prometheus and Grafana
Monitoring using Prometheus and GrafanaArvind Kumar G.S
 
SCMSWeb and Condor-G Demonstration
SCMSWeb and Condor-G DemonstrationSCMSWeb and Condor-G Demonstration
SCMSWeb and Condor-G DemonstrationSugree Phatanapherom
 
Rapid Application Development with WSO2 Platform
Rapid Application Development with WSO2 PlatformRapid Application Development with WSO2 Platform
Rapid Application Development with WSO2 PlatformWSO2
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSM R Rony
 
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSPablo Godel
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Grails & Angular: unleashing the dynamic duo
Grails & Angular: unleashing the dynamic duoGrails & Angular: unleashing the dynamic duo
Grails & Angular: unleashing the dynamic duoRubén Mondéjar Andreu
 
Flash Security, OWASP Chennai
Flash Security, OWASP ChennaiFlash Security, OWASP Chennai
Flash Security, OWASP Chennailavakumark
 
Keeping it small - Getting to know the Slim PHP micro framework
Keeping it small - Getting to know the Slim PHP micro frameworkKeeping it small - Getting to know the Slim PHP micro framework
Keeping it small - Getting to know the Slim PHP micro frameworkJeremy Kendall
 
Intro to WebSockets (in Java)
Intro to WebSockets (in Java)Intro to WebSockets (in Java)
Intro to WebSockets (in Java)osintegrators
 
Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...
Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...
Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...Nicholas Jansma
 
Javascript native OOP - 3 layers
Javascript native OOP - 3 layers Javascript native OOP - 3 layers
Javascript native OOP - 3 layers David Nguyen
 
Boost Test Coverage with Automated Visual Testing
Boost Test Coverage with Automated Visual TestingBoost Test Coverage with Automated Visual Testing
Boost Test Coverage with Automated Visual TestingJosiah Renaudin
 
JavaFX / JacpFX interaction with JSR356 WebSockets
JavaFX / JacpFX interaction with JSR356 WebSocketsJavaFX / JacpFX interaction with JSR356 WebSockets
JavaFX / JacpFX interaction with JSR356 WebSocketsAndy Moncsek
 

Similar to Improving 3rd Party Script Performance With IFrames (20)

(PFC403) Maximizing Amazon S3 Performance | AWS re:Invent 2014
(PFC403) Maximizing Amazon S3 Performance | AWS re:Invent 2014(PFC403) Maximizing Amazon S3 Performance | AWS re:Invent 2014
(PFC403) Maximizing Amazon S3 Performance | AWS re:Invent 2014
 
Open Source Monitoring for Java with JMX and Graphite (GeeCON 2013)
Open Source Monitoring for Java with JMX and Graphite (GeeCON 2013)Open Source Monitoring for Java with JMX and Graphite (GeeCON 2013)
Open Source Monitoring for Java with JMX and Graphite (GeeCON 2013)
 
How To Build a Multi-Field Search Page For Your XPages Application
How To Build a Multi-Field Search Page For Your XPages ApplicationHow To Build a Multi-Field Search Page For Your XPages Application
How To Build a Multi-Field Search Page For Your XPages Application
 
JavaScript Patterns and Principles
JavaScript Patterns and PrinciplesJavaScript Patterns and Principles
JavaScript Patterns and Principles
 
MeasureCamp IX (London) - 10 JavaScript Concepts for web analysts
MeasureCamp IX (London) - 10 JavaScript Concepts for web analystsMeasureCamp IX (London) - 10 JavaScript Concepts for web analysts
MeasureCamp IX (London) - 10 JavaScript Concepts for web analysts
 
Beginning AngularJS
Beginning AngularJSBeginning AngularJS
Beginning AngularJS
 
Monitoring using Prometheus and Grafana
Monitoring using Prometheus and GrafanaMonitoring using Prometheus and Grafana
Monitoring using Prometheus and Grafana
 
SCMSWeb and Condor-G Demonstration
SCMSWeb and Condor-G DemonstrationSCMSWeb and Condor-G Demonstration
SCMSWeb and Condor-G Demonstration
 
Rapid Application Development with WSO2 Platform
Rapid Application Development with WSO2 PlatformRapid Application Development with WSO2 Platform
Rapid Application Development with WSO2 Platform
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
 
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJS
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
 
Grails & Angular: unleashing the dynamic duo
Grails & Angular: unleashing the dynamic duoGrails & Angular: unleashing the dynamic duo
Grails & Angular: unleashing the dynamic duo
 
Flash Security, OWASP Chennai
Flash Security, OWASP ChennaiFlash Security, OWASP Chennai
Flash Security, OWASP Chennai
 
Keeping it small - Getting to know the Slim PHP micro framework
Keeping it small - Getting to know the Slim PHP micro frameworkKeeping it small - Getting to know the Slim PHP micro framework
Keeping it small - Getting to know the Slim PHP micro framework
 
Intro to WebSockets (in Java)
Intro to WebSockets (in Java)Intro to WebSockets (in Java)
Intro to WebSockets (in Java)
 
Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...
Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...
Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...
 
Javascript native OOP - 3 layers
Javascript native OOP - 3 layers Javascript native OOP - 3 layers
Javascript native OOP - 3 layers
 
Boost Test Coverage with Automated Visual Testing
Boost Test Coverage with Automated Visual TestingBoost Test Coverage with Automated Visual Testing
Boost Test Coverage with Automated Visual Testing
 
JavaFX / JacpFX interaction with JSR356 WebSockets
JavaFX / JacpFX interaction with JSR356 WebSocketsJavaFX / JacpFX interaction with JSR356 WebSockets
JavaFX / JacpFX interaction with JSR356 WebSockets
 

More from Philip Tellis

Improving D3 Performance with CANVAS and other Hacks
Improving D3 Performance with CANVAS and other HacksImproving D3 Performance with CANVAS and other Hacks
Improving D3 Performance with CANVAS and other HacksPhilip Tellis
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonPhilip Tellis
 
Frontend Performance: De débutant à Expert à Fou Furieux
Frontend Performance: De débutant à Expert à Fou FurieuxFrontend Performance: De débutant à Expert à Fou Furieux
Frontend Performance: De débutant à Expert à Fou FurieuxPhilip Tellis
 
Frontend Performance: Expert to Crazy Person
Frontend Performance: Expert to Crazy PersonFrontend Performance: Expert to Crazy Person
Frontend Performance: Expert to Crazy PersonPhilip Tellis
 
Beyond Page Level Metrics
Beyond Page Level MetricsBeyond Page Level Metrics
Beyond Page Level MetricsPhilip Tellis
 
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...Philip Tellis
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonPhilip Tellis
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonPhilip Tellis
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonPhilip Tellis
 
RUM Distillation 101 -- Part I
RUM Distillation 101 -- Part IRUM Distillation 101 -- Part I
RUM Distillation 101 -- Part IPhilip Tellis
 
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"Philip Tellis
 
The Statistics of Web Performance Analysis
The Statistics of Web Performance AnalysisThe Statistics of Web Performance Analysis
The Statistics of Web Performance AnalysisPhilip Tellis
 
Abusing JavaScript to Measure Web Performance
Abusing JavaScript to Measure Web PerformanceAbusing JavaScript to Measure Web Performance
Abusing JavaScript to Measure Web PerformancePhilip Tellis
 
Analysing network characteristics with JavaScript
Analysing network characteristics with JavaScriptAnalysing network characteristics with JavaScript
Analysing network characteristics with JavaScriptPhilip Tellis
 
A Node.JS bag of goodies for analyzing Web Traffic
A Node.JS bag of goodies for analyzing Web TrafficA Node.JS bag of goodies for analyzing Web Traffic
A Node.JS bag of goodies for analyzing Web TrafficPhilip Tellis
 
Messing with JavaScript and the DOM to measure network characteristics
Messing with JavaScript and the DOM to measure network characteristicsMessing with JavaScript and the DOM to measure network characteristics
Messing with JavaScript and the DOM to measure network characteristicsPhilip Tellis
 

More from Philip Tellis (20)

Improving D3 Performance with CANVAS and other Hacks
Improving D3 Performance with CANVAS and other HacksImproving D3 Performance with CANVAS and other Hacks
Improving D3 Performance with CANVAS and other Hacks
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person
 
Frontend Performance: De débutant à Expert à Fou Furieux
Frontend Performance: De débutant à Expert à Fou FurieuxFrontend Performance: De débutant à Expert à Fou Furieux
Frontend Performance: De débutant à Expert à Fou Furieux
 
Frontend Performance: Expert to Crazy Person
Frontend Performance: Expert to Crazy PersonFrontend Performance: Expert to Crazy Person
Frontend Performance: Expert to Crazy Person
 
Beyond Page Level Metrics
Beyond Page Level MetricsBeyond Page Level Metrics
Beyond Page Level Metrics
 
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person
 
mmm... beacons
mmm... beaconsmmm... beacons
mmm... beacons
 
RUM Distillation 101 -- Part I
RUM Distillation 101 -- Part IRUM Distillation 101 -- Part I
RUM Distillation 101 -- Part I
 
Extending Boomerang
Extending BoomerangExtending Boomerang
Extending Boomerang
 
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
 
The Statistics of Web Performance Analysis
The Statistics of Web Performance AnalysisThe Statistics of Web Performance Analysis
The Statistics of Web Performance Analysis
 
Abusing JavaScript to Measure Web Performance
Abusing JavaScript to Measure Web PerformanceAbusing JavaScript to Measure Web Performance
Abusing JavaScript to Measure Web Performance
 
Rum for Breakfast
Rum for BreakfastRum for Breakfast
Rum for Breakfast
 
Analysing network characteristics with JavaScript
Analysing network characteristics with JavaScriptAnalysing network characteristics with JavaScript
Analysing network characteristics with JavaScript
 
A Node.JS bag of goodies for analyzing Web Traffic
A Node.JS bag of goodies for analyzing Web TrafficA Node.JS bag of goodies for analyzing Web Traffic
A Node.JS bag of goodies for analyzing Web Traffic
 
Input sanitization
Input sanitizationInput sanitization
Input sanitization
 
Messing with JavaScript and the DOM to measure network characteristics
Messing with JavaScript and the DOM to measure network characteristicsMessing with JavaScript and the DOM to measure network characteristics
Messing with JavaScript and the DOM to measure network characteristics
 

Recently uploaded

Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...DianaGray10
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...UiPathCommunity
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeJosh Gellers
 
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...2toLead Limited
 
Revolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, MonzoRevolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, MonzoProduct School
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceSusan Ibach
 
iOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingeriOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingerssuser9354ce
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...MichaelBenis1
 
New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024ThousandEyes
 
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...SearchNorwich
 
Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Product School
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1Inbay UK
 
Geospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriGeospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriSafe Software
 
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueVM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueShapeBlue
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceVijayananda Mohire
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfTejal81
 
AI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientAI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientKari Kakkonen
 
How to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanHow to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanDatabarracks
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewAshraf Fouad
 

Recently uploaded (20)

Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human Justice
 
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
 
Revolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, MonzoRevolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data science
 
iOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostingeriOncologi_Pitch Deck_2024 slide show for hostinger
iOncologi_Pitch Deck_2024 slide show for hostinger
 
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
 
New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024
 
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
 
Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1
 
Geospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriGeospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & Esri
 
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueVM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial Intelligence
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
 
AI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientAI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficient
 
How to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanHow to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response Plan
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book Review
 

Improving 3rd Party Script Performance With IFrames

  • 1. Improving 3rd Party Script Performance with <IFRAME>s Philip Tellis / philip@bluesmoon.info Velocity 2013 / 2013-06-20 Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 1
  • 2. • Philip Tellis • @bluesmoon • philip@bluesmoon.info • SOASTA Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 2
  • 3. Do you use JavaScript? Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 3
  • 4. <script src="..."></script> Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 4
  • 5. <script src> • Works well with browser lookahead • But blocks everything • Yes, you can use async or defer Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 5
  • 6. Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 6
  • 7. Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 7
  • 8. document.createElement("script"); Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 8
  • 9. dynamic script node 1 Loads in parallel with the rest of the page 2 Still blocks the onload event 3 No telling when it will load up Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 9
  • 10. The Method Queue Pattern Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 10
  • 11. MQP var _mq = _mq || []; var s = document.createElement("script"), t = document.getElementsByTagName("script")[0]; s.src="http://some.site.com/script.js"; t.parentNode.insertBefore(s, t); // script.js will be available some time in the // future, but we can call its methods _mq.push(["method1", list, of, params]); _mq.push(["method2", other, params]); Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 11
  • 12. MQP var self = this; _mq = _mq || []; while(_mq.length) { // remove the first item from the queue var params = _mq.shift(); // remove the method from the first item var method = params.shift(); self[method].apply(self, params); } _mq.push = function(params) { // remove the method from the first item var method = params.shift(); self[method].apply(self, params); } Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 12
  • 13. That takes care of #3 Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 13
  • 14. But we still block onload Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 14
  • 15. IFRAMEs to the rescue Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 15
  • 16. But IFRAMEs block onload until the subpage has loaded Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 16
  • 17. (This sub-page intentionally left blank) Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 17
  • 18. So here’s the code – Section I // Section 1 - Create the iframe var dom,doc,where, iframe = document.createElement("iframe"); iframe.src = "javascript:false"; (iframe.frameElement || iframe).style.cssText = "width: 0; height: 0; border: 0"; where = document.getElementsByTagName("script"); where = where[where.length - 1]; where.parentNode.insertBefore(iframe, where); Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 18
  • 19. javascript:false is key to solving most cross-domain issues Ask me about about:blank Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 19
  • 20. Except if the page developer sets document.domain Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 20
  • 21. Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 21
  • 22. The code – Section II // Section 2 - handle document.domain try { doc = iframe.contentWindow.document; } catch(e) { dom = document.domain; iframe.src = "javascript:var d=document.open();" + "d.domain=’" + dom + "’;" + "void(0);"; doc = iframe.contentWindow.document; } Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 22
  • 23. Only set document.domain if it has already been set! Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 23
  • 24. The code – Section III // Section 3 - tell the iframe to load our script doc.open()._l = function() { var js = this.createElement("script"); if(dom) this.domain = dom; js.id = "js-iframe-async"; js.src = script_url; this.body.appendChild(js); }; doc.write(’<body onload="document._l();">’); doc.close(); Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 24
  • 25. Notice that we’ve set document.domain again Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 25
  • 26. Inside this function, document is the parent document and this is the iframe! Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 26
  • 27. Also, global variables inside _l() are global to the parent window Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 27
  • 28. Modify the MQP for IFRAME support GLOBAL = window; // Running in an iframe, and our script node’s // id is js-iframe-async if(window.parent != window && document.getElementById("js-iframe-async")) { GLOBAL = window.parent; } GLOBAL._mq = GLOBAL._mq || []; _mq = GLOBAL._mq; Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 28
  • 29. GLOBAL refers to the parent window and window refers to the iframe Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 29
  • 30. So attach events to GLOBAL Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 30
  • 31. Summary • Create an iframe with src set to javascript:false • Set document.domain if needed (twice) • Write dynamic script node into iframe on iframe’s onload event • Alias parent window into iframe Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 31
  • 32. Result: Happy Customers Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 32
  • 33. Read all about it • http://lognormal.com/blog/2012/12/12/the-script-loader- pattern/ • https://www.w3.org/Bugs/Public/show_bug.cgi?id=21074 Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 33
  • 34. Cache busting with a far-future expires header Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 34
  • 35. Some more code... Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 35
  • 36. location.reload(true); Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 36
  • 37. More completely <script src="SCRIPT.js"></script> <script> var reqd_ver = location.search; window.onload = function() { var ver = SCRIPT.version; if (ver < reqd_ver) { location.reload(true); } }; </script> The condition protects us from an infinite loop with bad proxies and Firefox 3.5.11 Note: Don’t use location.hash – it messes with history on IE8. Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 37
  • 38. And the blog post... http://www.lognormal.com/blog/2012/06/17/more- on-updating-boomerang/ Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 38
  • 39. Join us right after this guy... Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 39
  • 40. Revolutionary RUM 1 Combine 1oz Cane Rum, 3/4oz Blood Orange Puree, & 1/2oz citrus infused syrup in a mixing glass 2 Add ice and shake vigourously 3 Strain into a chilled cocktail glass 4 Top with lime-mint foam 17:45, Evolution Café + Bar, Hyatt Lobby Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 40
  • 41. • Philip Tellis • @bluesmoon • philip@bluesmoon.info • www.SOASTA.com • boomerang • LogNormal Blog Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 41
  • 42. Image Credits • Stop Hammertime by Rich Anderson http://www.flickr.com/photos/memestate/54408373/ • Nicholas Zakas by Ben Alman http://www.flickr.com/photos/rj3/5635837522/ Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 42