Low-Hanging Web Performance Fruits: A Cheat Sheet

Here’s the situation you’ve probably been in already: you join a new project and soon notice the page load speed is… underwhelming. You might assume it’s due to your slow network, but after running a Lighthouse report, you find the score is 20 out of 100. Something is definitely wrong here! When I see something like this, I usually have a real urge to fix it. Besides, sometimes it’s a nice way to get acquainted with the project as you inevitably go through a lot of code when doing it. Now, what’s important is that performance optimizations are a real rabbit hole, and there’s almost always something else that can be optimized. The Pareto principle applies here perfectly: a set of things can be done relatively easily, but they can have a meaningful impact. The purpose of this article is to be a “cheat sheet” for such optimizations and will be as framework-agnostic as possible. And also, it’s not about fixing slow algorithms and stuff. That’s a whole different topic. <h1>1. Optimize Your Assets</h1> Okay, I know what you’re thinking. “What a great insight, dude! What’s next? You’re gonna tell us that 2 + 2 = 4?” But seriously, people tend to forget to optimize their assets all the time. There is a huge probability that the repository you’re working on contains a bunch of excessively large images, too. And those images can be large, sometimes almost as large as your JavaScript bundle, which at least does something useful. Of course, if the first page you’re visiting doesn’t contain a lot of images, the impact on FCP and TTI will be less visible. However, even the slowly loading images on further navigation through the app can be irritating. <a href="https://betterprogramming.pub/low-hanging-web-performance-fruits-a-cheat-sheet-3aa1d338b6c1">Read More</a>