Optimasi Sosial Media Untuk Loading Blog

Optimasi Sosial Media Untuk Loading Blog

Bola Hero Gawai

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....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

70 Comments Add Comment

Amankan dulu pertamaxnya ya Kang :D

Balas

di coba Kang optimasi sosial media biar blog Ade Bisa wusss......wuussss....wuuuuusssss..... :) :)

Balas

Yang Google Plus gak mau ilang Kang :)

Balas

Postingan yang sangat bagus dan bermanfaat,kebetulan sedang mencari kode asyncron sosial media.

Balas

keren jadi tambah cepet kang,
-Dek Blogger-

Balas

Untuk blog kang Heri ga usah ditambahkan kode G+ nya, kan hanya pasang tombol G+ aja dan di tombolnya udah ada kode tersebut. Kecuali jika kang Heri mau pasang widget followernya juga di sidebar, maka hapus kode js yang di tombolnya kemudian pasang kode G+ di atas di simpan di atas kode body.

Nah yang menyebabkan tidak mau hilang adalah kode js G+ bawaan blogger, coba kang heri Ctrl + U halaman blognya, dan lihat paling bawah kode-kodenya. Kang heri akan menjumpai kode js G+ yang berwarna biru seperti ini
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
nah untuk mengatasinya pakai trik ini http://www.kompiajaib.com/2013/04/mempercepat-loading-blog-dengan.html

Balas

Hehehehe silahkan dicoba mas :D

Balas

Nah kalau gitu silahkan dicoba saja mas Felix, semoga bisa membantu :D

Balas

Heheheh wwwuuussssssssss :D

Balas

Tos berhasil Kang, kantun nu sanesna masih bareureum keneh :)

Balas

Siiip kang, biar tambah jooss saya lihat kode untuk G+ ada dua seperti ini
<script type='text/javascript'>
window.___gcfg = {lang: 'id'};

(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>


1 di atas kode </head> dan 1 lagi di tombol yang di bawah postingan, hapus salah satunya biar sriptnya ga double. Saran saya hapus script yang di tombolnya dan pindahkan script yang di atas kode </head> ke atas kode </body>

Balas

Ok Kang, Haturnuhun bantosan nana ^_^

Balas

kalo masalah saya bukan yang ini kang, tapi leverage browser cache :D kayanya perlu sewa hosting deh ahaha

Balas

gak mudeng bahasa itu bang

Balas

Betul kang yang itu harus di hosting sendiri...

Balas

Ternyata ini to yang jadi penyebabnya, kayaknya harus segera di eksekusi nih Kang :D

Balas

boleh nanya mas apa blog sy dah termaksud cepet
-Dek Blogger-

Balas

Blognya cepet mas apalagi blognya minim gambar. :D

Balas

Silahkan dicoba aja mas :D

Balas

Suatu solosi untuk membantu loading blog agar lebih cepat yah Kang Adhy
Saya coba, semoga saya bisa menerapkan tutorial Kang Adhy ini makasih :)

Balas

Betul kang salah satu cara agar loading blog cepat, semoga bisa dimengerti :)

Balas

kalo mau masang wodget tombol G+ apa menggunakan kode di atas gan
jawab ke blog sya gan
blogcopot. com

Balas

Nanti jika saya jawab di blognya pada salah satu postingannya seperti ini "Iya gan, jika akan memasang tombol G+ sebaiknya gunakan script di atas." Apa tidak menjadi lucu komentar saya karena tidak nyambung dengan postingannya? :)

Balas

makasih mas adhy buat tutorialnya :) bermanfaat sekali..

kapan2 mampir ya http://nandarious.com :)

Balas

Oke Kang semoga saya bias, karena artikel ini sangat
Mudah dimengerti buat saya yang masih pemula makasih Kang :-bd

Balas

mas adhy ..maaf oot ,mau nanya gimana mau check atau buang script yg error,soalnya bila saya edit html blogger dashboard mgunakan browser chrome muncul simbol peringatan "This page includes script from anauthenticated source..gimana solusinya mas..mohon bantu.

Balas

Siap mas Nandar :D

Balas

Itu biasanya error dari script js yang dihosting pihak lain, ada kemungkinan akun host pihak tersebut dibanned. Solusinya cari jsnya kemudian hosting sendiri misalnya di Google Drive atau YourJavascript atau juga ditulis inline artinya js-nya dibuka dan disimpan langsung di edit HTML.

Balas

makasih mas atas solusinya,di cobain dulu :-d

Balas

wah, kayaknya blog saya akan lebih cepar load kalau eksekusi ini :D

Balas

Sudah mas :) Silahkan dicek

Balas

Dicoba aja mas :D

Balas

