Lompat ke konten Lompat ke sidebar Lompat ke Berlangganan Lompat ke footer

Cara Terbaru Menghilangkan Bundle CSS dan JS Blogger

Cara Terbaru Menghilangkan Bundle CSS dan JS Blogger - Beberapa waktu belakangan Blogger melakukan sedikit upgrade/ perbaikan pada sistem scripting template mereka yang menyebabkan bundle CSS ataupun JS mereka tetap muncul meskipun sudah diakali untuk hilang menggunakan kode <!--<head/>-->&lt;/head&gt; dan <!--<body/>-->&lt;/body&gt;.

Bundle CSS dan JS dari Blogger ini berfungsi untuk mengoptimalkan fungsi dari fitur bawaan Blogger seperti komentar, preview, dan layout. Jadi sebenarnya script tersebut cukup bermanfaat untuk kamu yang memanfaatkan fitur-fitur tersebut.

Meski begitu, untuk Blogger yang nggak terlalu perlu fitur tersebut dan lebih memilih optimasi loading seperti saya, ini bisa jadi cukup mengganggu. Khususnya buat blogger yang senang dengan rapot hijau dari Pagespeed dan GTMetrix seperti saya. Untuk lebih jelasnya, silahkan kamu perhatikan gambar di bawah:

Bisa kamu lihat sendiri bahwa bundle script JS dan CSS menjadi PR yang harus diperbaiki berdasarkan saran dari Pagespeed. Oleh karena itu saya mencoba mencari cara lain untuk bisa menghilangkan atau mendisfungsikan bundle script tersebut.

Setelah saya membaca beberapa referensi dan mencoba beberapa eksperimen, saya sampai pada satu cara yang saya rasa cukup efektif untuk mengakali bundle script tersebut.

Cara yang akan saya bagikan berlaku untuk template AMPHTML maupun Non-AMP. Meski begitu trik-nya sedikit berbeda.

Untuk kamu yang mau menerapkan cara saya ini, silahkan ikuti panduan singkat berikut ini:

Bahan yang diperlukan

  1. Koneksi Internet
  2. Blogger Blog
  3. Akun Blogger

Alat yang diperlukan

  1. Komputer/ Laptop

Estimasi Waktu: 10 menit.

Panduan Pengerjaan

Langkah 1 - Login ke Blogger

Pertama, silahkan kamu login ke Blogger menggunakan akunmu. Setelah itu, silahkan kamu pilih blog yang ingin kamu edit template-nya (hanya jika kamu punya lebih dari satu blog).

Langkah 2 - Buka Template Editor

Selanjutnya, silahkan kamu buka template Editor dengan cara menekan menu Theme > Edit HTML seperti yang saya tunjukkan pada gambar di atas.

Langkah 3 - Cari dan Ubah Kode Berikut Sesuai Ketentuan

Selanjutnya, silahkan kamu cari kode-kode berikut dan ubah sesuai ketentuan dan versi template yang kamu gunakan.

Blog Non-AMP

  • Cari kode &lt;head&gt;, jika ada, ubah menjadi <head>.
  • Cari kode &lt;--<head/>, jika ada hapus sampai bagian /head&gt;, lalu ganti dengan </head>.
  • Cari kode &lt;body&gt;, jika ada, ubah menjadi <body>.
  • Cari kode &lt;--<body/>, jika ada hapus sampai bagian /body&gt;, lalu ganti dengan </body>.

Hasilnya kurang lebih harus seperti ini:

<html ....>
<head>
Konten dari Head
</head>
<body>
Konten dari Body
</body>
</html>

Blog AMP

Caranya hampir sama, hanya saja pada bagian head tidak perlu diubah.

  • Cari kode <head>, jika ada, ubah menjadi &lt;head&gt;.
  • Cari kode &lt;--<head/> atau </head>, jika ada, ganti dengan &lt;/head&gt;.
  • Cari kode &lt;body&gt;, jika ada, ubah menjadi <body>.
  • Cari kode &lt;--<body/>, jika ada hapus sampai bagian /body&gt;, lalu ganti dengan </body>.

Hasilnya kurang lebih harus seperti ini:

<html ....>
&lt;head&gt;
Konten dari Head
&lt;/head&gt;
<body>
Konten dari Body
</body>
</html>

Langkah 4 - Tambahkan kode ini sesuai ketentuan

Langkah selanjutnya, silahkan kamu tambahkan kode berikut ini sesuai dengan ketentuan yang saya berikan.

Blog Non-AMP

Tambahkan kode di bawah ini tepat di atas <head>:

<template><head/><body/></template>

Maka hasilnya kurang lebih seperti ini:

<html ....>
<template><head/><body/></template>
<head>
Konten dari Head
</head>
<body>
Konten dari Body
</body>
</html>

Blog AMP

Tambahkan kode di bawah ini tepat di atas </head>:

<noscript><head/><body/></noscript>

Maka hasilnya kurang lebih seperti ini:

<html ....>
&lt;head&gt;
Konten dari Head
<noscript><head/><body/></noscript>
&lt;/head&gt;
<body>
Konten dari Body
</body>
</html>

Langkah 5 - Save template

Terakhir, silahkan kamu simpan template kamu. Lalu, silahkan kamu cek hasilnya di Pagespeed atau GTMetrix.

Penutup

Kenapa pakai <template> untuk Non-AMP?

Tag <template> adalah tag yang baru akan dimuat oleh browser ketika ditrigger menggunakan JS. Jadi, tanpa trigger, script di dalam tag template tidak akan dimuat. Script tetap akan muncul dalam source browser seperti yang bisa kamu lihat di gambar di bawah ini:

Seperti yang kamu lihat, script bundle tetap tayang seperti biasa di browser. Namun, script tersebut tidak diproses oleh browser. Hal itu terbukti dari hasil test Pagespeed seperti gambar di bawah:

Kenapa pakai <noscript> dan bukan <template> untuk blog AMP?

Sebenarnya sudah saya coba menggunakan tag yang sama, namun ternyata tag <template> hanya bisa digunakan dengan dukungan script tambahan amp-mustache dan implementasinya pun terbatas. Terlebih, semua element amp hanya bisa digunakan di dalam <body>, sehingga menurut saya tidak efektif.

Setelah saya coba menggunakan <noscript>, hasilnya versi AMP dari blog saya menjadi valid seperti pada gambar di bawah:

Kenapa blog Non-AMP nggak pakai <noscript> juga?

Sebenarnya bisa saja namun ada resiko yang terjadi dimana, kadang blog menjadi error dan tidak bisa diparsing. Hal ini terjadi karena kadang konten di dalam tag <noscript> diparsing juga oleh browser dan menjadi error karena adanya elemen <head> dan <body> yang double.

Mungkin segitu saja tips atau tutorial yang bisa saya bagikan tentang cara menghilangkan bundle CSS dan JS Blogger terbaru. Semoga tutorial ini membantu kamu dalam membangun blog yang lebih mantap lagi. Jika ada yang punya cara lain yang lebih ampuh atau punya pertanyaan, boleh disampaikan melalui kolom komentar. Terima kasih dan sampai jumpa di tulisan saya lainnya.

Anda mungkin menyukai postingan ini:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar