Is your site speed slowing down your business? Increasing website speed can do a number of things for your business like improving the customer experience, increasing conversion rates, improving search rankings, and more.
But how can you increase site speed to start reaping these benefits? In this article, we’ll discuss what site speed is, why it’s important, and six ways business owners and marketers of all shapes and sizes can increase it.
Contents
What is website speed?
Website speed is the amount of time it takes for a web page to load fully in a user’s browser. It encompasses a number of factors, including the time it takes for the browser to receive the first byte of information from the server (i.e. Time To First Byte), the time needed to render and display content, and the overall responsiveness of a website or web page to various interactions by the user.
Web speed is critical for user experience (UX) and can significantly impact user satisfaction, engagement, and conversion rates. Studies have shown that sites that load in 1 second have conversion rates 3 times higher than sites that load in 5 seconds.
That’s a crazy delta for a little bit of site optimization.
? Looking for more ways to drive people to your (newly fast) site? Free guide >> 25 Ways to Increase Traffic to Your Website
Why is website speed important?
From a tech perspective, website speed is influenced by multiple factors, including server performance, network latency, code efficiency, and file size optimization. That may seem like a headache, but as discussed above: the benefits can be huge. Here are just a few of the reasons that website speed is critical:
- User experience. Faster loading times lead to better user experiences, reducing bounce rates and increasing engagement. Per Google, as page load time goes from one second to ten seconds, the probability of a mobile site visitor bouncing increases by 123%.
- Conversion rates. We cited one conversion rate stat above, and here’s another: Walmart reported a 2% increase in conversions for every 1 second improvement in page load time.
- Better rankings. As discussed above, site speed is a ranking factor for search engines like Google, and studies by site like Backlinko have proven this out.
- Increased revenue. It stands to reason, but we should spell it out here anyway: improved site speed directly impacts revenue. Amazon, for instance, reported a 1% increase in revenue for every 100 milliseconds improvement in page load time.
? Free guide >> 10 Tangible & Free Ways to Get on the First Page of Google
How to increase website speed
We’ve talked about the what and the why, now let’s discuss the how of site speed optimization. Here are my top six strategies for increasing speed on your site.
1. Compress and convert (i.e. “optimize”) your images
If you’ve had any exposure to the site speed optimization game, you probably know that this is the easiest, and often the most productive, step you can take to reduce latency and increase PageSpeed Insights scores. Let’s take a look at one such report, from a brand I like called Den that sells beautiful but egregiously overpriced cabin plans.
First of all, I should mention: if you’re trying to increase site speed, PageSpeed Insights and GTmetrix are hands down the best diagnostic tools you can use to do so. They’re free, fast (usually), and they provide easy-to-follow lists of action items (and approximate bandwidth savings) that you can knock out to reduce page load time. These two tools are your best friend in this quest.
The first thing you’ll notice in this report is that Den’s homepage passes the Core Web Vitals assessment (if you want to learn more about Core Web Vitals, read our post here.) Each of the Core Web Vital metrics, except for Cumulative Layout Shift (CLS), relates to page speed, and as such, we need to pay attention to them. And insofar as Core Web Vitals are a ranking factor, and help determine how high in the search results Google ranks your website, they are super important. But you should view them more as benchmarks that you can use to measure performance as you optimize for speed. That is to say: don’t freak out if you’re not passing, and there is nothing in these numbers themselves that you can actually use to improve your site speed.
Where the report gets juicy is when you scroll down to the performance section.
Here you’re going to get a snapshot, on a scale of 1-100, of how fast your page is. As you can see, Den’s homepage has strong scores for Best Practices, SEO, and Accessibility, but is lacking a bit on the Performance front, with a score of 66 out of 100. Not bad for a fairly dynamic and image-intensive page, but with definite room for improvement. This performance score is what you need to pay attention to, as it takes into account all speed-related factors that Google takes into account when determining speed (and consequently, ranking your site).
Scroll down a bit more, and we can start digging into the various factors that are causing Den’s suboptimal website performance.
As you can see, items related to images occupy the number two and three spots on Google’s list of most actionable inputs. In my fairly extensive experience, that is where you should expect to be when you run this report on your website. For the purposes of this section, we’re going to focus on “properly size images” (we’ll get to “defer offscreen images” in the next section). Let’s pull down the tab and see what Google tells us.
For reference, anything above 500 KiB (kilobytes) is pretty damn big. And really, in today’s age of next gen image formats, you should really never be above 250 KiB. So there’s a lot for Den to to work on here, with some potentially big savings available.
How would one optimize these images? There are a few ways:
- Run the image through a free compression tool, like TinyPNG or compressor.io, then re-upload the image to your web page or CMS.
- Convert the image to a next-gen image format (specifically, WebP) using a free tool like cloudconvert.com. WebP is inherently served in the most compressed version, so if your CMS can accept it, I would highly recommend using this method.
- Use your CMS to either bulk compress your PNGs and JPGs, or bulk convert your images to WebP. Webflow, for instance, has an out-of-the-box feature that allows for this conversion in bulk. If you’re using WordPress, you can download any number of extensions that allow you to accomplish the same.
Image compression is really the lowest-hanging fruit in site speed optimization. Leverage the above methods, and you’ll see your speed scores climb quickly.
2. Lazy load your images
Lazy loading is number two on this list because, once again, I often find it at or near the top of Google’s reports. Remember that “Defer offscreen images” recommendation from above? Anytime you see that, know that Google is referring to lazy loading.
Lazy loading, as I discuss in this excellent post on the topic, is defined as the following:
“Lazy loading, in a nutshell, allows you to defer slow-loading page elements until after your page has rendered. It’s a way of making sure a user “gets” to your site (and doesn’t bounce) before doing the heavy work of loading some of the bigger, non-critical, below-the-fold elements on your web page.”
So let’s revisit that PageSpeed Insights report and see what it says under the “Defer offscreen images” tab:
Would you look at that: it’s all the same culprits that we found in the prior section! This is actually great news. Because depending on what kind of CMS you’re using, be it Shopify, WordPress, Bigcommerce, or Webflow, you’ll often be able to knock out image compression and lazy loading in one fell swoop. WordPress, for instance, has a great extension called Smush that implements lazy loading and bulk compression for you.
Shopify, on the other hand, will require some very specific (but very doable) CSS tricks that you can pass on to your developer. Squarespace has its own plugin that you can work with. And Webflow, bless its heart, sets all of its images to lazy load by default. Whatever backend you’re working with, simply research the implementation they recommend and attack from there.
3. Optimize for mobile first!
Now that you’ve seen the power of Google’s PageSpeed Insights in action, and before we move onto the next section, I’d be remiss to mention: do not sleep on the Mobile tab of this report!
Depending on your business model and the nature of your site, you may (and may likely, in some cases) be getting more mobile traffic than desktop traffic. Take a quick peak into Google Analytics to find the exact percentage. Even sites with strong desktop scores often score poorly on mobile, because mobile has its own specific set of requirements you need to fulfill for optimal speed. And we can use Den’s scores as a case in point here.
33 looks pretty brutal on its face, and I’m sorry to say that if you’ve never worked on mobile speed, you’re likely to see something similar. Most site owners neglect this area, and consequently see scores in the 30s and 40s. But guess what? That probably means your competitors haven’t dug into this area either. You can and should use this report as an opportunity to forge and spring ahead.
? Want more tips and ideas? We’ve got 130+ for you! Get the guide >> 130+ of the Best Online Marketing Tips for Generating More Traffic, Leads, & Sales
4. Reduce unused JavaScript
Number three on our list is, you guessed it, another recommendation that Google often lists at or near the top of its PageSpeed Insights reports. Because if we’re going to do the work, why not go after the most profitable outcomes, right? In this case, we’re talking about reducing unused JavaScript.
A quick note: you’ll often see code compression (as opposed to reduction) also listed in this report, but in my experience, the potential savings are generally far lower. Den, for instance, can save a mere 4 KiB of data from compression, compared to reduction, which can save them 332 KiB.
In my experience, the biggest offenders here are nearly always third-party scripts. Scripts from Google Tag Manager, various ad platforms, Google Analytics, and the like, can really hinder speed (when they are not needed). Let’s check out the report.
For their part, you can see that most of Den’s issues are coming from the variety of snippets they are firing through Google Tag Manager. Now, the idea is not to remove all of these. It’s simply to go through and see what you really need and what you don’t. For instance: are you firing a Facebook pixel on a landing page you specifically set up for a Google Ads campaign? Are you firing a HotJar pixel on your product page, despite not including it in the split test you’re running? Are you firing an instance of Google Analytics from Google Tag Manager when you already have it hard-coded into the header of your site?
For their part, Google has some useful documentation on how to reduce JavaScript in a given situation, depending on the CMS. Again, the idea is not to remove everything, just the stuff you’re not using.
Keep in mind: saving 332 KiB of bandwidth is great, but it’s possible that you just accomplished that by compressing a single image. That is not to dissuade you from tackling this step, but simply to hammer home that you should be spending your time on the items in the report that are going to yield you the greatest savings.
5. Leverage a Content Delivery Network (CDN)
A Content Delivery Network (CDN) is a network of distributed servers placed in data centers across various geos. Its primary purpose is to deliver content and other assets (think: images, videos, scripts, stylesheets, etc.) to users more efficiently and reliably.
CDNs work by caching content in edge servers located closer to end-users. This reduces the physical distance data needs to travel, which thereby decreases latency and improves speed. Here’s a quick visual of what that looks like in practice:
Implementing a CDN provides several benefits that contribute to improving site speed. Here are the top 3:
- Reduced latency. By delivering content from servers closer to the user’s location, CDNs minimize the time it takes for data to travel, significantly reducing latency and improving page load times.
- Load balancing. CDNs distribute incoming traffic across multiple servers, preventing any single server from becoming overwhelmed and ensuring consistent performance even during periods of high traffic.
- Caching static content. CDNs cache static content like images, CSS files, and scripts, storing them on edge servers for faster retrieval. This reduces the load on the origin server and speeds up content delivery.
To set up a CDN, all you have to do is choose a reputable provider, configure the settings to specify which content to cache and how it should be delivered, and integrate it with your site.
6. Enable browser caching
Browser caching is the process of storing resources locally on a user’s device the first time they visit a website. These resources are then reused for subsequent visits, rather than being downloaded from the server again. Caching is a huge lever for increasing site speed, and it can provide the very pleasant double whammy of reducing hosting costs.
To set up browser caching, the first thing you need to do is configure your server to include cache-control headers in HTTP responses. These headers specify how long a browser should cache resources before checking for updates. Here’s a basic approach:
- Edit server configuration. Access your server’s configuration file (such as .htaccess for Apache servers or nginx.conf for Nginx servers).
- Add cache-control headers. Include directives like “Cache-Control” or “Expires” to specify the caching duration for different types of resources. For example, you can set a longer expiration time (i.e., one year) for static resources like images, CSS, and JavaScript files, and a shorter expiration time for dynamic content like HTML pages.
- Check your status. After making changes, pop your website back into PageSpeed Insights to see how much of an improvement was made!
By implementing browser caching effectively, you can enhance your site’s performance, reduce server load, and provide a faster and smoother browsing experience for your visitors.
Increase your website speed, increase your revenue
It’s really that simple. Speed was important before Google ever made it a ranking signal because of its impact on the user experience. But now that Google is actively using signals like Core Web Vitals to determine where your site should rank in comparison to your competitors, it’s no longer something business owners and marketers can ignore. Especially in today’s age of mobile proliferation and instant gratification, where consumers want the information they want, where they want it, right now.
So the next time you dive into a PageSpeed Insights report, think not about how mundane or overly technical it all seems; think about how much money you’re going to make by taking these three simple steps. Good luck!
Here’s a recap of how to increase website speed:
- Compress and convert (i.e. “optimize”) your images
- Lazy load your images
- Optimize for mobile first!
- Reduce unused JavaScript
- Leverage a Content Delivery Network (CDN)
- Enable browser caching
