How to Improve the Loading Speed of Your Website: A Step-by-Step Guide

Have your traffic numbers started to dip?

Are your sales declining?

Does it seem like no matter what you do, you can’t get your conversion rate up?

If you’ve tried everything else under the sun, have you checked your website’s loading speed?

A website’s speed will impact traffic, pages views, conversion rates, sales and much more. The slower your pages are to load, the harder it will be for you to draw in visitors and keep them on your site.

Studies reveal that 47 percent of internet users expect a site to take less than 2 seconds to load, while 40 percent of them will leave if it takes longer than 3 seconds. Furthermore, a delay of a mere second in the load time of your page can cause your conversion rate to decline by 7 percent.

In other words, you need to find out how fast (or slow) your website loads and get to optimizing its performance as quickly as possible. To that end, we’re providing a step-by-step guide for you to follow that will lead to significant improvements in your site’s loading speed.

Also Read: HostGator Vs Bluehost Web hosting comparison 2017

How to Test the Current Speed of Your Website

The first step to improving the speed of your website is knowing where it is at the moment. After all, without something to compare to, there’s no way you can tell whether you’ve made improvements or not.

Testing the loading speed of your website isn’t difficult at all. It certainly doesn’t involve you sitting there timing your pages’ load times with a stopwatch, if that’s what you were thinking. Instead, you’ll be using a number of tools that make it quite easy. Some of them will even provide recommendations on what you can do to improve.

Google has given us the PageSpeed Insights tool to measure the performance of our websites. The advantage is that it’s simple to use, seeing as you only have to enter the URL of your site and the tool will get to work. It will return a score and even provide suggestions as to what you can do to improve the speed of your site.

Test your website speed using Google PageSpeed here.

Google Page speed testing

The problem with PageSpeed Insights, though, is that it only measures the speed of the homepage of your website (or the page you entered the URL for), and it doesn’t actually tell you the precise time it takes to load the page, instead providing a score that also takes into account best practices. Another problem is that some of the recommendations simply aren’t feasible – you just need certain elements and can’t just do away with them for the sake of speed.

Better options include Pingdom and WebPagetest, which provide a breakdown of page load time, time to first byte and start render time.

Test your website speed using Pingdom.

Pingdom website speed test

Pingdom is especially useful as it allows you to test the speed of your website from different locations all over the world, which is important if you have an international audience. It also provides suggestions on what can be improved but also a breakdown of load times by content type and more. It’s certainly one of the best tools out there for measuring site speed, especially for non-techies.

Test your website speed using Gmetrix.

So, plug your website’s URL into Pingdom and save the results. Now that you have a “control” test against which you can measure the changes you make, it’s time to get started cleaning up your site.

Important! Before you make any changes to your website, make sure to back everything up just in case something goes wrong.

Also read , 15 mistakes that slow down your site speed and what to do about them?

Step #1: Change Your Host or Hosting Plan

When first creating a website, most people opt for the cheapest host and the cheapest hosting plan, which usually means they are using shared hosting. It’s only natural to do this, but the problem is that many forget hosting has a lot to do with the speed of their site, and as their site grows, it gets slower and slower because they are still using hosting that’s inadequate for their site’s needs.

If your website has outgrown your hosting, then one of the quickest and simplest ways to improve the speed of your website is to change hosts or to switch to a better hosting plan, if one is available.

So, if you’re still using shared hosting, you need to consider a dedicated server or VPS, either of which will lead to a major improvement in load time. The option you choose will depend on the needs of your business, which is why you should take the time to study both options in-depth.

However, our recommendation is to go with VPS or Virtual Private Servers hosting because multiple servers are used to distribute the content. It’s also scalable and generally the best option for small to medium businesses.

With a dedicated server, you do have a lot more control and aren’t sharing anything with anyone else, including CPU, RAM or bandwidth, but there is also less flexibility because it is usually only the one server. Also, it tends to be much more expensive than the VPS option.

