FOUCs that last much longer than when not using this plug-in

[motin]

In the current implementation, there is a small but definitely noticable FOUC since the DOM is rendered and displayed before Optimizely actually is ready running it's scripts.

It is visible here - click on FAQ and then on the logo to switch between two views. Every time the start-view loads there is a FOUC.

Using a resolve with UI-router is only a partial solution currently since it resolves when the optimizely javascript has been loaded and not waiting for the actual Optimizely-script to be completed.

It does not seem like the optimizely javascript api allows for this, but if not, maybe we could find a workaround? For instance one where our experiments are required to fire an event on it's last javascript code line, and then ng-optimizely resolves the promise first then?

Btw, I tried using $evalAsync as suggested in #1 instead of $timeout but that left some views without optimizely running on them :)

[motin]

Or can we in some other more generic way activate optimizely AFTER the template is loaded but BEFORE the DOM is moved into the page? Maybe by exposing methods on the window object and have our experiments actually modify $scope instead of the rendered DOM?

[jacopotarantino]

Hmm... Well, hopefully resolving your issue: 021fc83 allows activation to occur after an arbitrary event name. I think you could hook into that to avoid the FOUC. Unfortunately, most Optimizely scripts require the targeted elements to be in the DOM before they can have any effect but I'm under the impression that if your script executes immediately after the elements are inserted into the DOM there shouldn't be a FOUC...
I wouldn't recommend doing something like exposing $scope globally. That sounds like a good way to get into trouble.
Let me know if the above-linked commit(which is now in master) solves your problem so I can close this issue.

[motin]

I wrote that commit, but I don't see which event should be hooked into to avoid the FOUC.
I also wrote an additional patch to watch multiple events simultaneously, but the FOUC is visible even when watching both $stateChangeSuccess and $viewContentLoaded.
Btw, optimizely sometimes does not activate when watching only $stateChangeSuccess, so $viewContentLoaded is recommended even when using ui-router.

The FOUC is still there though, as seen here. Let's keep this issue open until we can find a way to avoid FOUC. All suggestions welcome :)

[jacopotarantino]

Maybe have your optimizely scripts operate on hidden elements in the DOM and then show them? I'm pretty sure the FOUC is just due to the normal way that optimizely operates and doesn't actually have anything to do with this plugin. Do you think that assumption is off-base? A quick google search reveals the following:
https://www.quora.com/What-technique-does-Optimizely-use-to-avoid-FOUC
https://community.optimizely.com/t5/Developers/FOUC-Flashing-Of-Unstyled-Content/td-p/8186

[motin]

From the first link:

What Optimizely does is that they run a loop that checks for new DOM elements as they load. When the element you want to modify pops into existence, it only takes Optimizely a few milleseconds (50ms loop) to detect it and modify it. But sometimes the flashing is still perceptible.

Here we see that pptimizely native scripts enable <50ms FOUCs, most often not even visible. With this plug-in however we are seeing 1000-2500ms flashes of unstyled contents.

As soon as we can get the same <50ms experience for users of this plug-in, the issue will be related only to Optimizely scripts and not this plug-in. Until then, let's keep this issue open? Would be great

And now back to the core issue: How can be get the FOUCs down to <50ms? :)

[jacopotarantino]

Oh I see. That's way longer than I thought you were seeing. Umm... With a delay that long it sounds like the optimizely script file hasn't downloaded yet when the content is being injected into the view. I've used this plugin on 2 projects so far and for both of them I didn't see FOUCs :/

[motin]

With a delay that long it sounds like the optimizely script file hasn't downloaded yet when the content is being injected into the view.

It should be loaded, as I am using a resolve in the ui-router state configuration:

resolve: {
  optimizely: function(optimizely) {
    return optimizely.loadProject('880950754');
  }
}

How have you integrated this plugin in the projects where you don't see the FOUCs?