GDD For Website Optimization: A Real-Life Story

At Weidert Group, we don’t just maximize the power of inbound marketing with our clients, we fully use it ourselves. Similarly, we don’t just talk about the power of growth-driven design (GDD), we use it on our own website.

This blog post — which is more like a mini-case study — dives into a little problem we had with our website speed and explains how we fixed it using the process of growth-driven design.

Brief Review of Growth-Driven Design

Feel free to skip to the next section if you’re a growth-driven design (GDD) wizard. Need a quick review? Read on!

GDD is a method of designing and maintaining a website that leverages user data to inspire continuous changes. Our belief in its efficiency and productivity as a web development approach is so great, we developed this 100% free comprehensive guide to GDD.

The GDD action process is similar to the scientific method. If it’s good enough for four centuries of acquiring knowledge, it’s good enough for us! Here’s a side-by-side comparison:

GDD	vs.	Scientific Method
State an Objective	=	Formulate a Question
Create a Hypothesis	=	Develop a Hypothesis / Make a Prediction
Conduct the Experiment	=	Test Hypothesis by Conducting Experiments
Achieve Results	=	Analyze Results
Study Learning	=	Decide on the Next Actions

How and why did we put GDD to the test? It starts with looking at the site speed of weidert.com.

Speed (or lack of it) Kills

Studies show over and over that fast website page speed leads to better conversion rates. Visitors are more likely to do what you want them to the quicker a webpage loads.

There's a bunch of data about how a website’s loading time affects conversion rates. But, what you really need to know is this simple:

2.4 seconds = 1.9% conversion rate

5.7+ seconds = <0.6% conversion rate

Shaving off just over 3 seconds triples the conversion rate (thank you, Cloudflare.com for the stats). Yes, other factors affect a website’s conversion rate (page design and layout, text and images on a page, etc.), yet optimizing website speed should improve conversion rates no matter what other areas require optimization. Plus, it should improve SEO results, too.

So, on to the issue with the Weidert Group website. Our page speed had worsened over several months, so our web development team dug in to discover why. They implemented the GDD action process.

Increasing a Website’s Page Speed Performance

At Weidert, we use various tools to measure page speed in order to find areas for improvement: Google PageSpeed Insights, GTmetrix, Pingdom Website Speed Test, and Website Grader.

Using Google PageSpeed Insights, we found that several modules developed for our new website were creating individual CSS files. Each file required another HTTP request to the server, which slowed down the speed of the site.

That lead to an obvious first step ...

State an Objective: Attempt to increase the site speed by optimizing the CSS.

… and a logical second step:

Create a Hypothesis: Modifying the CSS code structure in HubSpot Design Manager — moving the CSS from the individual custom modules to global locations such as the header and the global CSS file — will decrease the amount of time it takes for the page to load. This will cause the website to load faster, resulting in an improved conversion rate.
Conduct the Experiment: Create a duplicate/cloned version of the Weidert Group home page, so there’s a control page and a test page. On the test page, modify the CSS locations and run the test through the page speed tools mentioned above. That will determine if moving the CSS increases the page speed.

Because Weidert is a full-service inbound agency and top HubSpot consultant, conducting the experiment was relatively easy. In HubSpot Design Manager, modules that control content can be customized. Each custom module contains three sections: HTML, CSS, and JavaScript. If there’s code in a CSS section, the HubSpot CMS will generate a file for that section.

To test removing the CSS files, we took the CSS and inserted a page-specific CSS file. When CSS was unique to a module, we instead placed the CSS in the HTML section of the module.

Achieve Results: Once the duplicate/cloned version was created, we then ran both that test page and the control page (with the exact same content) through the page speed tools.

We saw some interesting results!

Mobile Page Speed Insight Scores	Control	Test
First Contentful Paint (seconds)	4.0	3.7
Speed Index (seconds)	6.0	5.4
Largest Contentful Paint (seconds)	4.2	4.3
Time to Interactive (seconds)	12.6	12.9
Total Blocking Time (ms)	610	1,070
Cumulative Layout Shift	0.983	1.077

In all honesty, it was a mixed bag. The site was smaller with fewer files to be loaded, and the overall speed did improve. However, some of the changes increased the amount of time for some things to improve.

Study Learning: With future websites, we plan on moving CSS out of the modules and into the site CSS files. While the initial tool results were mixed, we’ll continue to monitor page performance. Other analytics measured in Google Analytics will show if there are real-world improvements.

By continuing to monitor results, we can determine if our hypothesis is correct in an actual working environment and over the long run. We’ll also monitor conversion rates over time to see if page speed improves conversion rates.

Now that you’ve seen the importance of website page speed optimization, find out more about growth-driven design; it’s much more complex than simply improving site speed.