Lazyload Facebook Customize Chat

In today's first article, I will show you how to Lazyload Facebook Customize Chat to make the page load faster.

First, let's learn about the default Javascript that Facebook provides us when installing chat plugins on the website.

<div id="fb-root"></div>
<div id="fb-customer-chat" class="fb-customerchat"></div>
<script>
 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/vi_VN/sdk/xfbml.customerchat.js'
 fjs.parentNode.insertBefore(js, fjs)
 })(document, 'script', 'facebook-jssdk')
</script>

The first segment is the root component where the attributes and values ​​will be returned after the script has finished loading, the next segment is the Facebook scripts. This will be the section that we need to pay the most attention to so we can load the page quickly.

Next, let's look at Facebook's Javascript that has been shortened to load the page faster.

window.fbAsyncInit = function () {
 FB.init({ xfbml: !0, version: 'v15.0' })
}
function td_customerchat() {
 var t = document.createElement('script')
 ;(t.async = !0),
 (t.defer = !0),
 (t.src = 'https://connect.facebook.net/vi_VN/sdk/xfbml.customerchat.js'),
 document.body.appendChild(t)
}
window.addEventListener
 ? window.addEventListener('load', td_customerchat, !1)
 : window.attachEvent
 ? window.attachEvent('onload', td_customerchat)
 : (window.onload = td_customerchat)

In the top paragraph and the bottom paragraph, do you see the difference? In the following paragraph, I have added async and defer attributes so that it loads after the page has finished loading.