This article showcases a case study of Bookaway’s landing page performance. It’s about a couple of things that Bookaway faced and Liran Cohen (as part of a company in the traveling industry) managed to optimize the pages, so that the HTML they send is smaller. Smaller HTML means less time for Google to download and process those long strings of text. Today you’ll see how taking care of the props you send to Next.js pages can make loading times and Web Vitals better.
Read more…
Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from Addy Osmani’s new book (also, check a free PDF preview). We’re happy and honored to have teamed up with Addy to publish a dedicated book on image optimization, and the book is now finally here!
Read more…
The cat is out! For the last year, we’ve been working with Addy Osmani on a new Smashing Book all around image optimization. And now it’s here. Meet “Image Optimization”, our practical modern guide to delivering high-quality images on the web with the best performance. Image optimization, loading behavior and rendering in the browser require understanding of image formats and image compression techniques, image decoding and browser rendering, image CDNs and adaptive media loading, not to mention effective caching and preloading. Let’s figure it all out.
Read more…
How are Core Web Vitals measured? How do you know your fixes have had the desired effect and when will you see the results in Google Search Console? Let’s figure it out! In this post, Barry Pollard is going to attempt to explain a bit more about what’s going on here and explain some of the nuances and misunderstandings of these tools.
Read more…
How do we get media performance right while staying within performance budgets? In this article, Akshay Ranganath will take a look at the recent stats and data around performance budgets, video playback performance issues and some techniques and tools to address these issues. Having a performance budget as a standalone metric might not be of much help. That’s why we must correlate performance to organizational goals.
Read more…
Wondering what’s happenin’ at Smashing? Well, we’ve been busy. Here’s a little story of how we removed floating labels, improved performance on mobile, and launched a new series of articles. Oh, and how you can contribute to Smashing, too.
Read more…
With mobile traffic accounting for over 50% of web traffic these days, leaving your mobile performance unoptimized isn’t really an option. In this article, we’ll discuss the complexity and challenges of mobile, and how mobile testing tools can help us with just that.
Read more…
Adding video to your application can increase customer engagement and satisfaction. But the exact opposite can occur when there are issues with the video playback: video stalls are frustrating and drive customers away. In this article, Doug Sillars will walk you through the steps to optimize the video on your website to ensure fast playback and reduce stalls.
Read more…
In this article, we’ll take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. With some of the mistakes we’ve made, and some of the unexpected changes that helped boost all the metrics across the board. Hopefully, this little case-study will be useful to you, and perhaps there are one or two techniques that you might be able to apply to your project right away. In the end, performance is all about a sum of all the fine little details, that, when added up, make or break your customer’s experience.
Read more…
Let’s make 2021… fast! An annual front-end performance checklist with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016.
Read more…
