Maximizing Optimizely Website Performance
-
Upload
optimizely -
Category
Technology
-
view
348 -
download
3
Transcript of 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