Make JavaScript Faster

Make
JavaScript
Faster
Steve Souders
@souders
We should forget about
small efficiencies, say
about 97% of the time:
premature optimization
is the root of all evil.
Yet we should not pass
up our opportunities in
that critical 3%.
- Don Knuth
“
Make JavaScript Faster
Make JavaScript Faster
Start Render
First Paint
First Contentful Paint
First Meaningful Paint
DOM Interactive
DOM Content Loaded
DOM Complete
First Painted Hero
Last Painted Hero
Speed Index
First CPU Idle
Time to Interactive
Page Load
Visually Complete
0s 1s 2s 3s 4s 5s 6s
TTFB
DOM Content Loaded
Page Load
First Meaningful Paint
Speed Index
DOM Interactive
DOM Complete
First Contentful Paint
First CPU Idle
Time to Interactive
Visually Complete
medians from 1.3M sites
source: httparchive.org
First Paint
0s 2s 4s 6s 8s 12s 16s
TTFB
DOM Content Loaded
First Meaningful Paint
Speed Index
DOM Interactive
DOM Complete
First Contentful Paint
Time to Interactive
Visually Complete
mobile medians from 1.3M
sites
source: httparchive.org
1s 3s 5s 7s 9s 10s 15s14s13s11s
First Paint
First CPU Idle
Page Load
Make JavaScript Faster
Make JavaScript Faster
Make JavaScript Faster
IE 7
source: Pat Meenan
Preloader
(aka "Lookahead Parser")
Biggest performance improvement EVER!
Scans HTML for tags that make requests:
SCRIPT, LINK, IMG, etc.
Prioritizes and initiates requests before
tags are parsed.
source: speedcurve.com
IE 7
source: Pat Meenan
source: speedcurve.com
Make JavaScript Faster
browserscope.org
preloader in IE 8
IE 8
Opera 12
Safari 4
Firefox 3.5
Chrome 2
preloader
2009 2010 2011 2012 2013 2014
source: browserscope.org
source: speedcurve.com
IE 8
Opera 12
Safari 4
Firefox 3.5
Chrome 2
IE 10
Chrome 10
Firefox 3.6
Opera 14
Safari 6
preloader
async
2009 2010 2011 2012 2013 2014
source: browserscope.org
async hacks
source: speedcurve.com
async adoption
source: browserscope.org
Make JavaScript Faster
• load scripts async
• even better, prefer defer
source: speedcurve.com
Get scripts downloading earlier:
<link rel="preload"
href="main.js"
as="script">
Response header is even better:
Link: <main.js>;
rel="preload";
as="script"
https://www.chromestatus.com/metrics/feature/timeline/popularity/901
source: httparchive.org
Sites Using Preload
...for scripts in the main page
Make JavaScript Faster
• load scripts async
• even better, prefer defer
• preload scripts
source: speedcurve.com
median CPU time from 1.3M sites
JS = 433ms
source: httparchive.org
JS = 3648ms
source: httparchive.org
95th percentile CPU time from 1.3M sites
JS = 8113ms
source: httparchive.org
99th percentile CPU time from 1.3M sites
Mobile median CPU time from 1.3M sites
JS = 1121ms
source: httparchive.org
JS = 9833ms
source: httparchive.org
Mobile 95th percentile CPU time from 1.3M sites
JS = 19161ms
source: httparchive.org
Mobile 99th percentile CPU time from 1.3M sites
mobile 99th
mobile 95th
mobile median
desktop 95th
desktop median
desktop 99th
CPU time
Make JavaScript Faster
• load scripts async
• even better, prefer defer
• preload scripts
• reduce CPU time: EvaluateScript & FunctionCall
source: httparchive.org
4
12
6
5
JS requests
source: httparchive.org
53 K
258 K
106 K32 K
JS size
source: httparchive.org
4
12
6
5
53 K
258 K
106 K32 K
Make JavaScript Faster
• load scripts async
• even better, prefer defer
• preload scripts
• reduce CPU time: EvaluateScript & FunctionCall
• budget 3rd parties
Gzip missed opportunities
1. http://parts.blog.livedoor.jp/js/jquery-1.7.1.min.js
2. http://clap.blogcms.jp/js/jquery-1.11.1.min.js
3. https://cdn.schoolloop.com/.../jquery-1.8.2.min.js
4. https://c.sd1.fr/js/jquery-1.8.3.min.js
5. https://d1bxh8uas1mnw7.cloudfront.net/.../altmetric_badges...js
6. https://frontpagegui.linkfire.com/.../jquery.min.js
7. https://www.blogmura.com/.../jquery-1.11.1.min.js
8. http://static.tumblr.com/.../jquery.js
9. https://tags.onscroll.com/.../tag.min.js
10. http://d1ldansk2in7nt.cloudfront.net/.../v-1.7.1/jquery.min.js
Most Popular 1st Party
Ungzipped (90-100KB)
Make JavaScript Faster
• load scripts async
• even better, prefer defer
• preload scripts
• reduce CPU time: EvaluateScript & FunctionCall
• budget 3rd parties
• double-check compression
Make JavaScript Faster
Make JavaScript Faster
• load scripts async
• even better, prefer defer
• preload scripts
• reduce CPU time: EvaluateScript & FunctionCall
• budget 3rd parties
• double-check compression
• review code coverage
@souders
stevesouders.com/talks
1 of 47

