A presentation at beyond tellerrand in in Düsseldorf, Germany by Tim Kadlec
THE BIG PICTURE TIM KADLEC @TKADLEC
How quickly does the most important content get displayed on the screen?
Largest Contentful Paint (LCP) How long until the largest piece of content is displayed on the screen.
What counts as “content”? <img> - <image> inside svg - post images of <video> elements - background images - block-level text (h1, h2, p, etc) -
LCP Types 18% 27% 46% Mobile 51% Desktop 31% 27% Text Background Image Image
73% 82% on mobile on desktop
LCP at 75th percentile 2.573s 2.861s 3.071s text image background image
LCP at 75th percentile 2.861s 3.071s image background image
LCP at 75th percentile 2.861s 3.071s image background image
Network HTML JS DOM CSS CSSOM Render Tree Layout Paint
Network HTML JS DOM CSS CSSOM Render Tree Layout Paint
Network HTML JS DOM CSS The browser doesn’t know the image exists until the CSS is downloaded and parsed… CSSOM Render Tree Layout Paint
Network HTML JS DOM CSS …and it won’t request it until it knows it needs to be displayed. CSSOM Render Tree Layout Paint
Preload helps with discovery, but doesn’t impact priority
Network HTML JS DOM CSS CSSOM Render Tree Layout Paint
Network HTML JS DOM CSS The browser can find <img> elements pretty early…. CSSOM Render Tree Layout Paint
Network HTML JS DOM CSS CSSOM Render Tree Layout Paint …but it doesn’t want those images to delay the more important CSS and JS.
Document: High Scripts: High CSS: High Images: Low Fonts: Medium
Document: Highest Scripts: Normal CSS: Normal Images: Low Fonts: High
Document: Highest Scripts: Low-High CSS: Highest Images: Low-High Fonts: High-Highest
U … . h o h
Priority Hints to the rescue?
fetchPriority=”high” fetchPriority=”low”
Document: Highest Scripts: Low-High CSS: Highest Images: Low-High Fonts: High-Highest
LCP at 75th percentile 2.861s 3.071s image background
/> data-tracking-event=”button-click” data-tracking-info=”{“name”:”clickthrough”,”placeme class=”bose-zoom lazyload” data-lazy=”//assets.bose.com/content/dam/Bose_DAM/Web/consumer_electron alt=”Bose Noise Cancelling Headphones 700” data-sizes=”auto” data-zoom-image=”//assets.bose.com/content/dam/Bose_DAM/Web/consumer_el itemprop=”contentURL” data-srcset=”//assets.bose.com/content/dam/Bose_DAM/Web/consumer_electr
No src?
Network HTML JS DOM CSS CSSOM Render Tree Layout Paint
Network HTML JS DOM CSS CSSOM Render Tree Layout Paint The browser sees an <img>, but with no src, it has no idea what to request until JS is downloaded, parsed and executed.
Markup is your <friend>
From #111 and LCP of ~11.5s
…to #78 and LCP of ~6.3s
<img src=”hero.jpg” loading=”eager”> <img src=”other.jpg” loading=”lazy”>
100 cute kitten photos
Based on viewport
Based on viewport
Based on viewport & connection
4G, 5 total 3G, 8 total 2G, 21 total
Always bet on the browser
//assets.bose.com/content/dam/…
A tale of two domains…
The browser has to establish a connection to the new domain
fi https://res.cloudinary.com /webpagetest /image /upload/ f_auto,q_auto,c_ ll,w_640,h_512/Frame_1_1_dqtcfv.png
Get your buzzword bingo cards ready…..
Get your buzzword bingo cards ready….. Edge Computing
fi https://blog.webpagetest/org/cloudinary /webpagetest /image /upload/ f_auto,q_auto,c_ ll,w_640,h_512/Frame_1_1_dqtcfv.png
// cloudinary.js export default async function (request) { const url = new URL(request.url); url.pathname = url.pathname.substring(11); // remove /cloudinary url.hostname = “res.cloudinary.com”; }; const image = await fetch(url.toString(), request); return image;
// cloudinary.js export default async function (request) { url.pathname = url.pathname.substring(11); // remove /cloudinary url.hostname = “res.cloudinary.com”; };
// cloudinary.js export default async function (request) { return image;
[[edge_functions]] path = “/cloudinary/*” function = “cloudinary.js”
Largest Contentful Paint t n e m e v o r p m i n a e m s m 8 8 4 ~ of
Lots of bandwidth available
Only a couple requests early
fetchPriority=”high” fetchPriority=”low”
<img
s m 0 4 6 ~ of
First Contentful Paint n o i s s e r g e r n a me s m 5 4 1 ~ f o
3.6s to 2.8s
2.7s to 2.1s
LCP & Images Checklist ⛔ Avoid background images ✅ If you must, then pair background image + preload ✅ Use fetchpriority sparingly for a little boost in Chrome/Edge ✅ Load your LCP images from your main domain ⛔ Don’t lazy-load your LCP image! ✅ Use loading attribute to replace JS lazy-loading
Largest Contentful Paint (LCP)
A more robust measurement Measure image load even when not the LCP Measure in Firefox & Safari
<img elementtiming=”post-hero”
let observer = new PerformanceObserver((list) PerformanceObserver => { for (const entry of list.getEntries()){ console.info(entry); } }); observer.observe({type: type: ‘element’, ‘element’ buffered: true}); true
let observer = new PerformanceObserver((list) => {
Measure in Firefox & Safari
<img src=”hero.jpg” onload=”performance.mark(‘hero1’)”> <script>performance.mark(‘hero2’)</script>
<img class=”post__figure-image” src=”/cloudinary/image/upload/ f_auto,q_auto,c_fill,w_640,h_512/Frame_1_1_dqtcfv.png” srcset=”…” width=”640” height=”512” sizes=”(min-width: 44em) 40rem, 90vw” elementtiming=”post-hero” onload=”performance.mark(‘post-hero2’)” /> <script>performance.mark(‘post-hero3’)</script>
1.377s post-hero3 <script> 1.467s post-hero2 onload
3.542s post-hero3 <script> 5.448s post-hero2 onload
A more robust measurement ✅ Measure image load even when not the LCP ✅ Measure in Firefox & Safari
Why bother?
We’re using metrics supported in two major browsers….
…optimizing for goals (CrUX) based on one browser….
…and measuring with tools that work in one browser.
Meanwhile in Germany…. 47.1% 19.1% 12.8% 6.8%
Web Performance
Remember why we’re doing it….
How easy it to use? Does the functionality meet my needs? Does the functionality work? Is the site fast enough? Is the site available?
“When we design and build our websites with the outliers in mind, whether it’s for performance or even user experience, we build an experience that can be easy for all to access and use — and that’s what the web is about, access and information for all.” - Stephanie Stimac, Program Manager for Edge Developer Experiences
Performance is foundational
THANK YOU! TIM KADLEC @TKADLEC
One of the most important performance metrics we have for determining how quickly we get meaningful content onto the screen for our site’s visitors is the Largest Contentful Paint. Improving this metric, as it turns out, goes hand in hand with understanding image loading — just under 75% of all Largest Contentful Paint’s are triggered by images or background images, and the way those images are loaded has a dramatic impact.
Let’s talk about how browsers load images today, common approaches that are slowing us down today, the techniques we have to make things faster and what we can do to make sure that we’re not just optimizing for a single browser engine along the way.
The following resources were mentioned during the presentation or are useful additional information.
Great post from the Chrome team explaining the new priority hint attribute.
Classic post from Steve Souders about how to measure when an image gets displayed on a page (predates LCP by several years).
A wonderfully written post by Stephanie Stimac about battling connectivity issues and how focusing on things like performance can help improve access for all
Here’s what was said about this presentation on social media.
for free. You
can too.