2. »
    3. »
    4. »

Mempercepat Blog #2 - Hapus Javascript, CSS, dan Widget Bundle Bawaan Blogger

Mempercepat Loading Blog dengan Menghapus Script Bawaan Blogspot

Masalah umum yang selalu ada di sebagian besar template adalah tersisipnya Javascript, CSS, dan Widget Bundle bawaan Blogger. Sebagian besar pengguna malah nggak sadar ada script begituan. Nggak aneh, soalnya emang NGGAK ADA di pengaturan HTML. Mereka berdua nggak tertulis. Otomatis gitu lho dari Google sana. Script ini cuma bisa keliatan di source code. Buat liat source code ini, tinggal ketik di browser alamat sebagai berikut:
view-source:http://www.AlamatBlog.com
Ganti http://www.AlamatBlog.com pake alamat blog kamu sendiri.

Dan akan terdapat script yang kurang lebih kaya gini:
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'></script>
<script type='text/javascript' src='https://www.blogger.com/static/v1/widgets/33xxxxxxxx-widgets.js'></script>
<link href='https://www.blogger.com/static/v1/widgets/33xxxxxxxx-css_bundle_v2.css' rel='stylesheet' type='text/css'/>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=33xxxxxxxx=33xxxxxxxx8'/>
Dimana 33xxxxxxxx berupa angka yang berbeda-beda di setiap blog.

Padahal sebenernya kita nggak butuh-butuh amat kok. Yang ada malah memperlambat loading & nurunin score page speed di GTMetrix, Google Page Speed Insight, dan web testing lainnya. Ya mending dihapus aja.

Kalo nggak tertulis di pengaturan HTML, trus gimana hapusnya?

A. Cara Hapus JS, CSS, dan Widget Bundle Blogger

Emang perlu sedikit trik. Perhatikan baik-baik cara menghapus JS, CSS, dan Widget bawaan Blogspot berikut agar bisa mempercepat loading halaman. Pastikan kamu udah login ke akun Blogger. Trus masuk ke "Theme" lalu pilih "Edit HTML".

1. Langkah Pertama
  1. Cari kode sbb:
    <body>
...
...
...
</body>
  2. Yang ditandai kuning <body> ganti dengan:
    &lt;!--<body>--&gt;&lt;body&gt;
  3. Yang ditandai biru </body> ganti dengan:
    &lt;!--</body>--&gt;&lt;/body&gt;
  4. Simpan template.


2. Langkah Kedua
  1. Cari kode sbb:
    <head>
...
...
...
</head>
  2. Yang ditandai kuning <head> ganti dengan:
    &lt;!--<head>--&gt;&lt;head&gt;
  3. Yang ditandai biru </head> ganti dengan:
    &lt;!--</head>--&gt;&lt;/head&gt;
  4. Simpan template.


3. Langkah Ketiga
  1. Cari kode sbb:
    <b:skin><![CDATA[
...
...
...
]]></b:skin>
  2. Yang ditandai kuning <b:skin><![CDATA[ ganti dengan:
    &lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
  3. Yang ditandai biru ]]></b:skin> ganti dengan:
    </style>
  4. Simpan template.


4. Cara Melihat Hasilnya
  1. Cek lagi source code blog dan perhatikan. Kode dari Javascript, CSS, dan Widget bawaan Blogger berubah menjadi warna hijau. Artinya hanya dianggap sebagai HTML comment tag dan nggak bakal dieksekusi sebagai script.
  2. Lakukan page speed test. Entah itu di GTMetrix, Page Speed Insight, Think With Google, Pingdom, dan lain sebagainya. Bandingkan nilai sebelum dan sesudah mempraktekan tutorial ini. Dijamin deh nilainya bakal naik. Maka proses sembunyikan Javascript, CSS, dan Widget Bawaan Blogger ini sukses.


B. Efek Samping

Tampilan layout / tata letak bakal keliatan flat. Nggak bakal ngebentuk kaya aslinya. Biar gampang, dijelasin pake gambar aja.
Cara Menyembunyikan JS, CSS, dan Widget Bawaan Blogspot
SEBELUM. Posisi dan tampilan layout / tata letak sama dengan tampilan blog ketika live.

