KontenWeb: Javascript

Penulis
- Oktober 13, 2019
Internalisasi CSS Dan Javacript - Apa yang dimaksud dengan internalisasi css dan javascript? Yang dimaksud dengan internalisasi css maupun javascript adalah menjadikan file css atau javascript dari penyimpanan external ke internal, sebuah template umumnya tidak terlepas dari bundling css maupun bundling javascript dari penyimpanan external, bundling yang paling umum kita temui dalam sebuah template misalnya; bundling google fonts, bundling font awesome dan bundling-bundling lainnya seperti script share buttons, slider dan banyak lagi.

Diantara bundling-bundling tersebut sebagian mungkin ada yang mendukung asynchronously css atau javascript dan sebagian lagi tidak mendukung asynchronously file "css dan javascript" external.

Fungsi dan Tujuan

Internalisasi css dan javascript bertujuan untuk menghilangkan blokir/penundaan rendering halaman yang disebabkan oleh bundling css dan javascript external tersebut. Fungsinya adalah memisahkan file css dari sumber dayanya untuk mempercepat loading situs.

Jadi poin pertama yang harus kita ingat adalah internalisasi css dan javascript external hanya dilakukan pada bundling "css dan javasript" yang tidak mendukung asynchronously saja sedangkan bundling css dan javascript yang mendukung async='async' tidak perlu dilakukan internalisasi. Dan untuk mengetahui apakah bundling css atau javascript mendukung asynchronously kita perlu menambahkan async='async' kedalam bundling tersebut.

Contoh;
<script src='url-file-external' type='text/javascript'/>
Kemudian tambahkan async='async' sehingga menjadi seperti berikut
<script async='async' src='url-file-external' type='text/javascript'/>
Jika setelah ditambahkan async='async' kedalam bundling external tidak ada perubahan dalam artian tidak ada widget, fitur atau tampilan yang rusak, maka script tersebut mendukung asynchronously, tapi jika setelah ditambahkan async='async' ternyata ada fitur-fitur yang rusak maka script tersebut tidak mendukung async='async' dan solusinya adalah dilakukan internalisasi javascript agar tidak menghambat rendering halaman.

Khusus untuk bundling css saya telah menerbit 2 artikel untuk mengatasinya jika kamu belum mebacanya silahkan lihat [Asynchronously CSS dengan WebFontConfig] dan [Load Css External Dengan Javascript], tapi jika kamu memilih untuk melakukan internalisasi css external juga boleh-boleh saja, ikuti langkah-langkah-nya berikut ini.

Pertama Cek bundling css dan javascript dengan "Tool SEO Analyzer", kunjungi https://www.seocentro.com/tools/seo/seo-analyzer.html kemudian submit link situs anda pada kolom URL seperti contoh dibawah ini;
Cek Bundling CSS dan Javascript
Cek Bundling CSS dan Javascript
Pilih Tab [Speed] kemudian gulir kebawah, klik pada bagian folder Blocking Javascript untuk melihat daftar bundle css dan javascript yang memblokir rendering halaman, disana kamu mungkin akan melihat banyak bundling javascript. Jika tool atau situs tidak buka silahkan gunakan/kunjungi https://varvy.com/pagespeed/ untuk mengecek bundle css.

Perlu di ingat bahwa tidak semua bundling javascript yang ada pada pada daftar, dapat di internalisasi misalnya bundling widget blogger "https://www.blogger.com/static/v1/widgets/id/widgets.js", bundling ini hanya selesai dengan mengganti kode <head> dengan &lt;head&gt; dan kode penutup </head> dengan &lt;/head&gt;&lt;!--<head/>--&gt; kemudian mengganti kode penutup </body> dengan &lt;!--</body>--&gt;&lt;/body&gt; sedangkan bundling yang dapat di internalisasi adalah bundling "css dan javascript" seperti ajax, google fonts, font awesome, dll seperti contoh berikut;
  • <script src='https://cdn.jsdelivr.net/g/jquery.easing@1.3/jquery.easing.1.3.min.js' type='text/javascript'/>
  • <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
  • <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
  • <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
