Lightning-Fast
Web Performance
Scott Jehl, WebPageTest Team
Course Agenda
1. Introduction
2. Why Performance Matters
3. Metrics! How do we de ne fast?
4. Identifying Performance Problems
5. Making Things Faster
6. Wrapping Up
fi
Metrics.
How do we define fast?
Fully Loaded
Time to First Byte
Document Complete
First Paint
First Contentful Paint
Speed Index Page Weight
Time To Interactive
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
TTFB
Time to First Byte
the time between clicking a link and the first bit of
content coming in.
What contributes to TTFB?
Initial request to a website
DNS resolution to a to server's IP address
Establish connection with the server
Secure connection with the server
Potential redirects
Response
when it comes to your web browsing
“
experience, it turns out that latency, not
bandwidth, is likely the constraining factor
today.
Ilya Grigorik
https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
https://ma.ttias.be/googles-quic-protocol-moving-web-tcp-udp/
Server time impacts on TTFB
Generally, static pages need less server time
Dynamic pages tend to use more server time
Every 3rd party request:
New connection process
FP
First Paint
The first time pixels start to become visible to
the user.
Example.com please!
Sure! Here's the HTML rst.
fi
The render blockers
<head>
<link rel="stylesheet" href="site.css">
<script src="site.js"></script>
</head>
}
HTML CSS
BLANK
SCREEN
CSS
JS
JS
BLANK
SCREEN
FMP
First Meaningful Paint
The time when requested content (article body,
etc) starts to render meaningfully.
LCP
Largest Contentful Paint
The render time of the largest content element
visible in the viewport.
https://httparchive.org/reports/loading-speed#fcp
Key Probs: fetching fonts and images sooner, and pre-rendered content
https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
Early Paints Meaningful Paint
Key Probs: fetching fonts and images sooner, and pre-rendered content
Data URIs: often blocky as well.
<img src="data:text/
plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D…">
<script src="path-to-some-advertisement.js"></script>
https://twitter.com/scottjehl/status/1229275920600649728
http://requestmap.webperf.tools/render/190521_J6_a6cad51d836873feba5c4ecc29824feb
Dynamic Scripts can block render
document.write('<script src="hello.js"></script>);
https://addyosmani.com/blog/rehydration/
TTI
Time To Interactive
The time at which a page becomes interactive (events wired up, etc).
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
https://httparchive.org/reports/loading-speed#ttci
https://developers.google.com/speed/pagespeed/insights/?url=cnn.com&tab=desktop
https://developers.google.com/speed/pagespeed/insights/?url=cnn.com&tab=desktop
“
we feel your baseline should be getting interactive in
under 5 seconds on a slow 3G connection on a
median mobile device.
Addy Osmani
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
“
When creating great user experiences,
managing CPU usage is now just as
important as fast networks.
Mark Zeman, SpeedCurve
https://speedcurve.com/blog/your-javascript-hurts/
Other
Important Metrics…
First Input Delay… First CPU Idle….
Total blocking time… Cumulative layout shift…
Still important:
Fully Loaded
Not a user-perceivable metric (until they check their data bill!)
https://httparchive.org/reports/page-weight
Lightning-Fast
Web Performance
Scott Jehl, WebPageTest Team
