Optimasi Sosial Media Untuk Loading Blog
Seperti saya katakan pada postingan sebelumnya, kalau kita peduli pada peringkat blog di serp maka salah satu hal yang perlu diperhatikan yaitu 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 ibarat Facebook, Twitter, ataupun Google+.
Widget-widget tersebut tentunya memakai script js dari setiap social media tersebut semoga widgetnya dapat berjalan sempurna. Nah hal inilah yang menjadikan loading blog bertambah berat, dikala blog dibuka maka otomatis browser yang dipakai 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 dibutuhkan dalam loading yaitu 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 sehabis blog berhasil dimuat.
Untuk menilik script-script apa saja yang memerlukan render asynchronous, dapat kita coba dengan GTmetrix. Di sana akan tertera script apa saja yang dirender synchronous ibarat tertera pada gambar di bawah ini.
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 memakai script yang valid HTML5 juga seo friendly. Silahkan baca lagi postingannya pada link di bawah ini.
Nah perhatikan script JavaScript SDK-nya ibarat 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 ibarat 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 arahan di atas SEBELUM arahan </body>. Perhatikan arahan po.async = true; itulah arahan asynchronous-nya.
3. Twitter
Jika Anda memasang tombol Follow dari Twiiter, maka biasanya scriptnya akan tampak ibarat di bawah ini:
<a href="https://twitter.com/KompiAjaib" class="twitter-follow-button" data-show-count="true" title="Optimasi Sosial Media Untuk Loading Blog">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 arahan js.async=true; pada script di atas menjadi ibarat ini:
<a href="https://twitter.com/KompiAjaib" class="twitter-follow-button" data-show-count="true" title="Optimasi Sosial Media Untuk Loading Blog">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 dikala dicek lagi di GTmetrix tidak akan ada script yang dirender synchronous ibarat pada gambar di bawah ini:
Selamat mencoba....
Sumber https://www.kompiajaib.com/
0 Response to "Optimasi Sosial Media Untuk Loading Blog"
Posting Komentar