Untuk melakukan internalisasi (dijelaskan secara teori) buka url script/css external misalnya; https://fonts.googleapis.com/css?family=Oswald dan copy semua isi "css" yang ada pada url tersebut dan masukkan ke dalam template (html situs web) untuk menggantikan bundle tersebut. Jika diperlukan kamu juga bisa melakukan minify bundle css dan javascript dengan tool Css & Js Minifer sebelum melakukan internalisasi.

File atau isi dari bundle css fonts googleapis dan font awesome dibungkus dengan tag atau kode;
<style type='text/css'><!--
File css here...
--></style>
Dan file java script (isi dari bundle javascript) dibungkus dengan tag script seperti contoh dibawah ini;
<script type='text/javascript'>
//<![CDATA[
File js here...
//]]>
</script>
Penempatan css dan javascript internal

Css umumnya ditempatkan diantara kode <head> dan </head> sedangkan untuk javascript umumnya ditempatkan didalam tag body, setelah kode <body> atau diatas kode penutup </body>, jika membingungkan posisi css dan javascript bisa ditempatkan diposisi bundle (menggantikan bundle), hapus baris bundle example: <script src='url' type='text/javascript'/> dan ganti dengan file css/script "isi bundle" yang telah disiapkan untuk internalisasi.

Demikian "Internalisasi CSS Dan Javacript" semoga ini membantu anda dalam mengatasi masalah speed (Render-blocking JavaScript dan css) yang disebabkan oleh bundling no asynchronous.

Penulis
- Oktober 13, 2019
Cara Menghapus Credit Link - Sebelum membahas tentang bagaimana cara menghapus credit link template blog, saya jelaskan dulu mengenai credit link agar tidak salah paham, credit link merupakan claim dari para desing template, biasanya credit link ditempatkan pada bagian footer template misalnya: Desing by, Theme by, Templateism Credit Link dll.

Selain untuk memberi claim terhadap template tersebut credit link juga di fungsikan untuk mempromosikan situs pembuat template tersebut. jika credit link di hapus dengan cara yang tidak tepat, maka situs anda akan otomatis di redirect atau di alihkan ke situs sang pembuat template.

Apasih kerugian (dampak buruk) memakai template yang memiliki credit link?

Dalam prinsip SEO (Search engine optimization) hanya sedikit kerugian jika anda memakai template yang memiliki credit yaitu pentransferan sedikit rank halaman kepada pemilik link credit. Sebagai manusia yang punya sopan santun sebenarnya tidak perlu menghapus atau menghilangkan credit link tersebut, Namun sebagai manusia propesional tetap ada alasan mengapa kita harus menghapus credit link dari situs blog/website kita.

Cara Menghapus Credit Link Template

#Cara_1: Menghapus credit link secara permanent, metode ini kamu harus mengerti jenis-jenis credit link karena setiap desinner template memiliki metode yang berbeda menempatkan/membuat credit link pada karya mereka. Tapi jangan khawatir karena pada dasar nya prinsip credit link itu sama, jika di istilahkan dengan kunci, maka kunci dan gembok nya diletakkan di dalam template tersebut.

Kunci "Original Script Credit Link" adalah sebagai berikut;
[code type="JavaScript"]<script type="text/javascript">
$(document).ready(function () { if ($("#credit,.credit").attr("href") != "https://www.kontenweb.com") {window.location.href = "https://www.kontenweb.com"; }});
</script>[/code]
Sedangkan "Gembok" Credit Link adalah sebagai berikut
[code type="HTML"]<div id='footer'>
Template by <a href='https://www.kontenweb.com' id='credit' title='K-Web Themes'>K-Web Themes</a>
</div>[/code]
Jadi untuk "Menghapus Credit Link" secara permanent, hapus terlebih dahulu "kunci" nya baru kemudian buang gemboknya atau rubah gembok nya nya menjadi link situs anda sendiri. maka situs anda tidak akan di redirect lagi oleh credit link tersebut.

