$\"\"$ $\"\"$ <\/div>

See how the waterfall pulls back to the left without the CSS redirect.<\/figcaption><\/figure>\n\n\n

Identified Problem #3) CLS on the Grid Guide is Bad<\/h3>\n\n\n
Tim had a neat trick up his sleeve for measuring Cumulative Layout Shift (CLS) on pages. You can instruct WebPageTest to scroll down the page for you. This is important for something like CLS, because layout shifting might happen on account of scrolling. <\/p>\n\n\n\n
See this article about CLS and WebPageTest.<\/a><\/p>\n\n\n\n
The trick is using an advanced setting to inject custom JavaScript into the page during the test:<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
At this point, we were testing not the homepage, but purposefully a very important page: our Complete Guide to Grid<\/a>. With this in place, you can see the CWV are in much worse shape:<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
I don’t know what to think exactly about the LCP. That’s being triggered by what happens to be the largest image pretty far down the page. <\/p>\n\n\n\n
$\"\"$
I’m not terribly worried about the LCP with the scrolling in place. That’s just some image like any other on the page, lazily loaded. <\/figcaption><\/figure>\n\n\n\n
The CLS is more concerning, to me, because any<\/em> shifting layout is always obnoxious to users. See all these dotted orange lines? That is CLS happening:<\/p>\n\n\n\n
$\"\"$ The orange CLS lines correlate with images loading (as the page scrolls down and the lazy loaded images come in). <\/figcaption><\/figure>\n\n\n\n
Things to fix:<\/p>\n\n\n\n
CLS is bad because of lazy loaded images coming in and shifting the layout.<\/li><\/ul>\n\n\n\n
Fixing technique and learnings:<\/p>\n\n\n\n
I don’t know! All those images are inline <img loading=\"lazy\" ...><\/code> elements. I get that lazy loading could<\/em> cause CLS, but these images have proper width<\/code> and height<\/code> attributes, which is supposed to reserve the exact space necessary for the image<\/a> (even when fluid, thanks to aspect ratio) even before it loads. So… what gives? Is it because they are SVG? <\/li><\/ul>\n\n\n\nIf anyone does know, feel free to hit me up. Such is the nature of performance work, I find. It’s a mixture of easy wins from silly mistakes, little battles you can fight and win, bigger battles that sometimes involves outside influences that are harder to win, and mysterious unknowns that it takes time to heal. Fortunately we have tools like WebPageTest<\/a> to tell us the real stories happening on our site and give us the insight we need to fight these performance battles.<\/p>\n\n\n\n \n\n\n\n\nRIBBI, I just learned, means Regular, Italic, Bold, and Bold Italic. The classic combo that most body copy on the web needs. \u2b91<\/a><\/li><\/ol>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"I got together with Tim Kadlec from over at WebPageTest the other day to use do a bit of performance […]<\/p>\n","protected":false},"author":3,"featured_media":345435,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4,508],"tags":[592,18961],"class_list":["post-345169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","category-sponsored","tag-performance","tag-webpagetest"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-27-at-7.16.53-AM.png?fit=2504%2C1710&ssl=1","jetpack-related-posts":[{"id":244107,"url":"https:\/\/css-tricks.com\/use-webpagetest-api\/","url_meta":{"origin":345169,"position":0},"title":"How To Use WebPageTest and its API","author":"Eduardo Bou\u00e7as","date":"August 23, 2016","format":false,"excerpt":"While the richness and interactivity of the average website has changed dramatically over the last decade, the same can be said about the expectations of those who consume it. This page has a list of reports that show how businesses were able to establish a direct correlation between the their\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/08\/Screen-Shot-2016-07-31-at-00.21.04-300x225.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":296522,"url":"https:\/\/css-tricks.com\/recipes-for-performance-testing-single-page-applications-in-webpagetest\/","url_meta":{"origin":345169,"position":1},"title":"Recipes for Performance Testing Single Page Applications in WebPageTest","author":"Nicolas Goutay","date":"October 10, 2019","format":false,"excerpt":"WebPageTest is an online tool and an Open Source project to help developers audit the performance of their websites. As a Web Performance Evangelist at Theodo, I use it every single day. I am constantly amazed at what it offers to the web development community at large and the web\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/website-lightning.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/website-lightning.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/website-lightning.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/website-lightning.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/website-lightning.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":339074,"url":"https:\/\/css-tricks.com\/webpagetest-api\/","url_meta":{"origin":345169,"position":2},"title":"WebPageTest API","author":"Chris Coyier","date":"May 3, 2021","format":false,"excerpt":"I'm willing to bet you know WebPageTest. It is the premier tool in the toolbox of web performance people. Maybe you didn't know that WebPageTest was a side project of one fella, Patrick Meenan, for most of its lifetime, with literal racks of real devices he maintained himself. An amazing\u2026","rel":"","context":"In "Sponsored"","block_context":{"text":"Sponsored","link":"https:\/\/css-tricks.com\/category\/sponsored\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-21-at-10.29.33-AM.png?fit=1200%2C1187&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-21-at-10.29.33-AM.png?fit=1200%2C1187&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-21-at-10.29.33-AM.png?fit=1200%2C1187&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-21-at-10.29.33-AM.png?fit=1200%2C1187&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-21-at-10.29.33-AM.png?fit=1200%2C1187&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":364350,"url":"https:\/\/css-tricks.com\/performance-links-february-2022\/","url_meta":{"origin":345169,"position":3},"title":"7 Fresh Links on Performance For March 2022","author":"Chris Coyier","date":"March 2, 2022","format":false,"excerpt":"I have a handful of good links to articles about performance that are burning a hole in my bookmarks folder, and wanna drop them here to share. The new WebPageTest website design From fonts to SVG: an icon migration strategy\u2014 Erwin Hofman notes that he was using icon fonts out\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/website-lightning.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/website-lightning.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/website-lightning.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/website-lightning.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/website-lightning.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":203132,"url":"https:\/\/css-tricks.com\/performance-tools\/","url_meta":{"origin":345169,"position":4},"title":"Performance Tools","author":"Robin Rendle","date":"June 7, 2015","format":false,"excerpt":"Weekend roundup time! From the multitude of Grunt and Gulp plugins to web apps that can help us visualize our websites with data, learning all the ins and outs of performance tooling is tough. I thought it might be useful to catalogue as many tools out there as I could\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":298906,"url":"https:\/\/css-tricks.com\/six-months-using-firebase-web-performance-monitoring\/","url_meta":{"origin":345169,"position":5},"title":"Six Months Using Firebase Web Performance Monitoring","author":"Chris Coyier","date":"November 19, 2019","format":false,"excerpt":"I don't really think of Firebase as a performance monitoring tool (all I ever think about is auth and real-time data storage), but nevertheless, it totally has that feature. Justin Ribeiro... [A] tool to track what real users in the wild are experiencing with an easy setup? Yes, please. [...]\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/firebase-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/firebase-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/firebase-pattern.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/firebase-pattern.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/firebase-pattern.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/345169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=345169"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/345169\/revisions"}],"predecessor-version":[{"id":345502,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/345169\/revisions\/345502"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/345435"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=345169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=345169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=345169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Identified Problem #2) First Byte to Start Render gap<\/h3>\n\n\nTim saw this right away as a fairly obvious problem. <\/p>\n\n\n\n