WordPress Site Speed Optimization Case Study on www.uspolo.org

Wordpress Site Speed Optimization Case Study – www.uspolo.org

WordPress Site Speed Optimization Case Study – uspolo.org

The next site in our series of WordPress site speed optimization case studies is www.uspolo.org. We used staging site for tweaking and making configuration changes on this site for getting optimum WordPress site speed performance. Taking the site on staging is always a good idea as it negates out any risk of ruining your live WordPress site due to any misconfiguration caused accidentally.

It is a good practice to first of all make the changes on the staging site, test the impact of the changes and only after the successful execution, the configuration changes in the staging site should be deployed to the live site. Staging site is also known as test site or development site and makes it quite simple for WordPress developers to copy the live site to staging and vice versa.

We took a copy of WordPress case study site from its live environment to the staging environment before starting our WordPress speed optimization process. Instead of working on the live site http://uspolo.org, we are working on http://stage.uspolo.org in this Wordpres site speed optimization case study. Once the configurations are successfully deployed on the staging site, we will replace our live WordPress site with the optimized WordPress site developed on the staging environment.

Step 1: WordPress Site Speed Optimization Case Study Diagnosis

WordPress site speed optimization starts with the diagnosis of the site. We need to understand its performance based on various speed parameters. It is important for any WordPress speed optimizer to analyse the test report to find out the problem areas – the WordPress site speed parameters in red or orange zone, which are responsible for pulling down the WordPress site on speed scale.

Let us start our WordPress site speed optimization process by looking at some of the most important WordPress speed parameters as reported by some of the leading site speed diagnosis tools to analyse the current status of our WordPress site and what would be required to push our WordPress site up on the speed scale.

Wordpress Site Speed Optimization Case Study Test Report at GTmetrix before optimizationPage Speed Grade :  (62%) D

YSlow Grade :  (67%) D

Page load time :  2.32 s

Total page size : 1.59 MB

Total number of requests : 54

 

Wordpress Site speed optimization case study test report at Pingdom before optimizationPage size : 1.6 MB

Load time : 1.72 s

Requests : 55

Perf. grade : 81/100

Your website is faster than 76% of all tested websites

Wordpress Site speed optimization case study test report at Webpagetest before optimizationFirst Byte Time – F
Keep-alive Enabled – A

Compress Transfer – F
Compress Images – C

Progressive JPEGs – F
Cache static content – F
Effective use of CDN – X

Step 2 : Analysis and Tweaking Webpagetest Site Speed Optimization Report

Webpagetest site speed optimization test report for our WordPress case study site

The detailed analysis of our WordPress site speed optimization test report received from Webpagetest shows two errors marked with red lines, the area of concern that needs the attention of our WordPress site speed optimization expert. We need to fix these issues before moving any further.

1. favicon.ico

The .ico file at http://stage.uspolo.org/wp-content/themes/PoloSkilzCreative/img/favicon.ico is missing.

Analysing the code mentioned at http://stage.uspolo.org/wp-admin/theme-editor.php?file=header.php&theme=PoloSkilzCreative, we can see

<link rel=”icon” href=”<?php echo get_option(PREFIX.’favicon’, IMG.’/favicon.ico’); ?>” type=”image/png”>

Also looking at the view-source:http://stage.uspolo.org/, we observed that the theme has used some code to retrieve the favicon file, but the image was not found where it should have been, so we uploaded the missing image file at the right directory location.

2. Looking the code accessed at

http://stage.uspolo.org/wp-admin/theme-editor.php?file=page-home.php&theme=PoloSkilzCreative&scrollto=1923&updated=true

<div class=”warning” id=”warning”> You are using an outdated version of Internet Explorer. Please <a href=”http://www.microsoft.com/india/windows/ie/IE9.aspx” target=”_blank”>upgrade</a> your browser. <span id=”close” ><img src=”http://howtogrowpolo.com/wp-content/uploads/2013/04/icon_close-e1366140214999.png”/></span></div>

The above mentioned code was replaced with the following code to fix this issue.

<div class=”warning” id=”warning”> You are using an outdated version of Internet Explorer. Please <a href=”http://www.microsoft.com/india/windows/ie/IE9.aspx” target=”_blank”>upgrade</a> your browser. <span id=”close” ><img src=”../wp-content/uploads/2013/04/icon_close-e1366140214999.png” /></span></div>

It is highly recommend not to use this code forever, rather the url must be fixed to http://howtogrowpolo.com/wp-content/uploads/2013/04/icon_close-e1366140214999.png as soon as our WordPress website is moved back.

