Optimasi Performa dan Core Web Vitals di Sitemas

Performa website adalah faktor ranking Google dan menentukan user experience. Sitemas di-design untuk performa optimal out-of-the-box. Artikel ini menjelaskan optimasi yang sudah dilakukan dan cara mempertahankannya.

Core Web Vitals

Google menggunakan 3 metrik utama untuk mengukur user experience:

Optimasi LCP

LCP mengukur berapa lama sampai konten utama terlihat.

Apa yang Sudah Dilakukan Sitemas

1. Static Site Generation — Tidak ada server-side rendering
2. Font Preloading — Critical fonts di-preload
3. Image Optimization — Astro Image component dengan lazy loading
4. Minimal JavaScript — Hampir semua rendering di server

Tips Mempertahankan LCP Bagus

1. Optimize Hero Images

# Gunakan heroImage yang sudah dioptimasi
heroImage: ./hero.webp  # WebP lebih kecil dari PNG/JPG

Rekomendasi ukuran:

• Max width: 1920px
• Format: WebP atau AVIF
• Quality: 80-85%

2. Preload Critical Images

<link 
    rel="preload" 
    href="/images/hero.webp" 
    as="image"
/>

3. Jangan Block Rendering

<!-- ❌ Render blocking -->
<script src="analytics.js"></script>

<!-- ✅ Non-blocking -->
<script defer src="analytics.js"></script>
<script async src="analytics.js"></script>

Optimasi FID/INP

FID dan INP mengukur responsivitas interaksi.

Apa yang Sudah Dilakukan Sitemas

1. Minimal Client JavaScript — Hampir semua di server
2. Code Splitting — Per-page bundles
3. Async Scripts — Third-party scripts non-blocking
4. Event Delegation — Efficient event handling

Tips Mempertahankan FID/INP Bagus

1. Lazy Load Non-Critical JS

// Jangan load langsung
import heavyLibrary from 'heavy-library';

// Load saat dibutuhkan
const button = document.querySelector('.load-feature');
button.addEventListener('click', async () => {
    const { heavyFunction } = await import('heavy-library');
    heavyFunction();
});

2. Debounce Heavy Operations

function debounce(fn, delay) {
    let timeout;
    return (...args) => {
        clearTimeout(timeout);
        timeout = setTimeout(() => fn(...args), delay);
    };
}

window.addEventListener('scroll', debounce(() => {
    // Heavy operation
}, 100));

3. Use requestIdleCallback

// Run non-critical task when browser is idle
requestIdleCallback(() => {
    // Analytics, prefetch, etc.
}, { timeout: 2000 });

Optimasi CLS

CLS mengukur stabilitas layout — apakah elemen “melompat”.

Apa yang Sudah Dilakukan Sitemas

1. Reserved Space untuk Ads — Container dengan min-height
2. Font Display Swap — Tidak ada invisible text
3. Image Dimensions — Width/height attributes
4. Skeleton Loading — Placeholder saat loading

Tips Mempertahankan CLS Bagus

1. Selalu Set Dimensi Image

<!-- ✅ Bagus -->
<img src="photo.jpg" width="800" height="600" alt="..." />

<!-- ❌ Menyebabkan layout shift -->
<img src="photo.jpg" alt="..." />

Dengan Astro Image component, ini otomatis:

<Image src={myImage} alt="..." />

2. Reserve Space untuk Dynamic Content

.ad-container {
    min-height: 250px;  /* Reserve space */
    contain: layout;     /* Isolate layout */
}

.lazy-component {
    min-height: 300px;
    aspect-ratio: 16 / 9;
}

3. Avoid Injecting Content Above Existing

// ❌ Menyebabkan shift
element.insertBefore(newContent, existingContent);

// ✅ Tidak menyebabkan shift (di bawah viewport)
element.appendChild(newContent);

Optimasi Asset

Image Optimization

Sitemas menggunakan Astro Image untuk optimasi otomatis:

---
import { Image } from 'astro:assets';
import heroImage from './hero.jpg';
---

<Image 
    src={heroImage}
    alt="Hero image"
    width={1200}
    quality={85}
    format="webp"
    loading="lazy"
/>

Font Optimization

Sitemas self-host fonts untuk performa:

@font-face {
    font-family: 'Google Sans';
    src: url('/fonts/GoogleSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;  /* Prevent FOIT */
}

Preload critical fonts:

<link 
    rel="preload" 
    href="/fonts/GoogleSans-Regular.woff2" 
    as="font" 
    type="font/woff2"
    crossorigin
/>

JavaScript Bundle Size

Sitemas menjaga bundle size minimal:

Tips menjaga bundle kecil:

• Avoid large libraries
• Tree-shake imports
• Use native APIs when possible

Caching Strategy

Static Assets

Assets dengan hash di filename (immutable):

# /_astro/* files
Cache-Control: public, max-age=31536000, immutable

# /fonts/* files
Cache-Control: public, max-age=31536000, immutable

HTML Pages

HTML bisa di-cache dengan revalidation:

Cache-Control: public, max-age=0, must-revalidate

Monitoring Performa

PageSpeed Insights

1. Buka PageSpeed Insights
2. Masukkan URL
3. Review score dan recommendations

Target scores:

• Performance: 90+
• Accessibility: 90+
• Best Practices: 90+
• SEO: 90+

Lighthouse CI

Automate testing dengan Lighthouse CI:

module.exports = {
    ci: {
        collect: {
            url: ['http://localhost:4321/'],
            startServerCommand: 'npm run preview',
        },
        assert: {
            assertions: {
                'categories:performance': ['error', { minScore: 0.9 }],
                'categories:accessibility': ['error', { minScore: 0.9 }],
                'categories:seo': ['error', { minScore: 0.9 }],
            },
        },
    },
};

Real User Monitoring

Untuk data real users, gunakan:

• Vercel Analytics — Built-in jika deploy di Vercel
• Cloudflare Web Analytics — Gratis, privacy-friendly
• Google Analytics — Web Vitals report

Checklist Performa

Sebelum deploy ke production:

• Semua images menggunakan Astro Image component
• Hero images di-preload
• Fonts di-self-host dan preload
• Third-party scripts async/defer
• Ads container punya min-height
• Tidak ada render-blocking resources
• PageSpeed score 90+ di semua kategori
• CLS < 0.1
• LCP < 2.5s

Troubleshooting

LCP Lambat

CLS Tinggi

FID/INP Lambat

Langkah Selanjutnya

Dokumentasi sudah hampir lengkap! Lihat troubleshooting:

Kesimpulan

Performa adalah feature. Sitemas memberikan fondasi performa yang solid:

1. Static generation — Tidak ada SSR latency
2. Optimized assets — Images, fonts, JS minimal
3. Modern CSS — No heavy CSS frameworks
4. Edge-ready — Deploy ke CDN global

Tugas Anda adalah menjaga performa saat menambahkan konten:

• Optimize images sebelum upload
• Limit third-party scripts
• Test dengan PageSpeed secara berkala

Dengan pendekatan ini, website Sitemas Anda akan tetap cepat seiring pertumbuhan konten.