SlideShare a Scribd company logo
NEW PERSPECTIVES
ON PERFORMANCE
     @mennovanslooten
  jQuery San Francisco 2012
HI, I’M MENNO



•I   live in The Netherlands

•I   make websites for http://www.aanzee.nl
Can you improve the
performance of this page?
A RACE CAR DRIVER
PILLARS OF PERFORMANCE


• Visibility

• Interactivity

• Responsiveness
Before you start optimizing...
ESTABLISH A BASELINE


• Measurable

• Repeatable

• Stable
Tip: Always focus first on
    low-hanging fruit
PILLAR 1:
        VISIBILITY
Going from about:blank to a styled web page
PILLAR 1: VISIBILITY



• Read  High Performance Web
 Sites by Steve Souders
PILLAR 1: VISIBILITY


• Install   Firebug and YSlow

• Do   whatever YSlow tells you (if you can do it in a day)

• Don’t     worry too much about the rest
Tip: Crowdsource your
  measurements with
   Google Analytics
<html>
    <head>
        <script>
	 	 	 	 	 __START__ = new Date;
	 	 	 	 </script>



$.ready(function() {
    var time = new Date - __START__;
    _gaq.push(
        '_trackEvent',
        'performance', 'dom_ready', '',
        time, true
    );
}
Tip: 8-bit PNG’s with alpha:
 http://www.8bitalpha.com/
PILLAR 2:
 INTERACTIVITY
Going from visible and styled to fully clickable
PILLAR 2: INTERACTIVITY



• Read Even Faster Web Sites
 by Steve Souders et al.
Tip: profile your $.ready()
// Don’t do this:
$.ready(function() {
    whatever_happens();
    here();
}

// to this:
$.ready(function() {
    console.profile();
    whatever_happens();
    here();
    console.profileEnd();
}
Tip: delay initialization
// Immediate init
$.ready(function() {
    function init() {
        // Do lots of stuff with #form
    }
    init();
});

// Delayed init
$.ready(function() {
    function init() {
        // Do lots of stuff with #form
    }
    $('#form').one('mouseenter', init);
});
PILLAR 3:
RESPONSIVENESS
Going from user action to visual feedback
PILLAR 3: RESPONSIVENESS



• Read High Performance
 JavaScript by Nicholas Zakas
Tip: throttle/debounce events
http://benalman.com/projects/jquery-throttle-debounce-plugin/
// Don’t do this:
$(‘input’).on(‘keydown’, someHandler);

// Do this:
$(‘input’).on(‘keydown’,
    $.debounce(500, someHandler));
// Don’t do this:
$(‘body’).on(‘mousemove’, someHandler);

// Do this:
$(‘body’).on(‘mousemove’,
    $.throttle(500, someHandler));
New Perspectives on Performance
Tip: this one is easiest to fake
NEW PERSPECTIVES
Performance optimizations
      are expensive
Performance optimizations
    can increase costs
THEM
ME
PHOTOGRAPHS


• http://www.flickr.com/photos/thehenryford/4929428611/

• http://www.flickr.com/photos/thehenryford/4930039724/

• http://www.flickr.com/photos/proctorarchives/6831872685/
THANK YOU
          menno.vanslooten@gmail.com
              @mennovanslooten




Thanks to Aan Zee (http://www.aanzee.nl) and the jQuery Foundation

More Related Content

What's hot

HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015
dmethvin
 
Beyond DOM Manipulations: Building Stateful Modules with Events and Promises
Beyond DOM Manipulations: Building Stateful Modules with Events and PromisesBeyond DOM Manipulations: Building Stateful Modules with Events and Promises
Beyond DOM Manipulations: Building Stateful Modules with Events and Promises
Crashlytics
 
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!
Raymond Camden
 
Sizzle jQCon San Francisco 2012
Sizzle jQCon San Francisco 2012Sizzle jQCon San Francisco 2012
Sizzle jQCon San Francisco 2012
livelogos
 
WordPress 2017 with VueJS and GraphQL
WordPress 2017 with VueJS and GraphQLWordPress 2017 with VueJS and GraphQL
WordPress 2017 with VueJS and GraphQL
houzman
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
dmethvin
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
dmethvin
 
Real World Web components
Real World Web componentsReal World Web components
Real World Web components
Jarrod Overson
 
Automated perf optimization - jQuery Conference
Automated perf optimization - jQuery ConferenceAutomated perf optimization - jQuery Conference
Automated perf optimization - jQuery Conference
Matthew Lancaster
 
Drupal point of vue
Drupal point of vueDrupal point of vue
Drupal point of vue
David Ličen
 
AngularJS for Legacy Apps
AngularJS for Legacy AppsAngularJS for Legacy Apps
AngularJS for Legacy Apps
Peter Drinnan
 
React Walk-Thru - Santa Cruz JS, May 2015
React Walk-Thru - Santa Cruz JS, May 2015React Walk-Thru - Santa Cruz JS, May 2015
React Walk-Thru - Santa Cruz JS, May 2015
Simon Sturmer
 
Vuejs for Angular developers
Vuejs for Angular developersVuejs for Angular developers
Vuejs for Angular developers
Mikhail Kuznetcov
 
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
Pablo Godel
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
David Ličen
 
Vue.js Getting Started
Vue.js Getting StartedVue.js Getting Started
Vue.js Getting Started
Murat Doğan
 
Going Node.js at Netflix
Going Node.js at NetflixGoing Node.js at Netflix
Going Node.js at Netflix
micahr
 
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
Holly Schinsky
 
Wulin kungfu final
Wulin kungfu finalWulin kungfu final
Wulin kungfu final
Jimmy Huang
 
Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Transforming Front-End Disaster Code™ Into A Maintainable MasterpieceTransforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Dan Gribbin
 

What's hot (20)

HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015HTTP 2.0 - Web Unleashed 2015
HTTP 2.0 - Web Unleashed 2015
 
Beyond DOM Manipulations: Building Stateful Modules with Events and Promises
Beyond DOM Manipulations: Building Stateful Modules with Events and PromisesBeyond DOM Manipulations: Building Stateful Modules with Events and Promises
Beyond DOM Manipulations: Building Stateful Modules with Events and Promises
 
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!
 
Sizzle jQCon San Francisco 2012
Sizzle jQCon San Francisco 2012Sizzle jQCon San Francisco 2012
Sizzle jQCon San Francisco 2012
 
WordPress 2017 with VueJS and GraphQL
WordPress 2017 with VueJS and GraphQLWordPress 2017 with VueJS and GraphQL
WordPress 2017 with VueJS and GraphQL
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
 
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
 
Real World Web components
Real World Web componentsReal World Web components
Real World Web components
 
Automated perf optimization - jQuery Conference
Automated perf optimization - jQuery ConferenceAutomated perf optimization - jQuery Conference
Automated perf optimization - jQuery Conference
 
Drupal point of vue
Drupal point of vueDrupal point of vue
Drupal point of vue
 
AngularJS for Legacy Apps
AngularJS for Legacy AppsAngularJS for Legacy Apps
AngularJS for Legacy Apps
 
React Walk-Thru - Santa Cruz JS, May 2015
React Walk-Thru - Santa Cruz JS, May 2015React Walk-Thru - Santa Cruz JS, May 2015
React Walk-Thru - Santa Cruz JS, May 2015
 
Vuejs for Angular developers
Vuejs for Angular developersVuejs for Angular developers
Vuejs for Angular developers
 
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
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
 
Vue.js Getting Started
Vue.js Getting StartedVue.js Getting Started
Vue.js Getting Started
 
Going Node.js at Netflix
Going Node.js at NetflixGoing Node.js at Netflix
Going Node.js at Netflix
 
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
 
Wulin kungfu final
Wulin kungfu finalWulin kungfu final
Wulin kungfu final
 
Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Transforming Front-End Disaster Code™ Into A Maintainable MasterpieceTransforming Front-End Disaster Code™ Into A Maintainable Masterpiece
Transforming Front-End Disaster Code™ Into A Maintainable Masterpiece
 

Similar to New Perspectives on Performance

Plugging into plugins
Plugging into pluginsPlugging into plugins
Plugging into plugins
Josh Harrison
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015
Matt Raible
 
Max Voloshin - "Organization of frontend development for products with micros...
Max Voloshin - "Organization of frontend development for products with micros...Max Voloshin - "Organization of frontend development for products with micros...
Max Voloshin - "Organization of frontend development for products with micros...
IT Event
 
Introduction to Angular
Introduction to AngularIntroduction to Angular
Introduction to Angular
Geoffrey Goodman
 
Good karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with KarmaGood karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with Karma
ExoLeaders.com
 
5 Tips for Writing Better JavaScript
5 Tips for Writing Better JavaScript5 Tips for Writing Better JavaScript
5 Tips for Writing Better JavaScript
Nael El Shawwa
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Matt Raible
 
AppForum 2014 Boost Hybrid App Performance
AppForum 2014 Boost Hybrid App PerformanceAppForum 2014 Boost Hybrid App Performance
AppForum 2014 Boost Hybrid App Performance
robgalvinjr
 
Hybrid Tips & Tricks
Hybrid Tips & TricksHybrid Tips & Tricks
Hybrid Tips & Tricks
Sashko Peshevski
 
Mobile App Feature Configuration and A/B Experiments
Mobile App Feature Configuration and A/B ExperimentsMobile App Feature Configuration and A/B Experiments
Mobile App Feature Configuration and A/B Experiments
lacyrhoades
 
Optimizely Developer Showcase
Optimizely Developer ShowcaseOptimizely Developer Showcase
Optimizely Developer Showcase
Optimizely
 
Introduction to Using PHP & MVC Frameworks
Introduction to Using PHP & MVC FrameworksIntroduction to Using PHP & MVC Frameworks
Introduction to Using PHP & MVC Frameworks
Gerald Krishnan
 
GCPUG meetup 201610 - Dataflow Introduction
GCPUG meetup 201610 - Dataflow IntroductionGCPUG meetup 201610 - Dataflow Introduction
GCPUG meetup 201610 - Dataflow Introduction
Simon Su
 
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)
arcware
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development
Jonas Päckos
 
Being Epic: Best Practices for Android Development
Being Epic: Best Practices for Android DevelopmentBeing Epic: Best Practices for Android Development
Being Epic: Best Practices for Android Development
Reto Meier
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
Jens-Christian Fischer
 
From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)
Bramus Van Damme
 
Writing JavaScript that doesn't suck
Writing JavaScript that doesn't suckWriting JavaScript that doesn't suck
Writing JavaScript that doesn't suck
Ross Bruniges
 
Javascript essential-pattern
Javascript essential-patternJavascript essential-pattern
Javascript essential-pattern
偉格 高
 

Similar to New Perspectives on Performance (20)

Plugging into plugins
Plugging into pluginsPlugging into plugins
Plugging into plugins
 
The Art of AngularJS in 2015
The Art of AngularJS in 2015The Art of AngularJS in 2015
The Art of AngularJS in 2015
 
Max Voloshin - "Organization of frontend development for products with micros...
Max Voloshin - "Organization of frontend development for products with micros...Max Voloshin - "Organization of frontend development for products with micros...
Max Voloshin - "Organization of frontend development for products with micros...
 
Introduction to Angular
Introduction to AngularIntroduction to Angular
Introduction to Angular
 
Good karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with KarmaGood karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with Karma
 
5 Tips for Writing Better JavaScript
5 Tips for Writing Better JavaScript5 Tips for Writing Better JavaScript
5 Tips for Writing Better JavaScript
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
 
AppForum 2014 Boost Hybrid App Performance
AppForum 2014 Boost Hybrid App PerformanceAppForum 2014 Boost Hybrid App Performance
AppForum 2014 Boost Hybrid App Performance
 
Hybrid Tips & Tricks
Hybrid Tips & TricksHybrid Tips & Tricks
Hybrid Tips & Tricks
 
Mobile App Feature Configuration and A/B Experiments
Mobile App Feature Configuration and A/B ExperimentsMobile App Feature Configuration and A/B Experiments
Mobile App Feature Configuration and A/B Experiments
 
Optimizely Developer Showcase
Optimizely Developer ShowcaseOptimizely Developer Showcase
Optimizely Developer Showcase
 
Introduction to Using PHP & MVC Frameworks
Introduction to Using PHP & MVC FrameworksIntroduction to Using PHP & MVC Frameworks
Introduction to Using PHP & MVC Frameworks
 
GCPUG meetup 201610 - Dataflow Introduction
GCPUG meetup 201610 - Dataflow IntroductionGCPUG meetup 201610 - Dataflow Introduction
GCPUG meetup 201610 - Dataflow Introduction
 
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)
10 Things Every Plugin Developer Should Know (WordCamp Atlanta 2013)
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development
 
Being Epic: Best Practices for Android Development
Being Epic: Best Practices for Android DevelopmentBeing Epic: Best Practices for Android Development
Being Epic: Best Practices for Android Development
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
 
From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)
 
