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

Artikel Terkait

54 Komentar

  1. 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. Hello igniel, bisa bagi gak template blog nya yang ini kereng banget...

      Delete
  2. jadi berubah tampilan di template brosense, tolong diperbaiki

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

      Delete
  3. kalau template hasil download bisa gak pake cara ini ?

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

    ReplyDelete
    Replies
    1. Bisa, kalo maksudnya template dari link yang kamu tulis.

      Delete
  4. Mantap. Tp, apakah ini berlaku unt template lainnya?

    ReplyDelete
    Replies
    1. 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. 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. Nggak bisa bener-bener ilang karena bawaan dari Bloggernya. Yang penting udah nggak bakal tereksekusi sebagai script lagi.

      Delete
  6. Keren nih,,bisa bikin blog jadi wuz wuz

    ReplyDelete
  7. Kapan ni mba igniel launching theme buatan sendiri ^-^

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

      Delete
  8. Cara pasang Sticky Navigasi & Judul blog kyk blog ini gimana ya gan sis

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

    ini diletakan bagian HTML yg mna ya?

    ReplyDelete
    Replies
    1. Kode CSSnya simpen sebelum < /style >

      Delete
  10. Saat diupload templatenya error ?

    ReplyDelete
    Replies
    1. Kalo semua langkahnya bener, nggak bakal error.

      Delete
  11. 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. Terimakasih mbak, sukses saya terapkan.

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

    ReplyDelete
    Replies
    1. 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. < /style > yg mana? banyak kode < /style >nya

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

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

      Delete
  14. Replies
    1. Ini ceritanya masnya mau masukin kode CSS apa?

      Delete
    2. 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. kalau begini bagaimana cara menggantinya mba igniel?

    ReplyDelete
  16. kalau < body > tidak ada gmn mbak?

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

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

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

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

      Delete
  17. 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. Apa pakai template format lama? Nama templatenya apa? Biar saya cek.

      Delete
    2. This comment has been removed by a blog administrator.

      Delete
    3. 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. 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. Yeess ... Sukses dengan mengganti yg bagian <*head> dan <*/head>

      Thank's ...

      Delete
  19. Klo di pakek di Template Glooger rensponsive bisa gak ya mbak?

    ReplyDelete
  20. Nggak work kalau pake template dr Evo Magz mbak.

    ReplyDelete
    Replies
    1. 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. 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. 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. kalo codenya seperti <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> itu mau di apakan yah?

    ReplyDelete
  23. 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. 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. 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. letak ketiga url diatas, di edit HTML nya sebelah mana ?. sudah dicari satu - persatu tapi gak ketemu

      Delete
  24. 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. Tempatkan semua CSS sebelum kode </style> yang baru dibuat sebagai pengganti ]]>

      Delete
    2. buat tutorialnya supaya mengerti

      Delete

Centang kotak "NOTIFY ME" agar mendapatkan notifikasi melalui email ketika ada yang membalas komentar kamu.