Day 23: Speed up your website

There are more than one factors that determine the speed of any website. So there obviously will be more than one steps to improve your site speed. This guide will cover 5 important steps that can be taken to improve the site speed and thus the user experience.

1. Reduce the HTTP requests

A web page is made up of many components like images, stylesheets, and scripts. Each component is accessed by a search engine with different HTTP requests. Thus more the number of page components, more will be the page load time.

To reduce this, you first have to find out the total number of components on the page. In case of Google Chrome, this can be done by browser’s developer tools.

Right click on the page you analyze and select Inspect. Then click on the network tab. The data there will show you the name of the component, its size, and the time it takes to load.

The bottom left corner will show you the total number of request for this page. You can reduce the number of requests by removing any unnecessary file from the page.

2. Combine your files

Now once you know the number of files on your page, you can reduce or combine them. The best place to start with is the HTML, CSS, and JavaScript files. You can minify and combine these so that the file size reduces.

When you minify a file, you remove the white spaces, codes, and formatting that are not needed. You must also remove line breaks, extra spaces, and indentation.

If your site is built on WordPress, you can use a plugin called WP rocket to minify and combine files. Go to the plugin and click on the static files tab. Select the files you want to minify.

Once you are done, click on the save button to save the changes made. Reload the page after this and check in the developer tools if your changes are working or not.

3. Reduce the size of images on the page

Your web page may at times have large sized images that reduce the page load speed. Reducing your image size can improve your site speed. One of the best ways to do it is to crop the image to correct the required size. When you upload a 2000 px wide image that needs to be set in a 570px wide area, your image will adjust the image to the required size first that will increase the load time. When uploading the image, set the width value to the required value.

You can also use different tools to compress your images. WordPress offers a tool called WP Smush. In the plugin settings, check on the “Automatically smush my images on upload”. From that point, every new image you upload will be uploaded in compressed size. You can also set a maximum height and width for all the images. Any new image that will be larger than the limit will be automatically reduced.

If you do not have a WordPress site, you can use a third party tool like compressor.io. Before you upload any image on your site, compress it with this tool.

4. Loading of CSS and Java Scripts

There are two ways these scripts will load- synchronously or asynchronously. In synchronous loading, all the elements on the page will load one at a time. The page is loaded from top to bottom and element by element in their sequence. In asynchronous loading, all the elements are loaded simultaneously.

Asynchronous loading can boost your page load speed because browser loads a page from top to bottom. When the browser comes across a script in synchronous loading, it will wait until a file is completely loaded and then move forward. While in asynchronous, other elements will be loaded while one element continues to load.

Go to your WP Rocket plugin and select the static files tab. Select all the items in the render-blocking CSS/JS section. Click on the save button to save your changes.

5. Reduce the response time of the server

The more time your DNS lookup will take, more will be the page load time. DNS is a database of IP addresses along with the hostnames associated with them. When a user searches for a URL on the browser, DNS translates the URL to the related IP address that gives its online location. Thus DNS lookup is the process of finding a particular record in DNS server. The least time DNS will take to find the online location, the quickly will your site load.

Let us take for example a URL ubnt.com. When a user enters this URL in his browser, his work is done here. The ISP will then do a DNS lookup to get the IP related to the URL. This process actually prevents users from remembering long IP addresses.

If your DNS server is taking time to take you to the URL, its time change to a better server. You can compare the speed of different DNS servers by a report that is updated monthly.

Switching to a fast DNS server can highly improve your site speed.

These were 5 important steps that can give you a considerable improvement in your page load speed. Next article in this series will be about the importance of a good website design. Good design ensures good user experience.