Improving website performance is a tough journey. Anyone in the online business should have heard something about Core Web Vitals and its importance. Beyond the Core Web Vitals, finding more opportunities to increase web performance and user experience while having direct impacts on revenue and engagement for your business is challenging. We’ll have a look at the many reasons why the performance of a website is very important and what we can do about it.

Let’s start by clarifying the basics for non-technical readers or beginner developers who have landed this article for a reason: what is the definition and the scope of website performance and why is it important?

When we -tech people- talk about web performance, we are not just mean the loading time of the webpage but also its responsiveness, experience, and accessibility. So, we should consider the whole package. A performant website should not stress out the end users. If the webpage is not fast and responsive enough the user loses their interest. It should be loaded blazingly fast and keep the browsing experience at a reasonable level for users that even use low-tier devices and slow network connections. By achieving this, we can;

• Reduce the bounce rate
• Improve visitor retention
• Improve website conversions and sales
• Increase chances of being featured by search engines
• Even have a chance to help the planet Earth! 🌍

After the long introduction, let’s dive into the what we can do about it part.

Set a Performance Budget First

As a starting point we can start by asking a question to ourselves; how fast is fast enough? This question can be answered by defining the baselined technology that our users have. For eg. the devices and network capabilities. Once we have a feeling about the technology we will support it’s possible to calculate the maximum weight in KBs we have for the webpage to load. And once we have that we can start thinking about the features we will design with performance in mind.

Better Performance Starts with Design

A fast loading, quick responding website isn’t just developers’ concern. I believe that everyone who works for a website should have a better understanding of web performance and should ask themselves if is there anything that they can do about it. Most of the time developers don’t decide the content of a website, but Product Managers, Designers and other decision makers do. Anything added to the webpage can slow it down. So, we should keep things tight from the start.

There are some tips to consider when designing a website by keeping performance in mind.

• Keep it simple. Do not add anything that can be unnecessary for the page.
• Optimized usage of assets like images, fonts, icons etc. across the entire project is crucial.
• Having a design system and a style guide helps Frontend Developers to understand which assets can be shared across the entire system.
• Using flat colors for anything on an image can be helpful. Keep in mind that using less color means smaller file size along with the compression method, file format and dimensions. Believe me, this will make a huge difference when it comes to banners.

Code Optimization

We’ve optimized our website’s design and now it comes to thinking about code optimization. I won’t go into detail on this topic in this article because there are tons of articles on the internet covering much more than I can cover. Instead, I’ll make a quick list to mention core aspects.

• Rendering performance is important. We kept our website design simple and we should keep the code as well. Cut down the things that make DOM big and simplify CSS selectors.
• JavaScript is very expensive. Using a library or a framework is not a must for a modern website.
• 3rd party scripts like analytics, trackers etc. must be chosen carefully as they may cause other problems besides performance problems.

The Biggest Challenge: Third-Parties

This is the most important topic in this article. Third-party scripts are extremely helpful as they can reduce a lot of work and make huge impacts on your revenue stream. But… they hurt your website’s performance a lot. To understand how a third-party script may slow down any web page we should quickly summarize what a browser does when a user requests a web page by entering a URL, clicking a link etc.

To be able to say that a web page is fully loaded it needs to be responsive to user input which can be done in the main thread of the browser where also JavaScript runs. Basically, loading any JavaScript and CSS resource keeps the main thread busy while downloading and executing them. So, the web page will stay unresponsive until all of the magic finishes. We understand that we should reduce the size of any JavaScript and CSS resource to keep our web page responsive. But when it comes to third-party scripts we don’t have much control over what they’re depending on.

There are still a few actions that we can take to reduce the impact of third-party requests.

• Loading third-parties asynchronously if it’s possible.
• Trying to find open sourced alternatives to be able to remove unused codes and take the control of the script.

Final Thoughts

Web performance is a huge topic to talk about. In this article, I tried to mention overlooked aspects while keeping things simple. I’ll be happy if you can share this article with anyone who would be interested. And also feel free to leave a comment below to share your thought on this!