Mitigating Acquia Lift Personalization "flash"

Issue

We briefly observed the default content being visible on Acquia Lift personalizations before the personalized content appeared. Are there other optimization steps we can take to reduce this "flicker" before personalizations load?

Resolution

While the appearance of the "flash" can vary due to any number of reasons (size of payload returning, type of content rendering, etc.), it’s impossible to remove every flicker due to the way the technology currently works (server-side site rendering vs client-side/AJAX personalization rendering). However, there are ways to mitigate the issue.

Please watch this 4-minute screen capture for instructions on a few possible workarounds: 

https://drive.google.com/open?id=1BTaJe7eQzxwxX5Wsu0qLYmlt0jE9nTAz

Here is the CSS and JavaScript code noted in the video that should be adapted to your situation and needs as necessary:

//CSS, needs to be replaced with the appropriate selectors
.block-content__hero {
    opacity: 0;
    -webkit-transition: opacity 300ms;
}

//JS
(function() {
    window.addEventListener('acquiaLiftContentAvailable', function(e) {
        console.log('acquiaLiftContentAvailable event occurred. This indicates a rule is published and is the last event in the personalization rendering.');
        console.log(e);
        jQuery('*[data-lift-slot="' + e.detail.decision_slot_id + '"]').css('opacity','1');
    });
    window.addEventListener('acquiaLiftStageCollection', function(e) {
        console.log('acquiaLiftStageCollection event occurred. This is the end of the Lift lifecycle and should occur whether rules are published or not.');
        console.log(e);
        jQuery('*[data-lift-slot]').css('opacity','1');
    });
})();

Cause

Personalization “flashes” can occur in Acquia Lift when a slot is created around content that is rendered by default. The content that shows initially is rendered server-side while Lift Personalization is rendered client-side through Javascript. This slight delay can cause a flicker of unpersonalized content, immediately followed by the personalized content rendering over that default content.