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

Case Study: Responsive Redesign

Summary: Upgrading to a responsive design has many benefits, including speed. A new design for tested about twice as fast.

Previously we explored the effects of a responsive design on We found mobile traffic increased from 20% to 24% after the redesign. This time we look at another responsive redesign, In part I, we'll explore the speed improvements of the new design. In Part II we'll explore other improvements. Before has been through three redesigns, January 2015 being the latest incarnation. Upgrading to a faster server improved load times by 60% overall. Let's see how upgrading to a responsive design helps performance. Figure 1 shows before the third redesign. before responsive redesign

Figure 1: Before Responsive Redesign used a separate mobile site with a small subset of static pages (see Figure 2). While the design appeals, there is little content for search engines to index and the pages don't change when the desktop site changes. before mobile site

Figure 1: Mobile Site Before

After Responsive Redesign

Dr. Cirka wanted a cleaner, more modern look to his site. Using a more modern Wordpress theme, the designer created a tighter layout with drop-down menus and dynamic tabs (see Figure 3). after responsive redesign

Figure 3: After Responsive Redesign

The new design is responsive to tablets and smartphones, showing a simplified and linearized version of the home page (see Figure 4). The entire site now responds to mobile devices with CSS, not just a subset of custom pages. mobile after responsive redesign

Figure 4: Mobile After Responsive Redesign

Speed Metrics Before Responsive Redesign

The old (2nd) design on the fast server was no slouch. The home page loaded in 3.1 seconds on a cable connection, TTFB of 0.48S and start render time of 2.5S at 364K and 55 requests (see Figure 5, Waterfall Before). speed before redesign

Figure 5: Speed Before Redesign

Speed After Responsive Redesign

The new design, despite being 59% larger in file size (581K vs. 364K), loads nearly twice as fast in 1.6S, with a TTFB of 0.23S, and start render time of 1.1S (see Figure 6, Waterfall After). speed after redesign

Figure 6: Speed After Redesign

Speed Improvement Metrics

The new design is more than twice as fast in time-to-first-byte and start render, and nearly twice as fast (48.3%) in load time (see Figure 7). The more recent default Wordpress theme and responsive design no doubt contributed to the speed improvement. speed metrics before/after

Figure 7: Speed Metrics Before/After


Upgrading to a responsive design has manifold benefits, not the least of which is speed. The new design is about twice as fast as the old one. In part II of this series, we'll explore the effects of this responsive design on other key metrics.

Further Reading
Dr. Ken Cirka's website has been around since 2003. Now on its third redesign, the new site is responsive and nearly twice as fast.
Upgrade to a Faster Server
Upgrading to a faster server can improve web page speed significantly. We found a 66% improvement for first paint time and 29% for load times for the home page after the move.

By website optimization on 30 Jan 2015 AM

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

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