- Understand the workflow followed by the editor
- Troubleshoot and identify likely problems when page-loading errors occur in the editor
Understanding the details of how Optimizely loads pages in the editor may help you determine exactly why your pages aren't loading in the editor the way you expect them to. This article explains how the editor loads pages, how it handles changes and reloading pages, and the general workflow Optimizely follows when it loads pages into the editor.
Optimizely tries loading pages over HTTP and HTTPS, with a timeout of 15 seconds for the page to register a “hello” message. If that timeout does occur, the pages are loaded over proxy.
Optimizely will then pre-load up to four pages in the editor.
Handling changes and reloading pages
In Optimizely Classic, whenever you make changes in the editor, Optimizely uses a clone of the DOM
<body> element for the initial page load, and then resets the
The process is a bit different for Optimizely. Optimizely keeps track of the changes you made in a change list. What happens next depends on the type of change you've just made:
If it is a visual change:
The changes are added to or updated in the change list;
The change list is sent down to the iFrame;
The previous change list is undone, and the new change list is applied in its place. This is possible because Optimizely stores the necessary information to undo all visual changes it applies.
If it is a custom code change, Optimizely reloads the entire page and applies all your changes in order. This is required because it is not possible to “undo” a code change.
Changes execute in the order they appear in the sidebar, and each change waits for the one immediately preceding it to complete before it executes. Changes cannot be re-ordered.
The editor workflow
innie.js- identifies the version of the editor being used.
- Next, the production client loads the
p13n_inner.js has loaded, it fetches the editor client from the app's backend (the production client is too lean to run in the editor). The editor client then requests the editor data for the specific project you're working in, and is then initialized.
Troubleshoot editor page-loading issues
If you see a warning that starts with "We have loaded your site using compatibility mode," you may be encountering an issue with mixed content. See Troubleshooting: Compatibility mode warning and mixed content in the Editor then reload the page.
If the issue is loading pages that require session-specific information or logging in (like a shopping cart, intranet page, or password-protected content), see Troubleshooting: Can't load a password-protected, gated, or session-specific page in the Editor.
If you try to load content that is in an iframe, see Troubleshooting: Can't edit iframes in the Editor.
If you use an X-Frame-Options header, see Update your site's Content Security Policies (CSP) in Optimizely.
See Troubleshooting: Pages not loading in the Editor to troubleshoot other editor page-loading issues.