Facebook chat plugin "kills" Pagespeed to 33

Question

I have added the Facebook chat plugin through this code generated from facebook.com

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your customer chat code -->
<div class="fb-customerchat"
  attribution=setup_tool
  page_id="124030157608968">
</div>`

However I run a Pagespeed test in Google Chrome and the results are disaster.

Any suggestions how to solve this problem?

Thank you very much!

Answer 1

Same issue. No matter if you initialize it in an async manner or not, it literally kills the Page speed index of your website!

Here's an approach I did in order to fully go around this disaster.

I placed a fake 🙄 Messanger button at the bottom right of the page:

<svg id="fb-messanger-fake-button" width="60px" height="60px" viewBox="0 0 60 60" cursor="pointer">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g>
        <circle fill="#00B2FF" cx="30" cy="30" r="30"></circle><svg x="10" y="10">
            <g transform="translate(0.000000, -10.000000)" fill="#FFFFFF">
            <g id="logo" transform="translate(0.000000, 10.000000)">
                <path
                d="M20,0 C31.2666,0 40,8.2528 40,19.4 C40,30.5472 31.2666,38.8 20,38.8 C17.9763,38.8 16.0348,38.5327 14.2106,38.0311 C13.856,37.9335 13.4789,37.9612 13.1424,38.1098 L9.1727,39.8621 C8.1343,40.3205 6.9621,39.5819 6.9273,38.4474 L6.8184,34.8894 C6.805,34.4513 6.6078,34.0414 6.2811,33.7492 C2.3896,30.2691 0,25.2307 0,19.4 C0,8.2528 8.7334,0 20,0 Z M7.99009,25.07344 C7.42629,25.96794 8.52579,26.97594 9.36809,26.33674 L15.67879,21.54734 C16.10569,21.22334 16.69559,21.22164 17.12429,21.54314 L21.79709,25.04774 C23.19919,26.09944 25.20039,25.73014 26.13499,24.24744 L32.00999,14.92654 C32.57369,14.03204 31.47419,13.02404 30.63189,13.66324 L24.32119,18.45264 C23.89429,18.77664 23.30439,18.77834 22.87569,18.45674 L18.20299,14.95224 C16.80079,13.90064 14.79959,14.26984 13.86509,15.75264 L7.99009,25.07344 Z">
                </path>
            </g>
            </g>
        </svg>
        </g>
    </g>
</svg>

... aaaand I positioned it with CSS on the bottom right corner, EXACTLY where the real Messanger button will appear (based on your configuration):

#fb-messanger-fake-button {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    transition: opacity 0.3s;
}

Using jQuery (in my case) or just plain JavaScript (if you want), implement logic that injects the Facebook SDK and initiates the Messanger plugin ONLY when the user clicks on our fake Messanger button:

// Facebook SDK for JavaScript inject code
function injectFbSdkAsync(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore(js, fjs);
};

$(function() {
    const $fbMessangerFakeButton = $('#fb-messanger-fake-button');
    $fbMessangerFakeButton.on('click', function(){
        // Fades out the fake button a bit, to indicate "loading"
        $fbMessangerFakeButton.css({ opacity: 0.4 });
        // Inject the Facebook SDK in async manner:
        injectFbSdkAsync(document, 'script', 'facebook-jssdk');

        // Callback on Facebook SDK init, that fires up the Messanger plugin
        window.fbAsyncInit = function() {
            FB.init({ xfbml: true, version: 'v8.0' });

            // Callback when Facebook SDK finish up with rendering
            FB.Event.subscribe('xfbml.render', function(){
                // Immediately toggle opening the Facebook Messanger,
                // as if the user clicked the real Messanger button.
                FB.CustomerChat.show(true);

                // Hide the fake button, so that only the real one remains!
                $fbMessangerFakeButton.css({ display: 'none' });
            });
        };
    });
});

And that's it! Your page speed index is back to normal.