Growth engineering is a crucial aspect of any expanding company. There are many components that go into doing Growth Engineering well. For the past 7 years, I have been working on Growth engineering, building the team, tools, and foundational platform required to grow our customer base.

This is the second post in a series of articles that goes over what it takes to build a growth platform that can power a SaaS company (See post #1 here). Today we will talk about content management: what it is, why it’s needed, and how one might implement a content management solution.

Every company needs a content strategy to drive traffic to their website. A content strategy is the planning, creation and publication of content on the website to drive SEO traffic. Along with a strategy, a solution to deliver that strategy without a large overhead is vital. The ability to quickly create content, deploy it in a performant manner ( very important!!) and allow that content to drive traffic to your website is paramount in a low touch sales model. 

Marketing websites typically consist of several types of pages including product descriptions, resources, blog posts, and support and knowledge pages.

A Content Management Systems (CMS) is a product for marketing teams to create, manage and deploy content. Once set up, marketers should be able to manage content without engineering support. Of course an engineering team is usually needed for any more complex technical changes.

Broadly there are 2 kinds of CMS’s out there:

• Traditional CMS
• Headless CMS

A Traditional CMS is a full-service platform that includes self-service content creation, content storage and content delivery. A good example of this is Wordpress, which provides a WYSIWYG editor for content creation, a full PHP/SQL-based setup for content management and persistence along with themes and templates for delivering HTML content to the browser.

A Headless CMS decouples the content layer from the rendering engine. It provides an interface for managing content, content storage, and a rich API layer for fetching serialized content. A headless CMS allows any kind of rendering layer to be brought in and lets the customer decide how they want to deliver content to any digital platform of their choice. Examples of popular headless CMS in the market are Contentful and Strapi.

Today we will use Wordpress to walk through examples of how to configure both a traditional and a headless setup, and how to get started with content management. We use Wordpress because it is free, open source and has a large market share, but another CMS could be substituted and most of the principles will hold true.

Wordpress as a Traditional CMS

Wordpress works out of the box as a traditional CMS. It has a rich WYSIWYG editor called Gutenberg that supports content blocks of different types, such as: text, media, tables, lists, etc. Blocks can be arranged in the layout to form a content page.

Everything in the Wordpress backend is structured as a “post.” A post is a Wordpress object representing an entity that gets saved to the database. A web page built using the Wordpress editor is saved in the backend as a post. This abstraction also allows customizations through plugins and custom code that enhances the functionality of the platform. Wordpress comes with default post types called pages and posts. It also supports custom post types which can be used to arrange different types of pages on a website.

A Wordpress theme is what brings all the content together. It is a collection of templates, stylesheets and code that is used to render content for users with a customized look and feel across the different types of pages. Most themes take care of responsiveness for different screen sizes and accessibility requirements.

And that's it! As a traditional CMS, it is a single product to both create and render content based using the theme. The CMS also needs a hosting platform to host the servers as needed for a production level web server. With a Traditional CMS, the hosting needs is based on the expected traffic and volume to the website and less dependent on the number of editors creating content. 

Wordpress also comes with a rich set of plugins that can be used to customize workflows, manage content better and build features over a standard Wordpress offering. These include plugins for configuring seo meta data and tags necessary for crawlers.

Wordpress as a Headless CMS

Wordpress can also be used as a headless CMS. When used in a headless fashion, Wordpress APIs ( REST, GraphQL ) are queried for content, and a separate stack is used to render the content. React UI components are created and these can then be hydrated by content from the CMS. Layouts and components live in a framework of choice which today is React. In this way engineering and design can build out the UI experience in a technology stack of choice while Marketing uses a WYSIWYG editor they are comfortable with for creating content.

Wordpress Gutenberg supports building custom components. Gutenberg components are written in React, so React UI components can be wrapped and be used inside the Wordpress editor to provide a pure WYSIWYG experience for content authors.

NextJS is a really popular JS framework which can be used to build and render the UI in an optimal way for a highly performant web experience. NextJS supports a lot of feature for building modern web applications like:

• Server side rendering
• Static site generation
• Routing
• Image Optimization
• CSS/ JS splitting and bundling
• Great developer experience

Pages can be built statically as soon as they are published by the editor team through a CI/CD system that runs NextJS and can be served statically on a CDN. NextJS can also run as a live server supporting server side rendering, giving engineers more flexibility in managing pages at request time versus build time. This can be useful for experimentation, implementing server-side analytics, or making realtime calls to external APIs or databases.

This approach with a headless CMS and separation of web experience layer, along with static site generation is also known as Jamstack.

One thing to note is that plugins that work at render time / i.e plugins that can be invoked in Wordpress when a page is fetched cannot be used when using Wordpress as a headless CMS. This is because there is a separation of content and rendering and all rendering is now controlled by NextJS and not Wordpress. 

Best Practices

Asset Optimization

Every byte that needs to be downloaded by the browser increases the time that a customer needs to wait to see a webpage. Modern day websites often struggle with bloated JavaScript and CSS bundles, which need to be fully downloaded by the browser in order to render the page completely. It's important that these assets are made as small as possible. CSS needs to be minified. Images should be sized appropriately and should be made as small as possible in size for the desired dimension. Using next gen formats like WEBP and AVIF can help with this.

Adaptive

Content needs to be adaptive. There are a huge number of screen sizes available today, from large monitors to tablets of various sizes from 12” to 8”, to cell phone displays around 6”. Content needs to be responsive and change based on the screen size. 

Deployment / Auto Scaling

Content needs to be deployed in a way that can easily serve organic growing traffic as well as viral traffic. A growing company needs to be ready for traffic to 10X or even 100X in a short duration of time. If deployed in the cloud with a live server, the servers need to be set up with load balancing and auto scaling. If deployed as a static website, it needs to be served via a CDN. Something to also think about when running a server is a web application firewall and DDoS protection. It is really easy to take down a website that does not have such protections.

SEO & Performance

Websites need to be fast. A sluggish website will cause visitors to bounce and will reduce conversions. A sluggish website will also cause search engines to downrate the site. Google Search console is a great way to see how Google ranks pages. Core Web Vitals in Google search console scores pages in the sitemap from good to poor. A poor score will affect page rankings. Google Lighthouse is also a useful tool to measure page performance. Google Lighthouse scores pages for performance, SEO and accessibility for both desktop and mobile. Having these scores in the green make for the best customer experience and improves page visibility.

CDN

Use a CDN ( Content delivery network ) to serve all static assets. Ideally the CDN is set up in a non cookie domain. Static assets here are images, files, javascript, CSS. HTML can also be served by the CDN. There are trade offs here of having the website being entirely static v/s being delivered by a server. Modern CDN also supports running application code (AWS Lambdas on edge) that make it easier to go entirely serverless.

Accessibility

Inaccessible web content means that users with disabilities are denied equal access to information. Having an accessible website is important to provide equitable access to all customers. Content management systems need to deliver content that meets ADA/ WCAG accessibility standards.

Summary 

At Gusto we have been through several iterations of content management. A Traditional CMS is easy to get started with and launch content immediately. Over time, this has transitioned to a headless CMS with custom brand components. This has provided Gusto with the scalability and maturity to support our Marketing teams. Hope this blog has provided information to help you get started with content management.