Untuk menghindari kesalahan saat menghapus credit link, sebaiknya kenali jenis-jenis script credit link selain contoh credit link di atas yaitu credit link type alien (encode), saya sebut ini credit link ini sebagai credit link alien, karena kunci atau kode script credit link nya di samarkan misalnya menjadi seperti berikut ini:
[code type="JS"]var _0xbf5d=["\x68\x72\x65\x66","\x61\x74\x74\x72","\x23\x63\x72\x65\x64\x69\x74\x2C\x2E\x63\x72\x65\x64\x69\x74","\x68\x74\x74\x70\x3A\x2F\x2F\x74\x75\x6B\x61\x6E\x67\x6C\x69\x73\x74\x72\x69\x6B\x70\x75\x6C\x61\x75\x62\x61\x74\x61\x6D\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x72\x65\x61\x64\x79"];$(document)[_0xbf5d[5]](function(){if($(_0xbf5d[2])[_0xbf5d[1]](_0xbf5d[0])!= _0xbf5d[3]){window[_0xbf5d[4]][_0xbf5d[0]]= _0xbf5d[3]}});[/code]
Sedangkan untuk gembok credit link nya masih tetap sama seperti diatas. Itu sebabnya untuk menghapus credit link seperti ini maka kamu harus benar-benar paham fungsi masing-masing javascript yang ada didalam template, termasuk jenis-jenis scrpt credit link agar mudah menghapus nya dan tidak diredirect lagi.

#Cara_2: Menghilangkan Credit Link (Tidak Permanent)

Metode menghapus credit link berikut ini, hanya untuk melumpuhkan fungsi credit link itu saja, namun ia tetap ada di dalam template anda. Metode ini hanya di lakukan jika kamu tidak menemukan kunci "Credit Link" seperti contoh di Cara #1.

Tambahkan style='visibility:hidden' pada bagian kode gembok credit link, sehingga menjadi seperti berikut contoh ini.
[code type="HTML"]<div id='footer'>
Template by <a href='https://www.kontenweb.com' id='credit' style='visibility:hidden' title='K-Web Themes'>K-Web Themes</a>
</div>[/code]
Dengan demikian maka credit link tidak akan terlihat di template anda lagi, Credit link tersebut tersembunyi dan tidak berfungsi lagi. Anda juga bisa menambahkan style='display: none' untuk melumpuhkan total fungsi credit link tersebut sehingga gembok credit link menjadi seperti ini.
[code type="HTML"]<div id='footer' style='display: none'>
Template by <a href='https://www.kontenweb.com' id='credit' title='K-web Themes'>K-Web Themes</a>
</div>[/code]
Baiklah sampai disini saja penjelasan saya tentang cara menghapus credit link template yang di redirect ke situs pembuat templete nya. Jika kurang paham silahkan baca cara membuat credit link agar kamu tahu cara menghapusnya.

Penulis
- Oktober 13, 2019
Berbagi script defer iframe atau defer parsing iframe youtube js (fast loading) -  Mungkin masih ada yang ingin bertanya "apa itu defer iframe video youtube (youtube embed)?", Dalam bahasa inggris "Defer" artinya adalah menunda, jadi yang dimaksud dengan defer iframe youtube embed adalah; menunda pemuatan iframe youtube embed dengan bantuan sebuah javascript agar tidak membebani loading situs, sama hal nya dengan lazy loading.

Script yang berfungsi untuk menunda pemuatan iframe dari youtube embed ini lebih dikenal dengan sebutan "defer parsing of javascript youtube embed js", Script ini awalanya saya temukan ketika mengintip akun github para programer, ada banyak pengetahuan yang saya temukan disana untuk mempercepat loading situs web dan salah satunya adalah dengan menunda pemuatan iframe menggunakan script "defer parsing youtube js" ini.

Cara Kerja Defer Parsing Youtube JS

Javascript defer parsing youtube embed berfungsi untuk memberitahukan kepada browser untuk melewati atau menunda pemuatan iframe video embed sebelum loading situs selesai.

Script Defer Iframe dan Cara Menggunakan Nya

