Mitigating Acquia Lift Personalization "flash"


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


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). With that, there are ways to mitigate the issue.

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

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;
(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.');
        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.');


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.

Contact supportStill need assistance? Contact Acquia Support