(Last Updated On: January 14, 2017)

Having a better website page speed affects both visitors experience and a good improvement in search engine ranking. Which is somewhat hard to accomplish. But for those out there who uses WordPress CMS (Content Management System), it’s no longer be a hard task to achieve an outstanding performance for their WordPress blogs.

Let me explain a little bit more about improving the WordPress blog page speed. What do you need to know before implementing this article for achieving a better WP blog performance.


Google Pagespeed Insights

Basic Assumptions:

You must be familiar with the following two things:

  1. Working with WordPress Plugins
  2. Editing with .htaccess file

1. Working with WordPress Plugins

If you are well-known about WordPress like installing, activate and working with WordPress Plugins then you don’t need to know about WordPress anymore like coding standards (CSS, HTML, PHP, jQuery, etc). Because all we have to do in order to achieve a better page speed for our WordPress blogs is to install, activate and setting up some WordPress plugins clearly.

2. Editing with .htaccess file

If you don’t know about .htaccess file what it does and why do we edit it? Don’t worry we’ll also take a look on .htaccess file. Which is the main file behind and is responsible for such errors 503, 403, forbidden and so on. Usually, this file is hidden by default in the cPanel but to edit this file we use FileZilla or other FTP client software. You can also edit this file directly from your WordPress dashboard by using WP htaccess editor (Check out How). Maybe you will ask a question that:

How does the file .htaccess help us to improve the page speed?

Let me tell you, how? We will be able to improve a better page speed using .htaccess file by making some changes like rewriting the rules, setting up expires headers, gzipping the content, etc.

Let’s start:

I’m testing my own website called softstribe.com on Google page speed insights before implementing following 10 steps. Here is what Softstribe gets:

Google PageSpeed Insights

95+ Score on Google Page Speed Insights

Let’s start tweaking our WordPress blogs against Google page speed.

1. Enable HTML Compression

The motive behind that why do we enable the HTML compression just because it helps us to decrease each file size across the website. It reduces the file size by shortening URLs safely, removing all the standard comments and untidy white-spaces from an HTML document file. Usually in WordPress each post is formatted in an HTML document so obviously if we enable the HTML compression, we’ll get a best chance to save bandwidth and ensure near-immediate content delivery to our readers while improving the Google rankings.

To enable the HTML compression right in your WP blog install and activate the plugin called WP HTML Compression. Once the plugin WP HTML compression is activated. It will work automatically without affecting a couple of codes in our WordPress blogs.

2. Enable HTTP Compression

What if we don’t enable HTTP compression? Well, it’s much like HTML compression but HTTP compression targets all the files (including JavaScripts, CSS, HTML, XML, Plain, Favicon, etc). It’s being the most popular method of loading our websites faster by Gzipping the rest of content in our WP blogs. It reduces more than 60% – 80% page size in our WordPress blogs.

To Enable the HTTP Compression use the following line of codes in your .htaccess file. Don’t know how to find out your blog’s  .htaccess file, click here. Or if you want to use a WordPress plugin to enable the HTTP compression, simply click here.

 # compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico

3. Enable Gzip Over Images

Gzipping images is one of the best way to reduce an image’s file size by 20%. Which will not only reduce the file sizes of images but it also get our WP blog a better performance. To enable gzip over images we use Smush.it which uses a powerful optimization technique to specific image format and remove unnecessary bytes from images. Images will not be affected after Gzipping with Smush.it. It optimizes the images without changing their look and visual quality.

To enable Gzip over images all you need to do is to install and activate the plugin called WP Smush.it. Go to Settings > Media from the drop-down select the Automatically Process on Upload.

4. Head Cleaner

Head Cleaner is a best WordPress plugin which cleans the untidy tags from header and from footer. This plugin let us improve  our WP blogs page speed by 5 times faster. It makes fever server requests by combining multiple JavaScript and CSS files into two or more files and also load those files in the footer. Head Cleaner optimizes the JS and CSS files easily. It converts all the background images in Scheme URLs which is also the alternative of CSS Sprites.

I’ve written a complete guide on how to use head cleaner WordPress plugin to improve page speed.

5. Minify CSS and JS

We should enable minification over JavaScript and CSS files which usually contains unused spaces and comments. To remove those unused spaces and comments we enable minify rather than editing each file at a time.

Hint: If you are using an option for optimizing CSS and JS files from head cleaner WordPress plugin then avoid using this minifier plugin.

To enable minification use wp minify WordPress plugin.

6. CSS Sprites in WordPress

CSS sprites usually mean that a collection of background images captured in only one image called sprite image. This can be used in our WordPress blog just with the help of CSS codes something like:

background-image: url(images/sprites.png); and then specify the image’s background-position: 0 0; .

I’ve written a definitive article on how to use css sprites in WordPress.

7. Optimize Database with WP-Optimize

WP Optimize database

Always optimize your blog database by deleting unused posts revisions, auto draft posts, and spam comments. To optimize your blog database, here is what a simple WordPress plugin (called WP Optimize) which lets you optimize your blog database on one click rather than optimizing the database from PhpMyAdmin.

8. Put JavaScript in Footer

Loading the JavaScript files in the footer rather than in header is good because JavaScript block parallel downloads and while downloading a script, the browser won’t start any other downloads until the process of downloading is finished. One additional benefit of putting the JavaScript in the footer is that it help defer the parsing of JavaScript.

To put the JavaScript in footer you have also an option there in Head Cleaner plugin’s settings page. Or use one more WordPress plugin JavaScript to Footer which works automatically no settings required.

9. Make Fewer Server Requests

It’s obvious that the more server requests will your website process the more your website will load lazy. But I know we use huge number of plugins in our WP blogs which makes our blog somewhat lazy. This happens when the plugins adds some additional JavaScript and CSS files. In order to load all these files, we have got to combine all JavaScript and CSS files into two files or more according to the number of files.

Use the same plugin called “head cleaner” to combine JS and CSS files in one.

10. Lazy Load Images

Images make your blog somewhat load lazy because each image sends a server request and the more images a webpage contains the more your server take time to process these request at a time. Maybe you are thinking about deleting the images so that your blog load fast. But it’s not good idea to delete images however we can load each image at a time when needed.

You can load images when needed. Use BJ Lazy Load


Final Result

Let’s see what Softstribe.com got after implementing the above 10 steps:

PageSpeed Insights for softstribe

Must tell me if you have any kind of problem via comments. However, if you have not started out your blog on WordPress and looking for a good, perfect web hosting then you must choose HostGator as your web hosting provider because it gives you 99.9% up time guarantee and 45 days money back guarantee too. But the best part it have great support for discount coupon codes (find out the best ones over at http://99hostgatorcoupon.com). Here is the HostGator review that will help you to know what are the advantages and disadvantages of HostGator.