Hi <<First Name>>,
When I was a kid, it seemed like every kitchen had some version of the serenity prayer hanging on the wall. If you're not familiar with it, it goes something like this:
Grant me the serenity to accept the things I cannot change, the courage to change the things I can, and the wisdom to know the difference.
As I was working on a recent post about unexpected performance leeches that can slow down your site's user experience, I thought about the serenity prayer as it applies to the work we all do in our different areas of the techosphere. While of course it's important to lean into our ability to optimize and improve, it's equally important to know what you have no control over.
Does this mean you should give up on those areas? No, it simply means you should look for opportunities to mitigate in the other areas where you do have some control.
Acceptance and control are recurring themes in the articles and guides in this month's edition:
- The fastest and slowest news sites in the US
- Page bloat update
- The law of diminishing returns
- Common misconceptions about how to optimize LCP
- Image optimization best practices
- Fast and smooth third-party web fonts
I love getting feedback about this newsletter, so please feel free to hit the reply button and let me know your thoughts!
Until next month,
Tammy
b: @tammyeverts.com
m: @tammy
|
|
|
Most US news sites fail to deliver optimal LCP times to mobile
The current news cycle has many of us desperately trying to stay up to date, so mobile performance for news site is vital. I took a look at our US Media Benchmark dashboard, which tracks the home pages of industry-leading news sites, including the New York Times, CNN, Bloomberg, Washington Post, and NPR.
Only two of the sites – USA Today and Forbes – delivered Largest Contentful Paint times – on a 'slow' mobile connection – that were within Google's threshold of 2.5 seconds. On a more positive note, a handful of sites did *start* to render within 2 seconds.
What did the faster pages have in common? Lean images that were served quickly and early in the critical rendering path. For example, on the USA Today home page, which had a Start Render time of 1.1 seconds and an LCP time of 2.2 seconds, the LCP image is the fourth request (out of a total of 564 requests).
Slower pages served the LCP element much later. On one page, which had an LCP time of almost 18 seconds, the LCP element was the 97th resource request (out of 434 requests) on the page. Yikes.
Wondering how to improve LCP times for your pages? Here's everything you need to know to start measuring, debugging, and optimizing LCP.
|
|
|
Six things that slow down your site's UX (and why you have no control over them)
If you work in tech, you might be shocked to learn that the average person uses their tech very differently than you. Here are some eye-opening statistics to help you understand the full breadth of your users' experience when they visit your site.
|
|
|
Page bloat update: How does ever-increasing page size affect your business and your users?
- The median desktop page has grown by 8% in one year
- The median mobile page has grown by 7.5%
- The 90th percentile saw a huge 24% increase
- The 90p mobile page is 4X bigger than the median
- Much of that growth comes from JavaScript, video, and images
There's lots more analysis in the post. As the table above shows, there's a major gap between where pages should be and where they actually are.
|
|
|
The law of diminishing returns
Geoff Graham gives us a much-needed reminder of how useful our efforts as design, development, UX, SEO, and data folks can be... until we hit the point of diminishing returns:
- Some animation can make things feel natural. Too many animations becomes distracting.
- Some line spacing can help legibility. Too much hurts it.
- Some alt text is contextual. Too much alt text is noise.
- Some data helps make decisions. Too much data kills the vibe.
- And so on.
Definitely a fun read, with lots of links to more fun reads.
|
|
|
Common misconceptions about how to optimize LCP
"The median site with poor LCP spends almost four times as long waiting to start downloading the LCP image as it does actually downloading it, waiting 1.3 seconds between TTFB and image request. That's more than half of the 2.5 second LCP budget gone in a single subpart."
What does that mean in practical terms? It means you need to look beyond optimizing image size (which is still a good best practice) and consider how to reduce – and even eliminate – resource load delay. Fortunately, Brendan Kenny has included some good advice along with this analysis.
|
|
|
Best practices for optimizing images
Are your beautiful images hurting your page speed and tanking your UX? This quick guide to image optimization covers:
- Size and dimension attributes
- Formats
- When to use (and NOT use) lazy loading
|
|
|
Fast and smooth third-party web fonts
Scott Jehl shares a font-loading technique that gives the best of two worlds: load the font files asynchronously while the page renders, while still hiding the text to give the font time to load. This is a great, detailed walkthrough for anyone who wants to deliver faster third-party fonts without any annoying FOUT (Flash of Unstyled Text).
|
|
|
Glossary of web performance metrics
Are you up to speed on current web performance metrics, including Core Web Vitals? Do you know which browsers do NOT support various metrics? How about SPAs?
This glossary of popular metrics might contain a few surprises for you!
|
|
|
|