If you’re reticent to switch hosts because you’re not sure what you have to do to migrate your site, there’s no need to worry. Most hosting companies will either provide you with full instructions on how to do it or will have a technician available to help you, especially if you are opting for a VPS or dedicate server hosting plan.

Here’s a comparison of server response time of low level and higher level plans of SiteGround web hosting. It can be clearly stated that being in a high level plan improves our website performance significantly.

Lower level plans

Web hosting low LEVEL PLANS Web hosting low level plans response time

Higher level plan 

web hosting top level plan response time

Step #2: Optimize Your Images

Images are the biggest elements on a webpage, after videos. The larger the image, the longer it takes to load. And when an image hasn’t been properly optimized, load times drop even more.

The problem is that if you want to draw traffic to your site, you need images. It also doesn’t help that those images have to be large and excellent quality because new screens demand it.

So, what can you do to optimize images and increase the speed of your website?

Eliminate Superfluous Images

The first thing you need to do is comb through your website and decide whether or not you really need all those images to achieve the effect you are after. Yes, images attract visitors, but you also have to remember that a simple design is often the best, both from an aesthetic viewpoint but also in terms of performance.

It is true that a good image is worth a thousand words, though, so it’s up to you to find the right balance.

Replace Images with CSS or JavaScript

Try to use CSS and JavaScript instead of images as much as possible. Code, if done properly, will always transfer faster than actual images, which is why you need to replace as many image files as possible. Effects such as gradients and shadows, as well as animations can be replaced with CSS, for example.

Eliminate Any Text Encoded as an Image

If you have any images that are nothing more than text, you should replace these with a web font. You can find all sorts of beautiful typefaces to complement your design while improving the load speed of your site as well as the user experience. Remember, when text is delivered as an image, it cannot be selected, searched, zoomed in or accessed. Thus, it’s always good practice to ensure all text is offered as a web font.

Replace Raster with Vector Where Possible

Lines, polygons and points are used to build an image in vector graphics, whereas a raster image shows a picture by encoding the value of every pixel and displaying them in a rectangular grid. Thus, when you zoom in all the way on a vector image, there will be no loss of quality, but if you do the same on a raster image, you will eventually only see a bunch of different colored rectangles.

The vector format is ideal for pictures that include lots of geometric shapes, such as logos and icons, whereas raster images are best for pictures with lots of detail.

The advantage of vector formats is that they can be converted to the SVG or Scalable Vector Graphics format, which is an XML-based type of image for 2D graphics that all modern browsers support. This image format presents as code, which is much faster than a raster format.

However, please note than when exporting to SVG, the code can contain a lot of metadata that is often not necessary and can slow things down. That is why it’s a good idea to minify your SVG files by using a tool like svgo, which can reduce the files size by as much as 58%. To further reduce the file size, GZIP compression can be used, which requires you to ensure that your server has been configured for SVG compression.

Check out this post, Difference between Vector and Raster Images.

Choose the Right Image Format

Depending on what you need, you have three image formats to choose from, namely PNG, JPEG and GIF.

GIF should only be used when you need animation because it has a limited color palette of 256 colors, which means it’s not the best choice for the majority of image.

If you need to keep the highest resolution possible and preserve fine detail at the same time, then PNG is your best bet. This is because It produces the highest quality image as lossy compression isn’t applied beyond choosing the color palette. Unfortunately, this means the file sizes can be much larger than you’d expect.

In most case, though, you can get away with using JPEG files. With JPEG, a combination of lossy and lossless compression is used, allowing for a smaller file size while still maintaining decent quality.

Check out this post, What is the difference between GIF, PNG AND JPEG image format?

Scale Your Raster Images Before Uploading

Never upload an oversize image and use html (or WordPress) to resize it. This is because the image will only appear smaller, but the browser will actually load the full-size image. In other words, if your image container is 240px wide, don’t upload an image that’s 2000px wide and set the width parameter to 240px as this is a surefire way to slow your page down. Instead, use an image editing tool to scale and/or crop the image to the right size before uploading it to your site.

Reduce the Color Depth of Raster Images

