# Optimasi Performa Website dengan Speed Insights dari Vercel
## Pengenalan Speed Insights
Speed Insights adalah alat dari Vercel yang membantu developer memahami performa website mereka berdasarkan data nyata dari pengguna (Real Experience Score/RES). Ini berbeda dengan simulasi lab seperti Lighthouse, karena menggunakan data langsung dari perangkat pengguna.
## Core Web Vitals
Google mendefinisikan tiga metrik utama untuk mengukur performa web, yang juga digunakan oleh Speed Insights:
* **Largest Contentful Paint (LCP):** Mengukur waktu hingga elemen terbesar di halaman tampil sepenuhnya. Target: **≤ 2.5 detik**
* **Cumulative Layout Shift (CLS):** Mengukur kestabilan visual halaman. Target: **≤ 0.1**
* **Interaction to Next Paint (INP):** Mengukur responsivitas halaman. Target: **≤ 200 ms**
* **First Contentful Paint (FCP):** Mengukur waktu hingga konten pertama muncul. Target: **≤ 1.8 detik**
* **First Input Delay (FID):** Mengukur keterlambatan respons pertama. Target: **≤ 100 ms**
* **Total Blocking Time (TBT):** Mengukur waktu blokir thread utama. Target: **≤ 800 ms**
* **Time to First Byte (TTFB):** Mengukur waktu sejak permintaan hingga respons pertama. Target: **≤ 800 ms**
## Strategi Optimasi untuk Skor 100% di Next.js dan Vercel
Berikut adalah beberapa langkah yang bisa diambil agar website Next.js mendapatkan skor performa maksimal:
### 1\. **Optimasi Largest Contentful Paint (LCP)**
* Pastikan gambar atau elemen terbesar di halaman **lazy-loaded** dengan benar.
* Gunakan komponen **next/image** untuk mengoptimalkan gambar secara otomatis.
* Pastikan server-side rendering (SSR) atau static generation (SSG) untuk halaman utama.
```javascript
import Image from 'next/image'
```
### 2\. **Mengurangi Cumulative Layout Shift (CLS)**
* Tentukan **width** dan **height** secara eksplisit untuk semua gambar dan elemen multimedia.
* Gunakan **next/image** karena otomatis memberikan placeholder.
* Pastikan iklan, iframe, dan elemen dinamis lainnya tidak menggeser tata letak secara mendadak.
```javascript
```
### 3\. **Meningkatkan Interaction to Next Paint (INP)**
* Hindari penggunaan JavaScript berat yang memblokir thread utama.
* Gunakan **React.memo** dan **useCallback** untuk mencegah render ulang yang tidak perlu.
* Optimalkan event listener dan debounce input user.
```javascript
import { useCallback } from 'react';
const MyButton = ({ onClick }) => {
const handleClick = useCallback(() => {
onClick();
}, [onClick]);
return ;
};
```
### 4\. **Mempercepat First Contentful Paint (FCP)**
* Aktifkan **server-side rendering** (SSR) atau **static generation** (SSG).
* Gunakan font-display: swap untuk menghindari blank teks saat memuat font.
```css
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2');
font-display: swap;
}
```
### 5\. **Mengurangi Total Blocking Time (TBT)**
* Hindari **third-party scripts** yang berat.
* Split kode dengan **dynamic import** di Next.js.
```javascript
import dynamic from 'next/dynamic';
const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), {
ssr: false,
});
export default function Page() {
return ;
}
```
### 6\. **Mengoptimalkan Time to First Byte (TTFB)**
* Gunakan **Vercel Edge Functions** untuk server-side rendering yang lebih cepat.
* Aktifkan **caching** untuk mengurangi waktu respon server.
```javascript
export const config = {
runtime: 'edge',
};
```
## Contoh Full Code
```typescript
import Image from 'next/image';
import Head from 'next/head';
export default function Home() {
return (
Optimized Next.js Page
Welcome to Optimized Next.js!
Blazing fast, with perfect scores 🚀
Key Features
Lazy-loaded images
Server-side rendering (SSR)
Optimized fonts with font-display: swap
Dynamic imports to reduce blocking time
Edge caching for faster TTFB
);
}
// Performance-focused config
export const config = {
runtime: 'edge',
};
```
## Memantau Performa di Vercel
Setelah optimasi, gunakan **Speed Insights** di Vercel untuk memantau performa real-time.
1. Deploy website ke Vercel.
2. Buka proyek di Vercel → **Speed Insights**.
3. Perhatikan **Real Experience Score** dan metrik Core Web Vitals.
4. Lakukan iterasi berdasarkan data pengguna nyata.
## Kesimpulan
Mencapai performa 100% di Next.js dan Vercel membutuhkan kombinasi strategi optimasi di server-side, client-side, dan visual. Dengan memahami dan memperbaiki Core Web Vitals serta menggunakan Speed Insights, kamu bisa memberikan pengalaman terbaik bagi pengguna.
Mulai optimasi websitemu sekarang dan pantau hasilnya dengan Speed Insights! ✨