Headless WP + Gridsome

Traditionally WordPress was responsible for managing the content and the look of the site.

But, the REST API, opened up the doors to new possibilities. One of them being the ‘Headless CMS’ Approach.

You might be asking yourself, what the hell is a headless CMS? The idea is to use WordPress or any other CMS, only for managing the content.

It then can be used as a backend for a mobile app, for a website…

Lately I’ve discovered Gridsome. And using it with WordPress as a headless CMS has brought my clients some amazing results which I’ll highlight, but first…

What is Gridsome?

Gridsome is a static site generator. Normally when you visit a web page, the CMS, in this case WordPress, fetches the data from the database. Populates the page with the data and sends back the populated page.

Getting the data from database can be slow. Gridsome on the other hand, builds out all the pages before any user interaction. At build time.

So, when a user requests to view a page it simply serves it.

One of the main culprits of slow loading pages, are images. By default, Gridsome does not load images when the page is loaded. It “lazy loads” them. So first the content is loaded, and only then it starts to download the images.

One other feature of Gridsome which makes it extremely fast, is link pre-fetching. Once the page is fully loaded, Gridsome looks for links on the page. And starts downloading those pages in the background.

When a user clicks on a link, the page is already downloaded, and the browser can serve it instantly.

Gridsome has much more going on under the hood, but I think you get the point…

This leads me to…

How does it benefit your business?

Search Engine Optimization (SEO)

WordPress is good for optimizing the content and meta tags. But often slow to load pages. And as you know page speed is a big ranking factor.

Gridsome is incredibly fast, resulting in better rankings, because search engines prefer to send traffic to fast sites.

Conversion Optimization

If your page takes more than 3 seconds to load, the probability of bounce (the user leaving the site) increases by 90%.

If you’re hoping the user is going to fill out that form, you better ensure your page is loading as fast as possible. Google offers a free tool to test you page speed. Check out if it’s taking your page more than 3 seconds.

Easier, faster and safer to update in the future

Gridsome is built on top of Vue, which uses components. Components are like building blocks. They encapsulate code for a particular section, not a page.

For example, the header section is a component. The latest news section is another component (probably made of other components) and so on.

The developer can change the styling or functionality of a section, knowing it won’t affect anywhere else on the site. Which enables them to work faster and makes it easier for them to deliver.

Security

WordPress has a reputation when it comes to security, often due to vulnerable plugins. As Gridsome generates static HTML, there’s not much one can hack.

By default, it’s much more secure.

Final thoughts

One of the beauties of Gridsome, is you can use it with your current WordPress site. Not only. You can also use it with a bunch of other CMSs as well, have a look at their site.

Are you ready to boost your site?

If you have any questions, feel free to reach out.