How to optimize WordPress website to improve page speed

There is no wonder if a WordPress websites load slower. WordPress websites are built on PHP and they are database oriented. They have complex code that would reduce the page loading speed. The plugins you use for additional functionalities can make the code further heavier.

While WordPress CMS makes it easy to build and manage complex websites easier, it comes with its own problems. One such problem is this slow loading.

I don’t think I need to tell you why the speed of your website matters because you know how it is going to affect your business.

Fortunately, we got you some amazing tips to optimize your WordPress website to improve page speed. These tips are proven to reduce the page loading time and you can use them on your website.

Remember, all these tips to optimize a WordPress website to improve the speed are based on two concepts: Reduce the file size and reduce the number of HTTP requests.

Before you start, it is a good idea to check the speed of your website and compare it after you make each change on your website. You can use free tools like Pingdom or Google Page Speed to measure the speed.

 

Consider Changing your Hosting Plan or Service Provider

If you have a basic hosting plan, most probably your bandwidth would be limited. You can upgrade your plan if you have a huge website or get huge traffic to the website.

Moreover, all hosting service providers don’t provide the same service and the speed may differ based on your server configuration. You can think about changing your company but it is better to choose this option after trying all the options discussed below.
Another factor to consider while choosing the hosting is to select a server that is geographically close to your target website visitors. The physical distance between the server and website visitor affects the page loading speed. Therefore, you should also consider this factor while you choosing the hosting. 

 

Upgrade PHP Version to the Latest Version

WordPress recommend the latest version of the PHP and you should check if the PHP version of your server and database is up to date. Currently, PHP 7.0 is recommended. You can open your CPanel and check the PHP version. Some hosting companies make it easy to upgrade the PHP version while others not. Sometimes, you will have to contact the support team to get your PHP version upgraded.

Sometimes, your theme or some of your plugins may not be compatible with PHP 7.0. In this case, it is recommended to get rid of them. Use plugins and themes that are updated recently. This can make a hell of a difference.

 

Minify the Code

You can minify the HTML, CSS and JavaScript documents using free tools available online which will reduce the size of these documents. It can instantly reduce the page load time. 

Minify is a term used to remove the unnecessary code, spaces and comments in the document and this reduces the file size.

Google recommends minifying the HTML, CSS and JavaScript resources and provides a list of useful free tools to minify the documents.

Minifying a document is not the same as compressing it. A compressed document has to be uncompressed before it can be used whereas browser can read minified documents as it is and it would interpret them the same way.

Basically, minifying a document is the process of removing the contents which are not relevant to the browsers. A document will contain lots of spaces and comments to make it readable for the humans, but browsers don’t need this. We can remove all these kinds of things from the document to reduce the file size and upload it to the server. Since the file size is positively correlated to the loading time, minifying the documents can increase the website speed.

Here is a quick way to minify your resources

There are lots of free tools online for minifying HTML, CSS and JavaScript documents. You can copy the code in a box and it will give you the minified version back. You can copy it and upload it to the server.

But WordPress websites masters can do this all automatically. Just like for everything else, we got some amazing plugins to do all these things for us. Here is a list:

  1. Minifier
  2. Minifier

Activate one of these plugins and after a few clicks, you are good to go.

 

Compress the Images

Compressing an image can reduce the file size without losing the image quality. There are many techniques to compress an image for a WordPress website but before talking about it, I would like to give you another important advice.

I have seen many people uploading high-resolution images to use it as a featured image or thumbnail. Replace any high-resolution images with the proper sizes. If you want to use an image with the resolution set to maximum 600*400, don’t upload the 1920*1080 resolution for that. Please upload the images with exact sizes.

Now you have the right sized images and you can compress this if you want to increase the website speed. You can use plugins like WP Smush it to compress an image. This plugin can remove the meta-data from the images in addition to compressing them. However, I don’t recommend this because it is one more plugin on your website.

Instead of using a plugin, I prefer using online tools to compress the images and replace them with the original images on the website.

Popular and Free Online Tools for Image Compression:

Optimizilla

 

Compress the Resources in gZIP format

You can also compress you HTML, CSS and JavaScript documents and reduce to reduce the file size. There are lots of plugins to compress your documents. When a browser requests the documents, the server provides the compressed files which are lighter than the original files. Since the file size is reduced, it will be transferred to the browser faster and the browser.