Selama melanglangbuana di dunia blogging, baru tau tuh GTMetrix.... cakep juga hasilnya.. Wew lagi :D kompi ajaib juga bagus euy |o|
Saya tambah saran sedikit coba di combine JS nya dari 3 atau lebih jadi 1, buat minimize http-request
Dan ini berlaku buat saudara-saudara JavaScript yang lain

Balas

Benar juga mas Adhy ini :D

Balas

Eksperimen yang sangat bermanfaat mas :D
saya cobaa dullu.

Balas

wah selalu ada gebrakan terbaru dari kang Adhy...
meskipun hal-hal beginian saya gak mudeng tapi gak ada salahnya saya mempelajarinya, terimakasih kang atas sharingnya :)

Balas

langsung dipraktekin nih kang, terutama di googleplus nya.
makasih ilmunya yei...moga jadi pahala....aaaamiiiiin

Balas

Nah betul juga kata kang Tatang, daripada berceceran lebih baik beberapa js dijadiin satu. Makasih tambahannya kang :)

Balas

Silahkan mas dicoba aja :)

Balas

Silahkan dipelajari mas Marner, mudah2an bisa dimengerti :D

Balas

Amiin... kang :D

Balas

Sama saya juga cuma mengerti haturnuhun nya saja kang Adhy,, hehee

Balas

Dicoba in dulu ah ...
biar tambah Hot nih :D

Balas

mas kompi cara membuat diklik pencarian muncul ditab baru gimana:-d

Balas

Hehehe silahkan dicoba aja mas :D

Balas

Coba tambahkan target='_blank' pada klik-nya

Balas

makasih kang, saya praktekkan dulu :)

Balas

pada YSlow Grade: itu maksunya apa yah kang

Balas

kalau saya tidak memerlukan javascript untuk share artikel,

cukup berikan link share saja dari facebook dan beberapa tag blogger sudah selesai.
sikronisasi 100%

Balas

Wah-wah penjelasan yang sesuatu nih hahaha.

Balas

Wah maaf Kang Adhy salah ketik deh mau nulis Bisa
Jadi kebalik Bias tak di sengaja =D Saya belum coba
Trik ini harus memahami lebih lanjut lagi nih Kang :)

Balas

Kang, tolong liat blog saya di jawigo.blogspot.com
itu ada tombol share this tapi gak tahu kodenya dimana?
Soalnya udah bawaan template

Balas

Coba cari kode ini class='addthis_toolbox di edit html

Balas

Keren mas :-bd

Balas

kodenya seperti ini kang
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style addthis_16x16_style'>
<a class='addthis_button_facebook'/>
<a class='addthis_button_twitter'/>
<a class='addthis_button_google_plusone_share'/>
<a class='addthis_button_pinterest_share'/>
<a class='addthis_button_linkedin'/>
<a class='addthis_button_stumbleupon'/>
<a class='addthis_button_compact'/><a class='addthis_counter addthis_bubble_style'/>
</div>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51fde8d13862a7bd' type='text/javascript'/>
<!-- AddThis Button END -->

Balas

O iya, itu dari pihak ke tiga atau sudah dari blogger kang?
berpengaruh terhadap kecepatan loading apa gak?
Makasih kang

Balas

Itu dari pihak ketiga yaitu AddThis dan itu mempengaruhi loading blog.
Kalau mau ganti dengan sharing yang hanya menggunakan CSS agar tidak memberatkan blog.

Balas

Oke kang makasih, saya udah 2 jam lebih muter-muter di blognya kang kompi ni..
=D
nanti kalo ada pertanyaan, bantu lagi ya...Makasih kang

Balas

O iya kang, berarti misalnya mau ganti tinggal kode itu dihapus terus ikutin langkah seperti di postingan kang kompi dengan judul membuat-share-button-blogger-ala-kompi-ajaib.
Betul gak kang?

Balas

Betul mas seperti itu, kode yg tadi diganti dengan kode sesuai petunjuk :D

Balas

hebat :-bd terkadang mas adhy memang bisa dikatakan joss deh hehehe..

Balas

Leony Li juga joss, Cantiknya..xixi..
Sory kang gak ada kaitan dengan artikel..

Balas

Jika saya bisa menjawabnya pasti akan saya bantu mas :D

Balas

Hanya coba utak-atik dan membandingkan satu kode dengan kode lainnya sist Leony hehehe :D
Nih mas Anugroho kayanya ada maunya nih hehehe :p

Balas

thanks i was searching for this new ajax script for my site http://www.latestgames2.com

Balas

Kang, saya mau menghilangkan widget facebook dan google plus bawaan template Kompimales, supaya tambah ringan. Apa saja yang harus dihilangkan?

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×