{"id":345169,"date":"2021-07-27T16:18:33","date_gmt":"2021-07-27T23:18:33","guid":{"rendered":"https:\/\/css-tricks.com\/?p=345169"},"modified":"2021-07-27T17:09:14","modified_gmt":"2021-07-28T00:09:14","slug":"learnings-from-a-webpagetest-session-on-css-tricks","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/learnings-from-a-webpagetest-session-on-css-tricks\/","title":{"rendered":"Learnings From a WebPageTest Session on CSS-Tricks"},"content":{"rendered":"\n

I got together with Tim Kadlec<\/a> from over at WebPageTest<\/a> the other day to use do a bit of performance testing on CSS-Tricks. Essentially use the tool, poke around, and identify performance pain points to work on. You can watch the video right here<\/a> on the site, or over on their Twitch channel<\/a>, which is worth a subscribe for more performance investigations like these. <\/p>\n\n\n\n

Web performance work is twofold:<\/p>\n\n\n\n

Step 1) Measure Things & Explore Problems
Step 2) Fix it<\/p>\n\n\n\n

Tim and I, through the amazing tool that is WebPageTest, did a lot of Step 1. I took notes as we poked around. We found a number of problem areas, some fairly big! Of course, after all that, I couldn’t get them out of my head, so I had to spring into action and do the Step 2 stuff as soon as I could, and I’m happy to report I’ve done most of it and seen improvement. Let’s dig in!<\/p>\n\n\n\n\n\n\n

Identified Problem #1) Poor LCP<\/h3>\n\n\n

Largest Contentful Paint (LCP)<\/a> is one of the Core Web Vitals<\/a> (CWV), which everyone is carefully watching right now with Google telling us it’s an SEO factor. My LCP was clocking in at 3.993s which isn’t great. <\/p>\n\n\n\n

\"\"
WebPageTest clearly tells you if there are problems with your CWV.<\/figcaption><\/figure>\n\n\n\n

I learned from Tim that it’s ideal if the First Contentful Paint (FCP) contains<\/em> the LCP. We could see that wasn’t happening through WebPageTest.<\/p>\n\n\n\n

Things to fix:<\/p>\n\n\n\n