Webvitals Main-Thread Blocking Time

Question

function init() {  
      (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.async = true;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1111";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'))
        
}
window.onload = init;

Despite the fact that I am calling facebook comments plugin on load still i am getting a minus score on web-vitals as its part of Main-Thread Blocking Time.

Answer 1

You should use a Web Worker to load the facebook_comments plugin.

Web Workers are a simple means for web content to run scripts in background threads.

Here's an example:

facebook_comments.js:

function init() {  
      (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.async = true;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=1111";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'))    
}

and then load it via the web worker:

new Worker('facebook_comments.js');

That should load the script in a background thread, resulting to an optimized TBT.