After fixing the above mentioned two issues, we checked our WordPress site speed optimization test report at Webpagetest once again.Wordpress Site speed optimization detailed test report at webpagetest

We can see that all the previous errors are fixed and we are ready to get on the next step of our WordPress site speed optimization process.

Step 3 : Tweaking .htaccess file to gain WordPress site speed optimization

We made the following changes in .htaccess file

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype
</IfModule>

<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 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”
</IfModule>

After making the above changes in the .htaccess file, we did our WordPress site speed optimization test once again on Webpagetest and got the following report.

Wordpress site speed optimization test report at WebpagetestFirst Byte Time – F
Keep-alive Enabled – A

Compress Transfer – F
Compress Images – C

Progressive JPEGs – F
Cache static content – A
Effective use of CDN – X

It is looking much better than before with substantial improvements in some of the speed parameters for our WordPress site speed optimization case study site. Now, we are all geared up to take our WordPress site speed optimization case study to the next step.

Step 4 : Tweaking and Adding php.ini and mark.php

We added two files php.ini and mark.php with a custom code for improving the speed performance of our WordPress case study site.

File – php.ini

zlib.output_compression = on
memory_limit = 512M
max_execution_time = 240
max_input_time = 120

File – mark.php

<?php
phpinfo();
?>

After making the above changes and addition of the above two files, we noticed that php.ini is neither working in public_html nor in /home/uspolo/public_html/stage/ directory.

.htaccess file was tweaked with the following code

zlib.output_compression On

Unluckily, it didn’t worked out. It seems to be some server setup issue as each and every web host server is unique in its own ways. Whatever works on one web host server may not work on another web host server. All the possibilities at this web host server has been explored, fixed, configured and tweaked. Now, we can move on to the next step of our WordPress site speed optimization case study.

Our next target was to get on some of the WordPress site speed optimization Plugins.

Step 5 : WordPress Site Speed Optimization Using EWWW Optimizer

Optimizing various WordPress sites for speed, we have observed that rendering images in the right way is one of the major issues faced by most of the WordPress sites. The images must be optimized for fast rendering over the Internet and EWWW optimizer plugin is a good plugin to take care of many image related issues.

We not only optimized all the images related to the content, but we also optimized all the images used by the respective theme of our WordPress site.

Step 6 : WordPress Site Speed Optimization Using WP-Optimize

Database is another important entity responsible for reducing the site speed in many cases. Unapproved comments, comments lying in the spam queue and automatically saved post revisions increase the SQL query resolution.

WP-Optimize is a good WordPress site speed optimization plugin and optimization tool to cleanup, fix, compress and optimize databases stored at the back end of the site. Before running WP-Optimize, you must always take a backup of all your database tables to save yourself from getting stuck in any unprecedented situation of accidental loss or damage to your WordPress databases.

Step 7 : WordPress Site Speed Optimization Using WP-HTML Compression

WP-HTML-Compression is an easy to implement WordPress site speed optimization plugin. It is used to reduce the size of many files. We have used this plugin with many other WordPress sites and achieved good results regarding WordPress site speed optimization. Although, if you experience any issue after activating this WordPress plugin then it must be disabled immediately.

We also added WordPress Gzip Compression. Not much improvements were observed so we decided to remove it from the site. Referring to an article on gzip compression from Google, we must find some way to turn it on for our WordPress site speed optimization case study. The existing web host server is not letting us turn it on and we might have to ask the web host of this WordPress site to turn it on.

Step 8 : WordPress Site Speed Optimization Using Quick Cache

Quick Cache is a great WordPress cache plugin to activate and configure several cache options on WordPress sites. After activating Quick Cache plugin on our WordPress site speed optimization case study site, we did some WordPress site speed optimization tests to analyse the WordPress site speed optimization performance results achieved so far.

GTmetrix WordPress site speed optimization test reportPage Speed Grade :  (70%) C

YSlow Grade :  (74%) C

Page load time :  1.41 s

Total page size : 1.56 MB

Total number of requests : 54

We achieved substantial gains on all the parameters as compared to the previous values.

Pingdom WordPress site speed optimization test reportPage size : 1.6 MB

Load time : 886 ms

Requests : 55

Perf. grade : 85/100

Your website is faster than 91% of all tested websites

Now, page load time is under 1 second along with an improvement in Perf. grade.

Webpagetest WordPress site speed optimization test reportFirst Byte Time – A
Keep-alive Enabled – A

Compress Transfer – F
Compress Images – C

Progressive JPEGs – A
Cache static content – A
Effective use of CDN – X

First Byte Time and Progressive JPEGs turned green, showing a substantial improvement.

We also tested WP Super Cache, but removed it because of not getting much performance enhancement over the previous site speed optimization test result reports.

