Cara Mengurangi JavaScript yang Tidak Digunakan di Blogger AMP
Audit Lighthouse sering menampilkan peringatan "Kurangi JavaScript yang tidak digunakan" pada blog AMP. Pada platform Blogger (Blogspot), banyak skrip yang berasal dari runtime AMP dan ekstensi — beberapa wajib ada agar halaman tetap AMP valid. Artikel ini menjelaskan penyebab, solusi praktis, dan contoh kode yang aman untuk digunakan di template AMP Blogger.
Kenapa Lighthouse Menandai "Unused JavaScript" pada AMP?
AMP memuat runtime inti (mis. v0.js) dan berbagai ekstensi (mis. amp-ad, amp-carousel). Meskipun Lighthouse menghitungnya sebagai “unused” dalam estimasinya, beberapa file adalah bagian dari runtime AMP dan tidak boleh dihapus jika ingin tetap valid. Jadi jangan langsung menghapus file inti — fokus pada ekstensi dan widget yang tidak dipakai.
Contoh file yang sering muncul
v0.js— runtime AMP inti (wajib).amp-ad-network-adsense-impl-0.1.js— terkait iklan (berat jika banyak iklan).- Ekstensi lain:
amp-a4a.js,amp-accordion.js,amp-carousel.js, dll.
Langkah Praktis Mengurangi Beban JavaScript di Blogger AMP
1. Hapus Ekstensi AMP yang Tidak Digunakan
Cari baris <script async custom-element="..." src="https://cdn.ampproject.org/v0/....js"></script> di template Blogger kamu. Jika fitur tersebut tidak dipakai (mis. amp-accordion), aman untuk menghapus baris skripnya.
<!-- Hapus jika tidak digunakan -->
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
2. Optimalkan Pemanggilan Iklan (AMP Ads)
Iklan (Adsense/amp-ad) sering memicu pemanggilan file besar. Gunakan strategi loading agar iklan hanya dimuat saat hampir terlihat:
<amp-ad width="300" height="250"
type="adsense"
data-ad-client="ca-pub-XXXX"
data-ad-slot="XXXX"
data-loading-strategy="prefer-viewability-over-views">
</amp-ad>
Dengan data-loading-strategy="prefer-viewability-over-views", iklan akan ditunda pemuatannya sampai lebih mungkin terlihat, mengurangi beban awal halaman.
3. Kurangi Widget/Komponen yang Tidak Penting
Widget Blogspot (arsip, follower, carousel pihak ketiga) sering menambah ekstensi AMP. Evaluasi widget yang benar-benar diperlukan — hapus atau ganti jika tidak berguna.
4. Kompres CSS di <style amp-custom>
AMP hanya memperbolehkan satu blok CSS inline. Gabungkan dan kompres CSS kamu agar tidak melebihi batas ukuran dan mengurangi transfer data.
<!-- Contoh: gabungkan dan kompres CSS, masukkan ke dalam <head> template -->
<style amp-custom>
/* CSS kompres sederhana: hapus spasi berlebih */
.wa-container{position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;align-items:center;gap:10px}...
</style>
5. Jangan Hapus File Inti AMP
File seperti v0.js adalah bagian dari runtime AMP. Menghapusnya akan membuat halaman invalid. Fokuslah pada ekstensi dan strategi pemuatan, bukan pada runtime inti.
Lanjutan & Checklist
- 🔍 Periksa semua tag
<script async custom-element="...">— hapus yang tidak dipakai. - 📦 Kurangi jumlah unit iklan jika memungkinkan; gunakan strategi loading.
- 🧹 Bersihkan widget Blogspot yang tidak perlu (sidebar/footer yang berat).
- ⚙️ Kompres dan gabungkan CSS di
<style amp-custom>. - 📈 Setelah perubahan, jalankan kembali Lighthouse/PageSpeed untuk melihat perbaikan.
Contoh : Dua Perubahan Aman untuk dilakukan
A. Menghapus ekstensi yang tidak pakai
<!-- Sebelum: ada banyak ekstensi -->
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
<!-- Sesudah: hanya sisakan yang dipakai -->
<!-- Hapus baris di atas jika kamu tidak menggunakan accordion/carousel -->
B. Menunda pemuatan iklan (contoh amp-ad)
<amp-ad width="300" height="250"
type="adsense"
data-ad-client="ca-pub-XXXX"
data-ad-slot="XXXX"
data-loading-strategy="prefer-viewability-over-views">
</amp-ad>
Kesimpulan
Peringatan “Kurangi JavaScript yang tidak digunakan” pada blog AMP sering kali menunjukkan adanya ekstensi atau skrip tambahan — bukan runtime inti yang wajib. Langkah paling efektif di Blogger AMP adalah:
- Hapus
script custom-elementyang tidak digunakan. - Optimalkan pemuatan iklan dengan
data-loading-strategy. - Kurangi widget yang tidak perlu.
- Kompres CSS di
<style amp-custom>.
Dengan langkah tersebut, kamu akan melihat pengurangan transfer byte dan perbaikan skor performa tanpa mengorbankan validitas AMP.