How To Optimize Speed and Performance of WordPress

From small websites to huge traffic sites, everyone wants to make their WordPress website fast.

The speed has an impact on user engagement and bounce rate.

You may need a web developer to speed up your WordPress website.

But today, I am going to show you How to Optimize speed and performance of WordPress.

Also, I will share some thoughts on the best optimization plugins for WordPress.

Why Should I Optimize WordPress for Speed

You may have heard about that speed of website has an influence on search ranking.

Search engines like Google, Yahoo! and Bing wants to show relevant and accurate search results to their users.

When they hit click on your website, the google tracks their behavior like the time spent on your website. If they bounce back quickly, it is bad for you, because google’s user gets disappointed by speed.

In turn, you are disappointing Google. They Google may put you back and will introduce a new one with the best speed than yours.

Officially, Google didn’t declare it as ranking factor.

Also, why you should optimize your WordPress is that users are impatient. Statistics show that from 2000 to 2017, average human attention has dropped from 12 to 8 seconds.

So, you should put this goal on the top, because it is necessary for everyone like Google wants less bounce rate, the user wants the fast website, and you want more user engagement.

How did Loading Speed Gets Affected

Many things are responsible for low loading speed of the website. But few of them have high impact and some have low. The main things which affect the speed of WordPress website are:

Hosting

Every website owner wants to host his/her website on a good host.

But often we make mistakes in choosing that. You may have heard that hosting has three main types Shared, VPS and Dedicated server.

Let me explain each one of them.

• Shared Server Hosting: The word shared itself gives us a meaning that something is being shared with others, By choosing shared hosting, we are sharing the resources among other websites and it may affect your speed. Because you are sharing processing power of the server, RAM and much more with other websites.
• Virtual Private Server Hosting: Using this type of hosting means that there are other few sites hosted on the same server. But the resources are allocated to every website(limited access). Here you can’t exceed the limits.
• Dedicated Server Hosting: Are you freedom lover, then choose this type of hosting (it is costly hosting). It is an expensive hosting because you are only one using the server and no one other then you can host websites on it.

You may have understood how hosting affects loading speed. Other things like updated servers have also impact on the speed of your site.

Plugins and Themes

Using too many plugins or themes may be difficult for the host to process them.

It may create the overload to the server and your server goes down and in turn lowers the loading speed. Sometimes we upload the plugin or theme and use it. After few days, we upload another plugin or theme and deactivate the previous one.

But we don’t delete the unused plugins and themes, which affects loading speed. We should delete the unused media like plugins and themes to prevent low speed.

Having lot of plugins and themes overloads the database and affects the speed. We should choose theme wisely.

The best theme providers are Studiopress, Thesis, and Mythemeshop.

The above-mentioned things are the reasons for low loading website.

How To Check Speed of Website

This is the real matter of discussion, where and how to check the speed.

If you search for speed tools in Google, you may find hundreds of tools. Al of them are not good but all of them are not bad also.

The tool I use is GtMetrix and I love it. The reason for choosing this is that it is an in-depth tool.

The tools you can use to check the speed of website are GtMetrix, Pingdom, and Pagespeed Insights.

GtMetrix

I mentioned earlier that I use it for checking and monitoring the speed of my websites. GtMetrix gives an in-depth detail of everything on your website.

You can do compare after optimizing the website and can check how your site was performing and how much it is getting better now.

Also, it shows you YSlow(Why Slow) means what is the reason which affects your speed.

Pingdom

It is also a great tool for choosing page speed or loading speed. It provides deep analytics but not much as GtMetrix.

Many webmasters recommend it for checking speed because it focuses only on speed.

PageSpeed Insights

This is the official speed testing tool for Google. It incorporates data from Chrome user experience report.

The modifications have been done to this tool recently to make it better. It provides real performance and gives suggestions on improving website speed.

You can use the above tools to speed up your website. Now let’s see what optimizations we can do to make our WordPress powered website faster and reliable.

Ways To Optimise Speed and Performance of WordPress

When speed checking comes to end using one of the above tools, the results are unexpected. Because your websites speed and performance is bad.

There are many ways to optimize the speed and performance of a WordPress website. But the following are the main things, if left unchecked or unoptimized, it can hurt your websites speed and performance.

