This document discusses ways to make JavaScript faster in web pages. It recommends loading scripts asynchronously or with defer, preloading scripts, reducing CPU time spent evaluating scripts and function calls, budgeting third-party scripts, ensuring proper compression of scripts, and reviewing code coverage to optimize performance.
2. 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
“
3.
4.
5. 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
6. 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
7. 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
12. 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.
