Improve Website Speed: 5 Ways to Decrease Website Load Time
By Matthew Edgar · Last Updated: August 09, 2021
There are many areas to address and many metrics to focus on when optimizing your website’s speed. This can make the process of decreasing your website’s load time feel overwhelming. To make this a less daunting task, it is important to remember that we have three broad concepts to consider as we approach website speed optimization.
First, we want to reduce the number of files requested. Each request made requires another trip to the server to retrieve a 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. As a result, every millisecond counts and every request we can eliminate the better.
Second, we want to shrink the overall size of the website. If you can make the files that are requested smaller, they will load faster. Many of the techniques discussed below are means of making the website consume a smaller file size.
The final consideration area is we want to make sure we are loading those 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. This is especially true for third-party scripts as I’ll discuss below.
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, make sure you’ve measured your website’s key speed metrics. For help determining what those metrics are and finding the ways to collect those measurements, check out my guide on measuring your website’s speed.
There are many different tactics we can use but we’ll focus on five of the most common tactics that usually help the most to decrease a typical website’s speed.
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 query the content from the database. Depending on what plugins you are using, this could result in many different queries of the database, each adding more time to your website’s load.
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 required several dozen queries to generate. The trick is making sure the cache is cleared often enough so that the page’s content doesn’t become outdated.
Platforms like WordPress offer a variety of different caching platforms. If you aren’t using WordPress, chances are your content management system offers a caching solution as well. At Elementive, we’ve also added caching solutions to custom-built websites. Depending on the exact configuration of your website, this can save a second or more of total load time because you are reducing the number of requests made to load a page. You’ll also often see bigger gains in TTFB, FID, and LCP through caching.
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:
Compression & Minification
Compression and minification are two different things but both are way 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
Have you ever created a compressed (zipped) folder on your computer? If so, you already have a general idea of how compression works. Essentially, compressing a file makes it smaller by stripping out unnecessary or redundant pieces of information. 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 then decompresses the file it has received and then presents the file’s contents to the visitor.
Compression can lead to big savings as well. In Elementive’s case, our home page’s size is 67% smaller thanks to compression. You can test if your website has compression enabled for free here.
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). This can reduce the total file size loaded. For example, on Elementive’s website, we reduced our CSS file by 45% simplifying by minifying the file.
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. Remember that you will want to test the minified CSS or JavaScript files carefully as the process of minification can easily 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.
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, the next step is to identify any images saved at larger dimensions than is necessary. For example, you might have an image that is 500 pixels wide presented on the page at only 350 pixels. That 500 pixel image is much larger and takes longer to load, so you’d be better off resizing the image to 350 pixels and re-uploading it to the page.
Next, you want to make sure the image is saved in the right file format. Kinsta has a great in-depth guide discussing the different image file types you can use. However, as a quick reference point for the most common image types:
- JPG: Widely supported across browsers and devices, great for photographs and non-text graphics, and can be scaled to a smaller file size
- PNG: Widely supported across browsers and devices, great for any image including text (like screenshots or infographics), will almost always be a larger file size
- GIF: Widely supported across browsers and devices, great for images with animation, smaller file size, lower image quality
- WebP: Growing support across browsers, great replacement for PNG and JPG, saved at a super small file size
Finally, you want to see if the image is saved at the smallest file size. There are no hard and fast rules when it comes to the perfect file size for an image, but a general rule of thumb would be to keep small-sized images to 10kb or less, medium images to 60kb or less and large images 150kb or less. Each image on your website is likely used in its own unique way so a set file size guide isn’t realistic. For example, you may have a hero image on your homepage. That image is not only large in width and height but is also likely large in file size when compared to a thumbnail image you are using in a blog. The goal with image file size is to get it as small as possible without distorting or blurring the image to a degree that it just doesn’t look good anymore. Play with the quality settings of your photos to see how file size is impacted.
Photo Editing Tools
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:
- PicMonkey: A simple editor with lots of features. They offer a free trial, starting at $5.99 a month.
- Pixlr X: Our recommendation for a simple, easy to use photo editor for basic cropping and file sizing for web, plus its free!
- GIMP: An open-source, free image editing software application that can be run on Windows, Mac or Linux. This does everything Photoshop does, but isn’t a very intuitive tool to use. If you are truly looking for a Photoshop alternative and have more sophisticated needs, this is the way to go. If not, Pixlr should work just fine.
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 two or three custom fonts per page.
When 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.
<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, 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 really need.
Third-Party Scripts
Another common contributor to higher website load times are third-party scripts. This can 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 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. How do you handle these third-party scripts if you can’t remove them from your website?
The problem with these third-party scripts (and all JavaScript) is that, by default, the scripts are render-blocking. This means that when the browser detects a <script> tag it has to load and execute the code before it can continue loading (rendering) the remainder of the page. A simple way to combat this is to move the script to the end of the page so that the script is the last item the browser sees when loading the page.
However, that simple solution may not always work. Instead, you can add a defer or async attribute to the script tag to load the page more efficiently. 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, however, the script will be loaded and executed when the rest of the page’s code is ready.
<script defer src="myscript.js"></script>
Along with defer, we also have the async attribute. This attribute also tells the browser to not block the page’s load. Unlike defer, however, the async attribute allows this script to load independent of the rest of the code being loaded onto the website. 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, start by determining what the largest files are and how 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 the 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.