Unlike minified CSS. HTML and JavaScript files, the browser can’t read or interpret a compressed file. Therefore, the browsers decompress the files before it can use it. You don’t have to worry about the decompression and browser compatibility of the compressed files. WordPress plugins used for compression use gZIP format and every browser support this.

 

Cache Your Website

The concept behind the caching would be a nightmare to you if you don’t know how a website works and the difference between a static and dynamic website. Even if you don’t know them, it doesn’t matter. You can just install the plugin and tweak some settings of the plugin, Boom! Your websites now load faster.

There are plenty of free plugins for WordPress websites that allow you to cache your website automatically. Here are my favorites.

  • W3 Total Cache
  • WP Super Cache

Remember, you will have to use the “flushing” option on the caching plugin after you make a change on your website. Otherwise, your visitors won’t see the updates.

A couple of paragraphs below would help you to understand the idea of caching. You can understand this better if you already have an idea how websites works and the difference between static and dynamic websites.

The process of saving the resources like images, fonts and CSS and script libraries on the website to the browser is called caching. When someone visits the website again, the browser doesn’t have to fetch the resources again from the server because it is already in the browser cache. This can increase the page speed up to 5 times.

You should remember that the speed would be the same when the user visits the page first time from the browser or he/she visits it after clearing the browser cache. This technique is useful for websites which have returning visitors.

This is only one way how caching helps you speed up the website. This is not how the caching plugins for WordPress websites actually work. 

Plugins create a static version of your web pages by using the resources from your database and save them in your server. When a browser requests for a particular page, the plugin will deliver the static page.

If you didn’t understand this, here is a short explanation.

WordPress CMS is built on PHP and the websites we create using this platform are database oriented. Each time a page is requested by the browser, the server needs to send multiple requests to the database to get the necessary data from the database. WordPress websites are built like this way. As the number of requests to the database increase, it would slow down the loading speed. Here is why caching comes to your rescue.

Caching plugins saves the static version of the websites and it is sent to the browser.

One problem with this technique is that whenever you make a change in the database, it may not reflect on your website because the static page doesn’t interact with the database. To get rid of this issue, plugins have a function called “flushing.” A simple click on the flushing option would reset the static page based on the recent changes to the database.

 

Avoid Heavy Themes

A website running on a theme would be generally slower than a normal website. Themes require heavy coding and there will be a huge number of processes on the server to deliver the web pages. The number of processes may vary based on the complexity of the themes and the resources it uses.

Therefore, it is important to not choose a slow theme for your website. If you choose a theme that is slower, no matter what you do, you can’t increase the loading speed from a point.

You can check the speed of theme by checking the speed demo website of the theme using a website speed checker.

 

Use Content Delivery Networks

Content delivery networks are servers that host your files or resources. You can upload your files on these networks and they would host your files on servers in different parts of the world.

While you build your website, you can upload the necessary files on a CDN and on the website, you can point the links to the files on the CDN instead of your own server.

Here is an example; Cloudflare is a popular CDN and it has servers across the world. You can create an account on this website and upload your files there. Cloudflare would save your files on servers in different parts of the world.

Now on your website, you can point the link to the files on Cloudflare whenever you want a particular resource. When the users’ browser requests the file from the Cloudflare, Cloudflare would deliver it from the server closest to the user. 

There are two ways how a CDN helps the websites load faster.

Firstly, if your website is hosted on a server in India, the website speed for users from India and the U.S would be different. Since your resources are on a server in India, it may take a few extra milliseconds or seconds to load the website in the U.S due to the distance.

In this case, if you have your files or resources on a CDN, the browser will request the file to the CDN. Now the CDN has to deliver the file and it would deliver the file from a server that is closest to the user. This can probably make the website load faster because most of the heavy files or resources are delivered from a server that is closest to the user.

Make sense?

The second way how a CDN boosts the speed of a website is related to the server bandwidth. When the CDN do a lot of work for delivering the website, your server’s workload is reduced. This would ultimately help the server work efficiently.

 

Use Faster Plugins

Take a second thought of your fancy plugins. The plugins you use to add extra functionalities to your website may affect the page loading speed. The plugins for gallery, sliders and portfolio require lots of codes and it if it is not done the right way, it will slow down the loading.