Depending on the image, you might be able to reduce its bit-depth and reduce the file size by as much as 50%. To do this, simply change the images bit depth from 8 bits per channel, which results in over 16 million colors, to a color palette consisting in 256 colors in total.

Keep in mind that this works best with images that use only a few colors. Images that are more complex and feature gradual color transitions can end up looking pixelated if you lower the bit depth too much. However, it is a matter of trial and error, so keep testing until you find the perfect balance between visual appeal and file size.

Loading time for images before optimisation

Load time before image optimisation Load time after image optimisation

Loading time for images after optimisation

Load time after image optimisation

 

As the above test results shows, having your image optimised can significantly reduce its load time.

For WordPress Sites

If you have a WordPress site, you can use either WP Smush or EWWW Image Optimizer to reduce the file size of your images without overly affecting the quality of the image.

Step #3: Clean Up Your Plugins and Add-ons

If you have too many plugins and add-ons, you might find your website slowing down to a crawl. Paying attention to these is especially important if your site is based on WordPress, Joomla or Drupal.

Some users have found that by cleaning up their plugins, they can increase the speed of their website by as much as 300%. You should also consider that it’s not just the number of plugins you have – there are plenty of sites with dozens of plugins that run fast – but also their quality. For example, a website with 80 plugins can load a lot faster than one with a mere 10 plugins if the latter is chock full of poor quality plugins.

Yes, plugins are a necessity to a certain degree as the improve the functionality of your website, but it’s also imperative to only use plugins when they are absolutely necessary.

Plugins affect the load times of your pages by issuing more requests and calls to the server than the core WordPress files already demand. What happens is this. When someone navigates to a WordPress page, the server and browser communicate, with the latter making requests that the former responds to. The core files of your site have already set out a series of actions, but plugins can change these actions by inserting additional code. The result is more calls and responses, ergo more time to load the page.

Thus, the number of plugins, having poorly configured or optimized plugins, having inefficient plugins or out-of-date ones can all significantly slow down your website.

So, how can we fix this problem?

Remove Plugins You Don’t Need

The first step is to manually go through all your plugins and delete the ones you don’t need and/or aren’t using. Simply deactivating them might work to a certain degree, but it still means there’s code hanging around that shouldn’t be there and it could still affect the speed of your site. It’s best to completely delete all these plugins. So, comb through and delete as follows:

  • Plugins you aren’t using;
  • Plugins you don’t need;
  • Plugins that haven’t been updated in a gazillion years.

You want to remove plugins that haven’t been updated because you can be sure that they don’t function as seamlessly as they should with the most updated version of your CMS. Plus, if a plugin hasn’t been updated in two years, you can be pretty sure it’s no longer supported and won’t get fixed. In some cases, these old plugins can really do a number on your site and the situation gets worse and worse until your site has a meltdown. So, get rid of these old plugins and, if absolutely necessary, replace them with an alternative that has support.

Update Your Existing Plugins

After you’ve culled the herd, you will have to update all your existing plugins. Every new update comes with improvements and security fixes, which means you could be exposing your site to major issues if you don’t update regularly. Plus, if all your plugins aren’t updated, they could be performing poorly because of it. So, when you start checking which plugins are causing the problems, you could end up eliminating a plugin that would have worked fine if it had been up to date.

Updating wordpress plugins to improve speed

It’s true that plugins should update automatically, but this doesn’t always happen and it’s best to manually check every plugin.

Discover the Plugins That Are Causing Problems

There are two ways to determine which plugins are causing problems on your site. One is slightly more time-consuming and one is simpler but we’ll present both here.

For the first method, you will need to use a site speed test tool, like Pingdom, GTmetrix or Uptrends. The first step is to take a baseline measurement of your site’s load speed with all plugins activated. Check every major top-level page, especially those pages with forms on them. Make a note of the speeds.

Now, start deactivating those plugins that you suspect are causing problems – big packages like bbPress or Jetpack can be problematic and are worth testing. Deactivate one of these plugins, then check the speed again. Deactivate another and so on and so forth. Make sure to make a note of the load time after each test.

