Maximizing Optimizely Website Performance

Solutions Architect

Maximizing Optimizely Performance

Brad Taylor

Optimization Is A Journey

1. Snippet Implementation

2. Snippet Delivery and Timing

3. Common Causes of Flashing

4. Snippet & Website Performance

5. Tips & Tricks

Webinar Agenda

Snippet Implementation

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

Technical: Sync vs Async SnippetSynchronous (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

• 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:

Snippet Delivery and Timing

Optimizely CDN DeliveryA 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.

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

*

*

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

*

*

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

NOWait 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 */

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 */

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 */

Technical: Optimizely LogViewing 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

• Snippet Placement • Asynchronous Loading • Tag Manager • Redirect experiment • Use of regular Javascript in experiment

Common Flashing Issues

Code: Hide Element until changedCustom 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

Website Performance

• 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

Snippet Size

=< 400px

400px

~ 80KB

<script src="//cdn.optimizely.com/js/1234567.js"></script>

~ 50KB - 80KB

Tip: Snippet Optimization

• Include your own version of jQuery

• Archive Old Experiments • Remove Paused and Draft Experiments from the snippet

Evaluate Website Performance

(http://yslow.org/) (http://www.webpagetest.org/)

• 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

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

Optimizely Customers