• Content and File Caching
• Compression
• Optimize CSS and Javascript
• Reduce the number of HTTPS requests
• Maintenance of Plugins and Database
• Add expiry date
• Reduce Image Size
• Use a CDN
• Paginate long posts and comments
• Limit number of posts on Homepage
• Show only Thumbnail image on Homepage

Content and File Caching

Whenever a user requests a page, the server begins to get that page from the database.

If you have a small website, then it can work fine but if having a massive traffic site, then it may cause a delay in rendering the pages from the database.

Because with high traffic, the database gets overloaded and doesn’t function properly.

You can overcome this problem y using a caching plugin if using WordPress.

The caching plugin helps us in reducing the load on the server. Because it creates a static copy of request pages and then delivers them to users finely.

This can help in making the site faster. The cache plugins I use are:

• WP-Cache: It stores the static pages and then delivers them to users. But it uses PHP engine to deliver them and reduces the load on the server.
• WP Super Cache: This plugin creates static HTML versions of posts and pages, then delivers them to users. It doesn’t use PHP engine or database.

You shouldn’t use the caching plugins together because it can create conflict between the plugins.

Also, you should have knowledge of caching, because caching is the process which means the way your website performs.

Also, the plugins may or may not work for your website. Because these two plugins have their downsides also, so you should read the documentation carefully before installing plugins.

Compression

Compression is the best way to reduce load time. With compression, we can save bandwidth because the web pages user is looking for are compressed.

Here the server compresses the files and content on your site so that to prevent oversize of files. In turn, it reduces load time.

Compression method works like this.

Here, the compressed files are received by browsers and when users request that page browser uncompress it immediately and displays it in original form.

This reduces bandwidth usage and makes the site faster. Now, what are the ways to compress files and content? Here we go.

• Using htaccess file: We have two ways to do this. one is using gzip module and another is deflate module. Gzip module method is used for those websites which are running on servers having old Apache versions. You can enable it via htaccess file by using the code.

 <ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Deflate module method is used for websites running on servers having the newer version of Apache. They can add this code to htaccess file to enable compression.

<IfModule mod_deflate.c>
<filesMatch "\.(js|css|html|php)$">
SetOutputFilter DEFLATE
</filesMatch>
</IfModule>

• Compressing files using PHP:  You have the ability to compress the files by using the small code in your themes header.php file. Remember to add this code at the beginning of the file.

<?php // compress JS
header("content-type: text/javascript; charset: UTF-8");
header("cache-control: must-revalidate");
$offset = 365 * 24 * 60 * 60;
$expire = "expires: ".gmdate("D, d M Y H:i:s", time() + $offset)." GMT";
header($expire);
if(!ob_start("ob_gzhandler")) ob_start();
?>

<?php // replace this line with as much JavaScript code as you want ?>

<?php ob_flush(); ?>
<?php // compress CSS
header("content-type: text/css; charset: utf-8");
header("cache-control: must-revalidate");
$offset = 365 * 24 * 60 * 60;
$expire = "expires: ".gmdate("D, d M Y H:i:s", time() + $offset)." GMT";
header($expire);
if(!ob_start("ob_gzhandler")) ob_start();
?>

<?php // replace this line with as much CSS code as you want ?>

<?php ob_flush(); ?>

• You can manually compress Javascript and CSS using gzip method.
• Minifying: Minifying is a process of compressing content, inside the file rather than the whole file. If we talk about CSS, we can minify it by removing white-spaces. It will take a lot of time to minify it when doing manually. We can use these sites to minify CSS.
  • Cssminifier.com
  • Cleancss.com
  • Csscompressor.com

Using the same process, we can minify Javascript also to reduce file size. You can these sites to minify Javascript.

• Minifier.org
• Javascript-minifier.com
• Jscompress.com

Optimising CSS and Javascript

Sometimes, the above-mentioned tricks or methods don’t work, that time what to do.

We can make our code better and optimize it by following the rules. When having a good and optimized code, the file size automatically reduces.

Here are some tips to make your code well optimized.

• Another optimizing technique is that keep HTTP requests to a minimum. The site with a huge number of JS, CSS, and images have a huge number of HTTP requests. Because every file has its own HTTP URL so it slows the website.
•  Always include CSS files at the top of every page. This can help browsers to render your page quickly.
• Include Javascript at the bottom of every page.
• Always use the validated code. Because validated code follows guidelines and principles and principles of modern web design. The best validating website is w3cvalidator.org. It explains everything if any error is found.

Reduce Number of HTTP Requests

As said earlier, more the files more are the HTTP requests made.

When your content has the large number of Javascript files, CSS and image, then it makes more HTTP requests and lowers the speed of your website.

Here are in-depth tricks which can help you in reducing HTTP requests.

• The best and easy way to reduce these requests is eliminating unnecessary files. You can use this example. We have two CSS files, one.css, and two.css.

These two files are put in the same file. One of these is minified and other not say one.ss and two.css respectively. I am using only one of them but I call both of these files in functions.php.

Both work as same. So I should reduce or delete one of the files and use only one. By doing so, it reduces HTTP request because the file is no more in use and inturns lowering HTTP request.

• Consolidating CSS and JS files: Do you call five CSS and JS files or more. You shouldn’t because you have the ability to put them all in one file. You can do same with JS files if possible.
• Combine CSS and JS: You can also combine the CSS and JS code to one file respectively.
• Delay loading of images instead at once. You can install a plugin called Lazy Load to implement this function.

Delaying of images means that the images will be loaded when the user scrolls down.

Maintenance of Plugins and Database

Let’s start this topic with plugins then database. Whenever you will install a plugin, do some research on it.

Sometimes plugins badly affect sites performance. You should use those plugins which are not going to overload your server.

Many of us install plugins and walk away quickly. Do some research on that plugin like after installing how much there has been impacting on websites performance. If there is o change, then keep it using.

Uninstall unused plugins and then delete them.

If we talk about the database, then it is the brain of the website. If the database gets overloaded, then your site loads very slow.

Keep it clean of unused files. Some plugins and themes, even after permanently deletion, some tables are left in the database.

Manually check the database and remove unnecessary tables and rows. Also, do the backup of the database every day.

Adding Expiry date

Adding expiry headers helps us in making the site faster. Having every static file like images, CSS and JS an expiry date tells the browser not to re-fetch them, so reducing load time.

For this, you need to add code to HTAccess file.

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

Reduce Image Sizes

Reducing the size of images is a nice habit and makes the site faster. Because it takes less time to load fewer size images. You can do this by many ways and some of them are as.

• Online Optimisation: You can get plenty of tools online. But picking a right is a little bit difficult.

You can use ShortPixel or Smushit to reduce image sizes. Remember these are available also as plugins. The image formats which can be reduced are PNG, JPEG, and GIF.

There are two techniques for reducing image size, one is lossy and other is lossless. Lossy meaning losing the quality of image and Lossless means not losing quality.

Lossy images are much less in size while as lossless are a little bit reduced in size.

• Offline Optimisation: OptiPNG and NGCrush are great tools to remove unnecessary data from images.
• Optimisation during Creation: Photoshop is the best tool to optimize image during creation. You can find thousands of articles on how to optimize images using Photoshop.

Use a CDN

Content Delivery Network is a network of computers which deliver content for websites.

A CDN is usually another server used to deliver files. It reduces HTTP requests and helps in delivering content fast.

The famous CDN networks are MaxCDN, CloudFlare, CacheFly, Amazon CloudFront and Internap.

Paginate Long Posts and Comments

Splitting or paginating longer posts and comments may help in speeding up a website. Because the content is partially loaded and requested.

This trick is for those who write longer posts and embed many images in the content.

Limit Number of Posts on Homepage

Say if you are showing 30 posts on your homepage. And Your page size becomes 2MB.

So more the page size less will be speed because it takes time to load the full page. What if we limit the number of posts on the homepage to 10 posts.

Our page size will drop from 2MB to 600kb+. It will take less time for the browser to completely load the page and in turn speeding up the performance of the website.

Show only Thumbnails on Homepage

If you show full images on the homepage, then you should consider changing to thumbnail size image.

Because the full-size image is much bigger in size than the thumbnail. When using the thumbnail, it doesn’t increase the size of the page as much.

So keeping the speed in average or constant.

All the above were some of the techniques used to optimize speed and performance of WordPress.

Hope you loved our tutorial. If so then please share and subscribe to our Youtube Channel.