How to fix website slows down when add Facebook Social code such as FB like/share, Facebook comment, or FB chat messenger. This article by itsmeit will guide you in solving both mobile and desktop speed issues and help eliminate the website slowdown caused by using these features, thereby achieving high scores on PageSpeed Insights.
How to optimize and fix website slows down when add Facebook Social code
When you add a Facebook page code, chat message or like/share to a website, they send a request to the app’s feed to download and display the respective functions. This increases the initial size of the website and has to wait for Facebook JS and HTML files to be added, slowing down the website and reducing the user experience.
Optimize Google speed when add code Facebook like/share
First, look at the default code with Facebook like share, it should look like this:
The Facebook like share JS code has been optimized:
<!-- Fix perfomance Social facebook by itsmeit -->
<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>
How to use insert Facebook like share code on the website
If you use Wordpress, to use the code above We will guide you to create a shortcode, from which you can use the shortcode anywhere you want to display on the website.
Step 1: Open the functions.php file and add the following code:
Note: You need to replace appId your, display name and facebook page link.
add_shortcode('add_facebook_script_like_share', 'add_facebook_script_like_share');
function add_facebook_script_like_share()
{
?>
<!-- Fix perfomance Social facebook by itsmeit -->
<div id="fb-root"></div>
<div class="fb-page" data-href="https://www.facebook.com/itsmeit.blogs"
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/arriveddev"
class="fb-xfbml-parse-ignore"><a
href="https://www.facebook.com/arriveddev">Arriveddev</a>
</blockquote>
</div>
<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;
<!-- change you appId-->
ele.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v15.0&appId=1019721838751823&autoLogAppEvents=1';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ele, sc);
}
}, false);
});
</script>
<?php
}
Step 2: How to using the shortcode
The above code has created us a shortcode to use in wordpress is [ add_facebook_script_like_share], now you can use it to insert anywhere you want it to appear.
Fixing slow website issues caused by Facebook comment code
Similar to the Facebook page, after you have created the comment plugin code and added it to your website, it will appear in its default form, like this:
Fixing slow website issues caused by Facebook comment code
Normally comments will be added after each post, now itsmeit will use a hook in wordpress with the_content function to add custom code in functions.php, the code to fix website slows down when add Facebook comment will be as follows:
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>
<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=youappid&autoLogAppEvents=1'; /** Note: change your ele.src appId */
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ele, sc);
}
});
});
</script>
<?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;
}
Save the file and clear the cache (if any) and check the facebook comment already displayed, and make sure when you test the speed, the score won’t have any error or warning from facebook social media. In addition to Facebook Social you can do the same with other Social applications.
How to fix slows down when integrate Facebook Messenger
Similar to the previous two methods of addressing the issue of Facebook code slowing down website performance, the next step is to compare the default Facebook chat messenger code with the optimized version and conduct testing to evaluate the results.
Facebook messenger code after it has been optimized:
Note: Chat messenger will normally be placed in the bottom corner of the web page, so I used the function wp_footerto display it at the bottom. Open the functions.php file in your theme and add this code to fix slows down when integrate Facebook Messenger (Change page_id111009301424827 to your page_id).
add_action('wp_footer', 'add_facebook_messenger_script_footer');
function add_facebook_messenger_script_footer()
{
?>
<!-- Messenger Chat Plugin Code -->
<div id="fb-root"></div>
<div id="fb-customer-chat" class="fb-customerchat"></div>
<script>
window.addEventListener('load', function () {
var is_facebook_load = 0
var chatbox = document.getElementById('fb-customer-chat');
<!-- Thay page_id 111009301424827 thành page_id của bạn -->
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>
<?php
}
The above are ways to optimize Google speed, fix FB Like share page, comment, chat messenger to slow down the web when integrated into your website so as not to reduce page load performance as well as help you get the best score. Multi on speed test tools. In addition, if you also use Analytics or Google adsense , you can do the same.
