Webflow and Core Web Vitals

Webflow and Core Web Vitals

Webflow was founded in 2012 and is an online visual editor platform allowing users to design, build and launch websites. Does this mean you can't get high PageSpeed scores? And what about the newest Core Web Vitals?

If case you're not familiar with Webflow yet, it is used by EventBrite, Zendesk and Facebook. If this isn't impressing you, the fact that they get more than 3 million views per hour will.

What makes Webflow interesting?

Webflow offers an online visual editor to maintain your website. You've got freedom in the visual presentation of your brand. Moreover, there are no updates to run, packages to install, or headaches to deal with. Just like Wix.

Webflow vs Wix

First of all, Webflow stands out from the crowd due to its strong designer focus. And unlike Wix, Webflow have built a community around its solution. It even comes with an academy, full with lessons. With 3,800,881 sites, Wix is 28 times more popular than Webflow at the time of writing. However, the stats are quite the other way around in The Netherlands, where 2,267 Webflow sites are in use, versus 54 Wix websites.

Extensive Webflow vs Wix comparison >

Webflow limitations

Webflow does come with limitations though. Although you can change some HTML next to changing presentation, possibility to change HTML is only limited. This means you can only do so much yourself when it comes to pagespeed and performance.

Webflow pagespeed and performance

Limitations on source code alterations does stand good scores in the way. This would mean UX, conversion and ranking should be optimal within Webflow, right? Not necessarily. Google got better at measuring the impact on real user experience and changed Lighthouse as well as PageSpeed Insights accordingly. This means an optimal score alone might not be enough.

How is webflow doing themselves?

Let's start with Webflow's very own website. As Google is mobile-first for a while already, I tested the mobile score of their homepage.

A summary:

  • Webflow's overall mobile PageSpeed score is 28%;
  • The First Contentful Paint in both Field data as well as Lab data is 3.1 seconds;
  • Largest Contentful Paint is 4.1 seconds in real live, while the Lab data is showing 5.9 seconds;
  • And probably quite some JavaScript is going on, looking at the Time to Interactive (13.5 seconds) and Total Blocking Time (1,850 milliseconds);
  • Real users are also experiencing layout shifts (CLS) on the homepage.

Does this mean the Webflow boilerplate isn't a good one, or that Webflow did not anticipate on user experience or the way we measure the impact on user experience? Probably the latter, combined with roadmap prioritization, being a visual editor in the first place. And we all know where that generally brings us.

Passing Core Web Vitals assessment with Webflow

Looking at the Field Data, PageSpeed Insights is telling us that Webflow.com isn't passing the Core Web Vitals assessment. This means that:

  • The Webflow website might have a 24% bigger chance of visitors leaving the website due to the way it is loading;
  • Webflow.com won't benefit from ranking advantages, as Core Web Vitals is becoming a ranking factor in 2021.

Video chat service daily.co built their site using Webflow. Moreover, they even wrote about improving Webflow's pagespeed, so others could start improving as well. Their efforts resulted in way better score, being 83% on mobile.

It might be a bit ironic that a Webflow client is doing a better job than Webflow themselves. However, despite the optimization efforts they described, this website isn't the passing Core Web Vitals assessment as well. They even had a regression in PageSpeed score, as the website was scoring 92% on mobile, as claimed by their article.

Although the Field data is a summary of the complete origin, this might still get in the way of ranking advantages when Core Web Vitals becomes part of ranking.

What is making Webflow slow?

When it comes to pagespeed bottlenecks, Webflow isn't much different from Wordpress. Both solutions are inserting code in such a way that it already has bottlenecks to begin with. And these will become bigger within both solutions when you start inserting new plugins, features and visualization.

JavaScript and performance

And just like Wordpress, Webflow seems to be using jQuery as well. This alone doesn't necessarily have to pose any risks when it comes to performance. However, changing this within Webflow doesn't seem possible at all. On top of jQuery, Webflow is always serving underscore and an interactions object, bundled into one file.

In some cases, such as in the case where I got asked to look into the pagespeed of a Webflow website, this could result in first party JavaScript of 557 kilobytes, in one file!

Webflow PageSpeed help

Luckily, Webflow has a forum. But there were claims by Webflow that Google's tool is outdated or that slow websites could be your own fault. But that's a lie. I like to think that the technical boilerplate provided by Webflow is inefficient when it comes to technical UX. Maybe you're better of having a React or Gatsby site?

Although quite some Google results are to be found on the subject of Wordpress pagespeed as well, Wordpress does have one big advantage compared to Webflow: you can change almost all HTML. It only takes the right knowledge and mindset to address pagespeed at the same time, as plugins can only do so much.