Performa dan Keamanan Website Statis Modern

Oleh Sugeng 5 Sep 2026

Website statis modern lebih cepat dan aman dari website dinamis, tetapi tetap memerlukan optimasi performa dan langkah keamanan yang tepat. Artikel ini membahas cara mengoptimasi performa dan mengamankan website statis modern yang dihosting di GitHub dan Vercel.

Pengertian Performa dan Keamanan Website Statis

Meskipun website statis secara alami lebih cepat dan aman dibanding website dinamis, optimasi lebih lanjut masih diperlukan untuk pengalaman pengguna yang terbaik dan perlindungan terhadap serangan canggih.

Mengapa Perlu Optimasi Lebih Lanjut?

  • Core Web Vitals: Google mengukur performa melalui LCP, FID, CLS
  • Peringkat SEO: Website lambat mendapat peringkat lebih rendah
  • Pengalaman Pengguna: Pengguna meninggalkan website yang lambat
  • Keamanan CDN: CDN bisa menjadi target serangan DDoS
  • Supply Chain: Dependency yang terinfeksi bisa mengompromikan website

Alat yang Dibutuhkan

  • Website statis yang sudah di-deploy di Vercel/GitHub
  • Akses ke GitHub dan Vercel Dashboard
  • Lighthouse (gratis di Chrome DevTools)
  • Tidak perlu server khusus

Optimasi Performa

1. Image Optimization

tsx
// Next.js Image Optimization
import Image from 'next/image';

<Image
  src="/m.png"
  alt="Masyarakat Logo"
  width={56}
  height={56}
  priority
  placeholder="blur"
  blurDataURL="data:image/svg+xml;base64,..."
/>

// Gambar hero dengan responsive sizes
<Image
  src="/og.png"
  alt="Masyarakat Banner"
  width={1200}
  height={630}
  sizes="(max-width: 768px) 100vw, 50vw"
  quality={90}
/>

Format modern:

bash
# Konversi semua gambar ke WebP/AVIF
# Next.js otomatis menggunakan format modern

2. Code Splitting dan Lazy Loading

tsx
// Lazy load komponen berat
import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), {
  ssr: false,
  loading: () => <p>Loading...</p>,
});

// Lazy load images di bawah fold
import Image from 'next/image';
<Image src="/footer-bg.jpg" loading="lazy" alt="Footer" />

3. Font Optimization

css
/* Font display swap untuk font yang lebih cepat */
@font-face {
  font-family: 'Geist';
  src: url('https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

/* Preload font kritis */
<link rel="preload" href="/fonts/Geist-Regular.woff2" as="font" type="font/woff2" crossorigin>

4. CSS Optimization

css
/* Tailwind CSS purge */
// next.config.js
module.exports = {
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production',
  },
};

// Critical CSS inline
// .next/optimized.css (hanya CSS yang diperlukan untuk above-the-fold)

5. Caching Strategy

javascript
// vercel.json — Cache headers
{
  "headers": [
    {
      "source": "/images/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" },
        { "key": "Content-Type", "value": "image/webp" }
      ]
    },
    {
      "source": "/static/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/(.*).html",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=0, must-revalidate" }
      ]
    }
  ]
}

6. CDN Optimization

Vercel secara otomatis menggunakan CDN global:

kode
Vercel CDN: 30+ lokasi di seluruh dunia
First byte response: < 100ms
Edge caching: Otomatis

7. Core Web Vitals Optimization

MetrikTargetCara Optimasi
LCP< 2.5sImage optimization, font preload, CDN
INP< 200msCode splitting, minimize JavaScript
CLS< 0.1Resize images, reserve space for ads
FCP< 1.8sCritical CSS inline, preload
TTI< 3.8sMinimize JavaScript, code splitting

8. Audit Performa Berkala

bash
# Install Lighthouse CI
npm install -g @lhci/cli

# Run audit
lhci autorun

# Hasil akan ditampilkan dengan skor

Atau gunakan GitHub Action:

yaml
# .github/workflows/lighthouse.yml
name: Lighthouse Audit
on: [push]
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: treosh/lighthouse-ci-action@v9
        with:
          urls: 'https://masyarakat.id/'
          uploadArtifacts: true
          temporaryPublicStorage: true

Keamanan Website Statis

1. HTTPS dan Security Headers

