Skip to content

5 Ways to Decrease Website Load Time

By Matthew Edgar · Last Updated: January 19, 2024

There are many ways to optimize your website’s speed. This can make the process of decreasing your website’s load time feel overwhelming. It doesn’t need to be. In this article, I’ll walk through the five most common methods I’ve used to help clients improve their website’s performance. Those methods are:

Three Areas of Focus to Reduce Website Speed

Before discussing those methods, I want to share a tip that can help make speed optimization a less daunting task. When optimizing your website, keep in mind there are three broad concepts to consider. Most speed optimization techniques will relate to one of these concepts. You may not remember the specific optimization techniques, but if you can remember these concepts you will be able to spot opportunities for improving your website’s load time.

  1. Reduce requested files. Every file requested by a website (including JavaScript files, CSS files, images, fonts, and more) requires a separate trip to the server to retrieve that file. While each trip to the server might only require a few milliseconds, we are trying to load our website in only a few seconds. Every millisecond counts, and every file we can eliminate is better.
  2. Shrink overall size of website files. You want to make the files you need to load on your website as small as can be so that they will load faster. Many of the techniques discussed in this article are means of making the website consume a smaller file size.
  3. Load files as efficiently and effectively as possible. We want to make sure we are making it as simple as possible for a browser or a bot to load our website files. At the same time, we want to make sure we are making it as simple as possible for our website’s server to send files to the browser.

Now that we have these broad focal areas in mind let’s discuss how we can reduce our website’s load time. Remember, before you begin optimizing your website, make sure you’ve measured your website’s key speed metrics. For help determining what those metrics are and finding ways to collect those measurements, check out my guide on measuring your website’s speed and my guide to Core Web Vitals.

Caching

One of the reasons websites load slowly is because of how long it can take to retrieve information from a database. This trip to the database takes time, as does running the various queries against the database to get the information about the page. For example, if you use WordPress, the content contained on each page is stored in multiple database tables. When somebody requests a particular page, your website’s server has to process code that will query the content from the database.

Caching avoids needing so many queries. With caching, a copy of the complete page is created outside of the database and that copy is stored in a static file. That way, instead of your server querying the content from different database tables each time the page is requested, your server finds and returns a static file with the page’s information. Finding a static file is considerably faster, especially if a page requires several dozen queries to generate.

Caching improves speed because you are reducing the number of requests the server needs to make to load a page. This helps the server load the page more efficiently. You’ll often see bigger gains in TTFB, FCP, and LCP as a result of caching.

How to Implement Caching

There are a variety of different caching plugins that will work with WordPress. Kinsta has a good review of the better caching plugins. If you aren’t using WordPress, chances are your content management system offers a caching solution. Many hosting companies also offer caching solutions automatically. I’ve also worked with clients that have built custom caching solutions.

In WordPress, one caching plugin we’ve found that works quite well is WP Fastest Cache. The plugin works well with a variety of other plugins and WordPress themes (as always, test this on your specific configuration to be sure). There are a variety of configuration options available within the plugin to help you do the most you can to improve your website’s speed. The most important configuration is simply checking “Enable” by the “Cache System” option. Here is a way we typically configure this plugin:

WP Fastest Cache Options

Compression & Minification

Compression and minification are two different things but both are ways of shrinking the size of the files that are needed to load your website. The smaller the file size, the faster your website will load. Typically, you want to minify and compress your files, so it is worth considering both together.

Compression

Compression is about making files smaller. That way, the server has to send less data along to the browser when loading a website. Compression algorithms focus on:

  • Identifying Repetition: Compression algorithms look for repetitive data. If a chunk of data is found multiple times, the algorithm can store it just once and then reference it whenever it’s repeated. By removing repetitive data, files shrink considerably.
  • Reducing Details: For things like images or videos, compression can slightly reduce quality to achieve smaller file sizes. It’s like trimming the edges off a piece of paper to make it fit into a smaller envelope. If done correctly, this reduction is often imperceptible to human eyes or ears. If any data is lost during compression, the compression is referred to as “Lossy”.
  • Compact Encoding: Some compression tools use more efficient ways to represent data. Instead of using the full representation, they use shortcuts. It’s not cutting corners; it’s just being smarter about how data is stored.

