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

Cari kode sbb:
```
<body>
...
...
...
</body>
```
Yang ditandai kuning <body> ganti dengan:
```
&lt;!--<body>--&gt;&lt;body&gt;
```
Yang ditandai biru </body> ganti dengan:
```
&lt;!--</body>--&gt;&lt;/body&gt;
```
Simpan template.

2. Langkah Kedua

Cari kode sbb:
```
<head>
...
...
...
</head>
```
Yang ditandai kuning <head> ganti dengan:
```
&lt;!--<head>--&gt;&lt;head&gt;
```
Yang ditandai biru </head> ganti dengan:
```
&lt;!--</head>--&gt;&lt;/head&gt;
```
Simpan template.

3. Langkah Ketiga

Cari kode sbb:

<b:skin><![CDATA[
...
...
...
]]></b:skin>

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

Yang ditandai biru ]]></b:skin> ganti dengan:
```
</style>
```
Simpan template.

4. Cara Melihat Hasilnya

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

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%}}

Buat satu page / halaman baru. Kalau udah ada tinggal edit aja.

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.

Lalu publish halamannya.

SHARE Share Pin Share