Therefore, choose plugins that are faster from the variety of options you have.

WP Beginner compared five slider plugins (Soliloque, Nivo, Meteor, Revolution Slider and Layer Slider) and found Soliloque as the fastest among the five. In the same experiment, they also compared three gallery plugins (Envira Gallery, Foo Gallery and NextGEN) and Envira Gallery was the fastest.

Unfortunately, the fastest plugin may not be easy to use or feature-rich plugins.

 

Clean your Database

If you use your WordPress for a long time or you have changed the websites several times, probably you may have lots of unnecessary data on your database. You can optimize your database by clearing all these junks.

Don’t worry. You don’t have to do all these manually. Just like for everything else, you got some amazing plugins to help you here. I would recommend you WP-Sweep plugin and I know many other developers recommend this one.

You can use this plugin to clear all unnecessary data on your database and optimize it for better page loading speed.

 

Remove Post Revisions

Each time you create a draft or save a post as a draft while you creating the post, it is saved in the database. WordPress saves each change or revision you make the post because sometime you may want to go back or revert to a previous state. This is a handy feature and saves us from a lot of troubles.

However, sometime we may not need these revisions anymore because your final revision is perfect and there is no reason to go back to the old versions of the post. At this point, the revisions saved on the database are a burden for us because they consume a lot of space.

You can delete all these junks on your WordPress website’s database manually or by using plugins. The WP Sweep plugin I recommended above removes the post revisions.

 

Disable Hotlinking or Leaching your Content

Sometimes, other websites may use contents, especially images, from your website by directly linking to your image.

For example, you have a nice shot of sunset on one of your posts. Another blogged liked the images and decided to use the same images on his/her blog. This guy, instead of downloading the image and save it in his/her own server, gives a direct link to your image on your website as the source of his image. This process is called hotlinking in the web industry.

The problem with this is that, whenever someone opens the new guy’s blog post, the browser will get the image from your database because he has pointed to your server. This causes unnecessary use of bandwidth on your server. Somebody uses your bandwidth and you don’t get the benefit from this.

It is not a big deal if the number of these kinds of requests to your server is below a couple of hundred per month. However, if the requests increase it will consume your bandwidth and your website would suffer.

Here is hot to disable hot linking on your website.

 

Avoid Render Blocking Scripts (Put JS below the Content)

If you JavaScript or JQuery codes or links to an external script file in your document, keep it below the content. This is something you can’t do without opening the document in a code editor.

You don’t need your script to load in the browser before the content is loaded. This might affect the content and layout but we got some fixes for this and it is not a problem anymore.

The actual problem when you have the scripts before the content is the content will be loaded only after the scripts because browser reads from top to the bottom. This increases the loading time and you don’t want that. Therefore, move all your scripts to the bottom of the document just above the closing body tag.

 

Put the CSS on Top

While it is recommended to keep the scripts at the bottom, the CSS should be kept above the content. Otherwise, the browser will render the content first without any style and when it reads the style, the browser would begin to apply this style. This is an extra load on the website and so you can keep the CSS above the content.

This helps to give the browser the styling instructions first and when the browser reads the content, the browser will immediately render the content based on the style. 

 

Other Strategies to Increase Loading Speed

Pagination

You can split long posts, gallery, portfolio, or comments into multiple pages like we have one here. As the post or gallery go long, the number of images used may increase which would reduce the loading time. If you use pagination effectively, you can make it load faster and user-friendly.

Reduce HTTP Requests

Reduce HTTP requests. WordPress plugins and themes may use lots of these. You may need data from social media websites or resources from different websites. You may not be able to get rid of all these but reduce it to the maximum.

WordPress caching plugins would help you do this to an extent. There are many additional ways to reduce the number of HTTP requests.

Minimalistic Design: A minimalistic design would need fewer images and resources which would make the website lightweight.

CSS Sprites: CSS sprites is a technique to arrange multiple images, mostly images with the same size, in a row or column and save it as a single image. When you want to use any one image from multiple images arranged on big image one after another, you can display it using width, height and background-positioning. You can read more about CSS sprites on W3Schools’ website.

These are few ways how you can speed up your WordPress website and please let us know if it has worked for you.

Leave a Reply

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

Enquire Now
Share this
Send this to a friend