Think site loading speed is not a game changer?

Think again.

Just a delay of one second in site load time can result in:

• 11 percent fewer views
• 16 percent lower customer satisfaction
• 7 percent lower conversion rate

To say it plainly, you need a site that loads quickly. Just a few seconds delay in loading can cause the bottom-line to shrink considerably.

In this 2-part series, we’ll look at some practical tips to make your WordPress site load faster.

Let’s dig in.

 

Reduce HTTP Requests

Whenever a visitor tries to access a webpage, the visitor’s browser pings the web server that hosts that webpage. The ping is nothing but an HTTP request for the content on the webpage that includes text, images, and multimedia on that webpage.

Once the website server receives HTTP requests, it starts delivering the files to the visitor’s browser. In general, the browser has to make individual HTTP requests for each file. The more HTTP requests your browser has to make, longer the loading time.

To reduce the loading time you need to reduce HTTP requests by combining and minifying JavaScript, CSS, and HTML files.

Minification refers to the removal of unnecessary characters like whitespace, formatting, and comments and any lines from the HTML, CSS, and JavaScript file that are not required to execute the code.

Combining refers to creating one single file of each type from multiple CSS and JavaScript files.

For example, if your webpage has 4 external CSS files and 4 external JavaScript files, combining the files will result in 1 external CSS file and 1 JavaScript file. Before combining the files, the number of HTTP requests was 8 which reduced to 2 after combining.

 

Use Asynchronous loading for CSS and JavaScript files

The webpage can be loaded in two ways: synchronous and asynchronous.

In general, the webpage assets are loaded from top to bottom. If your webpage uses synchronous loading, the webpage will start loading from top to bottom. However, if the browser reaches a CSS or JavaScript file in between, it will not load other elements until the JavaScript or CSS file is completely loaded.

The synchronous loading negatively affects user experience as the page loading time increases considerably.

In Asynchronous loading, the browser does not stop loading other assets even after encountering CSS or JavaScript files. The browser continues to load JavaScript and CSS files along with other page elements.

 

Preventing JavaScript loading initially

Since JavaScript can cause delays in page loading, you can prevent loading of JavaScript initially (at first stage).To prevent JavaScript loading initially, you need to change the JavaScript placement.

This is done by moving JavaScript from the head section to the bottom of the page just before the </body> tag.

When you place the JavaScript at the bottom of the page, the page will load all elements from top to bottom and the loading of JavaScript happens at the end.  Thus, JavaScript would not interfere or delay loading of other elements on the page. 

WordPress users can use a plug-in to enable deferred JavaScript loading. All you have to do is install WP Rocket plugin in your WordPress website and check the option “Load JS files deferred.”