WordPress Website Speed Optimization - WP Video Tutorial

How To Speed Up Your WordPress Site?

If you own a professional business website, you must be aware of how important page speed is in Google ranking. Whether you access your website on mobile or desktop, page speed strongly decides user experience and is a major factor in the online marketing sector. Slow page speed does not appeal to a mass audience; slow WordPress websites are a common challenge that can be resolved by following certain methods.

 

In this blog, we will demonstrate how to boost your WordPress page speed by simple methods. As an example, here is the page speed insight of a page before optimization, which we are going to increase by using a series of steps;

 

https://ahrefs.com/blog/wp-content/uploads/2020/10/1-pagespeed-insights-slow-1.png

 

When we run the whole website through the Ahrefs site audit, it is evident that the page loading speed and time are lower. No page loads faster with an average load speed of 570ms.

 

https://ahrefs.com/blog/wp-content/uploads/2020/10/2-site-audit-average-load-slow.png

 

Above are the results before optimization while below is the same page speed boosted around 91% in 20 minutes through easy page speed optimization. The difference in the two results is as clear as crystal. The score from the page speed insight is commendable and every website page loads 2X faster.

 

https://ahrefs.com/blog/wp-content/uploads/2020/10/4-site-audit-fast-1.png

 

In this tutorial, you will exactly find out how you can achieve faster page speed in just 20 minutes by following a few simple steps;

 

Step 1. Uninstall Unnecessary Plugins

 

In case you don’t have a brand new website, there can be many installed plugins that you don’t use and these might be impacting your WordPress website speed directly. Therefore, it is important to deactivate those plugins that are unnecessary and uninstall others that are not used as a starting point. This action requires careful attention to make website-oriented decisions that can positively impact your website speed.

 

Step 2. Switch DNS providers to Cloudflare

 

Generally, websites are hard drives or files that are connected to the Internet. Almost every device which is connected to the Internet has a special IP address (e.g., 123.123. 12.1). Usually domain names are mapped to IP address via DNS (Domain Name System). You can relate it to the phonebook of the web. Whenever you search for a domain name in your browser a DNS looks for the server’s IP address. Many people continue to use free DNS providers to look up a domain registrar which takes more time and makes the page speed slow. What you can do is you can resort to a faster DNS provider such as Cloudflare. You can sign up for free and create a Cloudflare account. Click on ‘Add a site and enter your domain name to complete the action.

 

5 cloudflare dns

 

You can go for the free plan and click ‘Confirm Plan’. Cloudflare allows you to review your DNS settings before you can proceed with your action. If there are no warning signs then it is safe to continue. Now all you are left to do is to exchange your nameservers with your domain registrar. You can ask for help from support if you are unable to do it. You can go by this process as shown below if you are using Google Domains:

 

6 nameservers

 

Step 3. Install A Caching Plugin

 

Caching is a process by which you can store files that are to be delivered to visitors more promptly. There are two kinds of caching, namely;

 

Browser caching: This kind of caching saves common files like logos so that you don’t have to download them again and again from the user’s hard drive.

 

Server caching: In this type of caching, you can save the static version of the page to avoid building it from scratch whenever a visitor requests it.

 

WP Rocket makes caching process easier for you, by using this super plugin you can activate basic caching with general server and browser settings. If your website is responsive you can enable it on your mobile devices as well by changing the caching settings.

 

7 wp rocket caching

 

Step 4. Minify The Code

 

You can enable the minification process to remove comments and whitespace from your code to reduce the file size. This will ultimately increase your website loading speed as websites load smaller files much faster than heavier files. If you are using the WP Rocket plugin you can simply click on the checkboxes to minify JavaScript and CSS files in settings. If you’re looking for other options you can use an alternative i.e. Autoptimize and follow the same action.

 

8 minify

 

Step 5. Combine JavaScript and CSS Files

 

Many websites include various javaScript and CSS files. Some are used for plugins while others are for themes, you might as well possess a few custom files too. You can practically combine these files to speed up the page loading speed. Your page loading speed directly depends upon your server setup.

 

With HTTP/1.1: JavaScript and CSS files can be loaded side by side. It means that one file must be fully uploaded before the next one begins to load.

 

With HTTP/2: These files load can load concurrently. You can load multiple JavaScript and CSS files at the same time.

 

When your server used HTTP/1.1, your overall page loading speed increases because single files are loaded at one time. While using HTTP/2, your server will also not face any problems because files can load easily at the same time. You can view which version your website makes use of by plugging your domain into the key CDN’s tester.

 

9 http1 http2

 

