The way we work now — how software and websites are built — has changed radically. Cloud-based modular architectures have become the standard: reusable components that enable developers to scale projects almost effortlessly, expand easily into new channels, and iterate new sites, features and products faster than ever before. However, many organizations encounter a major roadblock on this shining road to the digital future: content.
Content has become a bottleneck for the modern agile business. Companies are attempting to deliver ever larger and more ambitious online experiences while still using last-century tools — traditional content management systems — as a platform.
The number one traditional CMS, WordPress, now powers one out of every three sites on the internet. WordPress dominates largely because it excels at solving many of the problems around managing content on the web, and because its user interface is reasonably intuitive and end-user friendly. It allows less technical folks to take ownership of maintaining, updating and creating new content for their own websites.
However, classic WordPress is starting to show its age. FIrst-generation WordPress websites are plagued by slowness, security vulnerabilities, poor SEO, and other issues. For now, many companies are making do with their legacy solution; for them, WordPress is still good enough. It keeps the content flowing. But forward-thinking companies focused on digital transformation have already ditched their traditional WordPress. For them, “good enough” is no longer good enough.
The Problem with Traditional WordPress
What, exactly, are the problems with classic WordPress? Can one out of every three websites really be so very wrong?
Well, yes. Especially for developers. In a traditional CMS, everything is packaged together and the technical architecture tightly links the frontend (design and layout) to the backend (code and content database). Using a classic WordPress implementation, then, means you lose control over your site’s structure — you can’t build it the way that’s best for your project, you can only build it the WordPress way. It means an inability to define canonical URLs, the page element that informs Google and other search engines to crawl a website and how to categorize (and rank) its pages and content.
Ultimately, classic WordPress is monolithic, slow, and exposes sites to security vulnerabilities. Here’s how:
- Monolithic: Every dynamic website consists of two main parts, a frontend and a backend. Classic WordPress is monolithic because it serves as a “single solution” front and back end for a site. This monolithic architecture restricts how you can build your site, limiting you to only options that WordPress supports.
- Slow: Since WordPress uses its backend CMS as the engine for building and displaying a site’s browser-facing frontend, it requires way more server resources. A classic WordPress site carries a lot of overhead — the backend user interface, plugins, frontend templates, CSS styling, a web server, and a database, and more. With all this junk in the trunk, pages take longer to build and then load more slowly. Every page also carries a lot of extra unused code, further slowing site performance.
- Vulnerable: WP compensates for the limitations of its monolithic architecture by offering a ton of plugins (external software modules you can add to your website to extend functionality). If you want your site to have useful things like contact forms, analytics, or ecommerce functionality, WordPress has a plugin — or fifty — for that. Sooo many plugins. These plugins are typically seamless to use, but they are also WordPress’s security Kryptonite. Why?
Plugins are susceptible to software bugs, hacking, and viruses, because each plugin is responsible for its own security. This adds up to a huge attack surface for hackers, a problem seriously and globally on the rise. Frequent updating is necessary to patch bugs and close security loopholes — it’s a lot of extra work, and these updates can sometimes break your entire site.
- Poor SEO: WordPress’s monolithic architecture strikes again! The platform itself limits potential SEO through lack of canonical links, but in order to get standard features or even just a decent looking site you have to use WordPress plugins and themes. Those, along with other encumbrances like hosting packages and other customizations, hinder a search engine’s ability to crawl your site. When the search engines don’t “see” your site, neither will customers.
These are the burdens of first-generation CMSs in general, and WordPress in particular. Fortunately, the future is here…And it’s headless.
What is Headless WordPress, anyway?
“Headless” sounds dramatic, but essentially it means breaking down the monolith. Decoupling the part of an application that you see and interact with from the part that handles the mechanics of building and deploying the site.
When it comes to WordPress, going headless refers to keeping the familiar WordPress interface for collaborating on content creation, editing and updating. However, behind the scenes, you’ve ditched the cumbersome WordPress theme layer for faster and more efficient architecture powering how your content gets built, deployed, and presented to viewers.
Why is Headless WordPress better?
Headless WordPress solves a lot of first-generation WordPress problems simply thanks to superior architecture. Headless WordPress is faster, more stable, inherently secure, and inherently scalable. It’s also orders of magnitude cheaper to host.
- Built-in security: Once you separate the frontend from the backend, you effectively minimize the risk to your content. There is practically no attack surface. Static websites have no database or backend to be hacked, so your content is not exposed to security issues associated with classic WordPress.
- Peak performance: Fast page loads matter. If a site takes more than three seconds to appear in the browser, visitors will abandon it — never to return. When you decouple the WordPress monolith, however, you keep the WordPress backend as a lightweight CMS (and your creative team’s ability to comfortably and rapidly iterate content). Now, however, you can pair it with the frontend of your choice. With a powerful and efficient new frontend to orchestrate builds, data and API calls, your content delivery will be much faster and responsive — and easy to consume even on mobile devices.
- API-driven and future-proof: Headless WordPress is API-driven, as opposed to traditional WP’s cumbersome, baked-in database. This means it can integrate with almost any other platform — and that you can choose the best possible technology and tools for your site at any given time. Headless WordPress also can integrate with most web platforms so you don’t have to worry about getting locked into a specific framework that could become outdated or obsolete. You can easily change technologies whenever needed — essentially, future-proofing your tech stack.
- Multi-channel publishing capability: A huge advantage for Headless WordPress is that it simplifies multi-channel content publishing. Since things are now API-based (instead of traditional WP’s baked-in database) your content can be called forth and displayed anywhere: desktop website, mobile app, touch screen kiosk. Headless WordPress can also make full use of AR, VR, and IoT devices. Meanwhile, you can also publish with equal ease to online platforms — Twitter, Facebook, Google listings — all at the same time.
It’s the ultimate enabler for omni-channel marketing. Using Headless WordPress allows you to be at the right place at the right time, and with the right message delivered the right way.
- Complete control: When you decouple WordPress, you gain nearly endless control and flexibility. As a developer, you have complete control over how the data is managed and where and how the content is stored in the backend. You also have full control over how your content displays in the browser.
- Best of both worlds. This is the mega bonus! Headless WordPress frees developers from the shackles of proprietary monolithic codebase (just say the word “PHP” to most devs and watch them shudder) while allowing the content teams to keep working the same way they always have. When you decouple the content management system’s workflow, the dev team and the content team each get to do their jobs independently using tools of their own choosing. Developers get to use their preferred languages and tools, all integrated with their existing deployment pipeline. Meanwhile, the content team gets the ability to push content seamlessly to the web, mobile apps, IoT devices, and whatever platform comes next.
If this new way to use WordPress is so truly amazing, why hasn’t the whole world gone headless? you may rightfully inquire. And, in truth, WordPress Developers have been excited about the possibilities of “headless WordPress” for several years, but at first the hype outpaced the tooling. Building a site with decoupled architecture required a high level of JavaScript experience to implement. Worse, the final product couldn’t quite deliver the super seamless publishing experience content creators crave because — unlike traditional CMSs — early Headless WordPress implementations lacked an easy way to preview content changes before publishing.
Gatsby set out to solve those difficult problems. We wanted to make it simple to rich create web experiences with Headless WordPress that are performant for website users and fun for developers to build — and that deliver the same feature-rich and user-friendly CMS experience your content team relies on.
Headless WP + Gatsby
Well, great news: now you can have it all!
Gatsby Cloud’s new integration for WordPress (currently in late beta, GA release coming very (very!) soon) bridges the gap between WordPress as a headless CMS and Gatsby-powered apps to deliver a complete, blazing-fast publishing experience. Gatsby Preview delivers a first-class preview experience for content editors, building near-instant previews that display not just the page you just created or changed, but your entire site. The Gatsby + WordPress source plugin pulls your existing posts, pages, and other WordPress content into Gatsby for quick, easy templating while WPGraphQL works in the background to serve up this content to your Gatsby build pipeline. This opens up the entire Gatsby ecosystem of (secure!) plugins to supercharge your new frontend. Gatsby’s powerful GraphQL layer makes it crazy easy to add in, or swap out, new features and best-in-class solutions like Stripe, Shopify and Algolia to your site — and consume data from as many sources in as many different forms as desired.
While the only difference your content creators notice is how much faster the site just became.
Want to learn more about Headless WordPress + Gatsby? Register for GatsbyConf — two days of speakers, workshops, and some really cool launches and announcements plus Gamer vs. Gatsby. Watch live as World Record holder Kosmic tries to beat his Super Mario Bros speed run world record while Gatsby engineer Kyle Gill races to spin up a live ecommerce site! Thrills! Chills! Free and virtual, March 2-3, see you there!