Mempercepat Loading Blog dengan Menyembunyikan Script Bawaan Blogger
SESUDAH. Semua akan berubah menjadi memanjang kebawah tapi nggak menghilangkan nama dari setiap id widget. Masih sangat mudah dibaca.

Buat saya pribadi sih bener-bener bukan masalah. Toh layout asli ketika blog diakses nggak berubah sama sekali. Yang penting disana masih ada nama dari setiap id widget. Jadi nggak bakal ketuker. Aman kok.


C. Solusi Untuk Halaman / Widget Contact Form

Biasanya halaman yang mengandung widget contact jadi nggak berfungsi. Ini disebabkan karena menyembunyikan widget bundle Blogger tadi. Kamu bisa pake widget contact ala Igniel yang udah pasti work.
  1. Tambahkan CSS berikut ke pengaturan HTML.
    /* Contact Form */
#comments,.post_meta,#blog-pager{display:none}form{color:#666}#kontak{margin:auto;max-width:640px}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid #2f303f;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid #2f303f;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}#ContactForm1_contact-form-submit{float:left;background:#008c5f;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}#ContactForm1_contact-form-submit:hover{background:#2f303f;color:#fff}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}.contact-form-error-message-with-border{background:#2f303f;border:none;box-shadow:none;color:#fff;padding:5px 0}.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}img.contact-form-cross{line-height:40px;margin-left:5px}.post-body input{width:initial} @media only screen and (max-width:640px){#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%}}
  2. Buat satu page / halaman baru. Kalau udah ada tinggal edit aja.
  3. Paste semua kode dibawah ke halaman tersebut.
    <form id="kontak" name="contact-form"><input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" /><input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="" /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Send Message"/>
<div style="max-width: 222px; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"></div> <div id="ContactForm1_contact-form-success-message"></div> </div> </form>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript">//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'ID_BLOG_DISINI';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3dID_BLOG_DISINI','//www.igniel.com/','ID_BLOG_DISINI');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': 'ID_BLOG_DISINI', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));//]]> </script>
    ID_BLOG_DISINI ganti dengan ID blog kamu.
    www.igniel.com ganti dengan alamat blog kamu.
  4. Lalu publish halamannya.
Baca Juga
... Pin Share Share

KLIK
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.igniel.com. Terima kasih.

Artikel Terkait