If the HTTP/2 is not supported by your server then it is important to combine JavaScript and CSS files. To do it successfully you will have to install WP Rocket and tick the checkboxes as we did earlier to ‘Combine JavaScript files’ and ‘Combine CSS files’ options available in the settings.

 

10 wprocket combine css

 

In case you are using Autoptimize then you have to tick two checkboxes to combine these files. It is important to note that this action can sometimes result in the breakage of things on your website. Therefore it is recommended to double-check everything beforehand in the incognito window. Otherwise, the changes made will not reflect the page speed.

 

Step 6. Eliminate Render-Blocking Resources

 

Rendering is the process by which a code is turned into a visible web page. By the word ‘Visible’, it means that the web page does not need to be completely loaded before it is visible to the audience. Therefore, it is essential to prioritize resources for the ‘below the fold’ content. You can achieve this by using WP Rocket and moving forward by ticking the checkboxes to ‘Optimize CSS Delivery’ and ‘Load JavaScript Deferred’.

 

11 wprocket optimize css

 

If you plan to use another alternative then two good options are available namely, Async JavaScript and Autoptimize. To link the plugin to your server you can check the box ‘Inline and Defer CSS’ in Autoptimize settings and ‘Enable Async JavaScript’ in Async JavaScript. If you come across the ‘Eliminate render-blocking resources’ issue in the page speed insights then these actions will resolve this problem in no time at all.

 

12 render blocking pagespeed insights

 

Step 7. Lazy-Load Videos and Images

 

Lazy loading boosts page speed by deferring videos and image loading time until they are visible. If you are working on WordPress 5.5+ then image lazy loading will be activated by default but not for video loading. If you are using WP Rocket then you can enable this action by ticking the ‘Enable for iframes and videos’ checkbox in the LazyLoad settings.

 

13 lazy loading videos

Step 8. Enable Preloading

 

Preloading is an important factor that enables you to determines resources so browsers can load eseential files. For example, let us pose that your code looks something like this;

<html>

<head>

<script type=”text/javascript” src=”somefile.js”></script>

<link rel=”stylesheet” href=”/style.css”>

</head>

<body>

Content

</body>

</html>

 

Based on this code, the javaScript files will be loaded first as per a set hierarchy, which is certainly not ideal as CSS files are more critical than JavaScript code. You can solve this issue by adding another line of code as given below;

<link rel=”preload” href=”/style.css” as=”style”>

This code tells the browser to load CSS files over JavaScript files regardless of any hierarchy.

 

Step 9. Use A CDN

 

What exactly is CDN? CDN or Content Delivery Networks stores a copy of your website which makes it easier for users to connect with your web pages. For instance, let us consider that your web host server is in the UK. So, when a user visits your website by sitting in the US and without a CDN the connection between the user device and your server will be slow. However, if the user visits from the US and there is a CDN then the device will be connected closer to the server which will directly increase the site loading speed. There are many professional CNS providers, all you need to do is to select a reliable one and enable it with the WP Rocket plugin and enter the CNAME.

 

14 wprocket cdn

 

Step 10. Optimize Your Video and Image files

 

Lazy loading resolves most of your speed issues especially related to images but doesn’t do much help with images that go above the fold. The bigger the size of the images the more difficult it is to load them hence, it will surely negatively impact your page speed. To solve this issue, you need to compress images with a plugin just like Shortpixel. The initial step is to download and activate Shortpixel and land into the setting to enter the API key. Then click on ‘Save and Go to Bulk Process’ followed by ‘Restart optimizing’.

15 shortpixel

 

If you are not satisfied with the results then change the compression type to lossless or glossy in the settings.

 

16 shortpixel compression

 

Final Thoughts

 

Finally, when we take a look at the impact of these optimizations and then analyze how our page speed has increased, the difference is clear as night and day. Take a look at the before and after optimization results given below;

 

Before Optimization;

 

1 pagespeed insights slow

After Optimization

 

3 pagespeed insights fast

And here is the result from GTMetrix;

18 gtmetrix before

17 gtmetrix after

 

You can see that before optimization, the page loaded in 5.9 seconds with a 1.89MB page size with 67 requests. On the contrary, the result after optimization of the page size is 695 kilobytes, loads in 4 seconds and almost 50% of requests number has decreased.

 

4 site audit fast

 

All the page speed insights clearly define how all these steps worked well to increase the site loading speed. However, every WordPress configuration is different from one another. For instance, you might have slower hosting, multiple plugins, heavier themes, or third party tracking scripts that can lower your website speed. Therefore, hiring a professional developer or a page speed expert can prove a worthy option to take a deep look into things that are otherwise ignored and bless users with faster site loading speed.

 

No Comments

Post a Comment

Comment
Name
Email
Website