Your slow website slows down the whole business's success. It affects every tier of your sales funnel: Google rankings, user experience, conversions, and other KPIs suffer from a slow site speed. And the catch is that you need to monitor and improve site speed on a continuous basis. But there’s no way you can skip speed optimization if online presence is vital for your business.
The good news is, while actual implementation may differ, most performance optimization principles and techniques are more or less the same, no matter what website type or platform you have. It deals with images, frontend and backend code, caching, hosting, third-party modules, and so on.
In this guide, we’ve gathered versatile advice for online stores and marketplaces, medical and financial web applications, media portals and landing pages, B2B and B2C sites. Based on it, you can find weak spots and plan website optimization.
Table of Content
Why Is Website Performance Optimization Important?
For a modern business, website speed optimization should be one of the overheads like heating and electricity. Otherwise, it's almost impossible to compete in selling products or services. At the same time, if you speed up web page loading and keep it at the highest possible level, the impact on the user experience and KPIs is invaluable.
1.1 Website's Performance and Key Metrics
Maintaining excellent overall performance (both actual and perceived) positively affects numerous KPIs and four crucial constituents of the company's well-being.
Visibility. Sites with good Google PageSpeed Insights scores get higher positions in SERPs. So, the better your store or landing page performs, the more visible it gets in organic search results. So, you can expect better organic traffic with more prospects visiting the site.
Usability. Web pages' load time and the user experience are directly linked. Let's say each consecutive page of your website has a one-second delay when loading. It literally feels like stumbling all the time, causing frustration in users. If the website is easily replaceable (e.g., a shop), people are likely to ditch it and go to another one. Yes, it's not that easy to change something like a bank if its web app lags, but many will definitely consider such a move.
Conversions. The aforementioned aspects naturally influence the essential website metric: the conversion rate. All businesses can relate: it's really hard to increase it, so much so that even fractions of a percent are considered a win. So, if there's a chance to achieve higher conversion rates on mobile and desktop, shoot for it.
Customer loyalty. Eventually, excellent performance has long-term positive effects on websites as customer loyalty grows too. When more one-time clients return again, you have more flexibility in budgeting. For instance, spend less on customer retention and acquisition and allocate more for other marketing activities.
1.2 Fascinating Website Performance Statistics
Now, let's talk numbers. Market researchers, scientists, Google, and other companies have been studying the connection between website speed, user behavior, and critical metrics for decades. What do you make of these insights?
- Site speed is one of . It's implemented via Core Web Vitals metrics assessing the loading performance, webpage interactivity, and visual stability.
- Each second of delay means a skyrocketing bounce rate. A on mobile sites back in 2017 found that a whopping 53% of visitors close websites loading longer than 3 seconds. The probability of bounce grows by 32% as the page load time goes from 1 to 3 seconds, but it increases by 106% as the loading time goes from 1 to 6 seconds.
- According to one survey, expect web pages to load in ≤2 seconds.
- Nordstrom (an online boutique) experienced when its website speed decreased by half a second. For the brand, it meant tens of millions of lost profit. On the contrary, a stationery store called Staples saw a 10% increase in sales after accelerating its website speed by one second.
- Classic studies by Miller and Card defined the amount of time a user can wait until losing focus during interactions with a computer as . Google used these findings when calculating the Largest Contentful Paint (LCP) threshold.
1.3 Site Speed-up: Onilab's Case
Page speed optimization is one of the most popular services we provide. Complex speed issues tackling bring fruitful results: decrease the bounce, exit, and cart abandonment rates; increase add-to-cart and conversion rates.
As a rule, user sessions become more productive: visitors browse more pages, view more items/explore offers, make more micro and macro conversions, from leaving their contact info to purchasing/subscribing/registering.
After a major website performance optimization for, this Finnish tour provider achieved the following outcomes:
- Page load time decreased by 30%;
- User sessions with product views increased by 25%
- Cart abandonment rate fell by 40%;
- Conversions rose by 30%.
It takes a professional approach and painstaking work to reduce the load time and achieve really impressive results. And to make them sustainable, there's a need for ongoing technical support: speed testing, looking for occurring bottlenecks, updating and upgrading infrastructure, optimizing new content, and so forth. The need for optimization is here to stay, so you need to prepare for the long haul.
1.4 What Is the Target Website Speed?
Before we delve into the tips and tricks on how to improve page load speed, we need to determine some benchmarks. Well, there's no strict consensus on how fast a website must be to satisfy users. Several years ago, Google recommended keeping it under 3 seconds for mobile sites because of the dependence between the speed and bounce rate we mentioned above.
Now, experts tend to name the 2 seconds as a perfect speed for both mobile and desktop websites. It's totally achievable; moreover, after professional optimization, it can load in <300 milliseconds. However, on mobile, you need to put more effort into reaching such a great result.
When it comes to Google, the benchmarking is quite concrete. The largest Contentful Paint (LSP) metric used to evaluate page loading experience (perceived load speed) states that if the biggest piece of content above the fold (usually an image or text block) is loaded within 2.5 seconds, it's a good score.
But you should think not only about the initial page load times but also about interactivity, which is how quickly pages react to users' actions. Eventually, it's also about website performance. So, the First Input Delay (FID) and Interaction to Next Point (INP), which is to replace FID in 2024, must also be under control. All in all, aiming tot with flying colors is a good strategy.
Besides, draw attention to other Web Vitals such as Time to First Byte (TTFB; read our guide on how to), Speed Index, First Contentful Paint (FCP), Total Blocking Time (TBT), and Time to Interactive (TTI).
How do we track all these indicators? Apart from Google Pagespeed Insights, there are many tools to run a speed test: Google Lighthouse, Pingdom, GTMetrix, and more. It's better to measure website performance multiple times and draw attention to lab and field data. PSI is optimal since it's a free tool that provides both data types for a more holistic picture of site performance.
2. Nine Universal Tips for a Web Page Speed-up
Here, we'll discuss actual tips on how to improve website performance. While speed issues and best practices are similar for all sites, each platform, architecture, and site's current condition determine how exactly we should implement the measures and what we can skip.
In practice, we first conduct a performance test and then create website speed optimization strategies. This list will help you understand which snags to look for and what the work scope might look like.
2.1 Set up Multilayered Caching
The most obvious answer to the "How to reduce page load time?" question is caching. This is what saves your website from handling requests and generating the same content over and over again when users request it.
- Browser cache. Developers set rules for browsers to save some recently downloaded page files. If users visit these pages again, there's no need to request those assets, thanks to browser caching.
- Content delivery network (CDN). If you have an international customer base, CDNs are indispensable. There are servers located in different regions that store cached website content. When a person visits your site, the requests are redirected to the nearest server to them.
- Full-page caching (FPC), block caching, object caching, etc. Caching management also includes saving rendered pages, page blocks, database queries, API calls, and more. It reduces the usage of server capacities for generating responses to popular user requests.
2.2 Optimize Images
Media files are vital for the website, especially if we're talking about online shops or travel agencies. Being the largest files on the page, unoptimized photos detrimentally impact load times and may ruin the user experience. Here's how you can act to insure against poor website performance in this case.
- Change image format. The most suitable one for websites as of now is WebP, which weighs up to 30% less than JPEG without quality loss. It can be used in lossy and lossless modes: the former means you sacrifice image quality to a certain extent, and the latter implies preserved original quality.
- Conduct image compression. Additional tools like imagemin, libvips, WebP Convert, or Cloudinary can be used to compress pics that are already on your website. TinyPNG, TinyJPG, ImageOptim, and others are useful for reducing pic size before uploading to the site. CDNs also assist with this task.
- Leverage lazy loading. It's about prioritizing loading images located in the viewport rather than all the visual content of the entire page. As users scroll down, loading is initiated for the pics down below.
- Serve responsive images. Utilize the 'srcset' attribute in HTML to deliver differently-sized images to laptops/PCs and smartphones.
Read our comprehensive guide on.
2.3 Opt for a Better Hosting Provider
Is your server hosting up to snuff? It should be modern and powerful enough to store and manage the website's code, media files, databases, CMS, web server, and so on. It also should have enough capacity for your average traffic and seasonal spikes. If you have some misgivings on these points, check out whether the used hosting is optimal for your specific site and its needs.
- Shared Hosting. As the name suggests, it's a single server shared by several websites. It's the cheapest solution that has a major flaw: resource distribution (CPU, storage space, and RAM) is unequal between businesses. It's not a problem for small websites and blogs, but it's inapplicable for sites with huge traffic or online stores.
- Virtual Private Server (VPS). It's still a server hosting more than one client, but it's way faster because of the structure. The thing is, each website has its own virtual server isolated from others. It has individual configurations, and its resources can't be consumed by other sites on the same VPS. It's a perfect choice for mid-sized businesses, yet a high-load website may require a more advanced machine.
- Dedicated server. It serves only one website, meaning more flexibility, customization possibilities, and security. The obvious drawback of dedicated servers is the cost and the need to hire admins for tech support. While enterprise-level companies can afford it, for SMBs, it's more of an unjustified expense.
- Cloud Hosting. It's renting server capacities from a cloud provider: AWS (Amazon Web Services), Microsoft Azure, GCP (Google Cloud Platform), IBM Cloud, etc. We'd say it's the most optimal solution as it's scalable and flexible: your team can change the configuration at any time and use modern automation tools.
2.4 Revise Third-party Plugins
The next step in sprucing your website up is checking out all extensions. While expanding functionality or enhancing appearance, add-ons might lead to website performance issues. And if you have a significant number of plugins, the situation worsens.
There are two typical reasons why. Firstly, they can make redundant requests, putting even more load on the system. Secondly, they're often versatile, and the one-size-fits-all approach signifies heavy logic consuming considerable server resources when processing.
Developers use profilers to assess what third-party modules slow down the website. Then, we either optimize or uninstall them. Sometimes, updating or picking up a better alternative works, too.
2.5 Improve HTTP Requests Handling
- Switch to HTTP/2. With an older HTTP/1 protocol, a separate server connection is required to handle each new file. In turn, HTTP/2 is able to process multiple files in parallel in one connection. By the way, with HTTP/2, you can skip merging CSS and JS.
2.6 Enable Gzip Compression
Gzip is a classic program for content compression, and it's supported by most web servers and browsers. Brotli is a more recent algorithm developed by Google. It may not be your web server's built-in feature, but it ensures an even better compression with files up to 15% smaller than Gzip ones.
2.7 Reduce 301 Redirects
When users visit a page that was moved from one URL to another, a 301 redirect happens. While they're vital for search engine rankings preservation, each time a web browser encounters a 301 redirect, an additional HTTP request is made, leading to a delay in content delivery.
It may be a split second (which is also undesirable), but sometimes, there can be even whole seconds. So don't turn a blind eye to them; keep as few redirects as possible.
Browsers can handle several operations simultaneously (requests, loading, etc.). But the pages are parsed (the document structure is analyzed), rendered (painted to be displayed for users), and JS code is executed in the so-called main thread that works sequentially. It reads the page code and sometimes stops to download JS and CSS files and process them.
These operations block the rendering process and delay presenting the page to users. Here are website speed optimization techniques to avoid render-blocking:
- Move JS to the bottom. A classical page consists of HTML, CSS, and JS code, as well as links to images and other resources. To improve page speed, you can move all scripts to the bottom of the file's body so that they don't block other, more lightweight assets from loading and appearing on the device screen ASAP.
- Use the 'async' attribute. In this case, a browser continues parsing and fetches scripts in the background instead of blocking to perform the task. Once the file is there, parsing stops, and JS execution is conducted.
- Use the 'defer' attribute. It entails downloading JS during HTML parsing but without executing it until the parsing process is finished.
- Move non-critical CSS to the bottom. Critical CSS makes the above-the-fold page area look okay when users just open it. But some CSS chunks can be processed later either because they're not immediately visible to users or aren't vital for the initial load. To improve website loading speed a bit more, move these styles down.
2.9 Use the Prefetch and Prerender Techniques
These are advanced website performance optimization tips to enhance website responsiveness during user sessions. They can't help with the initial page load but are able to speed up consequent interactions for website visitors.
Both techniques imply that we know what users are highly likely to do next: which page they move or which button or link they click.
- Prefetch. While a user explores the page, browsers are instructed to retrieve scripts, styles, images, etc., of a page they may go to next. This way, the following pages' load times soar.
- Prerender. This is one step further: the browser can even render (paint) this next page fully or partly in the background so that when the user goes there, they see the page literally instantly.
But utilize prefetching and prerendering cautiously:
- Turn to usability experts and make a profound UX audit with customer journey mapping to understand better where users are actually apt to go.
- Don't overuse these techniques, especially in stores, marketplaces, and other large sites. In such cases, you can't be fully sure visitors choose this or that path, while loading/rendering new web assets in the background might cause lags on the current page.
Improve Website Performance Continuously
So, we've given you universal best practices on how to increase website speed. Periodical website performance optimization always brings win-win results for customers (better user experience) and website owners. Carry out website speed testing and optimization in cycles; we vouch for the efficiency of this strategy.
And don't forget to double down on mobile optimization measures. In practice, it's harder to achieve the same speed on smartphones, but it's sad to lose a huge portion of mobile users instead of monetizing abundant mobile traffic.
If you need professional guidance and assistance, order Onilab's. For over a decade, our engineers and designers have been accumulating expertise in web dev with a strong focus on real business needs.