Muat Tombol Suka dan Bagikan Facebook Lebih Cepat

Bagaimana cara memuat tombol Facebook secara asinkron?

Hampir setiap blog, situs web memiliki tombol suka, bagikan, atau ikuti Facebook.

Seperti yang Anda ketahui, kode berbagi sosial Facebook default dimuat secara sinkron bersama dengan sumber daya halaman web Anda.

Ini akan meningkatkan waktu muat situs web Anda dan merusak skor SEO. Ini bukan SEO tetapi juga merusak pengalaman pengguna.

Saya yakin tombol berbagi sosial Facebook sangat penting tetapi bukan sebagai kode Anda yang sebenarnya untuk ditampilkan terlebih dahulu. Ada banyak blog atau situs web yang memiliki waktu muat halaman lebih tinggi karena kode default Facebook.

  Bisakah Anda Melihat Siapa yang Melihat Video Anda yang Diposting di Facebook?

Menggunakan kode Facebook secara asinkron akan membantu Anda memuat halaman web Anda 0,5 – 1,5 detik lebih cepat. Inilah yang Anda harus memuat tombol suka, bagikan, atau ikuti Facebook lebih cepat.

Ini kode yang saya dapatkan dari Pengembang Facebook untuk like dan share ke techking.id.com

<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";    
fjs.parentNode.insertBefore(js, fjs);  
}(document, 'script', 'facebook-jssdk'));</script>

Sekarang, yang harus saya tambahkan adalah mengikuti satu baris dalam kode saya, yang akan membantu memuat tombol lebih cepat.

js.async=true;

Jadi kode yang dimodifikasi adalah:

<div id="fb-root"></div>
<script>(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&appId=xxxxxxxxxx&version=v2.0";    
fjs.parentNode.insertBefore(js, fjs);  
}(document, 'script', 'facebook-jssdk'));</script>

Bukankah itu mudah?

  Cara menyiarkan langsung di Facebook dari iOS dan Android

Pembaruan: cuplikan kode baru yang ditawarkan oleh Facebook tidak memerlukan di atas karena sudah termasuk skrip asinkron yang dapat Anda lihat di bawah.

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0" nonce="JekfmCeX"></script>

Menggunakan WordPress? Lihat posting ini yang menjelaskan cara mengoptimalkan kinerja tanpa plugin. Dan jika Anda mencari plugin media sosial yang tidak melambat maka saya sangat merekomendasikannya Novashare.

Saya yakin Anda menyukai halaman web Anda memuat lebih cepat, dan saya harap ini membantu Anda.

Senang membaca artikelnya? Bagaimana kalau berbagi dengan dunia?