Out of these two options, which one do you think people talk about more?
The second one makes for a potentially more interesting story — but it’s also an incredibly frustrating user experience. The user is not only going to avoid going back to that site if they could, but they’re also going to warn their friends about it.
Look at it this way: A blank website that has no elements added to it or no code is, by default, the fastest, with a 100/100 performance score. But a lot of us don’t want a barebones website. We want to create sophisticated, non-trivial websites and rich interactive experiences for our users. All these added assets take a toll on your users’ resources, from CPU and GPU to memory and network.
As you start adding elements to your site, however, you’re going to see an impact on the performance. Every third-party script, from your A/B testing to analytics to widgets, plus your own first-party code, is going to have a performance cost. (If we’d used the chatbot widget on the Builder.io website exactly in its default state, we’d have lost 50 performance points!)
Here’s what you stand to lose if your code is not optimized for faster page loads.
Conversions. Poor site performance has a direct impact on conversions. Especially with users accessing websites on their mobile devices, there’s never been a time when improving your site’s performance was more critical. For every one second delay in a page’s load time, there’s a 20% drop in conversions.
This becomes even more crucial for retail and e-commerce websites, where the user’s experience on the site leads to greater time spent, which might even lead to purchases and more money spent. In other words, optimizing your website to load faster has a direct effect on revenue. Deloitte says that just a 0.1 second site speed improvement led to 8% more conversions and 9% increase in average order value in retail.
SEO. There are many factors that affect SEO, and site performance is one of the key players. Your site’s performance influences its ranking in search results and thereby, the amount of organic traffic it gets. 51% of organic traffic to your website comes from online searches. And what’s more, on average, over 40% of revenue comes from organic searches, and 91.5% of searchers end up on one of the first-page results.
A fully optimized website will load fast and function well, regardless of the device, network quality, or browser capabilities. Here are a few widely accepted best practices.
To minimize these network-related performance costs, developers can
This also involves deferring the load of elements that are not necessary for the initial page load. For example, above-the-fold components can be loaded first, and below-the-fold components can be deprioritized until the user scrolls. Having the right load order is critical to minimize the number of operations and has a direct impact on user focus.
There are several more traditional best practices than the ones explored above. When you optimize code, you have to ensure that only the critical and highly impactful parts are optimized to avoid wasting time and resources on optimizing non-critical components. This can be measured through the impact on the overall performance. Doing this manually is complex and time-consuming.
⭐️ Effective: Astro
⭐️ ⭐️ More effective: Marko
⭐️ ⭐️ ⭐️ Most effective: Qwik
Third-party scripts like pixel trackers, A/B testing, ads, widgets, CDNs, etc., are the biggest contributors to slow page load times. Third-party scripts, which are code that is embedded within your site, compete with your own code for the browser’s main thread, which delays content rendering.
According to Google Web Fundamentals, third-party scripts can cause several issues including:
This becomes especially critical for e-commerce sites and online marketplaces that need these third-party scripts to run their business.
With API-driven development-intensive solutions, there’s always the pressure of developer dependency. Imagine an endless months-long backlog, with every single update to the site requiring developers to hard code. This can be extremely time-consuming and frustrating for both developers as well as non-developers who want to be able to make changes to the website with just a few clicks.