Scottjehl

Performance is
Accessibility
Scott Jehl
Performance is
part of Accessibility
Scott Jehl
https://blog.chriszacharias.com/page-weight-matters
Using a screenreader, audio described
https://marcysutton.com/accessibility-and-performance
Can optimizing performance
un-optimize accessibility?
It depends on how we
define fast…
https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
https://developers.google.com/web/tools/lighthouse/
https://developers.google.com/speed/pagespeed/insights/
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.cnn.com
"Perceived" Performance
https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
"Is it accessible?"
Visible doesn't mean meaningful
First contentful paint Page interactive
<div class="switch on"> <div class="switch on"

Use Large Fonts role="switch" tabindex="0"
</div> aria-checked="true">
Use large fonts
</div>
https://developer.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/
Visible doesn't mean meaningful
First contentful paint Page interactive
<div class="switch on"> <div class="switch on"

Use Large Fonts role="switch" tabindex="0"
</div> aria-checked="true">
Use large fonts
</div>
The "Perceived"
Performance Pitfall
5G
2011 2019
Worldwide 4G Coverage: 5% 79%
Mobile Javascript Transfer Size: 52kb 373kb

The SSR Pattern…
Visually Ready Long Wait Actually Ready
Server sends HTML

Browser renders page. Browser downloads Framework makes page
to the browser,
Page is not usable. javascript framework usable and interactive
Ready to be rendered
We are shifting
the burden
From the network
to the device
Delivering Fast
Easy, classic performance optimizations:
Optimize / Minify / Compress

More Weight != More Wait
3.9 secs 12.5 secs
http://www.filamentgroup.com/lab/weight-wait.html
TTFB
Time to First Byte

the time between clicking a link and the first bit of
content coming in.
Example.com please!
?
Speeding up TTFB
Distribute site files around the world on a CDN
Reduce non-essential redirects
Reduce dynamic server work time. Keep static or

cached output to deliver static populated files.
FP
First Contentful Paint

The first time pixels start to become visible to
the user.
Example.com please!
Sure! Here's the HTML first.

}
HTML CSS
BLANK
SCREEN
CSS
JS
JS
https://httparchive.org/reports/loading-speed
The render blockers
<head>
<link rel="stylesheet" href="site.css">
<script src="site.js"></script>
</head>
Unblocking render: async JS
<head>
<script src="site.js" defer></script>
<script src="site.js" async></script>
</head>
https://medium.com/the-telegraph-engineering/improving-third-party-web-performance-at-the-telegraph-a0a1000be5
Unblocking render: async CSS
<head>
<link rel="stylesheet" href="site.css"
media="print">
</head>
Unblocking render: defer
<head>
<link rel="stylesheet" href="site.css"

media="print" onload="this.media='all'">
</head>
Carry what you need
Pushing Files
index.html please?
Sure! And here’s the CSS too.

Referencing a pushed file
<head>
<link rel="stylesheet" href="site.css">
</head>
Push on .html requests
<If "%{DOCUMENT_URI} =~ /\.html/">
H2PushResource add site.css
</If>
Inlining files
“
If the external CSS resources are small, you
can insert those directly into the HTML
document, which is called inlining.
PageSpeed Insights
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
Inlining CSS
<head>
<style>
.header { background: #09878}
h1 { font-size: 1.2em; col… }
h2 { margin: 0; }
…
</style>
</head>
https://www.filamentgroup.com/lab/inlining-cache.html
Break files by global / local
<head>
<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="homepage.css">
<script src="global.js"></script>
<script src="homepage.js"></script>
</head>
To recap, free up first paint
Identify which css & JS is critical to block render
Serve those critical css and JS files either by:
Inlining
Or Server push
Load everything else async/deferred.

LCP
Largest Contentful Paint

The render time of the largest content element
visible in the viewport.
First Paint ~Largest~ Contentful Paint
Don’t just optimize images,
make them responsive
Responsive images
<img src="sml.jpg" srcset=“sml.jpg 300w, lrg.jpg

800w” sizes=“100vw”>
<picture>
<source srcset="large.png" media="(min-width:
800px)">
<source srcset="medium.jpg" media="(min-width:
400px)">
<img src="small.jpg" alt="…">
</picture>
Responsive images negotiate types too!
<picture>
<source srcset="awesome.webp" type="image/webp">
<img src="cool.jpg" alt="Alt Text!">
</picture>
https://addyosmani.com/blog/lazy-loading/
Loading Video
Performantly
Video - like picture syntax!
<video controls playsinline poster="somevideo.jpg" preload="none">

<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
</video>
Video - make it responsive too.
<video controls playsinline poster="somevideo.jpg">

<source src="somevideo-sml.webm" media="(max-width: 400px)"
type="video/webm">
<source src="somevideo-sml.mp4" media="(max-width: 400px)"
type="video/mp4">
<source src="somevideo-lrg.webm" type="video/webm">
<source src="somevideo-lrg.mp4" type="video/mp4">
</video>
Font rendering
Progressive font rendering
Standard
Optimized
CSS font-display
@font-face {
font-family: “Nice Serif”;
src: url(niceserif.woff2);
font-display: swap;
}
h1 {
font-family: “Nice Serif”, “Georgia”, serif;
}
Over-reliance on
JavaScript
for Content
Empty Body = Fragile/Slow!
<body>
<div id="app"></div>
</body>
<script>
createApp( "#app", data );
</script>
https://css-tricks.com/server-side-react-rendering/
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://www.filamentgroup.com/lab/select-css.html
https://www.filamentgroup.com/lab/select-css.html
We need more
inclusive
web performance metrics
https://github.com/GoogleChrome/lighthouse/issues/11049
Accessibility and
performance are not
enhancements.
“
My hope for coming out of this
pandemic is that we don’t return
to the status quo. Many don’t
realize that “normal” was actually
not great for a lot of people.
Alice Wong
https://www.esquire.com/news-politics/a32474779/alice-wong-interview-coronavirus-covid-19-lessons/
If a site isn’t accessible,
it isn’t done yet
Thank you!
Find me:
• @scottjehl
• scottjehl.com
• filamentgroup.com
New Course!

Scottjehl

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Scottjehl

Uploaded by

Copyright:

Available Formats

Performance is

First contentful paint Page interactive

<div class="switch on"> <div class="switch on"

First contentful paint Page interactive

<div class="switch on"> <div class="switch on"

Worldwide 4G Coverage: 5% 79%

Mobile Javascript Transfer Size: 52kb 373kb

Visually Ready Long Wait Actually Ready

Server sends HTML

Optimize / Minify / Compress

Time to First Byte

Distribute site files around the world on a CDN

Reduce non-essential redirects

Reduce dynamic server work time. Keep static or

First Contentful Paint

Sure! Here's the HTML first.

<link rel="stylesheet" href="site.css">

<script src="site.js" defer></script>

<script src="site.js" async></script>

<link rel="stylesheet" href="site.css"

Sure! And here’s the CSS too.

<link rel="stylesheet" href="site.css">

<If "%{DOCUMENT_URI} =~ /\.html/">

H2PushResource add site.css

<link rel="stylesheet" href="global.css">

Identify which css & JS is critical to block render

Serve those critical css and JS files either by:

Load everything else async/deferred.

Largest Contentful Paint

<img src="sml.jpg" srcset=“sml.jpg 300w, lrg.jpg

<video controls playsinline poster="somevideo.jpg" preload="none">

<video controls playsinline poster="somevideo.jpg">

You might also like