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 so that “how to speed up my website” will no longer be a question for you.
Table of Content
Why Is Website Performance Optimization Important?
For a modern business, website speed improvement 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
Site speed enhancement, a critical factor in maintaining excellent overall site 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 faster your Magento, Shopify, or WordPress site or landing page speeds, the more visible it will be 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. In this regard, understanding the nuances of can play a critical role in enhancing your website's performance and boosting conversions.
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 Speed Stats for 2024
Now, let's discuss the website speed stats for 2024. 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 a modern website 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.
We ran a website speed test as part of our website speed performance service and . 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: performance testing, looking for occurring bottlenecks, updating and upgrading infrastructure, optimizing new content, and so forth. The need for page speed optimizations 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 achieve site speed improvements, including 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 to t 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 and other speed test tools like Google Lighthouse, Pingdom, GTMetrix, and more, you can also use Google Search Console to evaluate a website’s presence on Google’s search engine. 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 Increasing Website Speed
Here, we'll discuss actual tips on how to improve website performance, whether you have a Magento, Shopify, WordPress site, or another platform. Consider it our website speed optimization proposal that includes recommendations such as optimizing images, minifying code, leveraging browser caching, etc. 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 website’s speed analysis and then create 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. Caching settings play a crucial role in this process, allowing you to fine-tune how and what content is stored and retrieved.
Most of the time, caching is utilized for static assets (not changing frequently or not changing due to users' actions: images, videos, CSS, and JavaScript files). It's even possible to create an advanced strategy to cache dynamic content. There are several types of caching working the best way in combination.
- Browser cache. Developers use cache control to set rules for browsers to save some recently downloaded page files, and one of the primary ways they do this is through cache control headers. These headers dictate how the browser caches and retrieves the stored files. If users visit these pages again, there's no need to request those assets again, thanks to the effective application of 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 are some site speed improvements you can implement 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
When a page is loaded, a user's browser makes a number of HTTP requests to get HTML, images, JavaScript and CSS files, and other assets from a web server. The fewer HTTP requests your server processes, the faster the web pages will be. Let’s examine how to fix website speed by optimizing HTTP requests:
- Reduce the number of requests. Analyze the requests made to load the webpage; it might turn out that some files (web fonts, stylesheets, JavaScript files) and calls of third-party modules take too much time while not having a crucial meaning for the UX. Then get rid of them.
- Minify and bundle JavaScript and CSS files. These are widespread techniques to make the files lighter and shrink the number of fetching requests. However, grouping JS files into one or several bundles may have an adverse effect on web performance; in our Magento speed optimization guide, we describe an advanced approach to this procedure for this platform.
- 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
The next point on our list is file compression, which plays a key role in reducing server load. To transmit CSS and JavaScript files faster, we can squeeze them before sending. When archived, a file can weigh 5 KB instead of 55 KB, making it to the client from the server way faster.
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.
2.8 Mind Render-blocking CSS and JavaScript
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 as well as how to improve web application performance. The website speed statistics 2024 show that periodical performance optimization always brings win-win results for customers (better user experience) and business owners. Carry out website speed tests and optimization in cycles; we vouch for the efficiency of this strategy. Check site speed from multiple locations to ensure consistent performance worldwide.
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.
We envision that our guide will resolve any queries about “how to make my website faster.” If you need professional guidance and assistance with improving page speed, order Onilab's . For over a decade, our engineers and designers have been accumulating expertise in web development with a strong focus on real business needs to boost website performance.
