Case Study: WordPress Theme Optimization

WordPress is the most popular CMS on the Web, with over 60 million users (Wikipedia 2015). WordPress websites use themes to control their look and feel and display the underlying content in the database. Designers can choose from thousands of free or paid themes, or create their own with the requisite skill. Themes come in all shapes and sizes, and therein lies the problem. This article shows the importance of choosing a lightweight theme for faster performance.

Speed Optimized WordPress Themes

On the Web there are plenty of articles that show how to optimize your theme. Shrink graphics, make fewer database calls, minimize CSS and JavaScript, and caching are some of the more common tips. These are good practices all, but often the best way to get to speedy performance is to switch to a lightweight theme that makes fewer demands on the server. Building up a minimal theme is more efficient than removing features from a one size fits all theme. We’ve found that either starting with a default WordPress theme, or a theme designed for performance gives the best results.

Diy-Sls.com Speed Optimization

Diy-Sls.com used a WordPress theme with a weight problem (see Figure 1). The page weighed in at 3.4MB and 119 requests, loading in over 7 seconds (see Figure 2).

Figure 1: Diy-sls.com Home Page Theme

Figure 2: Diy-sls.com Old Host Performance

New Host Results

Moving the site to a new shared host with on-server optimization improved response times. The content was automatically optimized with server software which shrunk and combined files to reduce requests. Start render was twice as fast on the new server, dropping from 6.6 to 3.24 seconds (see Figure 3). Load time dropped from 7.5 to 4 seconds, nearly twice as fast (see Figure 4). Page size dropped by 44.5% from 3406K to 1889K, and requests dropped by 31.9% from 116 to 79 requests on the new server (see Figure 5).

Figure 3: Diy-sls.com Old Host Performance

Figure 4: Diy-sls.com New Host Performance Metrics

Figure 5: Diy-sls.com Size & Request Metrics

New Theme Results

After moving the old site to the faster server start render and load times were twice as fast or nearly there. But the 4 second load time, and especially the 3.2 second start render time on cable were still too high. Even after some size and request optimization, the old theme was still too burdened with excess features to be fast. DIY decided to replace the fat theme with a performant one on the same fast server (see Figure 6).

Figure 6: Diy-sls.com New Theme

The new theme conveys the same information, but weighs in at a svelte 805K and a mere 32 requests (see Figure 7). The new theme on the same fast server is twice as fast to load, and three times as fast to start rendering content (see Figure 8).

Figure 7: Diy-sls.com New Theme Performance Metrics

Figure 8: Diy-sls.com New Theme Performance Improvements

Faster Hosting + New Theme Results

Overall, switching to a new theme plus faster hosting improved TTFB by 34%, start render by 83.4% (6.6S to 1.1S), and load time by 74% (7.5S to 1.96S) (see Figure 9). The optimized new theme is 76% smaller and requires 72% fewer requests (see Figure 5).

Figure 9: Diy-sls.com Old Theme vs. New Theme Performance Improvements

Conclusion

This article shows the importance of using a high performance WordPress theme. The original theme was more than 3,400K in size and required 116 HTTP requests. The new optimized theme was 4.2X smaller at 805K requiring 3.6X fewer HTTP requests (32). Both themes conveyed the same information, with drastically different load times. Switching to a faster WordPress theme and speedy hosting improved page load time by 74% (7.5S to 1.96S) and start render by 83.4% (6.6S to 1.1S).