How to Fix a Slow Website: Facebook Social Media Code Optimization

Is your website slowing down after adding Facebook social features like the Like/Share button, comments, or Messenger chat? These features load external scripts that can hurt page speed and lower your Google PageSpeed Insights score. This guide will show you how to optimize them to maintain performance without losing functionality.

Why Does Facebook Code Slow Down Your Website?

When you embed Facebook social widgets, they:

• Load external JavaScript (sdk.js), blocking the page from rendering quickly.
• Send multiple requests to Facebook’s servers, increasing load time.
• Affect metrics like Largest Contentful Paint (LCP) and Interaction to Next Paint (INP), reducing user experience.

References:

• https://web.dev/articles/optimize-lcp
• https://developer.mozilla.org/en-US/docs/Glossary/Interaction_to_next_paint

Solution: Lazy Load Facebook Scripts

Instead of loading Facebook scripts immediately, we delay their execution until the user interacts with the page (e.g., scrolling). This significantly improves page speed.

Optimizing Facebook Like/Share Button

Default Facebook Like/Share Code (Causes Slowdowns)

/** Script*/
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v15.0&appId=1019721838751823&autoLogAppEvents=1" nonce="rlxHIsc6"></script>

/** HTML*/
<div id="fb-root"></div>
<div class="fb-page" data-href="https://www.facebook.com/itsmeit.co" data-tabs="events" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/itsmeit.co" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/itsmeit.co">itsmeit.co</a></blockquote></div>

Optimized Facebook Like/Share Code (Lazy Loading)

HTML:

<!-- Fix performance Facebook social -->
<div id="fb-root"></div>
<div class="fb-page" data-href="https://www.facebook.com/itsmeit.co" data-tabs="events" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/itsmeit.co" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/itsmeit.co">itsmeit.co</a></blockquote></div>

SCRIPT:

<!-- Fix performance Facebook social -->
<script type="application/javascript">
    window.addEventListener('load', function () {
        var is_facebook_load = 0
        window.addEventListener('scroll', function () {
            if (is_facebook_load == 0) {
                is_facebook_load = 1;
                var ele = document.createElement('script');
                ele.async = true;
                ele.defer = true;
                ele.src = 'https://connect.facebook.net/(Link social)';
                var sc = document.getElementsByTagName('script')[0];
                sc.parentNode.insertBefore(ele, sc);
            }
        }, false);
    });
</script>

Note: Please replace (Link social and itsmeit.co) with your Facebook link.

By using this optimized script, the Facebook Like/Share feature will only load when users scroll, reducing the impact on page speed.

Optimizing Facebook Comments

Default Facebook Comment Code (Slows Down Page Load)

/** Script */
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v22.0&appId=275964052245594"></script>

/** HTML*/
<div id="fb-root"></div>
<div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="" data-numposts="5"></div>

Optimized Facebook Comment Code (Lazy Loading)

<!-- FB Comment Code Optimization -->
<script>
    window.addEventListener('load', function () {
        var is_fb_comment_load = 0;
        window.addEventListener('scroll', function () {
            if (is_fb_comment_load == 0) {
                is_fb_comment_load = 1;
                var ele = document.createElement('script');
                ele.crossorigin = 'anonymous';
                ele.nonce = 'LeGWcQZO';
                ele.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v15.0&appId=275964052245594&autoLogAppEvents=1'; /** Note: change your ele.src appId */
                var sc = document.getElementsByTagName('script')[0];
                sc.parentNode.insertBefore(ele, sc);
            }
        });
    });
</script>

Note: Please replace (appId 275964052245594) with your Facebook appId.

<!-- FB Comment Code HTML-->
<div id="fb-root"></div>
<div class="fb-comments" data-href="[YOUR_LINK]" data-width="100%" data-numposts="5"></div>

Replace [YOUR_LINK] with your actual link, which can be integrated using PHP and SQL. For example, if you’re using WordPress, you can use the code below:

add_filter('the_content', 'add_fb_comment_after_content');
function add_fb_comment_after_content($content)
{
    /** Add only after post */
    if (is_singular('post')) {
        ?>
        <div id="fb-root"></div>
        /** 
         add code script optimized here */
        <?php
        $fb_comment_after = '<div class="fb-comments" data-href="'. get_permalink(get_the_ID()) . '" data-width="100%" data-numposts="5"></div>';
        return $content . $fb_comment_after;
    }
    return $content;
}

Optimized Facebook Messenger Code (Lazy Loading)

<!-- FB Messenger Chat Code Optimization -->
 <script>
    window.addEventListener('load', function () {
        var is_facebook_load = 0
        var chatbox = document.getElementById('fb-customer-chat');
       
        chatbox.setAttribute("page_id", "111009301424827");
        chatbox.setAttribute("attribution", "biz_inbox");

        window.addEventListener('scroll', function () {
            if (is_facebook_load == 0) {
                is_facebook_load = 1;
                window.fbAsyncInit = function () {
                    FB.init({
                        xfbml: true,
                        version: 'v15.0'
                    });
                };
                (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'));
            }
        }, false);
    });
</script>

Note: Please replace (page_id 111009301424827) with your Facebook link.

Results After Optimization

✅ Faster website loading times (up to 50% improvement on mobile)
✅ Improved Google PageSpeed Insights scores (20-30% increase)
✅ Better user experience without losing social media functionality
✅ Enhanced SEO performance by optimizing Core Web Vitals

By implementing lazy loading for Facebook social media features, you can maintain a fast website while still engaging users. According to Google’s Web Performance Guidelines, optimizing third-party scripts can significantly improve Core Web Vitals, boosting SEO rankings and user retention.

If you also use Google Analytics or AdSense, similar optimization techniques can be applied to further enhance performance. 🚀

Share your optimization results after applying the steps above!