Hi <<First Name>>,
In our summer edition of Speed Matters, we get answers to questions like:
- Why do most US travel sites still deliver a slow mobile experience?
- Are you testing performance right?
- When should you use synthetic monitoring vs real user monitoring vs CrUX?
- LoAF offers a hot new set of metrics, but does optimizing them actually improve real-world user behavior – and ultimately business metrics like conversion rate?
- Is it possible to build an image carousel that doesn't hurt the performance of your pages?
- Plus an exhaustive web performance resource including people, tools, research, and best practices you should know!
What's on your mind lately when it comes to performance and usability? Hit reply and let me know!
Until next month,
Tammy
@tammyeverts.com
|
|
|
Most US travel sites deliver a slow mobile experience
I recently took a road trip with my family and discovered that, outside of major cities, most sites and apps I tried to use were either extremely slow to render or failed completely.
When I got home, I was curious to see how leading travel sites perform on mobile devices over a slow connection. Only two out the 16 sites we monitor in our US Travel Page Speed Benchmarks – Orbitz and Travelocity – delivered a Largest Contentful Paint (LCP) time that was within Google's recommended threshold of 2.5 seconds.
The slowest site took 11.5 seconds to start rendering, and ultimately had an LCP time of more than 42 seconds.
What caused the slow rendering? The usual suspects:
- Slow blocking JavaScript and CSS
- Poorly performing custom fonts
- Excessive JS before the LCP element
Wondering how to improve LCP times for your pages? Here's everything you need to know to start measuring, debugging, and optimizing LCP.
|
|
|
Links!
If you're looking for a one-stop list of "folks and firms sharing outstanding work on the web", Alex Russell has you covered. He's created an exhaustive resource of people, tools, courses, best practices, and more – from fundamentals to advanced resources. While the focus is largely on web performance, Alex addresses broader web development best practices as well.
|
|
|
Test your front-end performance right
I love seeing how other folks explain the nuts and bolts – not to mention the why – of performance monitoring. Mona M. Abd El-Rahman covers everything from what is front-end performance testing to common fixes for front-end slowness. It's a good read for anyone who's getting started with performance or who needs a refresher.
|
|
|
When to use CrUX, RUM, and synthetic monitoring
The Chrome User Experience Report (aka CrUX) isn't new, but there's still some confusion about what it is and when it's useful (and when it's not) for helping you understand how users experience your site. This is a FANTASTIC post from Mark Zeman that breaks down the difference between synthetic, real user, and CrUX data – and when and why to use each tool.
|
|
|
How do Long Animation Frames (LoAFs) affect user behavior?
If a performance metric doesn't align with user behavior or business outcomes, how useful is it? Cliff Crocker puts the latest LoAF metrics (which measure the responsiveness, AKA "jank", of a page) to the test by seeing how they correlate with conversion rate across four different retail websites. Some great findings here!
|
|
|
RUM for a small race-car website
Of course I love that SpeedCurve came out on top in this comparison with some other solid RUM tools. What I also love is that Morgan Murrah took the time to not only make the case for investing in real user monitoring for smaller sites, but also gave some helpful tips for setting up the tools he tested.
|
|
|
Speculation rules tested across three ecommerce sites
Sander van Surksum wanted to see the impact of speculation rules* on user engagement and conversion, so he ran A/B tests across three fast-loading ecommerce sites. He found that while browsing improved, conversion gains were absent. Here’s what else he learned...
*A browser-native mechanism that enables preloading or prerendering of pages a user is likely to visit next
|
|
|
Building a highly performant slider using CSS Scroll Snap
Image carousels are ubiquitous... and often as slow as heck, due to the fact that they're usually built from JavaScript-laden libraries. Ian K. Duffy demonstrates in detail how he used CSS to build a carousel that doesn't just look good – it's also super fast.
|
|
|
Performance Hero: Harry Roberts!
Our latest performance hero Harry Roberts had so much wisdom to share in a recent video chat with Cliff Crocker. Some highlights:
? Nearly every website on the planet that is a SPA shouldn't be.
? Your ecommerce site should not be built with JavaScript.
? Sites that have gone all-in on JS are slower and more difficult and more expensive to make fast.
? Headless commerce and headless content are great for the developer experience but terrible for the user experience.
? The number of product images on a page has a direct relationship to conversion rate. There's a sweet spot between too few and too many. You'll have to watch the video to learn what that sweet spot is. ?
? Using RUM is probably the biggest predictor of the success of a site.
|
|
|
In case you missed it...
|
|
|
|
