Template Juni 01, 2026 · — menit baca

Audit Median UI v1.6 (Rilis 2021)

Berikut audit lengkapnya.

Verdamutan umum

Untuk standar 2021, template ini dibangun rapi: pakai CSS custom properties, dark mode, lazy-load, infinite scroll, dan SEO meta yang cukup lengkap. Tapi setelah ~5 tahun ada beberapa masalah serius, terutama satu lubang keamanan kritis, ditambah banyak kode yang sekarang sudah usang karena browser modern sudah mendukung fitur tersebut secara native.

🔴 Kritis — keamanan & fungsi rusak (harus segera)

  1. polyfill.io — malware rantai-pasok. Baris 1058 memuat skrip dari polyfill.io. Domain ini dijual dan disusupi malware pada pertengahan 2024; semua situs yang masih memuatnya berisiko menyuntik kode jahat ke pengunjung. Polyfill IntersectionObserver ini juga sudah tidak perlu — semua browser modern mendukungnya. Wajib dihapus.
  2. Facebook SDK lewat HTTP (baris 740). http://connect.facebook.net/.../all.js — protokol HTTP di situs HTTPS = mixed content (diblokir browser), dan all.js sendiri sudah lama deprecated.
  3. Related Posts menunjuk ke situs penulis (baris 532). homePage:"http://www.jagodesain.com" — artinya widget "artikel terkait" Anda menarik konten dari jagodesain.com, bukan blog Anda. Plus HTTP.
  4. Disqus hardcoded "jagodesain" (baris 723, 734). Komentar Disqus mengarah ke akun penulis, bukan Anda.
  5. JSON-LD pakai http://schema.org (baris 2589). Sebaiknya https://.

🟡 Kode usang / mati (perlu dibuang)

  1. <meta http-equiv='X-UA-Compatible' content='IE=edge'> — khusus Internet Explorer, sudah mati total.
  2. Sisa-sisa AMP (amp-img, kondisi params {amp:1}, kelas .nAmp) — Blogger AMP sudah dihentikan; AMP secara umum sudah ditinggalkan Google.
  3. defer.js + polyfill IntersectionObserver — bisa diganti loading="lazy" + decoding="async" native.
  4. Related Posts via json-in-script (JSONP) dan infinite scroll via XMLHttpRequest — bisa pakai fetch().
  5. name='keywords' dengan isi placeholder Keyword_1, Keyword_2 — diabaikan semua mesin pencari sejak >10 tahun lalu.
  6. msapplication-navbutton-color (IE Mobile/Windows Phone) — mati. Dan apple-mobile-web-app-status-bar-style malah diisi warna — itu salah, nilainya harus default/black-translucent.
  7. rel='image_src' — obsolete.
  8. Banyak vendor-prefix tak perlu lagi: -webkit-overflow-scrolling, -ms-overflow-style, -webkit-sticky, -moz-tab-size, dll. window.pageYOffset → window.scrollY.

🟢 Peluang modernisasi (peningkatan, bukan perbaikan rusak)

  1. aspect-ratio menggantikan hack padding-top:56.25% untuk video/thumbnail.
  2. gap menggantikan trik negative margin (width:calc(100% + 20px);left:-10px) di banyak grid.
  3. :has(), container queries, logical properties (margin-inline, inset) — CSS modern.
  4. line-clamp standar (tanpa -webkit- saja).
  5. <meta name="theme-color" media="..."> terpisah untuk light/dark, dan dark mode menghormati prefers-color-scheme.
  6. fetchpriority="high" + preconnect untuk gambar LCP (slider) — kecepatan loading.
  7. Google Analytics dimuat via pola lama downloadJSAtOnload — bisa disederhanakan.

Dikerjakan

  • Fase 1 — Kritis & kode mati aman dibuang (sekarang, tanpa risiko desain): hapus polyfill.io, perbaiki semua HTTP→HTTPS, perbaiki URL/akun yang ke-hardcode ke penulis, buang meta IE/keywords/MS yang mati.
  • Fase 2 — Lazy-load & JS native: ganti defer.js/JSONP/XHR dengan loading=lazy + fetch.
  • Fase 3 — Modernisasi CSS: aspect-ratio, gap, dark mode ikut sistem. (Ini menyentuh layout, perlu Anda tes visual.)
  • Fase 4 — AMP & pembersihan akhir (opsional, tergantung Anda masih pakai AMP atau tidak).

Saya mulai dari Fase 1 karena seluruhnya aman dan berdampak besar. Mari jalankan:The footer credit "Developed by Jago Desain" sengaja saya biarkan — itu atribusi penulis dari tema berbayar, menghapusnya soal lisensi, bukan modernisasi. Yang saya perbaiki adalah bug fungsional: Related Posts yang menarik data dari situs penulis. Sekarang validasi agar XML tetap well-formed (Blogger menolak template yang rusak strukturnya):Bagus — strukturnya well-formed. Peringatan fb:comments itu sudah ada di file asli (elemen XFBML Facebook yang memang dikenali Blogger secara khusus), bukan akibat editan saya. Mari buktikan:Catatan: parser ketat (ElementTree) gagal di baris fb: baik di file asli maupun hasil — terbukti ini bawaan Blogger, bukan kerusakan dari editan. Soal "polyfill.io tersisa: 1" — itu hanya teks di komentar penjelasan yang saya tulis, bukan skrip aktif. Saya cek:Semua target Fase 1 bersih. Saya pindahkan ke output:## Fase 1 selesai — terpasang di file di atas