javascript
// vercel.json — Security Headers
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        // HSTS — enforce HTTPS
        {
          "key": "Strict-Transport-Security",
          "value": "max-age=63072000; includeSubDomains; preload"
        },
        // Prevent XSS
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        // Prevent clickjacking
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        // XSS Protection
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        },
        // Content Security Policy
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'"
        },
        // Referrer Policy
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        },
        // Permissions Policy
        {
          "key": "Permissions-Policy",
          "value": "camera=(), microphone=(), geolocation=()"
        }
      ]
    }
  ]
}

2. Perlindungan DDoS

Vercel menyediakan perlindungan DDoS bawaan:

  • Rate limiting otomatis
  • Bot detection
  • Traffic analysis
  • Automatic mitigation
javascript
// vercel.json — Additional protection
{
  "crons": [
    {
      "path": "/api/health",
      "schedule": "*/1 * * * *"
    }
  ]
}

3. Amanatkan Environment Variables

bash
# Jangan pernah commit .env ke GitHub
# Gunakan Vercel Environment Variables

# Set di Vercel Dashboard
vercel env add BOT_TOKEN production
vercel env add DATABASE_URL production

4. Supply Chain Security

json
// package.json — Lock dependencies
{
  "packageManager": "[email protected]",
  "overrides": {
    "some-vulnerable-package": "^2.0.0"
  }
}
bash
# Audit dependencies berkala
npm audit
npm audit fix

# Gunakan npm ci untuk install yang deterministic
npm ci

5. GitHub Security Features

Aktifkan di GitHub repository settings:

kode
Settings → Security & Analysis:
✓ Dependabot alerts (otomatis deteksi vulnerability)
✓ Dependabot security updates (otomatis fix)
✓ Secret scanning (deteksi secret key di commit)
✓ Code scanning (analisis kode)
✓ Require signed commits

6. Monitoring Keamanan

bash
# Vercel Analytics — monitor traffic anomaly
vercel analytics

# GitHub Actions — security scan otomatis
# Setiap push menjalankan:
# - npm audit
# - Lighthouse security audit
# - Secret scanning

7. Backup dan Recovery

bash
# Backup GitHub repository
# Repository sudah menjadi backup Anda
# GitHub menyimpan seluruh riwayat commit

# Export Vercel configuration
vercel --git-deployment-url

# Backup build output
vercel build

Monitoring dan Alerting

1. Vercel Analytics

bash
# Install Vercel Analytics
npm install @vercel/analytics
tsx
// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

2. Uptime Monitoring

bash
# Uptime Robot atau Checkly
# Monitor website 24/7
# Alert jika website down

3. Performance Monitoring

javascript
// Web Vitals tracking
import { onCLS, onINP, onLCP } from 'web-vitals';

function sendToAnalytics(metric) {
  console.log(metric.name, metric.value);
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

Kesimpulan

Website statis modern yang dioptimasi dengan baik memberikan performa dan keamanan yang excellent. Dengan Vercel's CDN, security headers, image optimization, dan monitoring berkala, website Anda akan cepat, aman, dan selalu tersedia.

Kunci utama:

  • Optimasi image dengan format modern (WebP/AVIF)
  • Lazy loading dan code splitting untuk JavaScript
  • Security headers (HSTS, CSP, X-Frame-Options)
  • HTTPS dan environment variables yang aman
  • Dependabot dan npm audit untuk supply chain security
  • Monitoring performa dengan Lighthouse dan Web Vitals
  • Uptime monitoring untuk ketersediaan
  • Backup repository sebagai recovery plan
Catatan penting: Jangan pernah menempatkan secret key, API token, atau credentials di kode sumber yang di-commit ke GitHub. Selalu gunakan Environment Variables di Vercel Dashboard. Security headers harus diaktifkan sebelum website di-deploy ke produksi. Content Security Policy (CSP) perlu disesuaikan dengan kebutuhan website Anda — jika CSP terlalu ketat, beberapa fitur mungkin tidak berfungsi. Test CSP dalam mode "report-only" terlebih dahulu sebelum mengaktifkan mode enforcement penuh.
Ingat: Keamanan website adalah proses berkelanjutan, bukan satu kali setup. Ancaman keamanan berubah setiap hari, dan Anda harus selalu memperbarui dependency, memantau log, dan meninjau security headers secara berkala. Website statis memang lebih aman dari website dinamis, tetapi bukan berarti kebal terhadap serangan. Dependency yang usang, misconfiguration, dan human error tetap bisa membahayakan website Anda. Jaga kewaspadaan Anda.
Dipublikasikan untuk membantu para administrator dan developer website dalam mengoptimasi performa dan mengamankan website statis modern.

Artikel Terkait