WordPress Website Speed Optimization Tutorial

You will probably not be giving much attention to the speed of your WordPress website especially if your internet connection speed is good enough. Like most internet users, you just turn away from a slow website or just conclude about the website you visit as being fast or not fast enough. So, whether a website is attractive or not to a visitor but is not loading fast, it will experience high visitor losses. Besides that, speed is a key website ranking factor by Google and therefore should be taken seriously.

Also read:

The Many Uses to Which You Can Put Your WordPress Website

What you should know about optimizing your WordPress website for speed

  WordPress Search Engine Optimization Tutorial

There are several factors involved when it comes to improving the  speed of your WordPress website and each of them actually count and will impact on your website speed, here we enumerate the best ways to speed up your WordPress website and get satisfactory results.

1. Use a caching plugin

By installing and setting up a caching plugin, you can instantly feel the change in the speed of your site. All websites will have parts that aren’t changing that frequently. Whether it’s an image, a CSS or JS file, a caching plugin can deal with those files so that they don’t have to be downloaded from the server every time a user opens your site. This will be most observable to returning visitors who will already have those files stored.

There are numerous WordPress caching plugins, but some how, only very few have become really popular. The good about plugins is that most the very popular and approved plugins are well coded and will not create problems for your website, they will speed up your site instantly and they are mostly completely free of charge though there are also paid caching plugins, we are of the opinion that some of the free solutions are just as good and will serve you perfectly well. The most popular WordPress caching plugin is W3 Total Cache which has more than 1 million active users. There are other plugins including WP Fastest Cache plugin. To use these plugins, you will simply need to install them, activate and configure the settings.

Also read:

 How to safely disable the WordPress automatic update feature 

 How to update your WordPress installation

2. Optimize images

Image optimization can have significant impact on your website speed. Even if you have just a single image on your homepage or there’s an entire gallery of photographs, unoptimized images can slow your website drastically. Let’s say that you’re using a camera which can shoot high-resolution photos. Those photos will probably be more than 2MB, and they can surpass 4MB limit easily. Even images from modern smartphones will generate large files. If you do not optimize the images and you simply upload the raw files, your website will certainly load very slowly.

Just by adding that one image which is 2MB or 4MB “heavy”, your users will have to download that image once they open your site. While users coming from a broadband connection won’t feel much of a difference, those users with slower Internet speeds will suffer. Not only that; Google will not be happy with your poor user experience will website ranking will suffer for it.

But with WordPress, you can optimize images quite easily. Generally, to optimize your images, start by lowering the resolution. For example, if your theme shows a maximum of 800px width, your image shouldn’t be wider than that. You can simply change the size or maybe even crop an image. There are also many tools and apps which can help you optimize pictures. Whether you want to use a professional software like Photoshop which can optimize them specifically for the web, or you want to use a simple online tool, you should optimize your images.

There are also many WordPress plugins which can optimize your images for you. One of them is WP Smush – Image Optimization.

Also read:

How to create a simple portfolio website with WordPress 

 How to create and manage a page in WordPress

3. Optimize your website homepage

Your website homepage definitely is your most important page. Even if a person doesn’t land on the homepage, they will likely want to visit it from your other posts and pages. And that’s why the homepage has to be optimized correctly. As mentioned before, take care of the images on your website and make sure they’re optimized. Use smaller excerpts for your posts instead of showing larger ones. Don’t show images from posts; instead, leave a “read more” link before the first image in a post. Don’t use too many sidebar and footer widgets which can slow your site.

4. Load Google Maps correctly

Google maps is one way to prove to your visitors that your business has a real and verifiable location. If you’re using Google Maps to show a location, make sure that the interactive map doesn’t slow down your speed. A simple map on your website can take up to 2MB which will force your visitors into downloading additional data even if they’re not interested in the map.

With WordPress, this problem can be overcome with Google Maps Widget plugin which can render a thumbnail image from your map. By doing so, you will add only several Kilobytes of data to your site instead of a Megabyte or more. This will have a huge impact on the speed of your website, while your visitors who are interested in the map can still have the full Google Maps experience.

5. Clean and optimize databases

WordPress like most other content management systems use databases to store practically everything needed for it to run smoothly. Some time, these databases will start to build up, and they will also start to slow down your site. By cleaning and optimizing databases, you can speed up your WordPress site. Fortunately, you don’t have to manually open each and every database to do this, there are plugins that can effectively do this for you. One of them is the WP-Optimize plugin which is free and can run without the need for PhpMyAdmin.

Also read:

How to Secure a WordPress Website 

 How to control new user registration in WordPress

6. Minify Your CSS and Javascript Codes (Remove unnecessary characters from source code)

Source code can contain thousands of lines. By adding additional themes, plugins and custom functions, the number grows rapidly, and it affects the speed of your site. While the code is usually useful, there are many unnecessary characters to be found in the source code which can only slow you down. Whether it’s a group of white space characters, new line characters, comments or block delimiters, you can safely remove them in order to speed up your WordPress site. The W3 Total Cache we mentioned earlier can deal with this problem. Another popular plugin which can minify the code on your WP website is Autoptimize.

Speeding up a WordPress site takes time. There are so many things you can improve in order to remove that one little fraction of a second from loading time. But, the speed of your site matters both from visitors’ and search engines’ perspective. And, although you will have to go through different techniques and plugins to make the best out of your site, it will be worth it.

What is minification?

What does it really mean to minify CSS and JavaScript files in WordPress? To begin with you should keep in mind that there are dozens and dozens of files needed for WordPress to run properly. When you add new themes and plugins, the number just keeps on growing. Simultaneously, the speed of your website keeps on decreasing. Ordinarily, you should not worry much about the code that powers WordPress, themes, and plugins but you should know that you can make those files smaller and thus increase the speed of your blog. One way to get this done is to minify the codes.

Minification is a process of removing unnecessary characters from the code. The process will make the affected files smaller, but won’t change its functionality.

When you minify CSS and JavaScript files in WordPress, you will remove things like white spaces, new line characters, comments, and block delimiters. For each character removed from the code, you will speed up your site just a bit.

To a computer, this code looks the same as the previously shown one.

Minifying CSS and JavaScript files manually

When working on a custom theme or plugin for WordPress, you will want to minify CSS and JavaScript files you are working on. In that case, you won’t have to install additional plugins to do the job for you. Instead, you can quickly minify only the files you need. By doing this, you can allow yourself the luxury of typing the code that’s easy on your eyes, and still make it as fast possible afterward.

Manually minify CSS using these resources:

Manually minify JavaScript with these resources:

WordPress plugins that can minify your codes

Services we showed you above will do a great job with your custom code. But if you want to minify all files on your WordPress site, it won't be necessary to use those resources. There are free plugins can ver well minify CSS and JavaScript file in WordPress for you. Lets look at some of the best of them.

Autoptimize

With more than 200,000 active installs, Autoptimize is one of the most popular choices when it comes to optimizing your WordPress site. Among other amazing features, the plugin can minify scripts, styles, and HTML. It will compress the files, cache them and move the code in order to speed up your site.

  1. Install and activate the plugin

  2. Go to Settings -> Autoptimize

  3. Click the Show Advanced Settings

  4. Check the Optimize HTML Code, Optimize JavaScript Code, and Optimize CSS Code options

  5. Save changes

W3 Total Cache

This popular plugin does it all. Of course, the plugin will cache the files for you in the first place. But if you are interested in removing query strings from static resources, W3 Total Cache will do it for you. Similarly, it will minify CSS and JavaScript files, and it will even do the same for your posts, pages, and RSS.

  1. Install and activate the plugin

  2. Navigate to Performance -> Minify

  3. Make sure to keep the Rewrite URL structure checked

  4. Enable HTML minify settings, JS minify settings, and CSS minify settings

  5. Save all settings

As you can see, minification process is fairly straightforward. If you are using a WordPress plugin. Minify CSS and JS files on your site, and improve your speed and performance and both your visitors and search engines will be happy with your website

Also read:

How to Manage 403 Forbidden Error in WordPress 

 How to Optimize and Speed Up Your WordPress Website

7. Choose a fast WordPress theme

Poorly coded WordPress themes can be a huge problem. Before you even start working on your site, you should be careful when choosing a WordPress theme. At first, it might seem that a specific theme will attract more visitors simply because of its layout and gorgeous images it uses. But instead of simply picking the most beautiful theme you find, test several themes in different browsers, from different devices.

It will surprise you what difference a theme can make for the entire site speed. Not only a huge number of images can choke up the theme, but there are so many hidden things in the code which can mean a great difference. Although it isn’t always the case, premium themes should be coded better and should perform better. Even if you decide to spend money on a premium theme, make sure you check them properly.

8. Don’t install unnecessary plugins

Before you install a plugin you should determine it is actually necessary. Ordinarily, plugins do not create problems because of their number they can be problems when they are of poor quality and poor quality plugins are all over the internet. So, you must be extremely care with the plugins you install. WordPress users generally acknowledge that:

active plugins will definitely make an impact on the speed of your site

.Also note that even inactive plugins will take up your precious space which will affect the size of your backup files. When you add up everything, both active and inactive plugins can hurt the speed of your site so think twice before installing a plugin you don’t actually need.

Also read:

How to Install and Setup Your Premium WordPress Theme 

 How to Keep Your WordPress Website Updated

9. Split larger posts

If you are good at writing really long posts where you also have many videos and images attached, you should consider splitting them into multiple pages. This can be done very quickly since you don’t even have to use a plugin for that – WordPress allows you to do that and you may not even know about it.

10. Limit the number of posts revisions

Post revisions are useful thing and can be a good way to improve post quality and user experience. But the fact is that revisions are stored in a database and if you have a huge number of posts, imagine how many additional revisions will be there. This will definitely slow down your WordPress site so make sure that you limit the number of revisions or even completely remove them if not needed.

11. Upgrade to PHP7!

You shoulPHP7 is the fastest PHP version for now. Why spend hours optimizing just to shave off a few milliseconds when you can do a few clicks and easily speed up the site by 20%. There’s no magic to our method. It’s plain, simple and obvious PHP7 gives you better speed performance.”

Numerous tests show that PHP7 is 20% faster than PHP5 in real-life production environments. On generic tests, it can be 200% faster. It is also more secure, has new useful features and is recommended by WordPress. So, how to upgrade?

If you’re using a good hosting company like Todhost, you’re already on PHP7 so check your version before going further. Either grab the My WordPress Health Check plugin or upload a file with the phpinfo() function.

Login to your cPanel. If you don’t have a link handy just add “:2083” at the end of your domain name, Once you’re in, look for an icon that says “PHP Selector”, “Select PHP Version” "multiphp manager" or “PHP Version Manager” in the “Software” section. Click the icon to open the PHP version selector. Depending on what your hosting company has enabled you’ll either be able to select the PHP version for the whole account, for specific domains or on a per-folder level. Whichever situation is enabled in your cPanel make sure you choose v7.0 or v7.1 for your WordPress installation. Click “Save”. Refresh your site to verify the change is active and enjoy the better speed.

If you’re not comfortable doing that, which is fine, open a support ticket with your hosting company, and they’ll do it for you.

Also read:

How to Backup Your WordPress Website Automaticaly Using Backup Plugins 

 How to Fix a Hacked WordPress Website

What if my hosting company doesn’t support PHP7?

That’s a huge issue! Huge! That fact by itself may not be that concerning, but it has numerous other consequences. It means you are using an outdated server software and that your hosting company simply isn’t doing its job.

12. Modify browser caching

When a user starts loading your website, his browser immediately starts downloading all the necessary files from a server on which your website is located. Depending on user’s internet connection speed and server capabilities, the site can be loaded faster or slower. Of course, each party wants to load the site as fast as possible and you, as an admin, have to do all in your power to make your site lightning fast.

Improve WordPress speed and cache static files longer

That first visit to your site is dependent entirely on the internet connection and the server, but you can make the change for your regular visitors. They probably won’t be aware that the changes are done, but they will always have in mind how fast your site really is.

Caching technology takes some of the files from the server and stores them on a local computer. Then, if a user visits the same site again, the browser will check for stored files and will load them instantly instead of downloading them from the remote server once again. This makes loading time much shorter, improves WordPress speed and that makes a visitor much happier.

By using the following code, you can tell WordPress to cache static files for a longer period of time. Before you copy and paste the code, take a minute to reconsider– how often do you make changes to your website, what kind of content do you have and can this really help your site if you prolong caching? Having decided on these, you can now proceed.

    1. Open .htaccess file

    2. Copy and paste the following:

# Browser Caching
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>

  1. Save changes

After you save changes, your server will change access time for storing those files locally. If you’re not comfortable modifying .htaccess file by yourself, you can do the same by using a simple plugin.

Also read:

Changing your WordPress website location 

 Configuring the basic settings in your WordPress website

13. Remove query strings from static resources in WordPress and speed up your site

If you have been trying to speed up and optimize your WordPress site, you have probably come across different online diagnostic tools that can help you with that. We encourage you to do the tests; they will tell you how well your website is performing, and most of those tools will show you details about the speed of your site.

For example, if you run a test on GTmetrix, it will show you which images are slowing down your site. It will tell you the loading speed of style sheets and scripts, details about minification, and much more. One of the things that many WordPress users find on top of the list (meaning that the problem should be addressed as quickly as possible) is “remove query strings from static resources”. In this part, we will briefly explain what query strings are and how to quickly remove them in order to improve the speed of your website.

What are query strings

Query strings are parts of URLs that you can find after a question mark (?) or ampersand (&) symbol. Browsers or external applications usually add these parts to URLs in order to add additional parameters.

By using query strings, for example, a WordPress plugin can pass different values through the URL so that other applications and services can use them.

https://YOURDOMAIN.com/?utm_source=twitter&utm_medium=cpm&utm_campaign=twitter

More often than not, after clicking on an advertisement, article from social media or your email inbox, you will see a quite lengthy URL with query strings. In order to tell analytics services the origin of your visit, other services (and humans themselves) will add UTM – specific query strings that describe sources, media, and campaigns. Marketers use this to track the effectiveness of their campaigns. And this is something completely normal; don’t worry about these kinds of query strings.

Why and when should you remove query strings?

While query strings are an important part of dynamic elements, they can slow down your WordPress site if they’re used in static resources. If you’ve ever opened a browser console while on your site, you may have found that the website is showing version numbers of scripts and styles. This might look familiar:

/wp-includes/css/dashicons.min.css?ver=4.4.2

Some proxy caching servers and CDNs can’t cache these kinds of resources. That means that each time you open a site, the server will have to send you the file over and over again. And that’s something that slows down a site tremendously. Just that one query string won’t make much of a difference, but when you pile up a few of them, things can get serious. You can resolve the issue and remove query strings from static resources.

How to remove query strings from static resources

There are a few techniques to remove query strings from static resources in WordPress. You can do that by copying a simple function, or you can use a few WordPress plugins that will resolve the problem for you. We strongly recommend the use of plugins to fix this issue.

Copying a simple function

The first method requires you just to copy and paste a simple function to your functions.php file. If you have ever added a function there, you already know it’s not that big of a deal. But if this is your first time, please take extra caution since one little mistake in the file can render your site unusable. Just to feel safe, please create a backup of the file before you proceed.

    1. Open and edit functions.php file

    2. Copy and paste the following code:

function _remove_script_version( $src ){
$parts = explode( '?ver', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

  1. Save changes

Uncheck the option in W3 Total Cache

Since W3 Total Cache is a popular plugin which counts more than one million active installs at the moment, chances are that you are already using the plugin. In that case, you will just need to uncheck one option from the settings:

  1. Navigate to Performance -> Browser Cache

  2. Uncheck the Prevent caching of objects after settings change option

  3. Save changes

Use Remove Query Strings From Static Resources plugin

If you don’t like adding the code to functions.php by yourself, you can use a free plugin for the job. Remove Query Strings From Static Resources is a lightweight and straightforward plugin that will do the same thing without requiring you to touch the code.

Just install the plugin, activate it, and you’re done. The moment you activate the plugin, the query strings will be removed from static resources.

Also read:

7 Security Tips for a WordPress Website 

 Automatic Update in WordPress

14. Reduce the number of HTTP requests

The more information that goes back and forth, the longer you will have to wait for a site to load. One of the easiest things you can cope with this to speed up your site is to have a good hosting company. But more than that, to speed up your WordPress website, you should take care of HTTP requests.

For starters, you should test the speed of your website to see how many requests does it take to load a particular page. There are different ways of testing that. Instead of showing you all the possibilities, it will suffice to enter an URL in the HTTP Requests Checker. You will get the results immediately, and hopefully, you won’t have more than 30-ish requests. If you do, it’s time to reduce the number of HTTP requests and speed up your WordPress site.

15. Don’t use Gravatars

This advice is very simple. Do not use it because it can affect yyour speed negatively. If you’re using WordPress’ default commenting system, you are using Gravatars as well. Now, if you get a few comments per month, this doesn’t have to concern you much. But if your visitors like to leave quick notes below your articles, you should consider removing Gravatars from the picture.

Once we tell you that each Gravatar image adds another HTTP request to the server, imagine what happens when you have more than, let’s say, one hundred comments on a single page? Guess what happens when there are more than one hundred additional requests that don’t have to be there.

To do this, just navigate to Settings -> Discussion -> Avatars and uncheck the option to show avatars in comments. It’s easy as that.

16. Remove comments if you’re not using them

As you may guess, using comments requires additional files. If you’re using the default commenting system, you don’t have to do a thing – it’s something that you have the benefit of and that extra request is justified. But in case that you don’t use comments on your site, or you use a different commenting system, you should remove the comments-reply script. To do that, you need to copy the following function in the functions.php file:

function comments_clean_header_hook(){
wp_deregister_script( 'comment-reply' );
}
add_action('init','comments_clean_header_hook');

17. Remove emojis

Emojis are cute, that is true and everyone uses them on their computers, smartphones, and tablets. WordPress introduced them in the version 4.2. that doesn’t mean you have to load that one additional JS file on your site just to have the smiley faces. The speed of your site is affected by using emojis (unless you just can’t do without them).

18. Use CSS Sprites in WordPress

Each image requires an HTTP request. That doesn’t mean that you should remove the pictures, but you should take care of them. When it comes to the speed of your site, learn how to optimize images for WordPress. But when it comes to the requests, you can reduce the number of those HTTP requests by creating CSS Sprites.

If you go to Spriteme site, you’ll be able to select all images from a page that you use and combine them into one file. After changing links to the images, you’ll add up to the picture size, but at the same time, you will reduce the number of requests. This might sound contradictory, but you can actually speed things up – a server will work better with one large file than having to respond to dozens of requests.

19. Limit the number of social media buttons

Social media has become a standard part of every website. Whether you have small personal or business site, or you’re running a portal with dozens of writers, you will have to connect social media to the site.

But when it comes to showing social buttons, less is more. Although you may have opened accounts on a dozen of networks, display buttons only for those that you nurture the most. Each button will load its own image and additional files which may slow down your site.

20. Unload scripts and styles that you don’t use

An average WordPress user doesn’t have a clue what going on in the background. We advise you take some time to check your site for scripts and styles that you don’t need and remove them. There is a WordPress plugin that can do that for you -- The WP Asset CleanUp. With this plugin, you can easily recognize the files you no longer need, and you can quickly unload them. If you have more experience with WordPress, the plugin will help you isolate the data, and you can later manually delete the files. If not, leave the plugin and let it handle scripts and styles for you.

21. Disable embeds

WordPress developers introduced a new JS file that allows you to embed videos from different services like Youtube is just by copying an URL. You can embed images and tweets the same way just by pasting the link in the Visual Editor. These are good features for your users but in respect of site speed, they should be removed. You will have to decide on this, wether to use them for your users and posts or to allow them at the detriment of your website speed. You can do this with a code and with a plugin also.

If you’re not good with code, and you just have to install a plugin, there a simple plugin that will remove embeds from your site. If you can handle a few lines of code that you just need to copy, use the following function and put it in your functions.php file:

function speed_stop_loading_wp_embed() {
if (!is_admin()) {
wp_deregister_script('wp-embed');
}
}
add_action('init', 'speed_stop_loading_wp_embed');

Conclusion

Always take care of your website speed. WordPress can help you with this problem in a significant way with the effectiveness of the plugins. WordPress is ALSO constantly improving and so are the plugins, themes and hosting companies. In this article, we have shown ou how to speed up your WordPress website. There are many factors which impact the site speed and depending on your site, you can improve the speed of your WordPress website with this guide.

  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

How to Keep Your WordPress Website Updated

Updating your WordPress website is good for its security, content and data integrity and also for...

How to Install and Setup Your Premium WordPress Theme

WordPress is an excellent web development tool and still remains the most popular content...

How to create and manage a page in WordPress

Creating pages in WordPressCreating individual pages in WordPress is quite similar to writing a...

WordPress Search Engine Optimization Tutorial

Wikipedia defines Search engine optimization (SEO) as the process of affecting the online...

How to Secure a WordPress Website

How to Secure WordPress with Unique Admin UsernameMost applications use "admin" as username and...

Powered by WHMCompleteSolution