Business.com is a site designed to help small business owners and decision-makers by providing high-quality information on business best practices.
They write guides on topics across sales, marketing, HR, and finance — from defining sales territories, to creating email marketing templates and increasing deliverability, to navigating payroll deductions and providing healthcare to employees. In addition, they host reviews and recommendations for a wide variety of software supporting these functions.
The Business.com home page
It’s a content-rich site, with more than 7,000 articles covering business industry news and trends for growth companies and the B2B community. Content composition, content reading experience, and search engine optimization (SEO) are extremely important to the team.
An incremental migration starts with a widget
Back in 2019, Business.com had a small (200x400px) lead retrieval widget they pulled in via an iframe. There were a couple hundred different variations of the form, and design was quite important.
With additional customization requirements coming down the line, the responsible team wanted to make it fast while preserving their ability to modify it.
The team went through the standard iteration process, said Spencer Sanchez, the team’s tech lead. “We started with all client-side first. Then we started moving stuff to SSR,” he explains.
Then, Sanchez and a friend were messing around with Gatsby on a side project, and brought the idea of using Gatsby to his manager and got approval to proceed. With Gatsby, Sanchez and team got the widget to a point where it could generate all the possible variations of different categories for the form — and they shipped it.
Moving over Business.com
Shortly thereafter, the team began eying migrations for some of the company’s properties, like Business.com and Business News Daily, which had Lighthouse scores “in the low teens”.
Impressed with the developer experience with Gatsby, the team pushed to move these properties over to Gatsby in order to improve SEO and conversion. “We said, ‘look, we have the starting spot,’” Sanchez said, “‘and we could theoretically move all these sites over.’”
The argument carried weight, and the migration happened over the end of 2019 and into 2020. It wasn’t easy — the site had a number of templates comprising over 15,000 pages, with a ton of tricky functionality. In order to accelerate timing, the team shipped the first version of the site with a number of pages routed client-side using wildcards, then gradually migrated these over later.
A Business.com article page
Today, the Business.com Lighthouse scores in the mid-60s, a roughly 50-point improvement. In addition, Sanchez says, it fostered a cultural change where performance became a cross-cutting department concern instead of just an engineering concern. They’re also well-positioned to optimize their score further by lazy-loading more JavaScript and removing or changing superfluous or overly-large third-party libraries — projects the team is actively considering.
Using API calls to display data dynamically
One of the things the team ran into as they did the migration was how to display data that changed dynamically.
For certain pages on their properties, they display lead capture widget advertisements coming from specific vendors that feature a particular URL. They do build-time checks from their internal ad inventory management system to see which ad should be displayed. Even though this isn’t exactly precise, they didn’t “need” the extra precision — they were comfortable with an ad campaign that might run for weeks running a couple of hours extra.
However, when they began adding a phone number to call to ads, it created an extra challenge. These phone numbers were tied to specific hourly windows every day; it would do no good for a user to call a number after the person on the other end had gone home. Like weather reports or sports scores, the information needed to be up-to-the-minute current.
As a result, rather than determining which ad would be served at build time, they moved to using live API calls against their system. The implementation itself, Sanchez said, was fairly straightforward.
The only tricky part, Sanchez found, was internally communicating the hybrid nature of the site — mostly static, partially dynamic. It’s a common misconception you can’t do both, he adds: “I feel like this is one of those times when we’d need an acronym for this because it’s coming up more often.”
The team had a few other tricks up their sleeves, too.
Another one of the lead retrieval widgets, which is embedded via iframe both on their own pages, and on affiliates’, has different variants based on location. They generate all of the variants via Gatsby, inspect the location client-side, and then serve up the URL of the matching page in an iframe.
Going from single-site to multi-site
After they completed the main site migration, the company started looking into building additional properties, like Business News Daily, with Gatsby. With a number of shared pieces — from articles to advertisements — the team started thinking about how to do component sharing. Initially, they started with a fairly standard abstraction — a component library. Over time, the component library became more complex, encompassing higher-level abstractions like pages.
As the development neared completion, the team discovered Gatsby Themes, which allows teams to more easily roll out similar-themed websites. While the team didn’t feel the effort that would have been needed to re-do their architecture using Gatsby themes was justified, they may have considered it had they realized the possibility earlier on.
Evaluating the homegrown CMS vs WordPress
The Business.com and Business News Daily content is currently stored and edited inside a custom, homegrown CMS. While this is workable, it’s been long identified as an area that could be changed.
In addition to the maintenance burden of custom software, and longer build times due to their current setup, there’s a push to move towards WordPress for a more familiar user interface for writers; this would allow Business.com to more easily onboard new writers into their pool.
This is a feature enabled by Gatsby’s modular, “content mesh” architecture — because the pieces are fairly interchangeable, the system as a whole gains evolvability. Business.com didn’t need to migrate wholesale at once from their highly customized system — they could start by transitioning to Gatsby for the frontend and evaluate migrating the CMS after that.
Expanding to more sites
Today, Sanchez leads a team of about a dozen engineers responsible for the Business.com and Business News Daily sites.
The organization continues to grow — in this case by being acquired by Centerfield, a broader group of content sites and consumer-facing software.
Now within the newly expanded organization, other groups are looking at the Business.com architecture, the performance and modularity benefits, and evaluating to whether they want to transition to using Gatsby on their site as well.
“Other Centerfield teams were impressed with the direction we decided to take moving away from the fully dynamic sites for a variety of reasons,” Sanchez says. “How much you get out of the box, developer experience, throughput and all that.”
While a number of projects are in flux across several teams, and the future is still to be written, it’s a situation where a pioneering team going first has the chance to inspire and accelerate change across a whole organization.
“For a lot of folks, I think what we did was expedite their intent,” said Sanchez. “When they saw what we had done, they’re like, well, ‘we want to do that now’ versus in six months.