Writing JavaScript that doesn't suck
Writing JavaScript that doesn't suckWriting JavaScript that doesn't suck
Writing JavaScript that doesn't suck
 
Javascript essential-pattern
Javascript essential-patternJavascript essential-pattern
Javascript essential-pattern
 

Recently uploaded

WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 

Recently uploaded (20)

WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 

New Perspectives on Performance

Editor's Notes

  1. \n
  2. The only obstacle between you and a couple of cold beers\nI know it&amp;#x2019;s been a long day of complex material\nDon&amp;#x2019;t worry, timed to about 25 minutes. As mentally challenging as Dora the Explorer\nBefore I get started I&amp;#x2019;d like to get to know you a little better\nBy show of hands, who here has ever received this simple request\n
  3. So many of you have heard this. The rest will down the line. \nSuch a simple question but so hard to answer correctly\nThrough this presentation I&amp;#x2019;d like to give you some tools to deal with it\nIdeas about how to approach the problem\nAnd some tips to help you identify the issues\nFirst, imagine this scenario\n
  4. \nJust asking for better performance is silly. Engineers are not magicians.\nAcceleration, top speed, handling in corners\nYou could call these the pillars of a race car&amp;#x2019;s performance\n
  5. In my experience, these are the three attributes that define a web page&amp;#x2019;s performance\nI will briefly go over each of them\n
  6. Now, I realize you want to get right down to business. \nStart fixing stuff, start improving code.\nDon&amp;#x2019;t.\nThere&amp;#x2019;s a couple of really important things that need to be taken care of\nFirst you need to establish a base line\n
  7. Measurable: you can express it in a number. time or operations\nRepeatable: these numbers don&amp;#x2019;t vary wildly between tests\nif your performance varies a lot, you don&apos;t have performance issues, you have a bug.\nStable: It&amp;#x2019;s safe to make changes because of automated testing\nAnd then: gather data on as many different platforms as possible\nThis data is your baseline.\n
  8. Don&amp;#x2019;t climb the tree for a coconut when there&amp;#x2019;s a banana right in front of you.\nUnless you really like coconuts.\nOr climbing.\n
  9. Simply said: how long does it take to look good?\n\n
  10. I know this is a cop-out but there&apos;s just too much good stuff in there.\nIt really is required reading.\nI do have some stuff to add\n
  11. Yahoo&amp;#x2019;s YSlow, or Google&amp;#x2019;s PageSpeed are tools that analyze your web page.\nVery useful tools in determining the low hanging fruit I was talking about earlier.\nBe careful though, because they also point out coconuts. \nBefore you know it you&amp;#x2019;re climbing a tree.\n\n
  12. Brace yourself. Code is coming.\n
  13. Google will save all the events and average the data.\nSee how long your average user takes.\nInclude this in your baseline.\n
  14. Simply said: 256-color PNG&apos;s with Alpha channel.\nDepending on how crazy your graphic designer is this can save 100s of KB\n
  15. Mostly dependent on what scripts are loaded and run\nFor jQuery projects, much of this will be in a $.ready() handler.\n
  16. For this sequel they really pulled out an all-star cast and it&apos;s just as gripping as the first one.\nI hear he&apos;s working on &quot;Faster Web sites Strike Back&quot;\n\n\n
  17. \n
  18. \n
  19. Initialize on first click\nCheck out Doug&amp;#x2019;s presentation tomorrow on contextual jquery\n
  20. \n
  21. \n
  22. In my experience the hardest to do right\nThe hardest to get significant results\nI can think of only one low-hanging fruit: repeating events\n
  23. Some events fire once in a while, like click events, or even mouse hover\nOthers fire a lot like a keydown event in an input\nOthers still, fire all the time\nThe last 2 categories benefit a lot from either throttling or debouncing\nThrottling: once every x milliseconds, useful for drag or resizing\nDebouncing: once before/after a series, useful for keyboard\n\n
  24. \n
  25. \n
  26. \n
  27. Responsiveness is quite easy to fake\nAll you have to do is give immediate visual feedback before doing something heavy\nSpinners, progress bars, animations, anything to show that something is happening.\n\n
  28. These 3 pillars are all different aspects of a web page&amp;#x2019;s performance but there is one thing that binds them:\nThey are from the user&amp;#x2019;s perspective\nBut there are other perspectives, like the business perspective. \nThere could be money involved\n
  29. Improving performance is a time-consuming iterative process\nLot&amp;#x2019;s of trial and error and testing and comparing\nThere is a lot to lose and little to gain. \nThe most important gain is user happiness\nBut there are other ways to improve that,\nPerformance optimizations are relatively invisible\n
  30. I&amp;#x2019;ve seen performance improvements that took one man 2 days to write\nand caused bugs that took weeks to fix in total\nunit tests will only catch so much. \nand don&amp;#x2019;t forget about maintainability. the better it performs the least flexible it probably is.\nI realize this may all sound blasphemous. Didn&amp;#x2019;t I just recommend books by famous yahoo &amp; google devs?\nI did, and I stand by that.\n\n\n
  31. They are the cream of the crop devs\nworking on projects where every ms and every kb is multiplied by millions and millions of users\nNo wonder they care so much about it\nMe? I&apos;m more this guy\n
  32. \nDoesn&amp;#x2019;t mean I can&amp;#x2019;t learn from them. Just need to weigh costs and benefits of their recommendations\nThe race car&amp;#x2019;s goal is not to drive fast but to win races.\nOur websites have goals as well. Provide info, user perform task, sometimes not clear.\nWebsite&amp;#x2019;s performance measured in how well it achieves those goals\nIt&apos;s about our performance, how well are we doing our job.\nAre we building web sites the world needs. Or are we just making them fast?\n
  33. \n
  34. \n