Cara Terbaru Menghilangkan Bundle CSS dan JS Blogger
Daftar Isi
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/>--></head> dan <!--<body/>--></body>.
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
- Koneksi Internet
- Blogger Blog
- Akun Blogger
Alat yang diperlukan
- 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 <head>, jika ada, ubah menjadi <head>.
- Cari kode <--<head/>, jika ada hapus sampai bagian /head>, lalu ganti dengan </head>.
- Cari kode <body>, jika ada, ubah menjadi <body>.
- Cari kode <--<body/>, jika ada hapus sampai bagian /body>, 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 <head>.
- Cari kode <--<head/> atau </head>, jika ada, ganti dengan </head>.
- Cari kode <body>, jika ada, ubah menjadi <body>.
- Cari kode <--<body/>, jika ada hapus sampai bagian /body>, lalu ganti dengan </body>.
Hasilnya kurang lebih harus seperti ini:
<html ....>
<head>
Konten dari Head
</head>
<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 ....>
<head>
Konten dari Head
<noscript><head/><body/></noscript>
</head>
<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.
Posting Komentar
Harap berikan komentar yang relevan dengan topik tulisan.
Jangan menyertakan link yang tidak berhubungan dengan konten tulisan. Apabila komentar mengandung link (apalagi yang tidak relevan), maka komentar akan dihapus.
Budayakan sopan santun, hindari penggunaan bahasa yang provokatif, SARA, pornografi.
Kritik dan saran yang membangun untuk konten ataupun untuk blog sangat berarti bagi Ninura.