“That's it! I'm done with Webflow! It's been nothing but a nightmare. We're moving to a headless CMS, and we're doing it now. No more wasting time!”... is what could have easily been heard about two months ago in our office, after (yet again) discussing whether to make a move to a headless CMS for our company website or not.
In reality, the discussion was much longer and much more boring to sum up here. But what is true, is that for the past few months we have been working hard to revamp our website after growing frustrated with Webflow, and we finally launched it! So, after completing this strenuous path, we decided to share the journey insights with you.
A short history of what we tried and why it was time to move on.
So, as evident from the title, we of course used Webflow, but we also tried out WordPress, as well as hard coding our website using React and considered a few other alternatives. However, each of these options was in some way too limiting for our needs.
Hard coded website
- Took too long to set up.
- Difficult to edit content.
- Can’t outsource the editing work to a non-technical team.
Webflow
- Limited by the selected theme.
- It requires more technical understanding than expected - when editing the content, you can easily change something on one page that changes the layout, or some other design aspects on other pages as well. This was at least in part a problem with the theme we were using, but Webflow did not help either.
- There are some live preview issues.
- Localization was not built-in until very recently.
- The customization is very hard and a lot of things were taken out of our hands (performance, fine-grained SEO, lazy loading, etc.).
WordPress
- Performance is subpar.
- Localization issues in the headless version.
- Bottom line: If you are using WordPress as a template it works fine but as a headless CMS it mostly sucks because of subpar API support.
We also considered Squarespace, Wix and Framer, and although it is possible to use them as headless CMS, they are also quite limiting. So we decided to find a suitable headless CMS, meaning we could use Next.js (our beloved framework) for frontend development and develop a completely custom website, but still have a content management system, which allows a relatively simple input and editing of content.
What we were looking for:
Based on our experience we decided to go for a suitable headless CMS for managing the content of a Next.js-based landing page, allowing full customization and seamless integration. Other requirements we had were also support of custom sections or components that emulate a purposely primitive website builder, rich text editor support, user-friendly admin interface, SEO support, multi-user support, media hosting and easy backups and restoring.
We conducted quite an extensive research when it came to choosing the right solution for us. As this was long enough for a whole separate blog post, we decided to post it here:
The solution
In the end, we (web)landed on Payload because of its superb integration with Next.js - our technology of choice for web development.
This approach allows us to:
- Have absolute control over performance.
- Play around with SEO and analytics on a lower level than with other solutions.
- Have a great experience for the content editors.
- Build a tailored website including great animations and easter eggs.
- Use our favorite libraries and tools along the way (Framer Motion, Tailwind CSS, shadcn/ui among others - take a look at our Next.js template on GitHub).
The results speak for themselves.
Desktop performance
Mobile performance
So far, we are loving it, but what we love even more is the new website, built by our team of talented developers. Check it out!
Here are also some before and after shots, so you can compare the improvement for yourself:
Landing page before:
Landing page after:
About Us page before:
About Us page after:
Visualization of our development process before:
Visualization of our development process after:
Services page before:
Services page after:
Contact form before:
Contact form after:
Top comments (32)
Site looks good, but you may want to re-check your scores?
You may have run the desktop checks by mistake (desktop checks are pointless, any site can get 90+ for speed). Run the mobile tests instead. 💗
You were right - and thanks for reaching out to us. We've gone through the webpage and speed it up a bit.
It was mostly about built-time optimizations and tweaking some configs (mostly Sentry, we still have some issues on that side of things - see sentry-javascript#4712.
Now the score is around 75 on mobile and 100 on desktop - still not great, but respectable.
Will update the blog accordingly. Here are the links to the reports: mobile and desktop.
My impression is that reports can vary by location/your own network. I think there are tools that can run similar reports from standardized locations.
Yes, it is quite finicky. But it is at least some sort of an indication. On the other hand, you must not optimize just for the score here but for your actual users of the website.
Thanks for the feedback, good point, working on it! 🎯😄
Good website but I am just curious why you were going with the NextJS? Is it because devs are familiar with it, because it is popular or there are some other arguments?
This is content-heavy website and I don't see why not using Astro for it. It also integrates just fine with PayloadCMS.
Astro is great, no doubt. It is just that we have an entire dev pipeline set up around NextJS. Do you use Astro at your end? Would you recommend we try it out?
I find your reasoning valid - if you have the whole pipeline already done, why reinventing the wheel.
I use both Astro and Next, depending if the project is more content-heavy or more app-like (Astro for content, Next for app).
On the last Astro project I did, I used the island component architecture, its ridiculous how easy it is. You basically have Astro components (it looks like html template where you can pass props) that are static and you can just inject react/solid/svelte/vue/whatever components that are dynamic. Use nanostores with local storage for global state if you need it and that's it. SEO is also easy to setup. Like Next it also has dynamic routing (ex: products/[product].astro).
For data you can use JSON, Markdown, headless CMS, pocketbase, firebase... you get the picture.
On that project Lighthouse is 100, gtmetrix is 100% A grade over all statistics, time to first paint is under 200ms, around 600ms to fully functional page. I am talking about marketing website with lots of products, images and product specifications, adding products to cart, contact form that receives products from cart, inline validation and whatnot.
I recommend you to try it on some small side project to check it out to see if it fits your usual use cases.
Will do, Astro seems to tick quite a lot of checkboxes :)
Im interested in that Astro knowledge @pozda did you learn everything through docs + building? Ty!
@eddsaura - That's the way I learn/try new things, so yeah, a lot of documentation reading, building what I need and fidgeting with already available themes on Astro's website - this provides accelerated understanding on different patterns and setups.
Astro islands and nanostores are very easy to understand from the documentation.
I agree, that would be interesting.
Wow, this website is so modern. I like it!
Thank you for sharing your story! I suppose there are many companies going through this rabbithole...
Let's goooo!
Great case, Payload CMS rocks
Great experience! Thanks for sharing!
Try opening the page on slow connection. The first page view has some flickering which you might want to remove.
Huh, thanks for reporting it. Will check. There is still a few things we need to iron out
Fixed! Thanks for telling us
Nice looking site and I liked reading your thought process. There seem to be some color contrast issues, so you could boost your accessibility by fixing those.
I can totally relate to this! I recently built a headless website for a client where we used WordPress as the CMS and React frameworks like Gatsby and Next.js for the frontend. The performance scores were perfect on both desktop and mobile, and content management was a breeze with WordPress, thanks to GraphQL, static rendering, and PWA integration, which made everything incredibly fast.
However, I can't deny that when it's time to update the styling, it can feel overwhelming. The hardcoded elements and legacy code, especially now that I'm working with TypeScript, can be frustrating to revisit. Sometimes, it's a real struggle!
Lately, I've been exploring WordPress with Elementor, and it’s been a game changer. You can easily clone custom designs from scratch using its builder. While there are some limitations, particularly when you need to extend DOM manipulation with plain JavaScript, I found that incorporating React was surprisingly straightforward. You can register your React component in WordPress using a shortcode and then simply drop that shortcode into the Elementor builder’s plain HTML element.
Now, as a developer, you don’t need to spend all your time updating frontend designs. You can leave content editing to someone else and focus on the engineering side of things—like building React components for more complex DOM manipulation. It’s a great way to balance design updates and development. :)
By the way, I'm still getting great performance scores with WordPress, especially with a few tweaks to comply some accessibility in CSS part. Elementor has also become much more optimized. Honestly, I didn’t even use a CDN or any premium optimization plugins—just a basic, budget-friendly hosting plan. Yet, the speed is still impressive! It's a huge improvement compared to how I used to feel about WordPress in the past when performance was a big issue.
Saludos crack. La verdad, se ve genial tu website. Me gusta mucho el estilo y la diagramación.
Pero tengo que estar en desacuerdo con lo que hablas de rendimiento en Wordpress. Las métricas que generan tu website, tranquilamente se pueden llevar al 98%-100% (Desktop y Mobile) en PageSpeed creando el mismo website en Wordpress haciendo uso de correctas prácticas de construcción.
Y esto es utilizando un hosting económico compartido.
Con un hosting de mejor calidad, Cloudflare y WordPress. Se puede lograr websites con un rendimiento por debajo de 1.5s en MOBILE.
Solo es cuestión de conocer las buenas prácticas de construcción dentro de la herramienta.
Saludos!
I mean, it's so good looking I would let it load.
Is there a loading screen example of before and after?
This looks amazing, well done!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.