Step 9 : WordPress Site Speed Optimization by changing wp-config.php Configuration

We made following changes in wp-config.php file of our WordPress site speed optimization case study to achieve better WordPress speed optimization results.

define(‘WP_POST_REVISIONS’, 6);
define(‘WP_DEBUG’, false);
define(‘WP_MEMORY_LIMIT’, ‘128M’);
define(‘WP_MAX_MEMORY_LIMIT’, ‘256M’);

Step 10 : WordPress Site Speed Optimization by using WP Super Cache

We disabled Quick Cache from our case study site and wanted to try WP Super Cache once again. It was installed, activated and configured. PreLoad Mode was activated so that most of the users can access our WordPress site in a fast mode.

Once again, the WordPress site speed optimization test results were performed to check the WordPress site speed performance of our WordPress site speed optimization case study site. Let us have a look at the site optimization speed test reports –

GTmetrix WordPress Site speed optimization test reportPage Speed Grade : (69%) D

YSlow Grade : (77%) C

Page load time : 1.38 s

Total page size : 1.47 MB

Total number of requests : 54

 

Pingdom WordPress site speed optimization test reportPage size : 1.6 MB

Load time : 813 ms

Requests : 55

Perf. grade : 88/100

Your website is faster than 92% of all tested websites

Webpagetest WordPress site speed optimization test reportFirst Byte Time – A
Keep-alive Enabled – A

Compress Transfer – F
Compress Images – C

Progressive JPEGs – A
Cache static content – A
Effective use of CDN – X

All the above test reports are showing great results, but we aren’t done yet.

WordPress Speed Optimization Wiz Mark de Scande in his own words- “These WordPress site speed optimization test reports aren’t yet perfect and some scope for further WordPress speed optimization still exists on this WordPress case study site.”

Step 11 : Update the WordPress Site to the latest version of WordPress 3.8

We tried adding WP Clone by WP Academy to make a fast backup of our WordPress site speed optimization case study, but it did not worked well so we removed it.

Backup Buddy worked and we made a back up of our WordPress case study site successfully.

WordPress 3.8 “Parker” was also launched by this time and we updated WordPress with its latest version to let everything fit in the right place.

We performed some more WordPress site speed optimization test reports once again to analyse the speed parameters that can be further tweaked to enhance the speed of this WordPress case study site.

GTMetrix WordPress Site Speed Optimization Case Study detailed report

Looking at the above WordPress site speed optimization test report, we analysed the following important points for our consideration:

  • Optimize images – A (99)
  • Serve scaled images – C (79)

Looking at the details of the above site speed test report, some images are facing certain issues. The status mentions something like – The following images are resized in HTML or CSS. Serving scaled images could save xxx KiB (35% reduction).

It is a major problem with this WordPress site speed optimization case study. The size of the image is 320 x 140 and the speed test report is saying large image size. On resizing the image, we observed the formation of a line at the top and bottom of the image. Images seem to be plunk, but no way to fix it.

  • Another WordPress site optimization speed parameter is Specify image dimensions – D (64) (Nothing can be done on this factor too).
  • Enable gzip compression, Defer parsing of Javascript, Specify a Vary, Minify Javascript, Minify CSS, Remove query string from static resources are some other WordPress site speed optimization parameters that can be improved to gain better WordPress site speed optimization results.

Some scope for our WordPress case study site speed optimization is still left out and Mark de Scande moved on to the next step for getting the best WordPress site speed optimization results for this WordPress case study site.

Step 12 : Fine Tuning of our WordPress Site Speed Optimization Case Study

We added Autoptimize to fine tune our WordPress site speed optimization case study. It was a bit difficult because of the existence of some custom code on the site, but finally it was done. Some more refined tuning was done to achieve the optimum site speed optimization results for this WordPress case study site.

WordPress Site Speed Optimization – A Comparative Analysis

WordPress Site Speed Optimization Case Study Test Report at GTmetrix

Wordpress Site speed optimization case study final test report at GTmetrix

Factor Before Optimization After Optimization Result Gain
Page Speed Grade 62% (D) 95% (A) Improved 53%
YSlow Grade 67% (D) 91% (A) Improved 36%
Page load time 2.32 s 0.93 s Improved 60%
Total page size 1.59 MB 1.05 MB Improved 34%
Total number of requests 54 29 Improved 46%

We achieved an overall improvement in Page Speed Grade, YSlow Grade, Page load time, Total page size and Total number of requests.

WordPress Site Speed Optimization Case Study Test Report at Pingdom