Once you’ve gone through all your plugins, you will have a good idea of which ones are causing problems and should be replaced with faster alternatives.

The simpler alternative is to use Query Monitor. It has a bit of a learning curve but it will analyze your plugins and show you which ones are causing the most trouble.

Important Note: GoDaddy developed P3 or Plugin Performance Profiler a while ago and many sites still recommend it. It was a great tool – simple to use and gave you all the information you needed on your plugin performance – but it hasn’t been updated in 2 years. It tends to cause problems now, with some users reporting horror stories of their entire sites returning fatal errors, ergo we recommend you steer clear of this plugin.

Note that it’s a good idea to check your plugins regularly as some can start acting weird over time. If you monitor them, you can quickly change the problematic ones before they start seriously affecting your site and traffic.

Step #4: Enable Gzip Compression

If you’ve ever compressed a file on your computer, you’ve seen how much smaller in size it is after you’re done. With compression, you can turn a 60mb file into a 5mb one, which is a significant reduction in size. And that’s precisely what you want to do with your website, i.e. make it as small as possible.

Compression works on websites in a similar way, except we’ll be using a different tool known as Gzip. What it does is to compress your site’s files, turning them into zip files, which significantly reduces their size and massively increases the speed of your website.

So, how do you enable Gzip compression?

How to Use Gzip Compression to Optimize Your Site

When a visitor opens up your website, their browser sends a request to the server hosting your website, asking for the files of the page it wants to open. The server receives the request, searches around for the files and sends back a response that it’s found the files in question and starts sending the files. The browser then starts to download the files and once fully downloaded, displays the content.

While this system works, it’s not very efficient, which is where Gzip comes in. Not only will compressing the file save time, it will also save on bandwidth.

With Gzip compression, what happens is as follows: the browser sends the request to the server, telling it that it wants the compressed version of the files if available. The server once again searches for the files, sends the response to the browser when it finds them, compresses the files and sends them. The browser then downloads the files, which goes much faster because they’re a lot smaller, and then unzips them to show the user.

To enable Gzip compression, you first have to figure out whether you are running an IIS server or an Apache server. For IIS servers, you have to enable the compression feature in the settings. You can find full instructions on how to do this on this page from Microsoft.

In Apache, you will have to add some code to your .htaccess file. But don’t worry as it’s quite simple. Just copy the below and paste it into the .htaccess file:

# compress text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:

<files *.html>

SetOutputFilter DEFLATE

</files>

Once you’ve configured the server, it’s time to check that Gzip is actually working. You can either check online with this gzip test, or you can do so straight in your browser. In Chrome, go to Developer Tools -> Network Tab, then refresh the page and, in the network tab, click on the page. If you see a header saying “Content-encoding: gzip” that means it worked.

Load time before Gzip compression

load time impact before Gzip compression

Load time after Gzip compression

load time impact after Gzip compression

Step #5: Minify and Combine CSS and JavaScript Files

If your site has a lot of CSS and JavaScript files, the server is probably telling the browser to treat them as individual files, which means a new request and response for each one. That can really slow things down. The solution is to combine as many files as possible.

Another issue is that the code in these files is rarely as clean as it can be, with extra white spaces, comments and formatting that a computer doesn’t need but has to read. This delays things even more. So, the solution in this case is to minify the code. This basically means cleaning up the code by removing all characters that are not necessary for the code to run.

Below, you can see how minifying your javascript and CSS files can reduce your file size and therefore speeding up your website.
Minifying reducing file size

Manually Minify and Combine CSS and JavaScript Files

You can manually minify and combine these files either by hand or using special tools. We advise against doing it by hand, though. First off, you have to know what you can remove and what should stay. Secondly, when doing things by hand, it’s much easier to introduce errors than when you are using a special tool, such as the ones below.

CSS Minifier

This is a free online tool available from Dan’s Tools that will clean up your CSS code by removing spaces, indents, comments and new lines. This will help to speed up your website and ensure everything runs more smoothly. All you have to do is paste the code into the window and then click on Minify. Once it’s done, paste it back into your website.

