12 Guidelines to Improve Your Website Speed

Last Updated on October 26, 2023

In today’s fast-paced world, internet users have little patience for slow websites. If a page doesn’t load within a few seconds, they’re likely to click away and find another website. That’s why website loading speed is so important, especially for mobile users.

Mobile phone domination

According to my blog’s statistics, most visitors are using mobile phones to access the internet. This is a common trend, as most people are start using their smartphones to browse the web.

However, there’s a problem with mobile performance: it’s generally slower than desktop performance. This means that your website will load slower on mobile than it does on desktop.

This can be a big issue, as slow loading speeds can lead to lost traffic and revenue. If your website is slow, visitors are more likely to abandon it and go to a competitor’s website instead.

By following the following tips, you can improve your website’s loading speed and attract more visitors.

Check your website’s performance

the first step to solving any problem is to understand what it is. The same is true for improving your website’s loading speed. The first step is to test its performance using a tool like PageSpeed Insights, GTMetrix, Pingdom, Experte, or other similar tools.

If you’re using the Chrome browser, you can also use its built-in audit feature. To do this, open the Chrome Developer Tools and click on the Performance insights tab.

When testing your website’s performance, be sure to prioritize mobile performance. This is because most people are now using their mobile devices to access the internet.

Figure 2 shows an example of web performance metrics from PageSpeed Insights. If your website is getting a low score, scroll down to the diagnostic details (Figure 3) to see what’s causing the problem.

It’s important to note that different web pages on the same website may have different performance results. This is because some pages may have more images, videos, or other resource-intensive content.

Once you know what’s causing your website’s loading speed to be slow, you can start to fix the problem.

Create a backup of your website!

Before you make any changes to your website to improve its speed, it’s important to back it up first. This is a must-do step, as you could lose all of your content, customization, or modifications in a matter of seconds if something goes wrong. (Which I hope doesn’t happen!) But if it does, you can always restore your website from your most recent backup.

1. Optimize template, widgets, and plugins

You may use a content management system (CMS) like WordPress or Joomla. However, your template, widgets, and plugins are likely to be the biggest culprits behind your website’s slow loading speed.

Open a few of your web pages and see how many different objects and widgets they’re loading. These can include things like sections, images, shapes, animations, and social media icons.

The more objects you have on a page, the slower it will load. If your template is packed with objects, widgets, and animations, consider simplifying it. You may be able to make a big difference in performance with just a little effort.

Choose minimalist, lightweight, or AMP template

Accelerated Mobile Pages (AMP) templates are designed to load quickly on mobile devices. So, they’re generally lightweight and responsive. If you’re using Blogger or Blogspot, consider using an AMP template. If you’re using WordPress or another CMS, look for a plugin that supports AMP.

A minimalist template with fewer visible objects will load faster than a template with a lot of bells and whistles. This means fewer social icons, sliders, widgets, animations, and other eye-catching elements. For example, consider whether you really need animation on your website. Unless you sell graphics or animation, I think it’s unnecessary on most web pages.

Limit the number of widgets

Widgets can be a great way to add functionality to your website, but too many widgets can slow down your loading speed. Only keep the widgets that are essential to your website’s functionality and that your visitors actually use.

Limit the number of plugins

Plugins are another great way to add functionality to your website, but just like widgets, too many plugins can slow down your loading speed. Only install the plugins that you absolutely need and that are well-maintained and updated regularly.

Many useful plugins, including minification, caching, image optimizers, and SEO plugins, may be essential for your website.

2. Consider using LiteSpeed web server

If you’re using WordPress, consider using LiteSpeed Web Server instead of Apache or Nginx. LiteSpeed is a faster web server that can significantly improve your website’s loading speed.

Once you’ve switched to LiteSpeed, you can install the LiteSpeed Cache for WordPress (LSCWP) plugin to further improve your website’s speed. LSCWP is a free plugin that handles caching, minifying, and image optimization.

In my experience, LSCWP outperforms other similar plugins, including paid ones. It’s also packed with features, such as image optimization on LiteSpeed’s own servers. This means you won’t have to pay for an additional image storage server.

However, keep in mind that if you upload too many images to your WordPress site, you may run out of disk space. So, make sure your web hosting plan has enough disk space for your needs.

3. Enable cache

