Familiarize yourself with Optimize and learn how optimizations and variations work.
Optimize is designed to help you move fast, test often, and continuously improve your site’s performance. Whether you’re tweaking a headline, redesigning a layout, or targeting specific audiences, Optimize helps you tailor your site experience to what works best. Driving engagement and boosting conversions starts with optimizations and variations — the foundation for testing and delivering personalized experiences to your visitors.
Why personalization matters
Just like with clothing, one size doesn’t fit all when it comes to websites. What resonates with one visitor might fall flat with another. With Webflow Optimize, you can personalize your site experience to the individual.
Instead of showing the same version of a webpage to every visitor, optimizations let you display alternate versions based on who someone is or how they interact with your site. This kind of dynamic personalization can increase engagement and drive more conversions — helping you reach your goals more effectively.
(Optimizations can show alternate versions of page elements to visitors.)
What's a conversion?
A conversion is when a visitor completes the action that your webpage or website is trying to accomplish. For example, if your goal is for visitors to click a Subscribe button, then a conversion is counted when a visitor successfully clicks Subscribe.
Leverage optimizations on your website to drive more conversions.
What are optimizations?
Optimizations are core building blocks in how you use Optimize. They define:
- Where — the specific page(s) on your site where you want to test or personalize content
- What — the changes you want to make to a page, grouped into variations
- Who — which visitors should see each variation — i.e., all visitors or a subset
An optimization is a container for one or more variations. For example, to test different headlines on the homepage, you'd create one optimization for the homepage headline and a separate variation for each headline idea.
Good to know
A page can run multiple optimizations for different elements (e.g., a headline and an image), and one optimization can span multiple pages (e.g., navbar test).
Three approaches to optimization
Test optimization — run a traditional A/B/n test
This type randomly shows different versions of your content to a set percentage of your traffic. After enough traffic has seen the variations, a single winner is determined based on statistical significance. Use this when you want to validate a specific hypothesis with measurable outcomes.
Personalize optimization — target specific audiences
Use rules-based personalization to define who should see which variation. For example, you might show different content based on referral source, location, or device type. These optimizations run indefinitely until you choose to stop them, and every visitor in the target segment consistently sees the same version of the page.
AI Optimize — use machine learning to maximize conversions
Leverage AI to automatically deliver the best-performing variation to each visitor. As user behavior shifts, the AI adapts in real time, learning which versions yield the most conversions. You can continue adding new variations to the optimization, and the AI will test and promote the most successful ones.
What are variations?
A variation is a single version of a change that you want to present to visitors. This could be:
- A single change to a page element — e.g., swapping in a different headline
- Multiple changes to a single element — e.g., new copy, font, and color for a CTA
- A combination of changes to multiple elements — e.g., an alternate layout
- A redirect to a different page entirely
All variations live inside an optimization. You'll create an optimization first, then build variations to test your ideas.
Ways to create variations
The visual editor gives you a fast, intuitive way to make variation changes — no code, no guesswork, just total control. And if you’re more code-savvy, you can switch to the code editor to implement custom JavaScript and CSS for your variations.
Visual editor — recommended for most users and tasks
- Click any element to edit copy, style, structure, or visibility
- Rearrange, insert, or hide elements
- Apply styling like colors, fonts, and shadows
- See changes in real time as you edit
Code editor — for advanced users with complex tasks
- Create variations using JavaScript and/or CSS
- Inject or modify elements programmatically
- Implement complex logic or behavior not available through the visual editor
- Preview your custom-coded variation directly in the Optimize interface