CSS
With traditional CSS,
hard to know what’s
being used
Slide 94
Slide 94 text
CSS: Code Splitting by Component
Code split with
styled-components,
render to plain CSS
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
Images
Slide 97
Slide 97 text
Images: “Resolution Switching”
Serve different images
based on screen size
Slide 98
Slide 98 text
Images: srcset and sizes
Slide 99
Slide 99 text
Images: Formats
Serve WebP to
browsers that support
it, with fallbacks
Slide 100
Slide 100 text
Images: Loading
Lazy-load images
below the fold to
reduce page weight
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
Fonts
Slide 103
Slide 103 text
Fonts: Preloading
Preload critical fonts
to minimize “flash of
unstyled text”
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
Fonts: Subsetting
Subset fonts based on
which characters are
actually being used
Slide 106
Slide 106 text
Compression
Slide 107
Slide 107 text
Compression: GZIP vs. Brotli
Compress assets with
Brotli for ~20%
smaller file sizes
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
H’istory
Optimizing
the Rest
Traditional
Rendering
Automation &
Measurement
Static
Rendering
The “Why?”
1 2 3
4 5 6
Slide 110
Slide 110 text
Automation
Automate as much
performance as you
can
Slide 111
Slide 111 text
Automation
Automation means
more time shipping
features
Slide 112
Slide 112 text
Monitoring
Keeping a site fast is
just as important as
building it fast
Slide 113
Slide 113 text
Synthetic vs. Real-User Monitoring
Synthetic for trends,
RUM for user insights
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
Speed as a Feature
When comparing
speed, 20% faster is
noticeable to users
Slide 116
Slide 116 text
Flamingo
First Meaningful Paint Comparison
Competitors / other ecommerce
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
Metrics
Prioritize metrics that
are tied to user
experience
Slide 119
Slide 119 text
RUM Problems
Many important RUM
metrics aren’t
available from Safari
Slide 120
Slide 120 text
RUM Problems
RUM with single-page
apps means you have
to define “done”
Slide 121
Slide 121 text
Process
Use performance
budgets to align site
goals with users
Slide 122
Slide 122 text
H’istory
Optimizing
the Rest
Traditional
Rendering
Automation &
Measurement
Static
Rendering
The “Why?”
1 2 3
4 5 6
Slide 123
Slide 123 text
Engineers
Web performance is
both quantitative and
qualitative
Slide 124
Slide 124 text
Business
Good web
performance helps
business metrics
Slide 125
Slide 125 text
Users
Web performance is
about users
Slide 126
Slide 126 text
Users
Web performance
determines which
users can use your site
Slide 127
Slide 127 text
Hello there,
Sincerely,
[redacted]
From beautiful Grand Lake, Oklahoma!
“I am a very heavy online shopper.
Living in a small resort town, I buy
literally every single thing we need
online except for fresh perishables.”
Slide 128
Slide 128 text
Hello there,
Sincerely,
[redacted]
From beautiful Grand Lake, Oklahoma!
“Your website conveyed a sense of a
quick and uncomplicated
transaction, and one that was built
for mobile users like me.”
Slide 129
Slide 129 text
Users
Building for
performance allows
you to serve all users