When a user visits your website, their browser sends a request to your web server. The server then generates the page and sends it back to the user’s browser. This process can take some time, especially if your website is complex or has a lot of images.

Web caching can help to speed up your website by storing copies of frequently visited pages. This way, the server doesn’t have to repeat all the complexity of these calculations every time a browser sends the same request.

There are many web caching plugins available for content management systems (CMSs) like WordPress and Joomla. Simply install and enable one of these plugins to enable web caching on your website.

If you’re using Blogger, there are no web caching settings available. However, Google already uses web caching on its servers, so you don’t need to do anything.

4. Use CDN

A content delivery network (CDN) can deliver your content to visitors faster, while also taking some of the load off your own server. This is because it’s a network of servers all over the world.

When you use a CDN, your website’s content is stored on these servers, so that visitors can access it from a server that is close to them. This can significantly improve your website’s loading speed, especially for visitors who are located far from your web server.

Even if you only target a local area or country, a CDN can still help to improve your website’s performance by reducing the load on your web server. It can be a huge help if you have a website that gets a lot of traffic.

Free CDNs

There are many free CDNs available, such as Cloudflare, Quic.cloud, and Jetpack’s site accelerator (Jetpack CDN). These CDNs offer a variety of features, such as caching, security, and performance optimization.

Cloudflare is the most popular CDN, and it’s a good choice for most websites. It’s easy to set up and use, and it comes with a lot of great features. Jetpack’s site accelerator and Quic.cloud are also good options, but they require a WordPress site and specific plugins.

CDN hosted libraries

Some CDNs (e.g., Cloudflare’s cdnjs and Google Hosted Libraries) also host common library files, such as JQuery, Web Font Loader, and D3.js. This means that you can load these files from the CDN instead of from your own web server. This can improve your website’s performance, especially if you use a lot of library files.

For example, to load a JQuery, simply add one of the following code to your HTML page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

5. Optimize images

Visuals make content more engaging and easier to understand. So, it’s no wonder that most web pages contain images. But images can also slow down your website, which is why it’s important to optimize them for speed.

The common ideas are to use as few images as possible and reduce the file size of your images.

Compress the image size

Usually, every image on a websitecould be made smaller, without losing too much quality. There are many tools you can use, such as:

• offline tools, like Caesium, ImageOptim, or other comparable tools,
• online tools, like TinyPNG, Compressor.io, or other similar online tools.

If you’re using WordPress on the LiteSpeed Web Server, you can use the LSCWP plugin to optimize your images.

Using WebP extension

WebP images are much smaller than JPEG or PNG images, but not all browsers support them yet.

To use WebP images, you can convert your existing images to WebP using an online service like online-convert.com. Then, you can serve the WebP version of your images to browsers that support it, and the JPEG or PNG version to browsers that don’t.

There are a few libraries that can help you detect the browser and serve the appropriate image format, such as Modernizr, WebPJS, or Picturefill,.

If you’re using WordPress on the LiteSpeed Web Server, the LSCWP plugin can automatically serve WebP images to supported browsers and JPEG or PNG images to unsupported browsers. Simply enable the “Request WebP versions” option in the plugin’s settings.

6. Defer the offscreen images

When you visit a web page, your browser loads all of the images on the page at once, even if you can’t see them all yet (offscreen images). This can slow down your page loading speed, especially on mobile devices.

One way to improve your page loading speed is to lazy load your offscreen images. Lazy loading means that your images won’t load until you scroll down to them. This can save a lot of bandwidth and speed up your page loading speed.

Imagine a web page with four images, each around 500 KB in size. On a mobile phone, only two images are visible at a time. When the page loads normally, all four images are loaded at once. This means that the page takes around 2 MB to load.

However, there is a way to optimize the page so that the offscreen images are only loaded when the user scrolls down to them. This is called lazy loading. With lazy loading, the page would only load 1 MB initially, since only two images are visible at a time.

Using lazysizes javascript library

Unfortunately, some websites, such as Blogger, may not support lazy loading. But, you can use the Lazysizes library to lazy load your images. Simply copy and paste the following code at the end of your Blogger template (before </body>):

<!-- Defer offscreen images and videos -->
<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js' type='text/javascript'></script>