70 Komentar

  1. Mas Dawai15 September, 2017

    Mantap om... Tutorialnya... Saya akan coba praktekkan...
    Kalau membuat kotak script yg om bagikan sama kotak peringatan pemberitahuan itu menggunakan apa om?

    ReplyDelete
    Replies
    1. Igniel15 September, 2017

      Cuma CSS aja mas.

      Delete
    2. Mike15 September, 2017

      Hello igniel, bisa bagi gak template blog nya yang ini kereng banget...

      Delete
  2. Muchamad syariful umam15 September, 2017

    jadi berubah tampilan di template brosense, tolong diperbaiki

    ReplyDelete
    Replies
    1. Igniel15 September, 2017

      Setau saya template BroSense masih pake format penulisan lama. Nggak bisa pake cara ini.

      Delete
  3. Anonymous15 September, 2017

    kalau template hasil download bisa gak pake cara ini ?

    https://hiddentricksfl.blogspot.co.id/

    ReplyDelete
    Replies
    1. Igniel15 September, 2017

      Bisa, kalo maksudnya template dari link yang kamu tulis.

      Delete
  4. Ahmad Syaiful Hidayat16 September, 2017

    Mantap. Tp, apakah ini berlaku unt template lainnya?

    ReplyDelete
    Replies
    1. Igniel16 September, 2017

      Iya dong. Bisa di semua template yang pake format penulisan baru.
      Dan 99% template yang beredar di kita emang udah pake format tsb.

      Delete
  5. Achmad Julkabitni16 September, 2017

    Terima Kasih

    ReplyDelete
  6. Mas Dey17 September, 2017

    sudah di terapkan di blog saya dan berhasil, yang mau saya tanyakan apakah bisa benar2 dihilangkan CSS dan JS bawaan blogger ini? sehingga tidak ada koment/kode yang warnanya hijau *lihat di di source code. terimakasih kak igniel :)

    ReplyDelete
    Replies
    1. Igniel17 September, 2017

      Nggak bisa bener-bener ilang karena bawaan dari Bloggernya. Yang penting udah nggak bakal tereksekusi sebagai script lagi.

      Delete
  7. Sigit Prayogo23 September, 2017

    Keren nih,,bisa bikin blog jadi wuz wuz

    ReplyDelete
  8. Hiwa29 September, 2017

    Kapan ni mba igniel launching theme buatan sendiri ^-^

    ReplyDelete
    Replies
    1. Igniel29 September, 2017

      Udah ada mas, template premium.
      Tapi belum terlalu dipublikasiin jualannya.
      https://igniplex.blogspot.com

      Delete
  9. Juragan Naik Kelas07 October, 2017

    Maaf Kak Gagal paham untuk yang ini
    Tambahkan CSS berikut ke pengaturan HTML.

    ini diletakan bagian HTML yg mna ya?

    ReplyDelete
    Replies
    1. Igniel07 October, 2017

      Kode CSSnya simpen sebelum < /style >

      Delete
  10. Anonymous20 October, 2017

    Saat diupload templatenya error ?

    ReplyDelete
    Replies
    1. Igniel21 October, 2017

      Kalo semua langkahnya bener, nggak bakal error.

      Delete
  11. Anonymous23 November, 2017

    Di blog ini sampai kode:

    <script src='https://apis.google.com/js/plusone.js' type='text/javascript'></script>

    biasanya sebelum </body> juga ilang, gimana itu caranya mbak? maksud ilangnya bukan sebagai HTML comments yang biasanya warna ijo, tapi ilang gak muncul beneran.

    ReplyDelete
  12. Arik Adnyana02 December, 2017

    Terimakasih mbak, sukses saya terapkan.

    Pada Tata Letak itu ada menu navbar, cara menghapusnya gimana ya?

    ReplyDelete
    Replies
    1. Safrin Nasution20 December, 2017

      Pake css display:none mas

      lebih tepatnya begini

      body#layout .navbar{display:none}

      dengan asumsi navbar nya memiliki class parent dengan nama 'navbar'

      Delete
  13. Yosia Kefas06 February, 2018

    < /style > yg mana? banyak kode < /style >nya

    ReplyDelete
    Replies
    1. igniel10 February, 2018

      <style> yang ada di dalam tag kondisional halaman statis.
      <b:if cond='data:blog.pageType == "static_page"'>

      Delete
    2. Yosia Kefas15 February, 2018

      tampilanya jd berantakan gini http://prntscr.com/iepx49

      Delete
  14. Yosia Kefas14 February, 2018

    juga ada banyak

    ReplyDelete
    Replies
    1. igniel15 February, 2018

      Ini ceritanya masnya mau masukin kode CSS apa?

      Delete
    2. igniel15 February, 2018

      Kalo yang beantakan form kontak, di poin "C. Solusi Untuk Halaman / Widget Contact Form" udah dibahas. Udah dikasih CSS yang nggak berantakan juga.

      Delete
  15. Lokerntb20 February, 2018

    kalau begini bagaimana cara menggantinya mba igniel?

    ReplyDelete
  16. mbok dolan21 February, 2018

    kalau < body > tidak ada gmn mbak?

    ReplyDelete
    Replies
    1. igniel21 February, 2018

      Nggak mungkin template Blogger nggak ada tag BODY. Coba dicek lagi mas. Carinya cukup <body (tanpa kurung tutup).

      Delete
    2. mbok dolan22 February, 2018

      < body expr:class='data:blog.pageType' >

      adanya ini mbak igniel... gimana cara replace gantinya?

      Delete
    3. igniel23 February, 2018

      Ganti menjadi &lt;!--<body>--&gt;&lt;body expr:class='data:blog.pageType'&gt;

      Delete
  17. Yahikko_NR Ismy22 February, 2018

    kalo misalkan ada eror gini "Kesalahan saat mengurai XML, baris 734, kolom 3: The element type "Variable" must be terminated by the matching end-tag ""."

    itu pas saya memasang

    "<style type="text/css">
    <!-- /*
    "

    nah yang ditandai eror katanya blogger pada bagian <"disininya"/s.tyle> nya
    itu kenapa yah??

    style saya diberi . krna komen ini ga bisa menerima tag style :)

    ReplyDelete
    Replies
    1. igniel23 February, 2018

      Apa pakai template format lama? Nama templatenya apa? Biar saya cek.

      Delete
    2. Yahikko_NR Ismy04 March, 2018

      This comment has been removed by a blog administrator.

      Delete
    3. igniel04 March, 2018

      Hapus semua isi dari /* Variable definitions
      Semua yang berawalan <Variable

      Kalo nggak mau dihapus, tutup tagnya dengan menambahkan </Variable> di setiap akhir tag variable tadi.

      Delete
  18. Djacka Artub23 February, 2018

    Lhoalahh. .. Jadi, kode widget bundle nggak tertulis di HTML toh? Pantesan aku nyari di html template blogku sampai mumet nggak ketemuketemu. Akhirnya googling dan terdampar di sini. Hehe

    Oke, makasih, nanti coba aku praktekan tutorialnya.

    ReplyDelete
    Replies
    1. Djacka Artub23 February, 2018

      Yeess ... Sukses dengan mengganti yg bagian <*head> dan <*/head>

      Thank's ...

      Delete
  19. Robin Hanif28 February, 2018

    Klo di pakek di Template Glooger rensponsive bisa gak ya mbak?

    ReplyDelete
  20. Trendi Info01 March, 2018

    Nggak work kalau pake template dr Evo Magz mbak.

    ReplyDelete
    Replies
    1. igniel01 March, 2018

      Iya karena CSS Evo masih ada di dalem b:skin.
      Jadi kalo b:skinnya disembunyiin, CSSnya bakal kehapus juga.

      Solusinya pindahin dulu semua CSS di dalam b:skin ke dalam <style>

      Delete
  21. Sepindra Safrian06 March, 2018

    Mantap mbak artikel yang sangat bermanfaat tutorialnya work cuma pas saya ganti kode pada langkah ketiga itu tampilan template jadi ancur berubah mbak.
    Tpi kecepatan udah naik dari 73% jdi 87%

    ReplyDelete
    Replies
    1. igniel07 March, 2018

      Template BroSense kan? Itu karena semua CSS di template tsb disimpan di dalam tag b:skin. Sementara disini kita harus menyembunyikan b:skin. Jadi CSSnya dianggap terhapus, dan template jadi berantakan.

      SOLUSINYA:
      1. Pindahkan semua isi CSS di b:skin ke tag style. Contoh:
      <style>
      .....isi CSS disini.....
      </style>
      2. Setelah dipindahkan, baru praktekan lagi langkah ketiga.

      Delete
  22. Miras Tampan14 March, 2018

    kalo codenya seperti <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> itu mau di apakan yah?

    ReplyDelete
  23. erwin edwar09 June, 2018

    yang bagian A, sudah dilakukan, terima kasih tutorialnya. page speed jadi 94. Yang bagian B dan C belum dilakukan, masih belum mengerti.
    kalau seperti di bawah ini, bagaimana cara menghilangkannya ?.

    Hindari pengalihan halaman landas untuk rantai URL yang dialihkan berikut :
    http://erwinedwar.com/
    http://www.erwinedwar.com/
    http://www.erwinedwar.com/?m=1

    ReplyDelete
    Replies
    1. igniel10 June, 2018

      Link internalnya punya 3 tujuan yang berbeda (seperti yang disebutkan diatas).

      Samakan semua link internal. Lebih baik pakai URL yang kedua >> http://www.erwinedwar.com

      Tinggal diedit di HTMLnya.

      Delete
    2. erwin edwar10 June, 2018

      caranya gimana ?. buat tutorialnya di blog ini. bagi yg gaptek seperti saya akan sangat membantu, walaupun bagi agan yg ahli, itu persoalan kecil dan sederhana.

      Delete
    3. erwin edwar10 June, 2018

      letak ketiga url diatas, di edit HTML nya sebelah mana ?. sudah dicari satu - persatu tapi gak ketemu

      Delete
  24. erwin edwar10 June, 2018

    setelah menghilangkan tanda ]]> di blog banyak tanda tang dan obeng. bagaimana menghapusnya sedangkan tanda ]]> sudah tidak ada. dimana menempatkan tanda .quickedit{display:none;} supaya tanda obengnya hilang.

    ReplyDelete
    Replies
    1. igniel10 June, 2018

      Tempatkan semua CSS sebelum kode </style> yang baru dibuat sebagai pengganti ]]>

      Delete
    2. erwin edwar10 June, 2018

      buat tutorialnya supaya mengerti

      Delete
  25. Raul Ganteng19 July, 2018

    Mantap artikel nya, mudah dipahami dan sedikit agak sulit sy praktekkan

    ReplyDelete
  26. Admin blog23 August, 2018

    gak work kalau pakai themes bawaan blogger. Saya coba terapkan di themes Emporio tapi malah terbongkar.

    ReplyDelete
    Replies
    1. igniel23 August, 2018

      Ini test pake Contempo work. Coba ganti bagian <body> doang.

      Delete
    2. Admin blog25 August, 2018

      sudah coba yang di ganti cuma body tapi tetap ga work di Emporio.

      Sebenarnya themes Emporio ini sudah cukup bagus sih di GTmetrix, hanya saja plusone.js nya masih di anggap mengganggu krn tdk 'async'. Solusinya sy cuma tambahin 'async'...

      Tapi....
      masih penasaran, gimana cara sembunyiin plusone. js dan kawan-kawannya yang tidak berguna itu. XD

      Delete
    3. igniel29 August, 2018

      Tambahkan b:js='false' dalam tag html. Cek hasilnya.

      <html b:css='false' b:js='false' blablablabla>

      Delete
    4. Admin blog31 August, 2018

      tetap Not Work.
      saya simulasikan 3 cara...

      1. cuma tambahin b:js='false', head dan body ga' di ubah. Not Work
      2. tambahin b:js='false', head dan body di ubah. Not Work
      3. tambahin b:js='false', cuma body yang diubah, head tidak (dan sebaliknya). Not Work.

      menurut Igniel, template Emporio itu sdh bagus tanpa di ubah2?, karena sy liat semua .js nya sdh async. dan satu2nya pengganggu menurut GTmetrix cuma plusone.js.

      Delete
    5. igniel31 August, 2018

      Saya menyarankan begitu karena udah dicoba sendiri dan work di Emporio. Keep trying.

      Delete
  27. Asep Bahtiar01 November, 2018

    Keren om. Thanks infonya
    kalau untuk mengatasi "Hindari pengalihan halaman landas untuk rantai URL yang dialihkan berikut." Gimana ya?

    ReplyDelete
  28. Martua Fernando03 January, 2019

    Jadi kalau di penulisan blog seperti '< body schema bla bla bla>'

    gimana menggantinya mba?

    ReplyDelete
    Replies
    1. Igniel03 January, 2019

      &lt;!--<body>--&gt;&lt;body schema bla bla&gt;

      Delete
  29. Kidu Hac Otnatus12 January, 2019

    ini bikin mati tombol delete dan reply ga gan(gan apa sis sih?)?

    ReplyDelete
    Replies
    1. Kidu Hac Otnatus12 January, 2019

      btw halaman form nya kok aku test gk ngirim email/pesan apa2 y?

      Delete
    2. Igniel13 January, 2019

      Iya bikin mati reply.

      Halaman form mana yang dimaksud? Kalau maksudnya yang ada di blog ini, saya cek normal kok.

      Delete
    3. AndiTekno com11 February, 2019

      kalau bkin mati reply tapi kok punya mbak bisa sih? caranya gmana mba?

      Delete
  30. Dzikri A24 February, 2019

    Mbak adakah cara untuk mengatasi render blocking Jquery?

    Ceritanya saya sudah coba pakai async='async'.. Masalah render blocknya hilang, tapi fitur situs yang perlu Jquery jadi nggak berfungsi.

    Setelah asynchronousnya dihapus baru normal (Tapi render blocknya balik lagi).

    Terima kasih

    ReplyDelete
    Replies
    1. Igniel24 February, 2019

      Tetap pakai async. Lalu buat agar script terpanggil setelah library jQuery termuat. Lanjut Googling aja ya buat cari tau gimana cara manggil fungsi script setelah library jQuery termuat. Di blog ini belum bikin tutornya soalnya.

      Delete
  31. Eko Wardani08 March, 2019

    Kok pas saya terapkan di blog saya, malah menurun yah daru 47 jadi 26 versi mobile di pagespeed taugakini.com

    ReplyDelete

Gunakan tag HTML <em> untuk menuliskan URL, potongan kode, atau hal penting lainnya.
Contoh: <em>isi pesan</em>