Call (877) SITE-OPT (748-3678)

Optimizing a Complex Site for Pagespeed II

Summary: In Part II of our series on speed optimizing a complex site we explore caching plugins. Adding page caching to a Wordpress site nearly halved load times, and more than halved start render and TTFB times.

In Part I of this series on optimizing websites for Pagespeed we optimized a complex site using mod_pagespeed, some manual tweaks and WPOptimize Speed by xTraffic. We boosted the mobile Pagespeed score from 58/100 to 86/100, and the desktop score from 75/100 to 93/100. In Part II of this series we'll explore how to speed optimize the server response of a Wordpress site with caching plug-ins.

Stability Issues

The site appeared to experience stability issues with the combination of mod_pagespeed and WPOptimize. Removing WPOptimize appeared to solve the problem.

Optimizing TTFB of a Wordpress Site

Yes, of course you could start with a streamlined template, minimize the use of plugins, and use nginx for faster time to first byte (TTFB), but this was an existing site. One particularly stubborn metric to improve is the time to first byte (link) (TTFB). Even after installing mod_pagespeed the TTFB of mymanhattancosmeticdentist.com was 0.64 seconds (see Figure 1).

mymanhattancosmeticdentist.com webpagetest ttfb after mod_pagespeed

Figure 1: MyManhattanCosmeticDentist.com TTFB After mod_pagespeed

Unless you are on a SSD-based server, TTFB of 0.3-0.7 seconds are pretty typical for Wordpress sites based on an existing theme. The site in question is a custom site with many plugins, and jQuery effects. The challenge was to keep the jQuery effects while speeding up the TTFB. Enter Wordpress caching.

Wordpress Caching

Short of spitting out static files from your Wordpress install, caching plugins like Wordpress Super Cache, W3 Total Cache, and WP Rocket Cache are the answer. We tried both Super Cache and Total Cache and had better luck with Total Cache. Super Cache worked for a while but appeared to cause stability issues with this combination of software. WP Rocket Cache tested fastest but is below version 1.0 and is payware.

W3 Total Cache

W3 Total Cache essentially caches static files in most circumstances to bypass the overhead of the Wordpress CMS. Install the plugin in the usual way and activate.

Total Cache Settings

Figure 2: Total Cache

Results of W3 Total Cache

After installing W3 Total Cache and checking all boxes the results were dramatic. TTFB decreased from 0.64 to 0.105 seconds (see Figure 3). This is a decrease of 83% in TTFB, the power of caching!

W3 Total Cache Speed Results

Figure 3: W3 Total Cache Speed Results

We ended up selecting page, database, object, and browser caching in W3 Total Cache after testing the site. Be sure to test your own site after each option (minify, cache objects, etc.) as these may cause issues with your particular configuration.

Without mod_pagespeed

Without mod_pagespeed the results weren't quite as good, but still an improvement over the original (see Figure 4).

W3 Total Cache without mod_pagespeed Results

Figure 4: W3 Total Cache without mod_pagespeed Results

What About Pagespeed?

Our Pagespeed scores dropped a bit by not using the WPOptimize Speed plugin (see Figure 5).

W3 Total Cache Pagespeed Results

Figure 5: W3 Total Cache Pagespeed Results

The Pagespeed score dropped to 77/100 for mobile, and 91/100 for desktop. However, speed testing showed the site to be faster with just mod_pagespeed and caching. Trying various plugins (Autooptimize, etc.) improved the Pagespeed scrores, but decreased the actual loading speeds. This behavior of higher Pagespeed scores but slower loading speeds may be due to the dynamic nature of these optimization plugins.

Load Time Results

A graph of the various load times shows the story (see Figure 6). After mod_pagespeed, the number of objects and size drops, but the TTFB still suffers from the Wordpress/Theme overhead (0.64S). Start render is 2.35 seconds, and load time is over 6.15 seconds on cable. After installing W3 Total Cache the TTFB drops 83% to 0.10 seconds, start render drops 55% to 1.06 seconds, and load time drops 48.7% to 3.15 seconds. Turning off mod_pagespeed increases the load times slighly. The vast majority of improvement comes from caching.

Load Time Results

Figure 6: Load Time Results for mod_pagespeed & W3 Total cache

Conclusion

Focusing solely on one metric (Pagespeed scores) can cloud the whole performance story. Adding page caching to our test site nearly halved the load time of pages, and dropped TTFB and start render times by 83% and 55% respectively. The majority of improvement in load times was seen from page caching, with mod_pagespeed adding a slight improvement in speed.

Further Reading

Automatically Speed Up Your Site with mod_pagespeed for Apache
mod_pagespeed is an open-source Apache module that automatically speeds up web sites. Through a number of filters, mod_pagespeed trims the fat off your HTML, CSS, JavaScript and images, reduces HTTP requests, and improves caching. In this article we introduce mod_pagespeed and summarize the available filters.
Benchmarking the Fastest Wordpress Cache Plugins
Philip Blomsterberg of WPDevShed benchmarked many Wordpress cache plugins to test which were the fastest performers. For pure speed, WP Rocket Cache is the clear winner in this test.
MyManhattanCosmeticDentist.com
Dr. Michael Wei's dental site was tested in this article.
Optimizing a Complex Site for Pagespeed
Part I of our series on Wordpress page speed optimization showed how mod_pagespeed, some manual tweaks, and the WPOptimize Speed plugin improved Pagespeed scores for a complex site.
Pagespeed Insights
A free online tool that measures the performance of a page both on mobile and desktop devices. Pagespeed grabs a page twice, once with a desktop user agent, and once with a mobile user agent and reports on performance best practices with a score from 0 to 100.
WP Rocket Cache
This powerful plugin not only caches files but minifies and concatenates JS and CSS files, lazy loads images, gzip compresses, optimizes Google fonts, optimizes images, DNS prefetches, and the list goes on. The plugin tested fastest in a multi-plugin study (see the WPdevshed.com article above). Rocket cache combines the effects of many optimization plugins into one plugin, which avoids "plugin drag." Payware.
WP Super Cache
Wordpress caching plugin that creates static HTML files of your pages to speed load times. You can use mod_rewrite, PHP, or legacy caching to deliver the cached files.
W3 Total Cache
This Wordpress plugin caches pages, objects, databases, minifies and more. Used in this performance study.

By website optimization on 9 Jun 2015 AM

Copyright © 2002-2016 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: July 29, 2015.

Follow us on: Twitter, Google+, Facebook, Linked In