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.
The site appeared to experience stability issues with the combination of mod_pagespeed and WPOptimize. Removing WPOptimize appeared to solve the problem.
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).
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.
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 essentially caches static files in most circumstances to bypass the overhead of the Wordpress CMS. Install the plugin in the usual way and activate.
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!
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 the results weren't quite as good, but still an improvement over the original (see Figure 4).
Our Pagespeed scores dropped a bit by not using the WPOptimize Speed plugin (see Figure 5).
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.
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.
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.
By website optimization on 9 Jun 2015 AM