This document discusses best practices for optimizing Optimizely performance, including: 1. Implementing the Optimizely snippet synchronously before other tags to avoid flashing and integration issues. 2. Using a content delivery network to deliver the snippet for fast loading. 3. Understanding the order of execution for Optimizely experiments to ensure proper prioritization and evaluation. 4. Avoiding common issues that can cause flashing like using regular JavaScript in experiments.

1. Solutions Architect
Maximizing Optimizely
Performance
Brad Taylor

2. Optimization Is A Journey

3. 1. Snippet Implementation
2. Snippet Delivery and Timing
3. Common Causes of Flashing
4. Snippet & Website Performance
5. Tips & Tricks
Webinar Agenda

4. Snippet Implementation

5. Recommended Snippet Placement
Your jQuery
Your visitor / page-level
data (optional)
Optimizely custom tags
(optional)
Optimizely snippet (required)
Optimizely Revenue
(recommended on
confirmation page only)
Optimizely Snippet Implementation + external data:
Your Analytics
Platform

6. Technical: Sync vs Async Snippet
Synchronous (recommended) Asynchronous
Definition: Loading of the included file is performed to
completion before any more of the including page is
rendered/executed
Definition: The page to carry on rendering/
executing while at the same time loading the
specified included file
Pros:
•Reduce potential for page flashing
•Avoid analytics integration timing issues
Pros:
•Avoid page load delay
Cons:
•May delay page load
Cons:
•Higher potential for page flashing
•May encounter timing issues with analytics
integrations

7. • Load synchronously
• Fire the Optimizely snippet before other content
...including analytics tags
• Don’t add the tag manager at the bottom of the page
Technical: Tag Managers
Best Practices:

8. Snippet Delivery
and Timing

9. Optimizely CDN Delivery
A content delivery network (CDN) is a system of distributed servers (network) that deliver webpages and
other Web content to a user based on the geographic locations of the user, the origin of the webpage and a
content delivery server.

10. Technical: Order of Execution
• URL Targeting
• Audiences
• Segmentation
Fail
targeting
conditions
Targeting
Conditions
Traffic
Allocation
Snippet Loads
Excluded From
Experiment
Activation
Mode
• Evaluate whether experiment
should be activated at this time
Wait for
activation
condition / API
Experiment
Not EvaluatedExperiment 1
Experiment 2
Experiment 3
Check Next
Experiment
Check Next
Experiment
• Probability of inclusion in
experiment
• Probability of seeing a variation
Fail traffic
allocation
requirements
Excluded From
Experiment
Check Next
Experiment
Visitor is Bucketed into a Variation
10 year cookie is set on visitors browser so they will see this same version every time they revisit the site.
*
A B
Pass targeting conditions
*
*

11. Technical: Order of Execution
Experiment 1:
Variation 1
Experiment 3:
Original
• Runs safely as the DOM
is loading
• Is executed for every variation
of the experiment, including the
original
Experiment
Javascript &
CSS
Variation Code
Executes
Execute Next
Experiment
Experiment Prioritization:
1. Redirect Experiment
2. Experiments with /* _optimizely_evaluate=force */
3. Order in which they were created (subject to change and should
not be relied on)
Prioritize
Experiments
*
*

12. Technical: Snippet Timing Logic
Is it jQuery?
Does the line follow this format:
$(selector).action()
Is it JavaScript?
Manual Javascript that might
not be safe to run.
Is the element on
the page?
Evaluate next
line of code
YES
NO
Wait 50ms,
retry line
Wait until DOM is
ready
New line
of code
DOM not
ready
DOM is not ready… Execute code if ready
DOM is ready… Safe to evaluate all code
DOM
Ready
Evaluate remainder of
variation code
Need to force JS to run
earlier?
/* _optimizely_evaluate=force */
(JS variation code)
/* _optimizely_evaluate=safe */

13. Technical: Editor Markup
Special Code Editor Markup
• Evaluate = Force
/* _optimizely_evaluate=force */
some javascript here;
/* _optimizely_evaluate=safe */
• Editor Only
/* _optimizely_evaluate=editor_only */
some code here;
/* _optimizely_evaluate=end_editor_only */
• No Cookie
/* _optimizely_redirect_no_cookie=http://www.example.com */

14. If you use the evaluate force tag, the snippet will try to execute the
Javascript immediate and will not try again when the element is available.
Code: Use Timeout with Evaluate Force
/* _optimizely_evaluate=force */
var cssSelector = “”;
myOptyInterval1 = setInterval(function() {
if ($(cssSelector).length > 0) {
// Add your custom code here
………….
………….
// leave this clearInterval
clearInterval(myOptyInterval1);
}
}, 50);
/* _optimizely_evaluate=safe */

15. Technical: Optimizely Log
Viewing the Optimizely Log:
• Add a query parameter to the end of the URL:
?optimizely_log=true
• Run the following line in the browser console:
window['optimizely'].push(["log"]);
Optimizely /
Segmenter
Evaluates the optimizelySegments
cookie to determine existing visitor
segments
Optimizely /
Condition
Evaluates conditions for
segmentation, audiences,
dimensions, and targeting
Optimizely /
Distributor
Traffic allocation process to distribute
visitor into an experiment variation
Optimizely /
Evaluator
Execution of Optimizely variation
code

16. • Snippet Placement
• Asynchronous Loading
• Tag Manager
• Redirect experiment
• Use of regular Javascript in experiment
Common Flashing Issues

17. Code: Hide Element until changed
Custom Javascript Audience Variation Code
Add Javascript that will add css to your head and hide the element you are editing After you are done making your changes show the element

18. Website Performance

19. • Actual load time is what performance tools measure
• Perceived load time is what a human would measure
• Focus on content above the fold
• Lazy load images
• Progressive image rendering
Actual vs Perceived Page Load

20. Snippet Size
=< 400px
400px
~ 80KB
<script src="//cdn.optimizely.com/js/1234567.js"></script>
~ 50KB - 80KB

21. Tip: Snippet Optimization
• Include your own version
of jQuery
• Archive Old Experiments
• Remove Paused and Draft
Experiments from the
snippet

22. Evaluate Website Performance
(http://yslow.org/) (http://www.webpagetest.org/)

23. • Combine Javascript
file to limit HTTP
requests
• Hosted on same
CDN / server as your
current website
Self hosting: Pros & Cons
• Extra process needed
to sync the snippet
when it changes
• Multiple points of
failure
• CDN might not be as
good
ConsPros

24. Akamai
• 160,000 servers in 95
countries within over
1,200 networks
• All 20 top global
eCommerce sites
• Delivers between 15-30%
of all Web traffic

25. Optimizely Customers