http://stage.uspolo.org/
Tested from New York City, New York, USA on December 13 at 23:10:16
Page size : 1.1 MB
Load time : 673 ms
Requests : 32
Perf. grade : 99/100

Your website is faster than 95% of all tested websites.

Factor Before Optimization After Optimization Result Gain
Page Size 1.6 MB 1.1 MB Improved 31%
Load time 1.72 s 673 ms Improved 61%
Requests 55 32 Improved 42%
Perf. Grade 81/100 99/100 Improved 22%

Your website is faster than 95% of all tested websites. (Earlier it was 76%) – Improved (Gain of 19%)

We got substantial reduction in page load time from 1.72 s to 673 ms, 61% improvement in load time performance.

WordPress Site Speed Optimization Case Study Test Report at Webpagetest

Wordpress Site Speed Optimization case study final test report at Webpagetest

Factor Before Optimization After Optimization Result
First Byte Time F A Improved
Keep-alive Enabled A A Neutral
Compress Transfer F A Improved
Compress Images C B Improved
Progressive JPEGs F A Improved
Cache static content F A Improved
Effective use of CDN X X Neutral

We achieved substantial improvement in First Byte Time, Compress Transfer, Compress Images, Progressive JPEGs and Cache static content.

WordPress Site Speed Optimization Case Study Test Report at Webhostinghero

The score is A. (Before site speed optimization, it was C)

Conclusion

Now, our WordPress site speed optimization case study site is fully optimized by Mark de Scande. Although, he points out certain issues of concern to be considered in future to maintain the optimum speed optimization results for this WordPress case study site.

Caching a WordPress site is one of the best ways to speed up any WordPress website, but sometimes caching may also create some trouble for the users. In case of any abnormal behaviour reported by the users, the WordPress site owner must take the following steps-

  1. In WP Super Cache plugin, delete the cache.
  2. In Autoptimize plugin, save changes and then delete cache.

The WordPress caching system on this site is set to preload the entire site once every week. It means that sometimes during the week, site will get slow for around 20 minutes during the rebuilding of cache once per week.

In the last and the final step, the live site http://uspolo.org is updated with fully optimized staging site http://stage.uspolo.org so that all the WordPress site speed optimization changes are effective at the live site.

Mark de Scande got website page load speed time reduced from 2.32 seconds to 0.93 second, an average of 60% improvement on a relative performance scale.

Website Speed Optimization Case Study Details
Website – www.uspolo.org
Web Host Server – Liquid Web
Site Speed Optimizer – +Mark de Scande
Editor – +Ashutosh Kasera

Author 


WordPress Site Speed Expert, Speeding up WordPress sites across the Globe

I am the fuel behind the high speed of innumerable fast running wordpress websites hosted either on a cheap server or a dedicated server.
Today, Speed is a matter of great concern, and I don’t only optimize but re-energize. I am also a lifetime WPMU Dev member.


One of the largest free blogging websites BlogLines in South Africa is my baby. I not only conceived the idea of free blogging in South Africa, but also implemented it with an objective of adding a new dimension to the world of free blogging. Blogging helps us in enhancing the quality of our social life by transforming the ways in which we share our ideas and opinions with each other. South Africa blogging environment has never been so easy and user-friendly as it is today.

I have practised and learned all the technical aspects related to WordPress. In the past couple of years, I have developed a wide range of websites using WordPress, WordPress MU and now using the latest WordPress MultiSite.

I am the WordPress Speed Energizer Wiz, and I am always hunting around to find slow running websites. I know, these websites need me in order to live a long and healthy life.
Only the wordpress sites powered with speed, capable of running at full throttle are going to survive in this tough and competitive world of Internet.


Need my help but can not afford my hourly rate buy me coffee and i will do a full report on your website.

    Follow Me:
  • facebook
  • flickr
  • googleplus
  • linkedin
  • pinterest
  • twitter
  • youtube
  1. DAN
    DAN10-11-2014

    hello MARK DE SCANDE

    Thank you for your great article

    I have followed your instructions but could not find any info/code regarding: Defer parsing JavaScript to reduce blocking of page rendering.

    in http://gtmetrix.com/

    My site shows

    391.1KiB of JavaScript is parsed during initial page load.

    Defer parsing JavaScript to reduce blocking of page rendering.

    WORDPRESS 4 site

    i need a better perf grade in http://tools.pingdom.com/

    load time under 2 sec from amsterdam

    score desk in https://developers.google.com must be at least 90

    any idea how can i improve my speed time

    thank your for your reply

    Dan

  2. Mark de Scande
    Mark de Scande10-11-2014

    Hello Dan

    Please send me a url to your website and i will run some tests and give you some advice

    Thx
    Mark

Leave a Reply