More Related Content

Similar to Make JavaScript Faster(20)

performance.pptperformance.ppt
performance.ppt
fakeaccount22509516 views
3 Tips for a better mobile User Experience3 Tips for a better mobile User Experience
3 Tips for a better mobile User Experience
Klaus Enzenhofer323 views
Building Faster WebsitesBuilding Faster Websites
Building Faster Websites
Craig Walker774 views
Client Side Performance @ XeroClient Side Performance @ Xero
Client Side Performance @ Xero
Craig Walker2K views
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
John McCaffrey951 views
Performance-driven front-end developmentPerformance-driven front-end development
Performance-driven front-end development
youth Overturn1.2K views
Site Speed FundamentalsSite Speed Fundamentals
Site Speed Fundamentals
Martin Breest190 views

More from Steve Souders

Metrics of JoyMetrics of Joy
Metrics of JoySteve Souders
2.8K views34 slides
Design+PerformanceDesign+Performance
Design+PerformanceSteve Souders
4.9K views67 slides
do u webview?do u webview?
do u webview?Steve Souders
7.1K views41 slides

More from Steve Souders(20)

Metrics of JoyMetrics of Joy
Metrics of Joy
Steve Souders2.8K views
Design+PerformanceDesign+Performance
Design+Performance
Steve Souders4.9K views
Design+Performance Velocity 2015Design+Performance Velocity 2015
Design+Performance Velocity 2015
Steve Souders18.3K views
do u webview?do u webview?
do u webview?
Steve Souders7.1K views
High Performance Web ComponentsHigh Performance Web Components
High Performance Web Components
Steve Souders6.2K views
The Perception of SpeedThe Perception of Speed
The Perception of Speed
Steve Souders4.1K views
High Performance Web ComponentsHigh Performance Web Components
High Performance Web Components
Steve Souders10.3K views
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013
Steve Souders4.3K views
How fast are we going now?How fast are we going now?
How fast are we going now?
Steve Souders37.5K views
Cache is KingCache is King
Cache is King
Steve Souders6.6K views
High Performance SnippetsHigh Performance Snippets
High Performance Snippets
Steve Souders5.9K views
Your Script Just Killed My SiteYour Script Just Killed My Site
Your Script Just Killed My Site
Steve Souders10.5K views
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
Steve Souders22.8K views
High Performance Mobile (SF/SV Web Perf)High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
Steve Souders18.6K views
High Performance HTML5 (SF HTML5 UG)High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
Steve Souders15.3K views
@media - Even Faster Web Sites@media - Even Faster Web Sites
@media - Even Faster Web Sites
Steve Souders11.5K views
Souders WPO Web 2.0 ExpoSouders WPO Web 2.0 Expo
Souders WPO Web 2.0 Expo
Steve Souders6.9K views
JSConf US 2010JSConf US 2010
JSConf US 2010
Steve Souders6.5K views
CouchDB GoogleCouchDB Google
CouchDB Google
Steve Souders1.7K views

Recently uploaded(20)

ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web Developers
Maximiliano Firtman152 views
Green Leaf Consulting: Capabilities DeckGreen Leaf Consulting: Capabilities Deck
Green Leaf Consulting: Capabilities Deck
GreenLeafConsulting170 views
[2023] Putting the R! in R&D.pdf[2023] Putting the R! in R&D.pdf
[2023] Putting the R! in R&D.pdf
Eleanor McHugh34 views
The Research Portal of Catalonia: Growing more (information) & more (services)The Research Portal of Catalonia: Growing more (information) & more (services)
The Research Portal of Catalonia: Growing more (information) & more (services)
CSUC - Consorci de Serveis Universitaris de Catalunya51 views
METHOD AND SYSTEM FOR PREDICTING OPTIMAL LOAD FOR WHICH THE YIELD IS MAXIMUM ...METHOD AND SYSTEM FOR PREDICTING OPTIMAL LOAD FOR WHICH THE YIELD IS MAXIMUM ...
METHOD AND SYSTEM FOR PREDICTING OPTIMAL LOAD FOR WHICH THE YIELD IS MAXIMUM ...
Prity Khastgir IPR Strategic India Patent Attorney Amplify Innovation23 views
Liqid: Composable CXL PreviewLiqid: Composable CXL Preview
Liqid: Composable CXL Preview
CXL Forum118 views
CXL at OCPCXL at OCP
CXL at OCP
CXL Forum183 views

Make JavaScript Faster