JavaScripty Minify Tool

On the aforementioned website, you can also find the JavaScript Minify tool, which does the same thing as the CSS Minifier in the same way, except it does if for JavaScript.

Both these tools are very useful and simple to use as you don’t need to make any adjustments or fiddle with settings.

Smaller

Smaller is a paid app (though a 30-day trial is available) but it allows you to also combine more files into one. Note, though, that this one is only available for OS 10.7 and up users.

For WordPress: Use Plugins to Achieve the Same Thing

If you are using WordPress, the simplest approach is to use a plugin. This way, you won’t have to do anything manually. There are quite a few options available:

Better WordPress Minify

This is a free plugin that allows you to minify and combine your JavaScript and CSS files. It’s one of the best plugins to help you speed up your WordPress site as it offers a slew of adjustments in the control panel, uses WordPress’ enqueing system to improve compatibility, allows you to move the files that have been put in the que to any location you want, such as the footer and more.

Assets Minify

This is also a free plugin, but it comes with fewer settings, which can make it easier to use. You can even leave the settings on default without any problems. You also have the option of excluding various files and scripts if you want.

WP Super Minify

This is one of the simplest plugins available for compressing CSS, JavaScript and HTML in that it has the fewest settings. It does have a great feature where it will tell you what the size of the file was before minifying and after, allowing you to see the improvement you made.

Regardless of the approach you use, you have to be careful as you could kill the code. The easiest way around this is to have backups on hand and be careful when copying and pasting.

If you are worried about making a mistake or simply feel uncomfortable fiddling with code, you could always get a developer to do it for you.

Step #6: Improve Your JavaScript Files’ Speed

JavaScript can slow things down a lot more than CSS and it can slow things down even more as files get bigger and bigger. The problem is that these files are used to achieve seemingly simple things.

The problem with JavaScript is that most people aren’t developers, so they use various stand-alone plugins and libraries to get things done. The more things you need to get done, the more plugins you use and the heavier and slower things get. To speed things up, here’s what you should do:

Keep JavaScript in External Files

Though we’ve discussed minifying and combining files to minimize http requests, with JavaScript it pays to keep it in external files linked to HTML because external JavaScript files get cached. This means that when someone revisits your site, they don’t have to download the file again. However, that doesn’t mean you can’t combine multiple JavaScript files into one, thus reducing the loading time for both new and returning visitors.

Put JavaScript Files At the Bottom

A browser will start rendering the source code of a page from the top. The problem is that your JavaScript files can slow things down, and it stops the browser from completely rendering the HTML until those JS files are done. Typically, most JavaScript plugins and effects are used after the rest of the page has already loaded, which means that this isn’t the best situation.

Thus, you can improve the user experience and improve the page load speed by putting the link for the JavaScript external files at the bottom.

Test If Everything on Your Site Works without JavaScript

Turn JavaScript off and see if your site still operates properly. If important info disappears, or people can’t contact you or navigate around your site with JavaScript properly, you have to fix these issues because if someone doesn’t have JS enabled in their browser, your site will slow down to a crawl because part of it won’t work properly.

Step #7: Minimize Redirects

Redirects can lead to slower loading times because visitors are being taken to one page, which then sends them to another page. So, while it sometimes makes sense to have redirects, you need to remember that they can cause performance issue. Every redirect you remove will speed up your website just a little bit more.

You can find all your redirects with the redirect mapper tool. Once you’ve found them all, you can determine which ones you absolutely need and which ones you can do away with.

For example, Google recommends that you eliminate every redirect that is not mandatory and to never have more than one redirect to take users to the resources you provide.

Google page speed and redirection errors

So, the process for cleaning up your redirects should be to first find all of them, understand why each one exists, check how they impact or are impacted by other redirects, remove the ones you don’t need, and update any of the other redirects affected by the removal.

Redirection increasing the load time

As you can see from the above image, redirection create additional results which will take around 0.7S to redirect to new webpage.

Step #8: Enable Caching