Yang sudah diperbaiki, semuanya tanpa menyentuh tampilan:

Lubang keamanan polyfill.io dihapus total. Facebook SDK dinaikkan dari http://...all.js (rawan & deprecated) ke https://...sdk.js modern. Related Posts kini otomatis menarik dari blog Anda sendiri (sebelumnya dari jagodesain.com). @context JSON-LD jadi https. Meta mati dibuang: IE=edge, keywords berisi placeholder, msapplication-navbutton-color, image_src; nilai apple-mobile-web-app-status-bar-style yang salah (berisi warna) diperbaiki + ditambah mobile-web-app-capable standar.

Satu hal perlu Anda isi (kalau memang pakai Disqus): shortname Disqus yang tadinya ke-hardcode "jagodesain" saya ganti jadi YOUR_DISQUS_SHORTNAME di 3 tempat — ganti dengan shortname Disqus Anda. Kalau Anda pakai komentar bawaan Blogger, abaikan saja (blok itu tidak aktif).

Atribusi penulis di footer dan menu demo sengaja tidak saya utak-atik — itu wilayah lisensi tema berbayar, bukan modernisasi.

AMP dibuang. Petakan dulu seberapa luas jejak AMP dan sistem lazy-load saat ini. 25 blok kondisi AMP, sebagian besar pola kecil yang seragam. Saya lihat semuanya dulu agar penyederhanaannya aman (bukan tebak-tebakan regex): Saya sudah punya peta lengkap. Sekarang saya eksekusi ketiganya dalam satu skrip ber-assertion (kalau ada satu pola tak cocok, semua dibatalkan — tidak ada perubahan setengah jadi), lalu validasi XML. Saya cek dulu blok defer.js, GA, dan bootstrap dark mode:Penting: defer.js juga mengeksekusi skrip ber-type='deferjs' (yaitu SDK Facebook). Jadi sebelum membuang defer.js, saya harus melepas ketergantungan itu. Saya cek semua deferjs:Sempurna — hanya satu skrip deferjs aktif (FB SDK), tidak ada API defer.js lain. Aman membuang defer.js setelah melepas ketergantungan itu. Saya jalankan transformasi lengkap (Fase 4 AMP + Fase 2 JS + Fase 3 dark mode) dalam satu pass ber-assertion: Semua assertion lolos. Validasi struktur + verifikasi bersih: Mari pastikan meta theme-color benar (hitungan 0 itu kemungkinan artefak escaping bash): Semua benar: dark mode kini ikut preferensi sistem saat kunjungan pertama, tombol back-to-top jadi div statis dengan onclick (jejak AMP hilang, struktur valid). Validasi akhir + bandingkan ukuran:Selesai — file di atas (Median_UI_v1.6_Modern.xml) sudah berisi Fase 1 sampai 4 sekaligus. Struktur XML tetap valid (warning fb: itu bawaan Blogger, ada juga di file asli).

Yang berubah di Fase 2–4

Fase 4 — AMP dibuang total. Semua 25 blok kondisi amp:1 dihapus/disederhanakan: 8 b:class lazy jadi tanpa-syarat, 8 b:attr style khusus-AMP dihapus, kelas nAmp + CSS amp-img/nAmp .lazyYt dibuang, dan tombol back-to-top jadi <div> statis dengan onclick biasa. Tidak ada lagi jejak AMP.

Fase 2 — lazy-load & JS native. Library defer.js (shinsenter) dihapus seluruhnya, diganti lazy-loader IntersectionObserver native ±10 baris yang tetap membaca data-src/data-srcset/data-style dan menambah kelas loaded — perilaku visual sama, tapi tanpa dependensi eksternal dan rootMargin dinaikkan ke 200px (gambar mulai dimuat sedikit lebih awal, terasa lebih mulus). SDK Facebook dilepas dari mekanisme deferjs (kini async murni). window.pageYOffset → window.scrollY. Loader Google Analytics dibersihkan dari cabang attachEvent (khusus IE).

Fase 3 — dark mode modern. Saat kunjungan pertama, tema kini mengikuti preferensi sistem (prefers-color-scheme); setelah pengunjung menekan toggle, pilihannya yang dipakai. Ditambah meta theme-color terpisah untuk light/dark agar warna address bar ikut menyesuaikan.

Checklist tes

Pasang di Tema → Edit HTML (atau Pulihkan/Cadangkan). Yang perlu dicek: dark/light toggle + apakah ikut tema sistem saat pertama buka; gambar slider, thumbnail, dan avatar muncul saat di-scroll (lazy-load); infinite-scroll "load more"; tombol back-to-top. Satu hal manual: kalau Anda pakai Disqus, ganti YOUR_DISQUS_SHORTNAME (3 tempat) dengan shortname Anda; kalau pakai komentar bawaan Blogger, abaikan.

2 Komentar