Great websites aren’t just about aesthetics anymore! We’re living in an age of internet where a great website means it’s responsive, SEO-optimised, and most importantly fast. Though if you’re curious about which website building platform will win the battle to rule them all, look nowhere else than at the speediest one.

Products need to be able to quickly load on different devices, handhelds and wearables and that’s why it’s not surprising that Google encourages the faster loading websites by giving them a higher ranking than competitors and also penalises the slow or laggy websites in search results.

In this article I’m going to explain two major speed measurement standards Google Page Speed Insights and GTmetrix, the factor they both consider when assessing and benchmarking websites and the best practices to improve them in your WordPress-based website. I will also provide a list of how major WordPress themes compare against it in the market now.  

Before you decide to take any actions for optimizing your page for either of these two tests, it’s crucial to know the basic concepts about how they work.

Google PageSpeed Insights measures the performance of a page through a double-fetch of url once with mobile user-agent and then with a desktop user-agent and assigns a score of 0-100 based on performance. A score of 85+ indicates good performance.

GTmetrix is another free tool that analyses page performance based on Google PageSpeed and Yahoo! Yslow score. It calculates the average score for both standards and assigns you an alphabetical ranking (A,B,C,..) accordingly.

Even though GTmetrix is based on Google and Yahoo page scores, it has its own range of factors when assessing your web page speed and performance. The following factors are the most important ones being considered in both sets of standards and are essential for optimising your theme for the highest possible score.

Enabling Compression (Server-Related)

This is perhaps the most basic and essential step that you should take in optimising your WordPress website for the best speed scores. Though you should note that this one has nothing to do directly with your WordPress installation; you’ll need to apply the proper setting in hosting environment accordingly. According to Google, enabling compression in your server will benefit your WordPress site in following way: 

All modern browsers support and automatically negotiate gzip compression for all HTTP requests. Enabling gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and improve the time to first render of your pages.

The Majority of php servers are using either Apache or nginx for serving their web pages. Each of these will require you to use different processes to enable gzip compression in them. You can find many step-by-step guides on the web showing you how to do this with whichever server you may be using, including this. If you have a question about a particular step in a process you can ask in the comment section.

Possible improvement:  5 to 15 points

Correct activation and configuration of this feature on this subject will help you to increase your points from 5 to15 points in both Google PageSpeed and GTmetrix.

Leverage Browser Caching (Server-Related)

A screenshot of one of the asset files from amazon.com shows how they are using this feature:

As you can see they have already activated gzip compression as we covered in the first section. In the Expires part you can see they are planning to keep this file cached in the users’ browser until 2033. This means that until they’ve changed this information, which they are sending to the User’s browser, the file won’t be downloaded again.

The cached file will be used instead of downloading. This will both save your server and user’s web connection from consuming extra bandwidth and resources and of course pages will be loaded quickly after the first load.

When we check the relevant page from Google PageSpeed Insights we can see a similar explanation:

Fetching resources over the network is both slow and expensive: the download may require multiple round trips between the client and server, which delays processing and may block rendering of page content, and also incurs data costs for the visitor. All server responses should specify a caching policy to help the client determine if and when it can reuse a previously fetched response.

Unlike the Amazon.com that prefers to use over than 15 years of caching, Google suggests around 1 week of caching for frequently changable components and 1 year for static assets. Another tip is to use URL-based versioning or change file names in order to prevent outdated files from being cached. Like “styles.css?v=20151222 or styles_20151222.css”.

Enabling browser caching for Apache servers are pretty simple. Just add the lines below in your .htaccess file:

<IfModule mod_deflate.c>

SetOutputFilter DEFLATE

SetEnvIfNoCase Request_URI \

\.(?:gif|jpe?g|png)$ no-gzip dont-vary

</IfModule>

<IfModule mod_expires.c>

ExpiresActive on

ExpiresByType image/jpg "access 2 month"

ExpiresByType image/gif "access 2 month"

ExpiresByType image/jpeg "access 2 month"

ExpiresByType image/png "access 2 month"

ExpiresByType text/css "access 2 month"  

ExpiresByType application/x-javascript "access plus 2 month"

ExpiresByType text/javascript "access plus 2 month"

ExpiresByType application/javascript "access plus 2 month"

ExpiresByType image/x-icon "access plus 12 month"

ExpiresByType image/icon "access plus 12 month"

ExpiresByType application/x-ico "access plus 12 month"

ExpiresByType application/ico "access plus 12 month"

</IfModule>

If you are using nginx you should add this in nginx.conf file:

location ~*  \.(jpg|jpeg|png|gif|ico|css|js|woff)$ {

expires 30d;

add_header Pragma public;

try_files $uri @fallback;

}

Before adding these codes, make sure that you have a backup of the current version of your files. Even though changes are pretty simple, there’s still a possibility that you’ll end up getting a 500 internal server error or non-starting nginx service messages in which case you may simply ask for help from your server administrator.

Possible improvement:  10 to 20 points

Correct configuration on this subject will help you to increase your points from 10 to 20 points.

Optimizing Images (Server-Related)

If you have a page with a lot of images, this can be the most effective step to take for reaching above 90 for your page speed score. Because images are often the most downloaded bytes on a page, by optimising the images you can yield a large byte saving and gain considerable performance improvement. Usually there are two types of images that can be optimised: PNG and JPG files.

Most of the time it’s possible to shrink the size from 10% to 300% without compromising quality. Even though you have successfully optimized images in Photoshop, you’ll l need another layer of shrinking if you are scaling bigger images into smaller sizes. There are two ways to achieve this rule:

• You can install image optimization tools to your server as Google suggests like optipng and jpegoptim. For installing those tools you also need to have root access to your server. For opening terminal access, Windows Users can use a freeware called as PUTTY. Mac and Linux users can use terminal. After connecting your server and gaining root access what you need to do is install these softwares:

in Ubuntu:

sudo apt-get optipng

sudo apt-get jpegoptim

in CentOS:

yum install optipng

yum install jpegoptim

After installing those tools you need to go to Uploads or your Images Folder and use those commands for optimizing images recursively.

find . -name *.png | xargs optipng

find . -type f \( -name "*.jpg" -o -name "*.jpeg" \) -exec jpegoptim --strip-all {} \;

Those commands will be enough for optimizing current images but you may consider creating a cron job for recently changed files in the future.

For example, optimizing changed files in last 120 minutes would require you to add this parameters “-mmin -120”

find . -mmin -120 -type f \( -name "*.jpg" -o -name "*.jpeg" \) -exec jpegoptim --strip-all {} \;

• If you don’t have root access to your server you should consider optimizing images before uploading them with tools like GIMP or Photoshop or alternatively you can use online tools such as TinyPNG or TinyJPG. PageSpeed itself gives you optimized images and assets after you run the test.

Possible improvement:  5 to 70 points

Correct configuration on this subject will help you to increase your points from 5 to 70 points. It heavily depends on the image amount on the page.

Minify Resources (Theme-Related)

Minification is a theme-related technique and the theme you’re using should have this functionality. There are, however, some minification plugins available that you can install if your theme doesn’t already offer them.

Minification is a deep topic but we will cover the basic and essential points here. For  further reading you can Google Atomic CSS and uglify Javascript. There are tons of minification plugins for WordPress. Minification refers to the process of removing unnecessary or redundant data regardless of how the resource is processed by the browser. (e.g. code comments and formatting, removing unused code, using shorter variable and function names, …).

Minifying resources can be categorised into 3 sections:

1. Minifying HTML

This simply removes comments, new lines and spaces from HTML code. You can use WordPress Plug-ins or Online Minify Tools for this.

2. Minifying CSS

Even though there are more advanced solutions such as Atomic CSS, Minifying CSS is also pretty much the same as Minifying HTML. The most commonly used tools for this operation are Clean-CSS and YUI Compressor library from Yahoo.com. There is an online tool for this purpose as well.

3. Minifying Javascript

Things are a little bit different for Javascript minifying. There are tools for Uglifying which makes code unreadable for humans but makes great benefit from bytes. An example can be seen here:

//this is simply a sample var

var sampleVar = "xyz";



//lots of comments

//this is just another comment

//such things should not be present in javascript

//waiting to see result after uglifying



//this is simply a sample function

function sampleFunction()

{

 var sampleLocalVar = "xzx";

 if(true)

 {

   //inserting some sample comments

   alert("in if block");

 }

 else

 {

   //inserting some sample comments

   alert("in else block");

 }

}

Uglified & Minified version:

var sampleVar="xyz";function sampleFunction(){var a="xzx";if(true){alert("in if block")}else{alert("in else block")}};

Pretty cool, huh?

Possible improvement:  5 to 20 points

Minifying the code can increase your Google PageSpeed score by 5 to 20 points.

Prioritizing Visible Content (Theme-Related)

Prioritizing the visible content is also one of the trickiest things to do. The main goal with this rule is preventing users from waiting for loading big assets in the HTML layout. A simple explanation for this is that when the browser requests a page, it has to wait for the big assets to load in order to continue loading rest of the page.

Because of that, when you have big CSS and JS files in the head section of the page, it means that you’re blocking page rendering until those assets finished downloading. While checking your page for speed and performance, Google PageSpeed also keeps a sharp eye on the main content of your page and penalises the score if there’s no prioritisation policy behind your page loading scenario.

One possible solution is to prioritise the styles and assets related to the first shot of your website (usually the header section and first part of the body).

Keep in mind it’s not an easy thing to do without breaking the layout. In order to do that you need to prioritize important CSS rules and put them in the head section for getting a proper layout while waiting for the finishing page to load.

You will also need to move assets from the header to footer as was shown above </body> tag. Some themes can do this for you automatically while others require you to do it manually or seek the services of someone else with advanced coding skills.

Possible improvement:  5 to 15 points

By prioritising the main content you can increase your page speed score by 10 to 25 points in desktop and 5 to 15 for mobile.

Important note: This factor is one of the most important factors to consider to get a 95+ score for mobile.

Reducing server response time (Server & Theme-Related)

Even if you’ve done a comprehensive job in fulfilling all of these requirements, this may still not be enough! You might not encounter critics as tough as Google crawlers! What you’ll need to meet the expectations of Google is powerful hosting, optimized queries and proper caching tools for fast page loading.

Using caching tools for WordPress helps a lot. Plug-ins like Super Cache provide copies of page content and store it into static HTML file. After the first load, the page will be cached until you reset the cache or update the page.

Caching will remove the response time for database queries and PHP operations on the second page load. For further explanation you can take a look at this great graphic and insightful article from wpbeginner:

Possible improvement:  10 to 40 points

By improving your server response time you can enhance your Page speed score by 10 to40 points.

So we’ve covered the main factors Google considers when assessing and scoring your page performance, though we want you to not only pass but exceed the 85 point mark!

Below I’ve prepared a table of Google Page Speed and Gtmetrix rankings comparing the major WordPress themes of 2015. Please note that the scores of each theme’s page speed metric can be affected by availability or void of each of the aforementioned practices. Here you can see which of these factors has passed Google and GTmetrix’s tests. Note that:

• This comparison has been made on January 5th, 2016 and may change in the future.
• We have taken the main four scores into account, two from Google PageSpeed and two from GTmetrix, calculated the average score for each of them and then sorted the themes accordingly.
• For each theme we have tested the main landing page or the default demo.

Comparison of the major WordPress Themes of 2015 (January 5th, 2016)