Web Performance Cheat Sheet

Web Performance Cheat Sheet - BelajarKoding | BelajarKoding

#Core Web Vitals

Metrik-metrik penting yang diukur Google untuk menilai pengalaman pengguna pada website.

#Largest Contentful Paint (LCP)

Waktu yang dibutuhkan untuk memuat konten terbesar yang terlihat di viewport.

javascript

// Target: < 2.5s
// Mengukur: Loading performance (konten terbesar)
 
// Monitor LCP
import { onLCP } from 'web-vitals';
 
onLCP((metric) =>

html

<!-- srcset untuk different sizes -->
<img
 srcset="
  small.webp 400w,
  medium.webp 800w,
  large.webp 1200w
 "
 sizes="(max-width: 600px) 400px,
     (max-width: 900px) 800px,
     1200px"
 src="medium.webp"
 alt="Responsive image"
 loading

javascript

import dynamic from 'next/dynamic';
 
// Without SSR
const DynamicComponent = dynamic(
 () => import('../components/heavy'),
 { ssr: false }
);
 
// With loading state
const DynamicWithLoading

html

<!-- Preconnect ke external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com"

html

<!-- async: Load parallel, execute ASAP -->
<script src="analytics.js" async></script>
 
<!-- defer: Load parallel, execute after HTML parsed -->
<script src="app.js" defer></script>
 
<!-- blocking: Avoid kalo bisa -->
<script src=

javascript

import Script from 'next/script';
 
export default function Page() {
 return (
  <>
   {/* Load after page interactive */}
   <Script
    src="https://analytics.example.com/script.js"

javascript

import { useMemo } from 'react';
 
function ExpensiveComponent({ data }) {
 // Memoize expensive calculation
 const processedData = useMemo(() => {
  return data.map(item => heavyComputation(item));

javascript

import { useCallback } from 'react';
 
function Parent() {
 // Memoize function
 const handleClick = useCallback(() => {
  console.log('Clicked');
 }, []); // Function never changes
 
 return <

nginx

# nginx.conf
http {
 # Gzip compression
 gzip on;
 gzip_vary on;
 gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
 gzip_min_length 1000;
 
 # Brotli compression (better than gzip)
 brotli on;
 brotli_types text/plain text/css application/json application/javascript text/xml application/xml;

javascript

import { onCLS, onINP, onLCP, onFCP, onTTFB } from 'web-vitals';
 
function sendToAnalytics(metric) {
 // Send to your analytics service
 fetch('/analytics', {
  method: 'POST',
  body: JSON.stringify(metric),

javascript

// Measure custom timing
performance.mark('start-task');
 
// ... do something ...
 
performance.mark('end-task');
performance.measure('task-duration', 'start-task', 'end-task');
 
// Get measurements
const

Metric	Good	Needs Improvement	Poor
LCP	< 2.5s	2.5s - 4s	> 4s
INP	< 200ms	200ms - 500ms	> 500ms
CLS	< 0.1	0.1 - 0.25	> 0.25
FCP	< 1.8s	1.8s - 3s	> 3s
TTFB	< 800ms	800ms - 1.8s	> 1.8s

#Core Web Vitals

#Largest Contentful Paint (LCP)

#Interaction to Next Paint (INP)

#Cumulative Layout Shift (CLS)

#Image Optimization

#Native Lazy Loading

#Responsive Images

#Modern Format dengan Fallback

#Next.js Image Component

#Code Splitting

#Dynamic Import (Vanilla JS)

#React Lazy & Suspense

#Next.js Dynamic Import

#Route-based Code Splitting (Webpack)

#Font Optimization

#Preload Critical Fonts

#Font Display Strategy

#Next.js Font Optimization

#CSS Optimization

#Critical CSS Inline

#Remove Unused CSS

#Resource Hints

#Preconnect

#DNS Prefetch

#Preload Critical Resources

#Prefetch Future Pages

#Script Loading Strategies

#Async vs Defer

#Next.js Script Component

#React Performance

#useMemo

#useCallback

#React.memo

#Virtual Lists

#Compression

#Enable Gzip/Brotli (nginx)

#Next.js Compression

#Caching

#Cache Headers

#Service Worker Cache

#Monitoring

#Web Vitals Library

#Performance API

#Quick Wins Checklist

#Tools

#Target Metrics