<!-- auto adds attribute class="lazyload", src, and data-src -->
<script>
//<![CDATA[
for(var imgEl=document.getElementsByTagName("img"),i=0;i<imgEl.length;i++)imgEl[i].getAttribute("src")&&(imgEl[i].setAttribute("data-src",imgEl[i].getAttribute("src")),imgEl[i].className+=" lazyload",imgEl[i].setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="));

function wrap(top, selector, bottom) {
var videos = document.querySelectorAll(selector);
    for (var i = 0; i < videos.length; i++) {
        if (videos[i].getAttribute('src')) {
            videos[i].setAttribute('data-src', videos[i].getAttribute('src'));
            videos[i].removeAttribute('src');
        }
        videos[i].setAttribute("class","lazyload");
        videos[i].setAttribute("style", "position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;");
        var modified = top + videos[i].outerHTML + bottom;
        videos[i].outerHTML = modified;
    }
}
wrap("<div style='position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%'>", "iframe[src*='youtube.com']", "</div>");
//]]>
</script>

The code above is pure JavaScript, so you don’t need jQuery. It will also automatically find all of the image and iframe tags on your page, so you don’t have to do anything extra. It will add a few attributes to each tag, such as class="lazyload", src, and data-src. Once you’ve copied and pasted the code into your page, you’re all set!

7. Reduce Javascript and CSS

As mentioned before, it’s important to keep the number of objects on your web page to a minimum. Dynamic objects can require a lot of JavaScript or CSS to work properly, which can make your website beautiful but slow.

One way to improve your website’s loading speed is to reduce the amount of JavaScript and CSS you use. You can do this by:

• Only using JavaScript and CSS for essential features.
• Removing unnecessary code.
• Minifying your JavaScript and CSS files.

Minifying your code means removing unnecessary whitespace and comments. This can make your files much smaller without affecting their functionality.

If you’re using WordPress, you can use a plugin like LSCWP to automatically minify your JS and CSS. Otherwise, you can use a manual tool like minifier.org.

You can also minify your overall HTML to speed up your website even more. However, be sure to double-check each modification you make to your website, including minifying or removing any JavaScript, CSS, or HTML. Making changes to your website’s code can sometimes break things.

8. Defer render-blocking CSS and JS

Many websites use JavaScript and CSS to create dynamic and visually appealing content. Usually, these CSSs and JavaScripts resources must be downloaded and processed before the browser can start rendering the page, which become render-blocking. This can lead to a noticeable delay in the initial loading of your website.

Render-blocking CSS and JS are typically found within the <head> </head> tag. For example:

<head>
    ...
    <script type="text/javascript" src="js/mycode.js"></script>
    <link href='css/bootstrap.min.css' rel='stylesheet'/>
    <link href='css/font-awesome.min.css' rel='stylesheet'/>
    ...
</head>

There are a few things you can do to defer render-blocking CSS and JavaScript:

• Move render-blocking CSS and JavaScript to the bottom of your HTML document, just before </body>. This will tell the browser to download and process these resources after the initial rendering of the page has begun.
• Use the defer and async attributes on <script> tag. The defer attribute tells the browser to download the script file, but not execute it until the page has been rendered. The async attribute tells the browser to download and execute the script file in parallel with the rendering of the page.
• Use the rel="preload" attribute on link tags. This attribute tells the browser to start downloading the CSS file immediately, even if it is not needed to render the initial page.

Here is an example of using defer, async, and preload:

<!-- defer and async on <script> tag -->
<script defer="defer" async="async" type="text/javascript" src="js/mycode.js"></script>

<!-- preload attribute on link tag -->
<link rel="preload" id="stylesheet" href="css/bootstrap.min.css" as="style" onload="this.onload=null; this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/bootstrap.min.css"></noscript>

It is important to note that deferring render-blocking CSS and JavaScript can sometimes break your website’s layout or functionality. Be sure to test your changes carefully before deploying them to your production website.

9. Using preconnect or dns-prefetch

When a user visits your website, their browser has to download a lot of resources from different domains. This includes images, CSS, JavaScript, and fonts. The more domains your website uses, the longer it will take to load.

The browser must “connect” to external servers before receiving a response. A DNS lookup, a TCP three-way handshake, a TLS handshake, and an HTTP request are all part of this connection.

Two ways to speed up your website’s loading speed are to use preconnect and dns-prefetch.

• Preconnect tells the browser to start connecting to a domain before the user needs it. This can save time because the browser doesn’t have to wait until the user needs to visit the domain to start connecting to it.
• Dns-prefetch tells the browser to start resolving the IP address of a domain before the user needs it. This can also save time because the browser doesn’t have to wait until the user needs to visit the domain to start resolving the IP address.

To use preconnect and prefetch, you need to add the following code to the <head> section of your HTML document:

<link rel="dns-prefetch" href="//external-domain-1.com">
<link rel="preconnect" href="//external-domain-2.com">

You can add multiple preconnect and prefetch links, one for each domain that your website uses.

Defining external URLs

You should preconnect and prefetch the domains that are most critical to your website’s loading speed. This includes the domains that host your images, CSS, JavaScript, and fonts.

Make a list of all the websites that your own website uses resources from. To find this list, you can use the browser’s “inspection” tool (Figure 5). Once you have a list of all the external domains, you can add them to the <head> section of your HTML document.

Here is an example:

<head>
    <link rel="preconnect" href="//example.com">
    <link rel="dns-prefetch" href="//example.com">
    ...
</head>

This will tell the browser to start connecting to those websites before the user needs to visit them. This can save time because the browser doesn’t have to wait until the last minute to start connecting.

It is important to note that you should only preconnect and prefetch websites that are critical to your own website’s loading speed. If you use too many preconnect and prefetch links, it may actually slow down your website.

10. Defer AdSense loading

If you have Google AdSense installed on your website, you may notice that it slows down your website’s loading speed. This is because AdSense ads are loaded from external servers.

One way to speed up your website’s loading speed is to defer AdSense loading. This means that AdSense ads will not be loaded until the user has scrolled down to them. This can significantly improve your website’s loading speed, especially on mobile devices.

There are a few different ways to defer AdSense loading. If you use a content management system (CMS) like WordPress, there are many plugins available that can help you do this.

Two popular plugins are Ad Inserter Pro and Advanced Ads Pro (paid versions). These plugins allow you to easily defer AdSense loading with just a few clicks. You can also use the free versions of these plugins (Ad Inserter or Advanced Ads) combined with the Flying Scripts plugin.

If you use Blogger, you can also defer AdSense loading manually. For more information on how to manually install lazy load AdSense, please read our article. 

11. Reduce DOM elements

The Document Object Model (DOM) is the structural representation of an HTML document. It’s made up of all the different elements on a page, such as the HEAD, BODY, and DIV tags.

The more DOM elements you have on your page, the longer it will take for the browser to render it. This is because the browser has to process each and every DOM element before it can display the page.

When I write <div> content </div>, that is one DOM element. To keep things simple, the code below contains six DOM elements.

<!DOCTYPE html>
<html>
    <head>
        <title>page title</title>
    </head>
    <body>
        <h1>The title</h1>
        <p>this is the content</p>
    </body>
</html> 

One way to speed up your website’s loading speed is to reduce the number of DOM elements. There are a few different ways to do this:

• Use fewer nested elements. Instead of nesting elements deep within each other, try to keep your DOM structure flat.
• Use CSS instead of HTML to style your page. CSS is a more efficient way to style your page and it can help to reduce the number of DOM elements.
• Use JavaScript to dynamically create DOM elements. This is a more advanced technique, but it can be used to create DOM elements only when they are needed.

12. Lazy load for comments

Having a comment section on your website can be a great way to engage with your visitors and encourage them to return to your page. However, if your website receives a high volume of comments, you may experience a slowdown in loading times due to the large number of comments that need to be loaded.

One way to speed up your website’s loading speed is to lazy load comments. This means that the comments will not be loaded until the user clicks on the comment section. This can be a great way to improve the performance of your website, especially if you have a lot of comments.

If you use WordPress, there are a number of plugins available that allow you to lazy load comments. One popular plugin is Lazy load for comment. This plugin is easy to use and allows you to configure lazy loading options to your liking.

If you use Blogger, you can also lazy load comments by changing the comment location in your settings. To do this, go to Settings > Post, comment and sharing > Comments and select Full page or Popup window as the Comment Location (Figure 6).

Final words

Thank you for reading this blog post about how to improve your website’s speed!

I hope you found this guide helpful. If you have any questions or feedback, please feel free to leave a comment below.

Cover image from pxhere by Mohamed Hassan