Bye bye WordPress, welcome Webflow.
Did you know there are over 152 million blogs on the internet?
We didn't either.
But our marketing team had something up their sleeve. Day after day, they wrote terrific content that translated as blogs on our website. While our product marketers wrote compelling pieces about our features, our content team helped build a knowledge base for users looking for an expense management solution.
In short, we had multiple writers writing multiple things, with multiple editors editing a lot more things. This not only created internal confusion but also lowered our site speed, page load time, and a host of other things.
In this situation, I was tasked to find a solution to help all the stakeholders involved. This is my journey through the task.
WordPress was our first choice
When we decided to go with WordPress it seemed like a perfect choice, as it satisfied all our requirements. Primarily, it helped make marketing self-sufficient to publish blog posts without much engineering involvement. Thus, we bought a paid theme in WordPress and installed some basic plugins to get the blog up and running.
For more than a year at Fyle, we were using WordPress, as our CMS for marketing blogs.
Issues we faced with WordPress
WordPress sites are slow unless you make a very deliberate effort to clean them up.
All the plugins, tools, messy theme files, add up, and the code behind the WordPress site quickly gets incredibly bloated. (We also faced something similar, and the performance of our blog degraded with time.)
The page load time can go up to ~ 7-8 secs.
There were a lot of design inconsistencies, and changing the design of a component everywhere was not straightforward and required significant development and testing time.
There are some common security vulnerabilities in WordPress, such as the XMLRPC attack for which we fell victim to, and the blog had to suffer a downtime twice in 6 months.
What triggered us to take the call?
The marketing team at Fyle decided to do a design overhaul for the blog. The new designs were not in line with the current theme and would require significant effort. This requirement, combined with existing problems, prompted us to re-evaluate our blogging platform.
The choices that we considered
1. Webflow - a known web design tool, CMS, and hosting platform
2. Jekyll Blog - a simple, blog-aware, static site generator for personal, project, or organization sites.
3. Buy a new theme on WordPress - the known devil
Collecting requirements from stakeholders
This change would be affecting all the people who interact with the blog. Thus, it was important to understand how they interact to figure out the requirements.
The stakeholders, in this case, were the marketing team, authors, readers, and developers. After talking with all the stakeholders, I came up with a list of requirements and assigned them a priority. Some of the high priority requirements, as you can see, are listed below.
Once all the requirements were established, we started playing with the free accounts for these platforms and did a lot of research to evaluate them thoroughly. After testing all the three platforms against our requirements, Webflow was the clear winner. Here’s our breakdown of the process.
What is Webflow?
I’d describe Webflow as Photoshop for websites. It has a drag and drop style editor like SquareSpace, but it is in order of magnitude more powerful.It lets you quickly design and build a site without having to write any code. It also allows you to create your own CMS for publishing any content.
For someone who wants to custom-build their own site without worrying about hosting, it is an absolute dream. Although, in my opinion, some basic knowledge of HTML and CSS is necessary.
Why Webflow?
Moving a blog with 200+ published pages from one CMS to another is no small task, so it needs a pretty serious justification. Here were the main things that made me make the switch.
Design freedom
Using Webflow’s designer, you get the full power of CSS, HTML, and JavaScript. However, you generate your code using the visual designer instead of writing code line by line. You move pre-built blocks around, add features, and make customizations. Meanwhile, behind the scenes, the designer makes clean, semantic code for an optimized website.
For example: Let’s say you want to change how your footer is laid out and displayed in WordPress. You either need to hope and pray that your theme lets you manipulate it the way you want, need to know enough PHP and CSS to edit it, or you need to get a new theme.
In Webflow, this is just a few minutes of drag-and-drop adjustments or copying over elements from other public Webflow projects. It blows any WordPress drag-and-drop editor out of the water (Divi, etc.).
Fast and responsive
I saw a few sites that were made in Webflow loaded FAST, much faster than our blog. While WordPress plugins add a lot of functionality, they also add code bloat that inevitably slows down your sites.
Webflow skips all that, so your site’s powered by HTML, CSS, and JavaScript that’s as clean as you can make it. Plus, with automatically responsive images built right in, you can rest easy, knowing your gorgeous graphics aren’t making mobile users bounce.
Custom CMS Setup
With WordPress, you’re mostly locked into your default page template style, and if you want to change what fields you plug in for a post, you have to either re-code the template file, get a new template coded, or add a plugin. With Webflow, you can just add in whatever new CMS fields you want and then customize how it’s presented on the front-end.
Even though these were the main reasons behind us opting for Webflow, I personally preferred it because it gave me full control. I could now change anything I want, fairly easily. I’ve never felt this much control when I was on WordPress.
Did we have shortcomings with Webflow?
Now, there are still some shortcomings like no control to modify the URL structure of the CMS, no commenting support, no option to add tables inside a blog post (rich text), and few more. But you can integrate trusted Webflow third-party apps or add your own custom code to make up for these shortcomings. (I personally hope Webflow fixes them soon in the interest of attracting more bloggers!)
How did we migrate?
1) Migrate the existing content from WordPress to Webflow
Webflow has done an amazing job in defining the process of migrating content in a few simple steps. You can find the tutorial at this link. The CSV that you will export from WordPress using the WP CSV plugin will have all of your content with images. We migrated around 200 blog posts in just an hour or two to Webflow. After migrating the data, we have the same content hosted on WordPress and Webflow. To move to the next step, we had to ensure the content had not messed up during migration.
2) Block search indexing with 'noindex'
As we were just testing the content on Webflow, we blocked search engines from crawling those pages to avoid getting penalized for duplicate content. Webflow has a toggle in settings to ‘noindex’ all the Webflow pages. After doing that, we went ahead and published our changes to Webflow.
3) Forward the website traffic to the old URLs
Webflow follows a different URL structure, but we wanted to retain the old URLs so that we don’t lose google rankings or break existing backlinks. So we had to make sure all the 301 redirects were in place. After making this change, the easiest way for us to test out if there are any broken URLs was to audit the new blog on SEMrush.
It was crucial to keep the WordPress site active until the migration process was successfully completed. Having tested our new blog for performance, design consistencies, and all the other regular checks, we were able to proceed to the final step of publishing our new blog on Webflow!
Worth the effort?
This exercise of migrating our blog from WordPress to Webflow took around a month of effort from designing new pages to migrating existing content and then testing it. The results when it came to performance looked something like this:
We could also see an immediate impact from an SEO perspective. We were also able to see a 25% increase in visitors count only after a week of publishing the blog.
The Bottom Line
The process of switching from WordPress to Webflow is not complicated, yet it requires an understanding of the migration process and engineering effort to make it a success.
To see our live blog in action you can visit https://www.fylehq.com/blog/ #madeinWebflow