Goodbye Webflow, Hello Our Shiny New Website
Špela Buh

Špela Buh @p_b_7a103e872ffc31f

Location:
Ljubljana, Slovenia
Joined:
May 21, 2024

Goodbye Webflow, Hello Our Shiny New Website

Publish Date: Jul 23 '24
114 34

“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
Lighthouse performance report for desktop

Mobile performance
Lighthouse performance report for mobile

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 on the old website - screenshot

Landing page after:

Landing page on the new website - screenshot


About Us page before:

About us page on the old website - screenshot

About Us page after:

About us page on the new website - screenshot


Visualization of our development process before:

Visualization of our development process on the old website - screenshot

Visualization of our development process after:

Visualization of our development process on the new website - screenshot


Services page before:

Services page on the old website - screenshot

Services page after:

Services page on the new website - screenshot


Contact form before:

Contact form page on the old website - screenshot

Contact form after:

Contact form page on the new website - screenshot

Comments 34 total

  • Aleksei Zhilyuk
    Aleksei ZhilyukJul 23, 2024

    Let's goooo!
    Great case, Payload CMS rocks

  • Nikola Perišić
    Nikola PerišićJul 23, 2024

    Wow, this website is so modern. I like it!

  • Eckehard
    EckehardJul 23, 2024

    Thank you for sharing your story! I suppose there are many companies going through this rabbithole...

  • programORdie
    programORdieJul 23, 2024

    To be honest - I like the old page better (sorry)

    • programORdie
      programORdieJul 23, 2024

      Wait nevermind, the site looks better than the screenshots

  • GrahamTheDev
    GrahamTheDevJul 24, 2024

    Site looks good, but you may want to re-check your scores?

    page speed insights showing 49 for performance, 87 for accessibility, 96 for best practices and 100 for SEO

    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. 💗

    • Špela Buh
      Špela BuhJul 24, 2024

      Thanks for the feedback, good point, working on it! 🎯😄

    • Žiga Patačko Koderman
      Žiga Patačko KodermanJul 31, 2024

      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.

      Lighthouse score

      Will update the blog accordingly. Here are the links to the reports: mobile and desktop.

      • Melissa McEwen
        Melissa McEwenJul 31, 2024

        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.

        • Žiga Patačko Koderman
          Žiga Patačko KodermanAug 1, 2024

          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.

  • Ivan Pozderac
    Ivan PozderacJul 24, 2024

    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.

    • Boris
      BorisJul 24, 2024

      I agree, that would be interesting.

    • Žiga Patačko Koderman
      Žiga Patačko KodermanJul 25, 2024

      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?

      • Ivan Pozderac
        Ivan PozderacJul 25, 2024

        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.

        • Žiga Patačko Koderman
          Žiga Patačko KodermanJul 31, 2024

          Will do, Astro seems to tick quite a lot of checkboxes :)

          • Jose E Saura
            Jose E SauraAug 9, 2024

            Im interested in that Astro knowledge @pozda did you learn everything through docs + building? Ty!

            • Ivan Pozderac
              Ivan PozderacAug 10, 2024

              @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.

  • gudata
    gudataJul 24, 2024

    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.

  • Arvind Singh Shekhawat
    Arvind Singh ShekhawatJul 24, 2024

    Yon need to consider two more things on priority

    Image description

  • Devshi Bambhaniya
    Devshi BambhaniyaJul 24, 2024

    I agree, that would be interesting.

  • Dwi Satrio W.
    Dwi Satrio W.Jul 25, 2024

    Nice article. But there's a scrolling issue on my end. Sometimes the page cannot be scrolled with mouse's scroll, and it works fine with touchpad's scroll.

  • Talia
    TaliaJul 26, 2024

    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.

  • mark
    markJul 28, 2024

    **Here are 100 highly recommended online earning way pdf books free which are very famous worldwide. Free read books and Download now Google sites link. **sites.google.com/view/100-earning-...

    Image description
    Thank you and happy DevOps-ing!

  • Melissa McEwen
    Melissa McEwenJul 31, 2024

    I'm curious about whether you considered just a standard CMS vs. headless?

    • Žiga Patačko Koderman
      Žiga Patačko KodermanAug 1, 2024

      Standard CMS would lock us into a whatever frontend technology it uses. We wanted to stick to what we know best, which is Next.js. And Payload simply won 😁 you can read more in this blog, though it only considers headless ones.

      Do you have any specific CMS in mind?

  • Joel Krause
    Joel KrauseAug 10, 2024

    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.

    Image description

    Image description

    Image description

    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!

  • JoshX
    JoshXAug 12, 2024

    not gonna lie, Ziga, the website is so sleek and feels intuitive 😀. I'm curious though—your team seems like the kind I would love to work with.

    What would it take to join you?

  • Nardu Malherbe
    Nardu MalherbeSep 6, 2024

    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!

  • Rayjens Code
    Rayjens CodeSep 22, 2024

    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.

  • Muhammed Shuhaib
    Muhammed ShuhaibSep 30, 2024

    The site looks good but when scrolling down the site make lags to scroll down. stuck when scrolling i think the bundle of uses of assets is getting this stuck

  • Mohasin K R
    Mohasin K ROct 16, 2024

    Nice website and UI, but the entire website is lagging and jitterng on Chrome browser!

Add comment