Caching can really improve the speed of your website significantly, both for returning users and for new users, depending on the type of caching that you’ve enabled. Client-side caching, or browser caching, involves the browser saving certain elements of your website on the visitor’s machine so that next time they visit your site, it doesn’t have to download those same files again.

Depending on the elements in question, you can set expiry times so that the browser knows when to check if the element has changed and download the new file. For example, for your logo, you might set the maximum expiry date of a year, because you know it won’t change quickly.

Server-side caching helps with new users as well as return visitors. This is because a copy of the page will be saved in the memory temporarily ensuring that if 50 users visit your site within an hour, the server doesn’t have to go hunting for those files repeatedly.

Regardless of which caching method you use, both will help improve load times significantly.

Enabling Browser Caching

To activate browser caching, you will have to include expiry times for various types of files in your HTTP headers.

You will also have to modify the .htacess file, which can be found in the root folder. You might be unable to see this file at first, as it’s usually hidden, but an FTP client like FileZilla will allow you to access it. To modify it, simply open the file in notepad.

Insert the following code to inform the browser what files it should cash and for how long. You can modify the times as you see fit.

## EXPIRES CACHING ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg “access plus 1 year”

ExpiresByType image/jpeg “access plus 1 year”

ExpiresByType image/gif “access plus 1 year”

ExpiresByType image/png “access plus 1 year”

ExpiresByType text/css “access plus 1 month”

ExpiresByType application/pdf “access plus 1 month”

ExpiresByType text/x-javascript “access plus 1 month”

ExpiresByType application/x-shockwave-flash “access plus 1 month”

ExpiresByType image/x-icon “access plus 1 year”

ExpiresDefault “access plus 2 days”

</IfModule>

## EXPIRES CACHING ##

For things like CSS files, you might want to set shorter times as they tend to be updated more frequently. When you are done, save the file with the extension it already has and not as a text file.

Load time before caching

Load time before enabling caching

Load time after caching

Load time after enabling caching

For WordPress Users

If you are using WordPress, things are a lot easier. You can install a plugin to handle all your caching needs. A great free option is W3 Total Cache, which has a lot of functionality. One of the best plugins, and the most advanced, though, is WP Rocket, but you will have to buy it. However, the wide range of features and its functionality makes it more than worth the small investment.

Step #9: Constantly Optimize Your Databases

A powerful way to improve the speed of your website is to make sure your databases are optimized all the time, which is especially important for WordPress users.

WordPress, along with the plugins you’ve installed, save their data in your database, so the more you use them, the more data will be saved in the database. The more data there is, the longer it will take WordPress to find anything in that database, which will slow down your website. This is especially true of plugins that save logs, user data and stats, as well as having post revisions, pingbacks and trackbacks enabled.

So, you can improve the speed of your website significantly by cleaning up your database on a regular schedule. You can automate this process with a plugin known as WP-Optimize, or you can do things manually if you don’t use WordPress.

To manually optimize your database, open your MySQL database in PHPMyAdmin and select the tables you want to optimize. Open the drop-down menu and select Optimize table. After the process has completed, a confirmation message will appear on-screen.

Step #10: Test Your Website’s Speed Again

Once you’ve completed all the previous steps, run another test to see how fast your website is running. You should be pleasantly surprised at the results.

Of course, this isn’t an exhaustive list of what you can do to improve the speed of your site, but we did pick the actions that would have the biggest impact.

Step #11: Repeat

Like with anything, you can’t just do all these things once and forget about it. Optimizing your images, for example, should be something you do every time you upload a new image. Likewise, many of the other steps can be repeated when new content is added, changes made or updates done, which will ensure that your site keeps going as fast as possible.

If you don’t keep things running smoothly and forget all this advice after you’ve done it once, your site will gradually slow down again and you’ll have to start all over again. So, it simply makes more sense for you to keep everything running smoothly from the get go.

4 thoughts on “How to Improve the Loading Speed of Your Website: A Step-by-Step Guide”

Leave a Reply

Your email address will not be published. Required fields are marked *