WordPress Speed Optimization Case Study foodmom.com

Site Speed Optimization Case Study – www.foodmom.com

Foodmom.com speed optimization case studyWe are back with our next site speed optimization case study. Our client’s site www.foodmom.com is running on one of the best fully managed WordPress hosting platforms WP Engine.

Our speed optimization case studies are developed on live WordPress sites. It also contains several speed test reports to analyze site speed performance before and after site speed optimization.

We follow a methodological approach to speed up WordPress sites, although sometimes our process gets limited under certain restrictions imposed by some of the WordPress themes as well as WordPress plugins active on site.

Site speed optimization results vary from site to site depending on the theme and plugins used on the site. Speed results are also based on how well WordPress themes and WordPress plugins are coded by their respective developers. A web developer’s perception of site speed and page speed is quite different from a site optimizer’s perception about it.

Step 1 : Backup Your Site Before Optimizing it for Speed

Taking a full backup of your site before optimizing it for speed is highly recommended as you never know what could break your site. Since every site is unique in itself, site optimization process for each and every site is also unique. What works on one site may not work on another site.

Site speed is not only dependent on internal site speed factors but it is also dependent on many external speed factors. CPU throttling may block server resources at times when they are needed most. Your site speed may also suffer from some badly coded WordPress plugins. We have even developed a separate case study to understand the impact of WordPress Plugins on site load speed.  Web host infrastructure also plays a very important role in defining the speed of any website. We also have a case study to understand the impact of web host infrastructure on site speed.

Taking a complete backup of the site ensures that in case of anything going wrong, we can always restore the site back to the point where it was fully functional. At least, a full DB backup should be done before making any changes to the website.

Step 2 : Diagnose WordPress Site Speed Limiting Factors

Just like a physician diagnoses the patient before starting treatment, we also diagnose our case study site before moving ahead with our speed optimization treatment. In order to diagnose a WordPress site for its speed limiting factors, we use some online site speed testing tools. Let us have a look at some of the most prominent site speed test reports done on our case study site.

GTmetrix report before speed optimization

Page Speed Grade: (91%) A

YSlow Grade:(78%) C

Page load time: 3.46 s

Total page size: 822 KB

Total number of requests: 64

Foodmom.com test report before speed optimization Page size 1.1 MB

Load time 1.17 s

Requests 72

Perf. grade 81/100

Your website is faster than 86% of all tested websites

Webpagetest speed report before optimizationFirst Byte Time: A
Keep-alive Enabled: A
Compress Transfer: A
Compress Images: D
Progressive JPEGs: F
Cache static content: C
Effective use of CDN: YES

First View: 2.844s
Repeat View: 1.767s

Looking at these speed test reports, we found some problematic areas in need of attention. All of these speed test reports also present a detailed analysis section along with the summarized results as shown in the above reports. Looking at the detailed section of these speed reports, we noted down all the points where score was low as well as highlighted in RED / ORANGE / AMBER color. We also observed that our case study WordPress theme was not updated to its latest version.

Step 3 : Keep WordPress Theme Updated to its Latest Version

Non updated WordPress themes may reduce site load speed. Since, WordPress keeps on rolling frequent updates, WordPress themes should also be updated accordingly. We observed that our case study site theme was not updated to its latest version so we updated the active WordPress theme before moving ahead. After updating the theme to its latest version, we also looked around at its theme settings to ensure that everything was in the right place.

We also noticed that the favicon was missing from the site installation. Favicon is a small image icon of size 16 X 16 px displayed in the address bar of your Internet browsers. Favicon is also shown in history as well as your bookmarks. You can create a favicon quite easily by using an online favicon generation tool such as www.favicon.cc. Create an image or upload your image file to get a favicon.ico file for the same. The favicon file was uploaded to the root folder of WordPress installation. We also added SFTP in order to transfer files in a secure environment.

Step 4 : Remove Query Strings from Static Resources for Speed Optimization

We tested the site once again on Gtmetrix and looked at its detailed speed test report.Remove query strings from static resources

The Gtmetrix site speed report returned a score of B (80) against Remove query strings from static resources. Looking at the report, you can see that some resources are served with a “?” in the URL. Query strings are not cached by some proxy caching servers due to which it gets loaded every time by the browsers, resulting in high page load time. We should remove these query strings to get a better score on this speed parameter.

Instead of modifying core WordPress files, it is better to find an appropriate WordPress plugin that can do the job efficiently. Luckily, we found a plugin named Remove Query Strings From Static Resources which removes the “?” in the URL. The plugin was installed and activated on our WordPress installation. We took another Gtmetrix site speed test and looked at the detailed report.

Query strings from static resources score

We got a score of A (97) against Remove query strings from static resources, a great improvement with respect to its earlier score of B (80). an improvement of around 21%.

Step 5 : Optimize Images to Improve Site Load Speed

Using unoptimized images increases page size as well as page render time. The situation improves when you upload optimized images, but if you fail to use optimized images, it increases your page load time. Testing the site once again on Gtmetrix speed testing tool, we got a score of F (49) against the speed parameter “Optimize Images”.Optimize images for site speed optimization

For optimizing these images, we can use an image editor. If you look at the details of the speed test report, you can see a link to the optimized version for all the images shown next to it. Gtmetrix offers you an optimized version of your unoptimized images. Instead of using image editor, you can even download the optimized version of the image by following the link. Once the optimized version of images is downloaded on your computer, you can use FTP or SFTP to replace the existing non optimized images.

After replacing all the non optimized version of images with its optimized version, we rechecked the site once again on Gtmetrix speed testing tool to get the detailed speed test report.Images optimized to improve page load speed

Optimize images speed parameter turned all green with the top score A (100). The score on Optimize Images moved to A (100) from its earlier value of A (49), an improvement of more than 120%.

Step 6 : Tweak .htaccess file for Optimizing Site Speed

Site speed optimization is done at two different levels. One at the WordPress level, something that we have done so far while another at .htaccess level. Many site speed optimizers and site owners keep themselves restrained only at the WordPress level.

It is true that making changes in .htaccess is quite risky because even a single bad entry in .htaccess has the potential to leave your site completely inaccessible. Before making changes into your .htaccess file, take a backup of the file so that in case of any error, you can restore the original .htaccess file back.

We tweaked .htaccess file with the best configuration so that the page load speed of our case study site can increase.

<ifModule mod_php5.c>
php_value zlib.output_compression on
</ifModule>

<FilesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>
Header set Cache-Control “max-age=604800, public”
</FilesMatch>

SetOutputFilter DEFLATE

<IfModule mod_headers.c>
Header set Connection keep-alive
Header append Vary User-Agent env=!dont-vary
</IfModule>

<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault “access plus 14 days”
Header set Cache-Control “public”
</IfModule>

<FilesMatch “\.(html|htm|xml|txt|xsl)$”>
Header set Cache-Control “max-age=7200, must-revalidate”
</FilesMatch>

<IfModule mod_mime.c>
AddType application/x-javascript .js
AddType text/css .css
</IfModule>

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/javascript
</IfModule>

<IfModule mod_setenvif.c>
SetEnvIfNoCase Request_URI \.(?:rar|zip)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:avi|mov|mp4)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.mp3$ no-gzip dont-vary
</IfModule>

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

After configuring .htaccess file for speed, we did another round of speed tests to confirm that the site has been entirely treated to get rid of all the speed limiting factors. Let us test the site once again on all site speed testing tools.

Gtmetrix Site Speed Test After Site Optimization

GTmetrix speed test after optimizationPage Speed Grade: (93%) A

YSlow Grade: (79%) C

Page load time: 1.54 s

Total page size: 763 KB

Total number of requests: 46

Pingdom Tools Site Speed Test After Site Optimization

Pingdom Tools Report After Speed OptimizationPage size 1.0 MB

Load time 948 ms

Requests 68

Perf. grade 83/100

Your website is faster than 90% of all tested websites

Webpagetest Site Speed Test After Site Optimization

Webpagetest speed test report after optimizationFirst Byte Time: A
Keep-alive Enabled: A
Compress Transfer: A
Compress Images: C
Progressive JPEGs: F
Cache static content: C
Effective use of CDN: YES

First View: 2.539s
Repeat View: 1.410s

Site speed test reports after site speed optimization are looking good, but before making any conclusion, let us compare site speed reports taken before and after speed optimization.

Speed Report Analysis Before and After Speed Optimization

Gtmetrix Site Speed Optimization Comparative Analysis

Factor Before Optimization After Optimization Result Gain
Page Speed Grade 91% (A) 93% (A) Improved 02%
YSlow Grade 78% (C) 79% (C) Improved 01%
Page load time 3.46 s 1.54 s Improved 56%
Total page size 822 KB 763 KB Improved 07%
Total number of requests 64 46 Improved 28%

Values of Page Speed Grade, YSlow Grade, Total page size as well as the Total number of requests improved on a relative scale.

Pingdom Tools Site Speed Optimization Comparative Analysis

Factor Before Optimization After Optimization Result Gain
Page Size 1.1 MB 1.0 MB Improved 09%
Load time 1.17 s 948 ms Improved 19%
Requests 72 68 Improved 06%
Perf. Grade 81/100 83/100 Improved 03%

Your website is faster than 90% of all tested websites. [Earlier: Your website is slower than 86% of all tested websites.]

Values of Page size, Load time and Perf. Grade improved on a relative scale.

Webpagetest Site Speed Optimization Comparative Analysis

Factor Before Optimization After Optimization Result
First Byte Time A A No Change
Keep-alive Enabled A A No Change
Compress Transfer A A No Change
Compress Images D C Improved
Progressive JPEGs F F No Change
Cache static content C C No Change
Effective use of CDN YES YES No Change
First View 2.844 s 2.539 s Improved (11%)
Repeat View 1.767 s 1.410 s Improved (20%)

Conclusion

Speed optimization analysis is showing good results. Although, it could have been better had the site been free from some other speed pulling factors. Looking at the home page, you can notice that a couple of objects are loaded from social media networks, thus slowing down site load speed to some extent. Site banner is also quite heavy on the site. Considering all these limitations, our case study site is optimized to return the best possible page load time.

Neither all WordPress themes, nor all WordPress plugins are developed in line with full site speed optimization guidelines. Our speed optimization case studies are aimed at helping site speed optimizers as well as site owners who want an easy to use DIY WordPress site speed optimization guide to improve their site loading speed.

Our site speed optimization case studies are your DIY site speed optimization guides. You can easily speed up your own WordPress sites by following our site speed optimization instructions. In case of any difficulty, you can always send an email to me or hire my speed optimization services at oDesk.

Website Speed Optimization Case Study Details
Website – www.foodmom.com
Web Host Server – WP Engine
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.

    Follow Me:
  • facebook
  • googleplus
  • linkedin
  • twitter

Leave a Reply

toggle