Simpan kode lengkap defer_parsing_youtube_embed.js ini diatas tag penutup body (diatas kode </body>).
[code type="JavaScript"]<script type='text/javascript'>
function init() {
    var vidDefer = document.getElementsByTagName('iframe');
    for (var i = 0; i < vidDefer.length; i++) {
        if (vidDefer[i].getAttribute('data-src')) {
            vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src')); } } }
window.onload = init;
</script>[/code]
Kemudian copy kode embed video youtube yang akan disematkan dan ubah kode src="" menjadi src="" data-src="" lalu kemudian sematkan kedalam konten (artikel) melalu mode pengeditan html.

example:
[code type="HTML"]<iframe width="854" height="480" src="https://www.youtube.com/embed/-U21R16Vvwk" frameborder="0" allowfullscreen></iframe>[/code]
Kode semat diatas adalah adalah kode original embed video youtube tanpa pemutar otomatis, setelah diterapkan defer iframe maka akan menjadi seperti berikut ini;
[code type="HTML"]<iframe width="854" height="480" src="" data-src="https://www.youtube.com/embed/-U21R16Vvwk" frameborder="0" allowfullscreen></iframe>[/code]
Untuk melihat lebih jelas bagaimana kinerja script defer parsing youtube embed js ini silahkan lihat pada link demo di bawah ini.
Lihat Demo
Dengan menarapkan metode "defer iframe" atau penundaan pemuatan iframe maka video yang disematkan kedalam konten situs tidak lagi membebani browser terlalu berat sehinngga loading situs menjadi lebih cepat (normal sebelum video ditambahkan). Demikian "Script Defer Iframe Video Youtube (Fast Loading)" Serta cara menggunakannya semoga bermanfaat dan menambah ilmu pengetahuan tentang blogging dan javascript.

Penulis
- Oktober 13, 2019
Cara Membuat Credit Link Footer Template - Sebenarnya untuk apa membuat credit link footer? tutorial ini tentu bukan untuk para designer template, sebab mereka tentu lebih tau tentang trik-trik meng-claim produk mereka.

Sebelumnya saya telah menulis tutorial cara menghapus credit link, dan untuk mengetahui dengan pasti tekhnik menghapus credit link maka tidak salah jika kita belajar membuat credit link, sebab jika membuat credit link footer kita sudah mengerti tentu otomatis kita juga akan mengerti cara menghilangkan atau menghapus-nya (credit link) jika kedepan nya ada template yang dipasangi link credit.

Membuat Credit Link Dengan Scipt Dasar

Script atau javascript dasar credit link adalah seperti contoh di bawah ini:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () { if ($("#creditme,.creditme").attr("href") != "https://gigi-pages.blogspot.com") {
        window.location.href = "https://gigi-pages.blogspot.com"; }});
//]]></script>
Letakkan kode javascript tersebut di mana saja di area dalam tag-body template, lebih tepat nya adalah di antara tag body pembuka "<body>" dan tag body penutup "</body>". jika kamu adalah pemula maka kamu letakkan saja script credit link tersebut tepat di atas kode penutup </body> template.

Langkah ini belum selesai, karena kode di atas masih berupa "kunci" credit link saja, kamu harus memasang gembok nya juga, agar credit link tersebut bekerja dengan baik, berikut contoh kode html yang saya sebut sebagai gembok script credit link diatas.
[code type="HTML"]<div id='footer'>Theme by <a href='https://gigi-pages.blogspot.com' id='creditme' title='Download Theme'>Download Theme</a></div>[/code]
Letak kan di atas di bagian footer template anda, jika template anda sudaah memiliki footer misalnya seperti berikut ini;
[code type="HTML"]<div class='navix credit'>
<div class='isiwrap'>
        <div class='pull-left'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#169; 2019. All Rights Reserved.</div>
<div class='pull-right'> Powered by <a href='https://blogger.com' target='_blank'>Blogger</a></div>
</div></div>[/code]
Kemudian untuk menanamkan credit link, cukup dengan menambahkan link dan id credit nya saja sehingga setelah kita tambahkan akan menjadi sepeti berikut ini.
[code type="HTML"]<div class='navix credit'>
<div class='isiwrap'>
        <div class='pull-left'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#169; 2017. All Rights Reserved.</div>
<div class='pull-right'> <a href='https://gigi-pages.blogspot.com' id='creditme' title='Download Theme'>Download Theme</a> Powered by <a href='https://blogger.com/' target='_blank'>Blogger</a></div>
</div></div>[/code]

Membuat Credit Link Dengan Penyamaran Encode

Adapun cara memasang credit link yang kedua ini, lankah-langkah penerapannya masih tetap sama seperti yang telah dijelaskan diatas (cara yang pertama), yang membedakannya adalah, script di-encode terlebih dahulu dengan Javascript Obfuscator.

Kunjungi link https://javascriptobfuscator.com/Javascript-Obfuscator.aspx untuk meng-encode kode script link credit, silahkan lihat contoh gambar di bawah ini;
Cara Membuat Credit Link Footer Template
Encode credit link
Cara kedua selesai, metode (cara memasang nya) sama dengan #cara1

Credit link Dengan Penyamaran Versi Base64

Base64 sama saja dengan encode versi Obfuscator, yang membedakan nya adalah hasil dari encode nya saja. Hasil encode Base64 cenderung lebih panjang, dan menggunakan huruf dari pada angka, silahkan encode script credit link nya di halaman ini https://ostermiller.org/calc/encode.html

Sekian, saja penjelasan mengenai cara memasang credit link footer template, peringatan jangan pasang credit link di template yang bukan buatan anda sendiri, meng-calaim karya orang lain sebagai karya sendiri, merupakan tindakan buruk dan merusak sumber penghasilan para designer template. Jadikanlah ini sebagai pengetahuan saja dan mari sama-sama kita jaga spotifitas dunia web dan blogger ini agar kita bisa maju bersama.

Penulis
- Oktober 13, 2019
WebFontConfig: Mengatasi Render Blocking Bundle CSS Fonts - Pada artikel sebelumnya saya telah mengulas beberapa trik-trik blogging yang membahas tentang bundling css seperti Google Fonts API dan Font Awesome.

Mungkin kamu telah melewatkan-nya jadi silahkan baca disini dan pada artikel ini saya akan kembali menjelaskan hal yang hampir serupa yaitu mengatasi bundling css fonts dengan metode yang berbeda agar teman-teman blogger mendapatkan lebih banyak referensi mengenai cara menghilangkan bundling css tersebut.

Dalam istilah lain WebFontConfig mungkin lebih akrab dikenal dengan WebFont Loader yaitu teknik memuat file css tanpa menyertakan sumber-nya, Cara kerja script WebFontConfig ini juga tidak jauh berbeda dengan script loadcss namun di beberapa hal WebFontConfig mungkin sedikit lebih unggul untuk pengoptimalan speed (Web Performance).

Kelebihan WebFontConfig
  1. WebFontConfig atau WebFont Loader adalah bagian dari Google Hosted Libraries, yang merupakan jaringan distribusi konten untuk perpustakaan JavaScript open-source Google Developers.
  2. Menyajikan durasi cache yang lebih lama dan memangkas waktu pemuatan (loading) yang lebih pendek.
  3. Mudah di gunakan dan sangat membantu dalam pengoptimalan (Optimasi PageSpeed Insights)
  4. Support di banyak browser (hampir semua versi browser)

Script WebFont Configuration

<script type='text/javascript'>
//<![CDATA[
WebFontConfig={custom:{families:["FontAwesome"],urls:["https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"]},google:{families:["Roboto:400,700,300:latin","Oswald:400,700:latin"]}},function(){var t=document.createElement("script");t.src=("https:"==document.location.protocol?"https":"http")+"://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js",t.type="text/javascript",t.async="true";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
//]]>
</script>
Tempatkan script WebFontConfig diantara tag <head> dan </head> kemudian ganti sumber css "//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" dengan sumber librarie css yang telah ada disitus anda, jangan lupa sesuaikan juga jenis font "Roboto, Oswald" dengan font web anda.

Jika situs anda menggunakan banyak jenis font, kamu dapat menambahkan sedikit modifikasi script pada bagian "google:{families:["Roboto:400,700,300:latin","Oswald:400,700:latin"]}" menjadi;
[code type="CSS"]example:
google:{families:["Aclonica","Acme","Alegreya"]}[/code]
Artikel ini merupakan jawaban sekaligus solusi untuk cara asynchronously css external, analisa saya mengenai ini "asynchronously css external"  dengan script WebFontConfig, mendapatkan hasil "performa" yang lebih baik dibandingkan dengan internalisasi css. Semoga bermanfaat dan sampai jumpa kembali.
x