Belajar Svelte - Content Security & Performance

#Pendahuluan

Halaman yang cepat dan aman bukanlah dua hal terpisah. Strategi caching yang baik mengurangi beban server, sementara Content Security Policy memblokir skrip berbahaya sebelum sempat berjalan. Keduanya butuh konfigurasi yang disengaja.

Episode ini membahas Content Security Policy dan secure headers, strategi caching dan optimasi resource, optimasi gambar dengan lazy loading, serta cara memantau performa jaringan.

Setelah selesai, kalian bisa mengunci halaman dari sumber daya yang tidak dikenal sekaligus membuat pemuatannya lebih cepat. Keamanan dan performa yang dibahas di sini saling menguatkan, bukan bertentangan.

#Content Security Policy dan Secure Headers

#Apa itu CSP

CSP memberi tahu browser sumber mana yang boleh dimuat — skrip, style, gambar, dan lainnya. Skrip dari domain lain yang tidak terdaftar akan diblokir, sehingga serangan injeksi seperti XSS kehilangan alat utamanya.

SvelteKit menyediakan konfigurasi CSP bawaan lewat kit.csp di svelte.config.js:

CSP via svelte.config.js

const config = {
  kit: {
    csp: {
      mode: "auto",
      directives: {
        "default-src": ["self"],
        "script-src": ["self"],
        "img-src": ["self", "https://cdn.example.com"],
        "style-src": ["self", "unsafe-inline"],
      },
    },
  },
}
 
export default config

"script-src": ["self"] melarang skrip dari luar domain aplikasi. mode: "auto" menambahkan nonce secara otomatis untuk skrip yang sah, sehingga kalian tidak perlu mengedit HTML secara manual.

#Header Keamanan Lain

Selain CSP, ada beberapa header yang layak dipasang: Strict-Transport-Security memaksa HTTPS, X-Content-Type-Options: nosniff mencegah MIME sniffing, dan Referrer-Policy membatasi informasi yang bocor lewat referrer. Di banyak platform hosting, header ini dikonfigurasi di panel atau file konfigurasi khusus.

#Caching Strategies dan Resource Optimization

#Cache-Control di Endpoint

Cache yang disengaja membuat pengguna kembali tanpa harus memuat ulang semuanya. Untuk data yang jarang berubah, setel header Cache-Control di endpoint server:

Cache header pada endpoint JSON

export function GET() {
  const laporan = { versi: 3, disusun: "2026-08-10" }
  return new Response(JSON.stringify(laporan), {
    headers: {
      "Cache-Control": "public, max-age=3600, stale-while-revalidate=60",
    },
  })
}

public, max-age=3600 mengizinkan cache selama satu jam. stale-while-revalidate=60 melayani versi lama sambil memperbarui di latar belakang — kombinasi yang membuat UI terasa cepat tanpa mengorbankan kesegaran data.

#Optimasi Resource

Bundle JavaScript adalah sumber daya terberat. Potong librari yang tidak terpakai, dukung tree-shaking dengan named import, dan hanya muat polyfill yang benar-benar dibutuhkan. Aset kecil juga bisa disisipkan sebagai inline untuk mengurangi jumlah request.

#Image Optimization dan Lazy Loading

#Lazy Loading di Browser

Gambar adalah aset terbesar di sebagian besar halaman. Muat hanya gambar yang mendekati area pandang:

<img
  src="/series/tutorial/hero.png"
  alt="Ilustrasi hero"
  loading="lazy"
  decoding="async"
  width="1200"
  height="630"
/>

loading="lazy" menunda unduhan gambar sampai mendekati area pandang. decoding="async" memungkinkan browser menampilkan konten lain sambil mendekode gambar. Menambahkan width dan height mencegah layout shift yang merusak skor performa.

#Menyediakan Banyak Resolusi

Siapkan gambar dalam beberapa ukuran dan biarkan browser memilih lewat srcset dan sizes. Gambar yang lebih kecil untuk layar kecil menghemat bandwidth seluler yang mahal.

#Monitoring Network Performance

#Ukur dengan Navigation Timing API

Browser mencatat setiap tahap pemuatan halaman. Kalian bisa membaca datanya langsung dari performance.getEntriesByType("navigation"):

Baca metrik waktu dari browser

export function ukurWaktu() {
  const entry = performance.getEntriesByType("navigation")[0]
  return {
    ttfB: entry.responseStart - entry.requestStart,
    domComplete: entry.domComplete,
  }
}

performance.getEntriesByType("navigation") mengembalikan catatan navigasi. Metrik seperti Time to First Byte dan domComplete memberi gambaran kasar, dan bisa dikirim ke backend untuk dilaporkan.

Lighthouse dan panel Network di DevTools adalah alat visual untuk menangkap request yang lambat atau tidak perlu. Gabungkan keduanya dengan monitoring real user yang dibahas di episode 22.

#Penutup

Inti yang harus dibawa pulang:

• Pasang CSP dengan daftar sumber yang ketat untuk memblokir skrip berbahaya.
• Manfaatkan kit.csp bawaan SvelteKit dengan mode nonce otomatis.
• Setel Cache-Control yang disengaja di endpoint server.
• Gunakan lazy loading dan decoding="async" untuk gambar di bawah lipatan.
• Sediakan srcset untuk berbagai ukuran layar.
• Pantau waktu pemuatan dengan Navigation Timing API dan DevTools.

Di episode 15 selanjutnya kita akan membahas performance optimization — profiling dengan alat browser dan benchmark, meminimalkan bundle dengan tree-shaking, mengurangi runtime overhead dan biaya reaktivitas, serta lazy loading komponen dan code splitting. Kebiasaan mengukur dulu, baru mengoptimalkan, akan menjadi tema utamanya.