Smashing Newsletter: Issue #245

Editorial

Some things on the web change slowly, while others are almost impossible to keep up with. It has become kind of a tradition over the last years: every first week of December I set out to track the state of front-end performance and gather insights, recommendations, strategies, techniques and tooling in an opus entitled the Front-End Performance Checklist.

And every single year, it takes almost the entire month to refine and update that checklist as various areas of performance are becoming more sophisticated and complicated, and as techniques get more elaborate and fine-grained. In fact, as of now, the guide covers pretty much everything from performance budgets to single-page apps to networking optimizations — and we’re very happy to have published it this week.

That’s right. The Front-End Performance Checklist 2020 (PDF, Apple Pages, MS Word) is now live. Along with an editable checklist in PDF, MS Word Doc and Apple Pages, so you can adjust it for your needs and use it in your organization. The checklist features literally hundreds of articles and case studies shared by the community, with 25.000 words and over 80 contributors and reviewers who made it all possible. Hopefully you’ll find it useful for your work.

Performance budgets should adapt depending on the network conditions for an average mobile device. (Image credit: Katie Hempenius)

The research and writing were kindly supported by our dear friends at LogRocket, a frontend performance monitoring solution that helps reproduce bugs and fix issues faster. Thank you, friends!

Also, as a kind thank-you for the wonderful work by the web performance community, we’ve decided to dedicate this newsletter issue to web performance, featuring some techniques, tools, resources as well as podcasts and email newsletters focused on performance. The community makes the web faster, and their efforts matter.

So, let’s make 2020... fast! 🏎️💨

Happy reading, everyone!
— Vitaly (@smashingmag)

The Impact Of Performance Optimization
Which Metrics Matter Most?
SmashingConf 2020: SF, Austin, NYC, Freiburg
State Of The Web Report 2019
Automatically Compress The Images In Your PRs
The State Of Video Playback
Resources To Stay On Top Of Performance
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. The Impact Of Performance Optimization

It’s no secret that performance has a direct impact on user experience and business metrics and that sometimes, even a seemingly small web performance optimization like shaving off a few milliseconds load time can lead to a better conversion rate. To demonstrate this impact, WPO Stats collects case studies and experiments from products and e-commerce sites — stories of successes and of things that went wrong. Inspiring!

To support your performance optimizations with some hard figures and help you better grasp their impact, Sergey Chernyshev built the UX Speed Calculator. It lets you see how speed distribution, error rate, bounce rate, and conversion rate intertwine for the values you enter. A handy little helper. (cm)

2. Which Metrics Matter Most?

First Meaningful Paint, Time to Interactive, First Input Delay, SpeedIndex. With so many performance metrics floating around, it’s not easy to strike just the right balance for a project. And most of the time, these metrics alone will be too generic and not precise enough, so we’ll need to complement them with custom ones as well. In small and large companies it’s common to define important pixels in the UI, measure how fast we can start render them, and how quickly we can provide input responsiveness for them.

Every project could benefit from a mix of at least 4 metrics. Time To Interactive (TTI) is the key metrics for understanding how much wait a user has to experience to use the site without a lag. First Input Delay (FID) complements TTI very well as it describes the missing part of the picture: what happens when a user actually interacts with the site.

Total Blocking Time (TBT) helps quantify the severity of how non-interactive a page is prior to it becoming reliably interactive. And Cumulative Layout Shift (CLS) highlights how often users experience unexpected layout shifts (reflows) when accessing the site. All these metrics will appear in Lighthouse v6 as it starts rolling out in 2020.

Additionally, you can look into FrustrationIndex that looks at the gaps between metrics instead of looking at them individually, ad weight impact and Component-Level CPU costs. Note that First Meaningful/Contentful Paint are being replaced with Largest Contentful Paint, and the role of SpeedIndex has decreased with new metrics showing up. (vf)

3. SmashingConf 2020: SF, Austin, NYC, Freiburg

Performance will also be among the topics we’ll cover in our upcoming Smashing Conferences this year. We’ll dive into a range of front-end/UX topics to explore the state of design/front-end today, and what’s coming up next. With live sessions and workshops by Aarron Walter, Rachel Andrew, Miriam Suzanne, Nathan Curtis, Sara Soueidan and many others. We’d be so happy and honored to see you there! ❤️

Practicing skills matters. For technical workshops or ice skating. Meow!

