Why (and how) visual editors impact performance
Visual editors are the superheroes of website optimization — think drag-and-drop magic and ready-made elements, making it a breeze. It's the go-to for those who crave speed and simplicity. But it also comes with its drawbacks: in CRO platforms with visual editors, content loading can be delayed due to how the mechanism works, affecting website performance.
In this post, we'll explain why it happens. But before that, let's delve into the pros and cons of using visual editors.
Pros of visual editors
Visual editors for websites are tools with graphical interfaces that enable non-tech teams to create, edit, and personalize the content and design of a webpage at any time without direct code manipulation.
Optimizing your website with visual editors creates a "mask" over your webpage, automatically applying all drag-and-drop modifications in this new layer with extra generated JavaScript snippets to your existing source code, making it easy and intuitive.
Users can make changes by interacting with buttons, menus, and drag-and-drop features instead of working with HTML, CSS, and Javascript. This is especially beneficial for those prioritizing speed and convenience in their workflow.
These are the pros of visual editors:
Intuitive interface
Have you ever edited a blog on Wix? Their drag-and-drop interface allows you to make improvements, change banners, and implement content in a few clicks. If you want to change the position of a CTA button to test if it gets more clicks, you can just drag the button to the desired position — much easier than manually adjusting its placement by coding it, right?
WYSIWYG
WYSIWYG, or wiz-ee-wig, means What You See Is What You Get. Most visual editors enable you to preview the changes you make to your page in real time. Users can create and edit content in a way that looks identical to its appearance in the final output.
Pre-designed elements and templates
Visual editors usually count on a library with pre-designed elements. It means the user can choose their preferred graphic assets and layouts directly from it and make minor changes when necessary.
Rapid iteration of design processes
Having an intuitive WYSIWYG interface with pre-designed elements available means being able to create agile workflows for refining designs, experimenting with ideas, and making efficient changes. This iterative process empowers designers to quickly adapt and enhance their work, fostering innovation and delivering polished outcomes.
Accessibility
Visual editors often rely on accessibility tools like screen readers and keyboard input to ensure inclusivity. This functionality not only assists in adapting websites but guarantees that individuals with disabilities can operate the editor without any issues.
Cons of visual editors
Although visual editors have vast benefits and ease, they also come with drawbacks. Let's discuss some of them.
Limited control
It's not always possible to use visual editors to edit and create your own buttons, layouts, or elements freely. Since you don't code them, you usually have to work with what it offers. Redundant JavaScript and unoptimized images are also a common concern.
Scalability issues
Visual editors generate different code for each change you make. So, let's say you have a page, and we want to optimize 5 different elements. The output of these changes would be 5 different JavaScript snippets executed when the page loads, which can dramatically affect the performance and the Core Web Vitals. This poses a considerable scalability challenge if your company includes tactics like personalization and AB testing in the CRO strategy.
Brand inconsistency
Since you can freely drag elements to modify your page, there's no way to ensure you are following your brand's design system — meaning your design team will also need to review all modifications and re-do some of them.
Compatibility issues
The underlying code generated when you create content using a visual editor is not universal. That means you'll need to find a version compatible with your website stack. This can result in cross-browser inconsistencies, affecting performance in several ways and requiring your dev team to fix rendering compatibility issues. We'll explore that more extensively in the upcoming section.
Client-side rendering
CSR means visually creating and editing web content on the client side. In other words, it all happens on the user's browser. Besides the performance and SEO issues, the other potential drawbacks of using client-side rendering include impact on crawlability, duplicate content, loading speed, indexing, and user experience. But let's explore how this affects performance in the following section.
How does it affect performance?
Performance issues caused by visual editor's changes appear 99% of the time because there's always complexity in rendering, manipulating, and updating visual content in real time. It's a simple equation:
Here are some common performance challenges:
Rendering and DOM manipulation
The dynamic nature of JavaScript editing, and the need to reflect changes on the Document Object Model (DOM) in real time can lead to reflows, repaints, and slow rendering, especially when dealing with large or complex pages.
Moreover, dealing with large domain trees and their complex layouts or nested elements may slow down your website.
Real-time media reloading
Uploading or embedding images and media files while the page is loading hurts performance, especially when you need to replace an existing element.
It significantly contributes to having more data that needs to be transferred and processed. When users access the page, their browser must already download the original source code files. If you use a visual editor to replace these elements, then the browser must load new files, leading to more data processing and more time to load the page.
Excessive JavaScript execution
Visual editors' heavy reliance on JavaScript for real-time interactions and updates can increase execution times, impacting their responsiveness. It can also increase CPU usage, which directly affects overall browser performance. The result is a sluggish and unoptimized user interaction.
Concurrency and synchronous operations
Synchronous operations and blocking tasks can cause the user interface to become unresponsive during heavy computation. Also, asynchronous tasks that are not well-managed can result in delayed feedback to users. It's impossible to optimize your code for speed, security, and search engine visibility when you have too many synchronous operations.
Flickering
Flicker happens when you see your page "flashing" as you load content. As mentioned in our post about headless CMS, many platforms that rely on visual editors provide implementation options that work as a cloak, masking original content with experiment variations. This ends up occasionally causing content to flicker or even crash the website.
A visual editor will execute the changes while the page is loading, it may allow users to see new content loading over the original one, hurting their browsing experience.
So, what's the alternative?
Visual editors facilitate content optimization for many companies. Still, if your growth strategies require more advanced capabilities, your website has a predefined design system and good performance is a must-have for you, a headless CMS may be what you are looking for. It provides much more control over its layout and functionalities and allows developers to work with highly optimized implementations.
A headless CMS differs from a web CMS by separating the frontend and backend to increase flexibility. It will indicate which content should be rendered on the page (for example, a title, a description, or an image), but not HOW it should be rendered. This means developers can choose how the website will respond to changes and even handle errors.
It's the best alternative for those who are freaks about performance and have well-structured design systems.
Visual editors can be highly valuable for quick prototyping or for more straightforward implementations. Headless CMS, on the other hand, gives you more control over your performance and fosters collaboration between tech and non-tech teams. Choosing between those two options depends on a project's specific goals and constraints.
How to choose between optimization tools with visual editors or headless CMS
When deciding between optimization tools that offer visual editors or a headless CMS, there are several factors to consider:
- Coding expertise: using a headless CMS might be a viable option if you have dedicated devs in your team.
- Project complexity: a visual editor might be sufficient if you work on a simple website with just a few pages or basic functionality. A headless CMS will offer more control and flexibility if you are working on a complex web application that requires advanced functionality and customization.
- Preferred workflow: when using a visual editor, you only rely on developers after you've validated your hypothesis and have a winner variant to implement. While it gives you the illusion that you don't depend on developers in the CRO process, you actually do: if you run 10 experiments and 7 of them result in a version that's different from the original one, you'll have 7 tasks for the developer to implement. Using a headless CMS means you need help from a developer at the beginning of the process, during the implementation phase, but you'll only need their help once.
What are the best optimization tools with headless CMS in the market?
If you're having a hard time finding an optimization tool that combines a headless CMS with AB testing and personalization, you're not alone. Most optimization tools were born in an era when performance wasn't of that much importance for marketers, so they've chosen a path that addresses what mattered most at that time: finding something easy for the marketing team.
The truth is that the market is lagging in meeting the real needs of growth teams. We often observe that companies that achieve this goal grapple with their tech stack. They usually have to use five different solutions and integrate them all in-house. It can be a nightmare, not to mention the costs of all of them.
Today, we only know two different platforms that provide what we believe is the perfect world to address the optimization challenge: Croct and Optimizely. They combine headless CMS with personalization and AB testing in a single place.
Conclusion
Choosing between optimizing your website with a platform that uses a visual editor or provides a headless CMS depends on your coding expertise, project complexity, and preferred workflow. Visual editors offer convenience and ease of use, while a headless CMS provides flexibility and control. By carefully considering these factors and evaluating your specific needs, you can make an informed decision aligning with your web development goals.
Your growth team deserves to have a natively dynamic website while still not worrying about performance, so we suggest you try an optimization platform that can give you more autonomy to work on your best communication strategies.
If you want to give Croct a try, create your free account and learn how to leverage your user experience and optimize dynamic content implementation today.