[CinderGhoul]

Hello HF web enthusiasts,

Today I will post a guide on how to build a high-performing blog, without the use of WordPress. This is not a sponsored post or referral link, I just wanted to share the power of Headless CMS since I see a lot of people leaning towards WordPress. But if you really want to boost your SEO and give a good experience to your users you can try these things.

Requirements
- Frontend of your choice with SSR Nuxt.js, Next.js.
- Templating engines like Blade, Jade, etc if you are using server-side language such as PHP or Node. (optional)
- Backend technologies such as PHP, Node.js to call REST or GraphQL API.
- A bit of technical and coding knowledge.


What is a Headless CMS

A headless CMS is any type of back-end content management system where the content repository “body” is separated or decoupled from the presentation layer “head.” Content that is housed in a headless CMS is delivered via APIs for seamless display across different devices.





Benefits of Headless CMS

- Doesn't have a Head (Frontend). It only has a backend to manage the CMS pages. So the front end can be anything. Mobile device, Desktop, etc.
- You can use different technologies to render your frontend on different devices. React, Vue, PHP, Node, Flutter. Device support is limitless.



- Compatible with Microservice architectures.
- SEO benefits from improved web vitals and overall great user experience.
- Fast load times from image optimizations, caching support.
- Out of the box Image optimizations
- Nontechnical people can drag and drop components and build a page.

How to Integrate Headless CMS in project

There are many Headless CMS available nowadays storyblok, prismic.io, etc. We are using storyblok.com as it has some great features.

Basically
- We go to storyblok and create Components.


- The Headless CMS manages your content and gives you output in a REST API.
- You map the component "technical name" with your frontend Vue or React components.



- Use editable storyblok plugin so you can drag and drop content





Why we use headless cms in our projects

Legacy PHP CMS
- Our old system was made in a PHP CMS which was difficult to render in our Vue, Node stack. The CMS apis were a lot slower, and it was also difficult to manage in the microservice architecture. So we used it in our Vue application. How To add Storyblok to your site in 5 minutes

- Our content writer staff is happy now that they can drag and drop blocks and just edit colors and texts. Using storyblok editable plugin we can control the things we want to edit in their "Visual editor".

- Storyblok provides us two version of data. Draft and Published. When in the editor we call the draft version, while on the website we show published version. https://www.storyblok.com/docs/api/content-delivery

- Storyblok provides a webhook feature which can invalidate the cache. So if you are using HTTP caches

Image Optimizations
- Great API for image optimizations. On the fly .webp support, cropping, blurring, resize image support.  More here: https://www.storyblok.com/docs/image-service
Our non-tech staff used to upload heavy images, but using storyblok on the fly image filtering, we optimized the images heavily and improved speeds.

Combining this with the power of <picture> tags we can scale images for mobile and desktop very easily!

Example:

Code

<picture>
<source media="(min-width: 760px)" srcset="https://a.storyblok.com/f/126880/625x579/123/image_blahblah.png/m/300x0/filters:format(webp):quality(55)">
<source media="(max-width: 759px)" srcset="https://a.storyblok.com/f/126880/625x579/123/image_blahblah.png/m/375x0/filters:format(webp):quality(55)">
<img alt="article image" style="" src="https://a.storyblok.com/f/126880/625x579/123/image_blahblah.png/m/300x0/filters:format(webp):quality(55)">
</picture>

- We also added lazy loading to images, so only first few images are loaded, so overall page size is reduced by a lot. Images will load only when user scrolls down.

Schedule Releases
- Schedule releases. We can edit stories, articles and add to a release version. Then schedule that release for a particular date and launch all at once.

SEO Support
- Similar to any Next or Nuxt app we used Server Side Rendering, so crawlers can still read data just like on a normal blog.
- We added Skeleton loaders to improve web vitals such as Content Layout Shifts.




The FCP and CLS web vitals have improved a lot, although these metrics are in developer build, when in production build it gets better.



Thats cool, but I love Wordpress. How can I use Wordpress as Headless CMS?

You can use plugins which will give wordpress posts data in a REST api. such as this one https://wordpress.org/plugins/headless-cms/


You can also combine Storyblok with Vercel, but I haven't used it enough to write a guide on it, but I'm sure you can improve it much more.

Also, consider the new HTTP3 protocol https://requestmetrics.com/web-performan...p3-is-fast

Google is already using it, you can see the h3 protocol.


Again, this is not a sponsor or advertisement for storyblok, I just wanted to show how powerful Headless CMS can get if used correctly. Let me know your thoughts or questions. I cannot share the link of my site, since its a business and I'm not comfortable sharing the link on HF.

Thank you!

[Kayvh]

Nice post man, if I was building a website for a client and it paid well I would still use WordPress as the headless CMS though since they would be more familiar with that instead of something new.

[CinderGhoul]

Nice post man, if I was building a website for a client and it paid well I would still use WordPress as the headless CMS though since they would be more familiar with that instead of something new.

Agreed. Especially if they have Yoast SEO and other plugins installed, its difficult for them to switch, without increasing their budgets. I personally never liked WordPress or other CMS, due to its monolithic nature and code structure. I haven't tried Headless Wordpress, but my company uses Headless Magento, and it doesn't perform too well.

Setting up a Headless CMS takes a bit time to get up and running, but once it's done, its really powerful.