🇺🇸 SmashingConf SF (Apr 21–22) in San Francisco, USA.
🇺🇸 SmashingConf Austin (Jun 9–10) in Austin, Texas, USA.
🇩🇪 SmashingConf Freiburg (Sep 7–8) in Freiburg, Germany.
🇺🇸 SmashingConf New York (Oct 20–21) in New York, USA.

4. State Of The Web Report 2019

The web community is something quite special indeed. There are currently 88 dedicated contributors who have come together to help make the data warehouse of HTTP Archive even more accessible; a variety of subject matter experts have provided their contextualized insights and shared their knowledge about the state of the web. The result: Web Almanac has been brought to life!

You’ll find 20 chapters spanning aspects of page content, user experience, publishing, and distribution. Each part represents a pillar and is made up of chapters exploring its different aspects. This is the first of what could become an annual tradition in the web community of introspection and a commitment to positive change — and rightfully so! If you’re interested in contributing to the 2020 edition of the Web Almanac, you can fill out an interest form and join in! (il)

5. Automatically Compress The Images In Your PRs

Image optimization is probably one of the easiest tasks on your performance optimization checklist. However, if you have a lot of images to optimize, it can also take up quite some time, and in the hurry, some images might even make it into production skipping this step.

To change that, the team at Calibre built a GitHub action that automatically compresses all the JPEGs, PNGs, and WebP images in your pull requests. It’s fast, efficient, and, for near-lossless compression, it uses the best image compression algorithms available: mozjpeg and libvips. A real timesaver. (cm)

6. The State Of Video Playback

Embedded videos have become an integral part of a lot of website experiences. But there’s a delicate balance that needs to be considered: while embedded videos increase a user’s interest and engagement, they also increase loading times. Doug Sillars took this as an occassion to analyze how websites are actually utilizing videos these days.

Doug tested 3,500 videos and let them play for 200s on a phone with a 3G connection. The result: Only 88% of them were able to complete playback, and since 50% of the videos had a bitrate that was greater than the download speed of a 3G connection, the video playback was delayed and contained at least one stall in 40% of the cases. Interesting metrics to keep in mind when you plan to embed videos for mobile users. (cm)

7. Resources To Stay On Top Of Performance

A lot of people in the web community are committed to performance and to helping spread the word about it. One of them is Tim Kadlec. In his podcast Chasing Waterfalls, he invites people who work to make the web faster for everyone. Three episodes have already been released, with Reefath Rajali sharing insights into PayPal’s performance journey, Malek Kalim exploring how to scale a culture of performance across an organization, and Katie Hempenius talking about performance budgets, third-party challenges, JavaScript, and a lot of other things that impact performance.

Another handy resource to keep you on top of web performance comes from Ben Schwarz and Karolina Szczur. Together they curate the Performance Newsletter, delivering web performance tools, talks, and other resources to your inbox twice a month. There’s also an archive of previous newsletter issues for you to catch up on until the next issue will be sent out. (cm)

8. Upcoming In Smashing Membership

We released Heydon Pickering’s brand new book Inclusive Components. The eBook version is and always will be free for Smashing Members, of course. Please check your dashboard to download it.

We are also looking into a slightly more interactive format for our Smashing TV sessions. We kindly invite you to submit your questions or actual mock-ups of your work in the Membership channel (#tv), so our speakers can review and provide feedback to your current projects — live!

“Form Design Patterns” with Adam Silver— Jan. 15 at 17:00 London time
“TypeScript For Smashing People” with Stefan Baumgartner— Jan. 29 at 17:00 London time
Smart Interface Design Patterns, video course with Vitaly Friedman, January 2020

Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉

9. Our Next Smashing Workshops

In our workshops, we explore best practices and interesting techniques in front-end and interface design, always focusing on actual solutions to real-life problems.

🇯🇵 Awwwards Conference (Jan 20) in Tokyo, Japan.
🇳🇱 Awwwards Conference (Feb 19) in Ams, Netherlands.
🇺🇦 Projector Practicum (Feb 21–23) in Kyiv, Ukraine.
🇺🇸 SmashingConf SF (Apr 21–22) in San Francisco, USA.
🇺🇸 SmashingConf Austin (Jun 9–10) in Austin, Texas, USA.
🇩🇪 SmashingConf Freiburg (Sep 7–8) in Freiburg, Germany.
🇺🇸 SmashingConf New York (Oct 20–21) in New York, USA.

Or, if you’d like to run an in-house workshop at your office, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)

January 7, 2020 Smashing Newsletter: Issue #245

Previous Issues