Belajar Performance Test Engineer - Frontend & Web Performance

#Pendahuluan

Setelah di episode 7 kita menguji API dan database performance dari sisi server, kini saatnya melihat performa dari perspektif yang sering terlupakan: sisi client. Frontend performance menentukan bagaimana user benar-benar mengalami aplikasi — bukan berapa lama server merespons, melainkan berapa lama user harus menunggu sampai bisa berinteraksi.

Google menggunakan Core Web Vitals sebagai ranking factor untuk SEO — yang berarti frontend performance bukan hanya soal user experience, tetapi juga soal visibilitas bisnis. Episode ini membawa kalian memahami metrik frontend, menjalankan audit, dan mengoptimasi performa dari sisi client.

#Core Web Vitals

Core Web Vitals adalah tiga metrik utama yang diukur Google untuk menentukan kualitas user experience di web. Di 2026, ketiga metrik ini menjadi standar industri.

#Largest Contentful Paint (LCP)

LCP mengukur waktu yang dibutuhkan untuk menampilkan konten terbesar (biasanya hero image atau heading besar) di viewport. LCP adalah indikator utama loading performance.

Good: LCP ≤ 2.5 detik
Needs Improvement: 2.5 - 4.0 detik
Poor: LCP > 4.0 detik

#Interaction to Next Paint (INP)

INP mengukur latency dari interaksi user (klik, tap, keyboard) sampai visual update berikutnya. INP adalah indikator utama interactivity — menggantikan First Input Delay (FID) di 2024.

Good: INP ≤ 200ms
Needs Improvement: 200 - 500ms
Poor: INP > 500ms

#Cumulative Layout Shift (CLS)

CLS mengukur seberapa banyak layout berpindah secara tidak terduga selama halaman dimuat. CLS adalah indikator utama visual stability — elemen yang berpindah saat user mencoba mengklik tombol adalah pengalaman yang menjengkelkan.

Good: CLS ≤ 0.1
Needs Improvement: 0.1 - 0.25
Poor: CLS > 0.25

#Lighthouse Audit

Google Lighthouse adalah tool audit web yang mengukur performance, accessibility, best practices, dan SEO. Lighthouse menghasilkan skor 0-100 dan rekomendasi spesifik untuk perbaikan.

#Menjalankan Lighthouse

bash

# Install Lighthouse CLI
npm install -g lighthouse
 
# Jalankan audit
lighthouse https://example.com --output html --output-path report.html

#Interpretasi Hasil

Lighthouse memberikan metrik dan rekomendasi. Fokus pada:

Performance score: angka 0-100; ≥90 adalah good.
Opportunities: rekomasi spesifik untuk mempercepat (misal "Reduce unused JavaScript").
Diagnostics: metrik tambahan yang bisa diperbaiki (misal "Minimize main thread work").

#Lighthouse CI

Untuk mengintegrasikan Lighthouse ke CI/CD:

yaml

# Lighthouse CI config (lighthouserc.js)
module.exports = {
  ci: {
    collect: {
      url: ['https://staging.example.com'],
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
      },
    },
  },
};

#Browser Performance Profiling

#Chrome DevTools Performance Panel

Performance panel di Chrome DevTools merekam seluruh aktivitas halaman: rendering, scripting, dan painting. Kalian bisa melihat:

Main thread activity: script mana yang memakan waktu terlama
Layout thrashing: layout yang dihitung berulang kali
Long tasks: task yang memblok main thread lebih dari 50ms

#Web Vitals Extension

Install ekstensi Web Vitals di Chrome untuk melihat LCP, INP, dan CLS secara real-time saat browsing. Ini membantu kalian memahami bagaimana setiap halaman berperforma dari perspektif user.

#Strategi Optimasi Frontend

#Lazy Loading

Lazy loading menunda loading resource yang tidak dibutuhkan segera — images di bawah fold, scripts yang belum dipakai. Ini mengurangi LCP dengan fokus pada konten yang terlihat pertama kali.

html

<!-- Lazy load images -->
<img src="hero.jpg" alt="Hero" />
<img src="below-fold.jpg" alt="Content" loading="lazy" />
 
<!-- Lazy load scripts -->
<script src="analytics.js" defer></script>

#Code Splitting

Code splitting memecah JavaScript bundle menjadi chunk yang lebih kecil — user hanya mengunduh kode yang dibutuhkan untuk halaman yang sedang dikunjungi. Ini mengurangi Time to Interactive dan INP.

#Image Optimization

Images adalah penyebab terbesar LCP yang buruk. Optimasi:

Gunakan format modern: WebP atau AVIF daripada JPEG/PNG
Compress images: kurangi ukuran tanpa mengorbankan kualitas visual
Responsive images: srcset untuk mengirim ukuran yang tepat sesuai device

html

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Product" width="800" height="600" />
</picture>

#Caching Strategy

Browser caching yang baik mengurangi loading time untuk repeat visitors:

plaintext

# Cache-Control header
Cache-Control: public, max-age=31536000, immutable  # Static assets
Cache-Control: no-cache  # HTML pages

#Mengukur Frontend Performance dengan k6

k6 bisa menguji backend performance dari sisi server, tetapi untuk frontend performance kalian membutuhkan browser-based testing. k6 punya modul browser yang menjalankan browser automation:

javascript

import { browser } from 'k6/browser';
import { check } from 'k6';
 
export const options = {
  scenarios: {
    browser: {
      executor: 'constant-vus',
      vus: 10,
      duration: '1m',
      options: { browser: { type: 'chromium' } },
    },
  },
};
 
export default async function () {
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.waitForLoadState('networkidle');
  const lcp = await page.evaluate(() => {
    return new Promise((resolve) => {
      new PerformanceObserver((list) => {
        const entries = list.getEntries();
        resolve(entries[entries.length - 1].startTime);
      }).observe({ type: 'largest-contentful-paint', buffered: true });
    });
  });
  check(null, { 'LCP < 2500ms': () => lcp < 2500 });
  await page.close();
}

#Penutup

Di episode 8 ini kalian telah memahami frontend & web performance:

Core Web Vitals: LCP (loading), INP (interactivity), CLS (visual stability).
Lighthouse: audit performance dengan skor 0-100; integrasi CI/CD.
Optimasi: lazy loading, code splitting, image optimization, caching.
Browser testing: k6 browser module untuk mengukur Web Vitals secara real-time.

Di episode 9 selanjutnya, kita akan membahas Monitoring & Metrics — bagaimana memantau performa selama load test menggunakan Grafana, Prometheus, dan observability tools lainnya. Siapkan stack monitoring kalian!