When you compress your website files (like CSS, JavaScript, or HTML), the data sent to a visitor’s web browser is sent at a smaller file size. Along with the compressed file, an HTTP header is sent telling the browser that this file has been compressed. The web browser decompresses the file it has received.

Compression can lead to big savings as well. In Elementive’s case, our home page’s size is 61% smaller thanks to compression. You can test if your website has compression enabled for free here.

GZIP Compression Test

Minification

You can also minify your website’s files. Where compression rewrites the file to send it to the browser in a compressed format, minification makes the file smaller by removing white space and other unnecessary characters (like comments embedded within the code). For example, unminified CSS code may look like this:

/* Header styling */
header {
background-color: #333;
color: #fff;
padding: 20px;
}

The equivalent minified version gets rid of line breaks, spaces, and the CSS comment, resulting in:

header{background-color:#333;color:#fff;padding:20px}

Minification reduces the total file size of a file. This helps to reduce the overall size of the website. For example, on Elementive’s website, we reduced our CSS file by 45% simplifying by minifying the file.

How to Minify and Compress Files

You can use free tools like Minifier.org to create the minified versions of JavaScript or CSS files. There are also plugins (like WP Fastest Cache) that will minify your code within WordPress too.

The WordPress plugins can also enable compression on the website. In WP Fastest Cache, for example, check the box to enable Gzip (Gzip is one of the most popular forms of compression). In some cases, a plugin may be needed because compression is enabled by default by the hosting company.

Remember to test your website after implementing minification or compression. The process of minification and compression can sometimes break your website’s design and functionality, especially on older browsers.

Reduce Images and Image Sizes

If you want to improve your website’s performance, you will need to optimize your website’s images. As of December 2023, the average mobile webpage loads 19 images and the average desktop website loads 21 (data from HTTP Archive).

The easiest first step is to get rid of any images you don’t need. If images are included strictly for aesthetics, question if they are necessary. Unlike the early days of the web, web designers can often create aesthetically pleasing websites with CSS and no images. Even images that seem to be necessary for the content might not be beneficial—remove the image and see if users engage and convert in similar ways. This is also an area where user testing can help you determine if the page still functions as needed without the images present.

Once you’ve removed all the unnecessary images, you next want to find ways to optimize the remaining images on your website to make sure they are loaded efficiently. You can read more details about how to do this in my guide to image optimization. However, this includes:

  • Presenting images at the appropriate dimensions on the page.
  • Saving the image in the correct format.
  • Saving images at the appropriate file size.
  • Using response images.
  • Using lazy loading techniques.

Tools to Reduce Image Sizes

There are several tools on the market for resizing images. The most well-known program is Photoshop, but for some, the cost of Photoshop may be too steep. We have several alternative photo editing program suggestions you can try, including:

  • Pixlr  X: This is my recommendation for a simple, easy-to-use photo editor for basic cropping and resizing. The free version limits how many images you can save each or the paid version starts at $0.99/month (as of January 2024).
  • PicMonkey: A simple editor with lots of features. They offer a free trial and accounts start at $7.99 a month (as of January 2024).
  • GIMP: An open-source, free image editing software application that can be run on Windows, Mac or Linux. This is designed to replace Photoshop and is best for people with more involved image-editing needs.

Optimize Fonts

After images, custom font files are often the next largest file type loaded on a website. As with images, it is worth considering if you need custom fonts or if you can use browser default fonts.

Custom fonts can help establish a particular look and feel for your brand, and also can help to make your website’s design distinct. However, you only want to use custom fonts where necessary given how they affect your website’s performance. In many cases, websites will use a custom font for headers and accent text while using a browser default font for body text. This combination of custom and default fonts often strikes a good balance: you can establish your brand while not significantly worsening your website’s load time.

Regardless of where you use custom fonts, the best practice is to use only a few custom fonts per page. As of December 2023, the average mobile website requests 4 font files and the average desktop website requests 5 (according to HTTP Archive).

Use Preload to Load Fonts Efficiently

If you do use custom fonts, you want to preload any font files you are using. By doing this, you are helping the browser prioritize what resources are loaded for the website. This makes the website load more efficient, resulting in faster load times and resulting in fonts being available earlier. A preload tag is added to the website’s HTML <head>. In the following example, the file “a-font.woff2” is loaded by the browser earlier in the loading process.

<link rel="preload" href="a-font.woff2" as="font" type="font/woff2" crossorigin>

While preloading helps, you can still occasionally see a flicker where the text changes from a browser default font to the custom font (called a Flash of Unstyled Text or FOUT). You can also occasionally see blank spaces where the text should be while the text loads in (called Flash of Invisible Text or FOIT). You can avoid this by using font-display attributes within your CSS file and instructing the browser to swap in the custom font.

The other major consideration is only loading the parts of the custom font family you need to use. For instance, a given font might be available in Normal, Semi-Bold, Bold, and Extra Bold variants. If you are only using this custom font for headers, chances are you’ll want to use the Bold variant and none of the others. So, make sure you are only loading the variants of the font you need.

Third-Party Scripts

Third-party scripts are another common contributor to higher website load times. Third-party scripts include tracking code added for analytics tools, code to display advertisements on websites, or code to add interactive features to the website.

Given the nature of these third-party scripts, they are typically essential to the website’s operations and can’t be easily removed. Of course, if a third-party script isn’t essential, then it is worth removing from your website. If you can’t remove these third-party scripts, you need to load them more efficiently. How do you do that?

The problem with these third-party JavaScript files, and all JavaScript files, is that they are render-blocking. This means that when the browser detects a <script> tag it has to load and execute the JavaScript code before continuing loading and rendering the remainder of the page. This slows down the processing of the website.

The other reason third-party JavaScript files slow a website’s load is that the browser must request the file from an additional server. For example, the browser would first need to connect with your website server to get your website’s code and then would need to connect to the server for Google Analytics to get the tracking code. Each additional server the browser must connect to adds to the overall website load time.

Loading Third-Party Scripts Efficiently

One way to make third-party scripts load more efficiently is to add a defer or async attribute to the script tag.

The defer attribute tells the browser it doesn’t have to wait for this script to finish loading before rendering the remainder of the page. With defer, the script will be loaded and executed after the browser has finished processing the webpage’s HTML code.

<script defer src="myscript.js"></script>

The async attribute tells the browser to load the JavaScript in the background. Unlike defer, the async attribute allows this script to load independently from the rest of the webpage’s code. This independence means that the asynchronously loaded file will be ready when it is ready, regardless of any other code being loaded into the page.

<script async src="myscript.js"></script>

Final Thoughts

Reducing your website’s load time is a never-ending task and there are many different areas you can optimize. As you approach optimizing your website’s speed keep the three areas of consideration in mind…

  • Start by determining what the largest files are and how to make those files smaller. Caching, compression, and minification are all techniques to shrink the size of the files.
  • Next, see if you can reduce the number of files that are needed to load the web page—remove unnecessary images, fonts, and third-party scripts.
  • For the files you do need to load, find ways to load those files as efficiently as possible, using techniques like preload, async, or defer.

If you have any questions or need help, please contact me. For more information about website speed, including more ways to improve website speed, check out my book Speed Metrics Guide.

You may also like

What is Core Web Vitals?

What are Google’s Core Web Vitals metrics? How can these affect your website’s performance? How do you optimize your website?

Do Redirects Impact Your Website’s Speed?

Yes, redirects do add to a website’s speed. There are two ways redirects can affect speed: by adding to the server overhead or by delaying the load of the final destination page. Discover the data-driven conclusion.

Measuring Core Web Vitals: PageSpeed Insights & CrUX

Google provides different tools to monitor Core Web Vitals. What are those tools and how do you use them?