Cách fix mã Facebook làm chậm website để tăng tốc độ tải trang và đạt được điểm số cao trên PageSpeed Insights. Bài viết này itsmeit sẽ hướng dẫn giải quyết cả vấn đề về điểm speed trên mobile và desktop, loại bỏ hiện tượng làm chậm website do sử dụng FB like share hoặc Facebook comment.
Nguyên nhân và cách fix mã Facebook làm chậm website, tối ưu điểm PageSpeed
Khi bạn thêm mã Facebook page, chat message hoặc like share vào trang web, chúng sẽ gửi yêu cầu đến nguồn cung cấp của ứng dụng để tải về và hiển thị các chức năng tương ứng. Điều này làm tăng kích thước ban đầu của trang web và phải chờ đợi các file JS, HTML của Facebook được thêm vào, gây chậm trang web và làm giảm trải nghiệm người dùng.
Cách tối ưu điểm Google speed khi thêm mã Facebook like share page
Cách fix mã Facebook làm chậm website, tối ưu điểm PageSpeed (ảnh minh họa)
Trước tiên, bạn hãy nhìn mã mặc định với Facebook like share, nó sẽ trông như thế này:
<!-- 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 của bạn)';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ele, sc);
}
}, false);
});
</script>
Cách sử dụng chèn mã Facebook like share vào trang web
Nếu bạn sử dụng Wordpress, để sử dụng đoạn mã trên ItsmeIT sẽ hướng dẫn bạn tạo 1 shortcode, từ đó bạn có thể sử dụng mã shortcode ở bất cứ nơi nào muốn hiển thị trên website.
Bước 1: Mở file functions.php và thêm đoạn mã sau:
Note: Bạn cần thay thế appId, tên hiển thị và link page facebook của bạn.
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/itsmeit.blogs"
class="fb-xfbml-parse-ignore"><a
href="https://www.facebook.com/itsmeit.blogs">itsmeit | Technology Blogs</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;
<!-- thay appId của bạn -->
ele.src = 'https://connect.facebook.net/vi_VN/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
}
Bước 2: Sử dụng mã shortcode đã tạo
Đoạn mã trên đã tạo cho chúng ta 1 shortcode sử dụng trong wordpress là [add_facebook_script_like_share], bây giờ thì bạn đã có thể sử dụng nó để chèn vào bất cứ nơi nào bạn muốn nó hiển thị.
Cách tăng điểm Page speed khi thêm mã Facebook comment vào web
Tương tự như với Facebook page, khi bạn đã tạo mã plugin comment và thêm mã vào trang web của bạn, mặc định nó sẽ giống như thế này:
Thông thường comment sẽ được thêm vào sau mỗi bài viết, bây giờ itsmeit sẽ sử dụng hook trong wordpress với hàm the_content để thêm mã tùy chỉnh vào trong functions.php, mã để fix mã Facebook làm chậm web sẽ như sau:
add_filter('the_content', 'add_fb_comment_after_content');
function add_fb_comment_after_content($content){
/** Chỉ thêm comment facebook vào 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/vi_VN/sdk.js#xfbml=1&version=v15.0&appId=1019721838751823&autoLogAppEvents=1'; /** Lưu ý thay ele.src appId của bạn */
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;
}
Lưu file và xóa cache (nếu có) và kiểm tra bình luận facebook đã được hiển thị, và chắc chắn khi bạn kiểm tra tốc độ, điểm số sẽ không có bất kỳ lỗi hay cảnh báo nào từ facebook social media. Ngoài Facebook Social bạn có thể làm tương tự với các ứng dụng Social khác.
Cách tối ưu điểm PageSpeed do mã Facebook messenger làm chậm trang web
Tương tự như 2 cách fix mã Facebook làm chậm web làm trước đó, bây giờ bạn hãy so sánh mã Fb chat messenger mặc định và mã được tối ưu sau đó test kết quả ra sao nhé.
Note: Chat messenger thông thường sẽ được đặt ở góc cuối của trang web, vì vậy mình đã sử dụng hàm wp_footer để hiển thị nó ở cuối. Mở file functions.php trong theme của bạn và thêm mã này nhé (Thay page_id 111009301424827 thành page_id của bạn).
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
}
Trên đây là những cách tối ưu điểm Google speed, khắc phục FB Like share page, comment, chat messenger làm chậm web khi tích hợp vào trang web của bạn để không bị giảm đi hiệu suất tải trang cũng như giúp bạn có số điểm tối đa trên các công cụ test speed. Ngoài ra nếu bạn cũng sử dụng Analytics hoặc Google adsense thì bạn cũng có thể làm tương tự nhé.
![[HD] Optimize, xử lý khi nhúng Facebook comment làm chậm trang web, điểm thấp](https://itsmeit.co/wp-content/uploads/2022/10/toi-uu-diem-google-speed-website-khi-add-facebook-page-itsmeit.biz-7.jpg.webp "Cách fix mã Facebook làm chậm website, tối ưu điểm PageSpeed 13")
![[HD] Optimize, xử lý khi nhúng Facebook comment làm chậm trang web, điểm thấp](https://itsmeit.co/wp-content/uploads/2022/10/toi-uu-diem-google-speed-website-khi-add-facebook-page-itsmeit.biz-8.jpg.webp "Cách fix mã Facebook làm chậm website, tối ưu điểm PageSpeed 14")
