Optimasi Sosial Media Untuk Loading Blog

Optimasi Sosial Media
Seperti saya katakan pada postingan sebelumnya, jika kita peduli pada peringkat blog di serp maka salah satu hal yang perlu diperhatikan adalah loading blog. Semakin ringan loding blog maka kesempatan blog berada di halaman pertama hasil percarian akan semakin besar. Dan salah satu beban loading blog yaitu widget-widget yang kita pasang dari pihak ketiga diantaranya widget social media seperti Facebook, Twitter, ataupun Google+.

Widget-widget tersebut tentunya menggunakan script js dari setiap social media tersebut agar widgetnya bisa berjalan sempurna. Nah hal inilah yang menyebabkan loading blog bertambah berat, ketika blog dibuka maka otomatis browser yang digunakan harus mendownload js-js tersebut dan tentunya ini menambah waktu loading blog. Jika kita memasang 3 buah widget Facebook, Twitter, dan Google+ maka waktu yang diperlukan dalam loading adalah 3 kali proses download script-nya yang didownload serempak (synchronous) dengan loading blog.

Nah untuk memangkas waktu loading tersebut, disarankan untuk me-loading script-script tersebut dengan asynchronous yang artinya script-script tersebut didownload/dirender terakhir setelah blog berhasil dimuat.

Untuk memeriksa script-script apa saja yang memerlukan render asynchronous, bisa kita coba dengan GTmetrix. Di sana akan tertera script apa saja yang dirender synchronous seperti tertera pada gambar di bawah ini.

Synchronous di GTmetrix

Dari gambar di atas tertera bahwa script js dari Facebook memerlukan render asynchronous. Bagaimana cara mengatasinya? Mari kita coba dengan trik di bawah ini.

1. Facebook
Untuk memasang plugin Facebook, saya sarankan untuk menggunakan script yang valid HTML5 juga seo friendly. Silahkan baca lagi postingannya pada link di bawah ini.

Nah perhatikan script JavaScript SDK-nya seperti di bawah ini:

<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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Silahkan tambahkan kode js.async=true; pada script di atas menjadi seperti di bawah ini:

<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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

2. Google Plus
Jika ternyata widget Google+ blog Anda terdetek render synchronous, silahkan tambahkan script di bawah ini.

<script type='text/javascript'>
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Simpan kode di atas SEBELUM kode </body>. Perhatikan kode po.async = true; itulah kode asynchronous-nya.

3. Twitter
Jika Anda memasang tombol Follow dari Twiiter, maka biasanya scriptnya akan tampak seperti di bawah ini:

<a href="https://twitter.com/KompiAjaib" class="twitter-follow-button" data-show-count="true" title="Follow @KompiAjaib">Follow @KompiAjaib</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Silahkan tambahkan kode js.async=true; pada script di atas menjadi seperti ini:

<a href="https://twitter.com/KompiAjaib" class="twitter-follow-button" data-show-count="true" title="Follow @KompiAjaib">Follow @KompiAjaib</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Jika Anda melakukannya dengan benar, maka ketika dicek lagi di GTmetrix tidak akan ada script yang dirender synchronous seperti pada gambar di bawah ini:

Synchronous berhasil diatasi

Selamat mencoba....

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments