We are moving our extensions to Joomlashack.com. If you have questions about your membership or need support, please send us a message by clicking this link.

Welcome to the first part of our Spring Cleaning for WordPress series! In this article you will learn how to properly measure your page speed, what is really slowing down your website and most importantly how to fix it, so your visitors will not fall asleep while waiting for your site to load.

There is only one rule when it comes to speed of your website - "The faster, the better". No one likes waiting and if the load time of your site is taking more than a few short seconds, then your visitor will surely be irritated. Of course it also depends on user's internet connection speed, so the website needs to be as optimized as possible to not make users with slower internet speed wait indefinitely. As studies show - a 1 second page delay in page response time can result in 7% decrease in conversion rate. Most users will wait for about 6-10 seconds before they will abandon the page. To simply summarize - the less time user spends waiting for your site to load, the more chance that he will stay on it.

Page speed measurement tools

The most popular tools to learn just how fast your website's really is are:

  • PageSpeed Insights - Google's tool offers analysis of both desktop and mobile versions of your site, it provides tips and explanations on what elements of your site's need to be fixed along with the scoring for user experience, which are also very useful. You can also install its add-on into Chrome and Firefox browsers.
  • YSlow - This open source tool is available as an add-on for most browsers, it also rates and gives you tips on which elements in your site could be improved to make your site's faster.
  • WebPagetest - This is a very nice tools that besides analysis, scores and tips will also give you a chart breakdown with additional screenshots of how your site looks like during various stages of loading.
  • GTMetrix - it gives your website a GTMetrix page speed grade along with a YSlow grade and of course various charts and optimization tips.


How to optimize and boost up your WordPress site's speed

Now let us focus on exactly how you can optimize your WordPress site. The most popular aspects of websites which usually should be looked at are:

1. Gzip Compression

Enabling gzip compression will reduce the size of data sent from your server to the visitors browsers. This won't work for everyone as not every web hosting server has enabled gzip module. There are a few ways to enable it on your WordPress site. If you want to do everything yourself, then most probably the manual way will suit you the most. That would require to modify your .htaccess file located in the main WordPress directory on your server.

The default WordPress .htaccess looks like this:

# BEGIN WordPress
RewriteEngine On
RewriteBase /wp42/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp42/index.php [L]

# END WordPress
Now we want to add the following code at the end of this file:
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
AddType image/png .png
And that’s it!


Alternatively if you do not want to touch anything on your server, then you can use extensions which will do it for you, like for example WordPress Gzip Compression or W3 Total Cache.

2. Caching

Using caching can really reduce your page's load speed by preloading database queries and common site elements. The most popular and generally recommended caching plugins are W3 Total Cache and WP Super Cache.

You can also leverage browsers caching manually by once again making a few changes to the .htaccess file located in the main WordPress directory on your server:

First of all, lets disable ETag headers as we are going to use Expires anyway. ETag technology can be slow and cause unwanted issues. Add to your .htaccess file the following code:

Header unset Pragma
FileETag None
Header unset ETag
Now we are going to set expiry date tags to all cacheable static resources to speed up your website, add below code to your .htaccess file:
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 text/html "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 1 month"

After these changes your server's load should be dramatically reduced.

3. Add LazyLoad for your images

Using LazyLoad is the process of displaying only the currently visible images - they aren't all loaded at once, instead they are beginning to load as the viewer scrolls down the page, just before they become visible, thus essentially saving lots of bandwith. To do this you can install the jQuery Image Lazy Load or any other similar plugin.

4. Minify and Combine CSS and Javascript

Minifying is the process of removing unneccesary characters from code like whitespace thus making the files smaller. You can also combine multiple JavaScript and CSS script files together into one of each type. That will reduce the code bloat and prevent redundant connections to server. You can use plugins like WP Super Minify for this.

5. Use a Content Delivery Network (CDN)

A Content Delivery Network uses multiple hosting servers from across the whole world to serve the content to users. Your static content is stored on all these servers andb ased on geographic location of user, CDN is choosing which server is the closest to him and from it delivers the content, thus greatly reducing latency and network congestion. There are many CDN services, including free ones like Free CDN, although for best results we recommend paid subscription based services like MaxCDN or CloudFlare.

Stay tuned for more tips

Next article in our series about properly backing up your WordPress site will be published in the next week!

Share your outcome with us: post your before and after Page Speed results on Twitter or Facebook using hashtag #perfectspringcleaning . If you like this article, let your friends, followers and subscribers know about it too!