maximizing optimizely website performance
TRANSCRIPT
![Page 1: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/1.jpg)
Solutions Architect
Maximizing Optimizely Performance
Brad Taylor
![Page 2: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/2.jpg)
Optimization Is A Journey
![Page 3: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/3.jpg)
1. Snippet Implementation
2. Snippet Delivery and Timing
3. Common Causes of Flashing
4. Snippet & Website Performance
5. Tips & Tricks
Webinar Agenda
![Page 4: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/4.jpg)
Snippet Implementation
![Page 5: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/5.jpg)
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
![Page 6: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/6.jpg)
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
![Page 7: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/7.jpg)
• 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:
![Page 8: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/8.jpg)
Snippet Delivery and Timing
![Page 9: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/9.jpg)
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.
![Page 10: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/10.jpg)
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
*
*
![Page 11: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/11.jpg)
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
*
*
![Page 12: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/12.jpg)
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 */
![Page 13: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/13.jpg)
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 */
![Page 14: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/14.jpg)
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 */
![Page 15: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/15.jpg)
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
![Page 16: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/16.jpg)
• Snippet Placement • Asynchronous Loading • Tag Manager • Redirect experiment • Use of regular Javascript in experiment
Common Flashing Issues
![Page 17: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/17.jpg)
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
![Page 18: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/18.jpg)
Website Performance
![Page 19: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/19.jpg)
• 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
![Page 20: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/20.jpg)
Snippet Size
=< 400px
400px
~ 80KB
<script src="//cdn.optimizely.com/js/1234567.js"></script>
~ 50KB - 80KB
![Page 21: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/21.jpg)
Tip: Snippet Optimization
• Include your own version of jQuery
• Archive Old Experiments • Remove Paused and Draft Experiments from the snippet
![Page 22: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/22.jpg)
Evaluate Website Performance
(http://yslow.org/) (http://www.webpagetest.org/)
![Page 23: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/23.jpg)
• 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
![Page 24: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/24.jpg)
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
![Page 25: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/25.jpg)
Optimizely Customers
![Page 26: Maximizing Optimizely Website Performance](https://reader030.vdocuments.mx/reader030/viewer/2022032422/55a91cf91a28ab7f728b4731/html5/thumbnails/26.jpg)