## Kenapa Performance Itu Penting? Website yang lemot itu pain banget. User bakal kabur, conversion rate turun, dan SEO ranking juga kena impact. Research nunjukin kalau 40% user bakal ninggalin website yang loading-nya lebih dari 3 detik. Plus, sejak 2021, Google udah make performance sebagai ranking factor lewat Core Web Vitals. Jadi bukan cuma soal UX, tapi juga SEO. ### Analogi Sederhana Bayangin website kamu itu kayak **mobil**: - **Fast load time** = mobil yang langsung nyala dan akselerasi cepat (ga nunggu lama) - **Slow load time** = mobil tua yang susah start, akselerasi lemot - **Code splitting** = efficient fuel consumption (ga buang resources) - **Lazy loading** = mobil cuma consume bensin yang diperluin saat itu - **Large bundles** = mobil overload muatan, jadi berat dan lambat - **Optimized images** = streamlined design, aerodynamic (ga ada excess weight) User modern expect website load **instantly** (< 2 detik). Kalau lambat, mereka langsung pindah ke competitor. Just like kalau mobil kamu ga jalan, ya kamu pindah ke Grab/Gojek. ## Benefits dengan Angka Konkret Performance optimization bukan cuma "feels better"—ada impact terukur ke business metrics: ### Conversion & Revenue - **1 second delay** = **7% reduction** in conversions (Amazon study) - **0.1 second improvement** = **1% increase** in revenue (Walmart) - **100ms faster** = **1% more conversions** (Mobify) - **40% users abandon** website > 3 seconds load time ### SEO & Traffic - **2x better SEO ranking** dengan Core Web Vitals optimization - **53% mobile users leave** site > 3 seconds (Google) - **50% increase** in organic traffic post-performance optimization - **Page speed** adalah ranking factor sejak 2021 (Core Web Vitals) ### User Experience - **70% users** say page speed affects purchase decisions - **88% users** less likely to return after bad experience - **50% reduction** in bounce rate dengan 1-second improvement - **3x higher engagement** pada fast sites vs slow sites ### Real-World Examples - **Pinterest** - 40% decrease load time = **15% increase** in sign-ups & traffic - **BBC** - Every additional second = **10% lost users** - **AutoAnything** - 50% faster = **12-13% increase** in sales - **Mobify** - Homepage 1.1s faster = **1.11% increase** in revenue ## Core Web Vitals: 3 Metrik yang Wajib Kamu Tahu Google punya 3 metrik utama buat ngukur performance website di 2025: ### 1. Largest Contentful Paint (LCP) **Target: < 2.5 detik** LCP ngukur seberapa cepat konten terbesar di page kamu muncul. Bisa jadi gambar, video, atau text block yang gede. **Cara optimasi:** - Optimize gambar (pakai format WebP atau AVIF) - Implement lazy loading buat gambar below the fold - Pakai CDN buat asset statis - Server-side rendering atau static generation ```javascript // Good: Lazy loading images

``` ### 2. Interaction to Next Paint (INP) **Target: < 200 ms** INP ini metrik baru yang gantiin First Input Delay (FID) sejak Maret 2024. Bedanya, INP ngukur **semua interaksi** user selama browsing, bukan cuma interaksi pertama. **Cara optimasi:** - Minimize JavaScript execution time - Break long tasks jadi chunks lebih kecil - Pakai web workers buat heavy computation - Defer atau async non-critical scripts ```javascript // Good: Defer non-critical scripts // Better: Async for independent scripts ``` ### 3. Cumulative Layout Shift (CLS) **Target: < 0.1** CLS ngukur visual stability. Pernah ga sih lagi mau klik tombol, eh tiba-tiba konten shift ke bawah gara-gara ada gambar yang baru load? Nah, itu CLS. **Cara optimasi:** - Selalu kasih width dan height di image tags - Reserve space buat ads atau embeds - Hindari insert content di atas existing content - Pakai CSS aspect ratio ```css /* Reserve space with aspect ratio */ .image-container { aspect-ratio: 16 / 9; width: 100%; } .image-container img { width: 100%; height: 100%; object-fit: cover; } ``` ## Kapan Harus Prioritas Performance? Performance optimization itu penting untuk semua website, tapi ini situasi yang **CRITICAL**: ### 1. E-commerce/Checkout Flow **Priority: CRITICAL** - 1 second delay = 7% conversion loss - Cart abandonment highly correlated dengan slow load - Mobile users especially impatient saat checkout - Payment pages HARUS fast (trust issue) **Impact:** Direct revenue loss kalau lambat **Quick wins:** - Optimize product images - Lazy load below-the-fold content - Pre-fetch next page in checkout flow - Remove unnecessary scripts from checkout ### 2. Mobile-First Sites (60%+ Mobile Traffic) **Priority: CRITICAL** - Mobile users pada slow networks (3G/4G) - Smaller screen = less patience - Google mobile-first indexing (mobile performance = SEO) - Mobile conversion 3x lower if slow **Focus:** - Aggressive image optimization - Code splitting aggressive - Defer non-critical JS - Use WebP/AVIF images ### 3. High-Traffic Landing Pages **Priority: HIGH** - First impression matters - Paid ads traffic = expensive clicks - Bounce rate directly affect ad quality score - SEO rankings depend on Core Web Vitals **Optimize:** - Hero images (critical LCP) - Above-the-fold content - Remove render-blocking resources - Inline critical CSS ### 4. Content-Heavy Sites (Blog, News, Media) **Priority: HIGH** - Many images/videos affect LCP - Ad scripts slow down page - Users expect fast content consumption - SEO critical untuk organic traffic **Strategy:** - Lazy load images aggressively - Optimize fonts (variable fonts, font-display: swap) - Defer ad scripts - Use CDN untuk assets ### 5. SPA/React Apps dengan Large Bundles **Priority: HIGH** - JavaScript-heavy apps slow to parse & execute - Initial load time often poor - Interaction delays (INP issues) - Bundle size grows over time **Solutions:** - Code splitting per route - Dynamic imports untuk heavy components - Tree shaking - Lazy load libraries (charts, editors, etc) ### 6. Core Web Vitals Failing **Priority: URGENT** - SEO ranking directly impacted - Google Search Console warnings - Losing traffic to faster competitors - User experience deteriorating **Action:** - Fix LCP first (biggest impact) - Then INP (interaction responsiveness) - Then CLS (visual stability) - Use PageSpeed Insights recommendations ### 7. Competitor Analysis Shows You're Slower **Priority: HIGH** - Users compare loading speed - Slower = lower conversion - SEO disadvantage - Brand perception impact **Benchmark:** - Identify competitors - Test with WebPageTest - Match atau beat their metrics - Monitor continuously ### 8. Global Audience (Slow Networks) **Priority: HIGH** - Users di emerging markets pada slow networks - Need to optimize for 3G - Larger potential market - Performance = accessibility **Optimize for:** - Minimal initial payload - Aggressive compression - Image optimization critical - Consider AMP atau lightweight version ### Skip Performance Optimization (For Now) If: - **Prototype/MVP** - Validate idea first, optimize later (tapi jangan sampai too slow) - **Internal tools** - Limited users, controlled network (tapi still aim for good UX) - **Very low traffic** - < 100 visitors/day, optimize when scaling - **Already fast** - If meeting all Core Web Vitals, focus on features instead **Rule of thumb:** If score < 90 di PageSpeed Insights, ada room untuk improvement. ## Teknik Optimasi yang Wajib Kamu Coba ### Lazy Loading: Load Only When Needed Lazy loading itu teknik buat defer loading resource yang ga langsung dibutuhin. Bisa hemat bandwidth dan initial load time. **Image lazy loading:** ```html

``` **Component lazy loading di React:** ```javascript import { lazy, Suspense } from 'react'; // Lazy load component const HeavyComponent = lazy(() => import('./HeavyComponent')); function App() { return ( Loading...}> ); } ``` ### Code Splitting: Pecah Bundle Jadi Chunks Code splitting itu teknik buat pecah JavaScript bundle jadi chunks yang lebih kecil. Research nunjukin bisa reduce load time sampai 40%. **Route-based code splitting (Next.js):** ```javascript // pages/dashboard.js otomatis di-split // Ga perlu config khusus, Next.js handle automatically // Dynamic import for conditional loading import dynamic from 'next/dynamic'; const DynamicComponent = dynamic(() => import('../components/heavy')); // Only load when needed function ConditionalRender({ showHeavy }) { return showHeavy ? : null; } ``` **Webpack code splitting:** ```javascript // Dynamic import button.addEventListener('click', async () => { const module = await import('./heavyModule.js'); module.doSomething(); }); ``` ### Image Optimization: Format dan Compression Image biasanya kontributor terbesar di page weight. Optimize ini wajib. Best practices: - Pakai format modern: WebP atau AVIF - Implement responsive images dengan srcset - Compress images (TinyPNG, Squoosh) - Pakai image CDN dengan automatic optimization ```html

``` ### Font Optimization Web fonts bisa bikin render blocking. Optimize dengan cara: ```css /* Preload critical fonts */ /* Di */ /* Use font-display untuk avoid FOIT */ @font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-display: swap; /* Show fallback immediately */ } ``` ### CSS Optimization **Teknik yang bisa dicoba:** - Remove unused CSS (PurgeCSS, UnCSS) - Inline critical CSS - Defer non-critical CSS - Minify CSS ```javascript // Critical CSS inline di // Non-critical CSS defer ``` ## Tools Buat Measure Performance ### Google PageSpeed Insights Web-based tool dari Google buat analyze performance. Kasih score dan recommendations. 🔗 https://pagespeed.web.dev/ ### Lighthouse Built-in di Chrome DevTools. Comprehensive audit untuk performance, accessibility, SEO. ```bash # Run via CLI npm install -g lighthouse lighthouse https://yoursite.com --view ``` ### WebPageTest Detailed performance testing dengan berbagai lokasi dan devices. 🔗 https://www.webpagetest.org/ ### Chrome DevTools Performance Tab Buat detailed profiling dan identify bottlenecks. **Cara pakai:** 1. Buka DevTools (F12) 2. Tab Performance 3. Record while loading page 4. Analyze timeline, bottlenecks, long tasks ## Monitoring di Production Jangan cuma test di development. Monitor real user performance. ### Web Vitals Library ```javascript import { onCLS, onINP, onLCP } from 'web-vitals'; // Log metrics ke analytics onCLS(console.log); onINP(console.log); onLCP(console.log); // Send to analytics service function sendToAnalytics(metric) { const body = JSON.stringify(metric); // Use sendBeacon if available if (navigator.sendBeacon) { navigator.sendBeacon('/analytics', body); } else { fetch('/analytics', { body, method: 'POST', keepalive: true }); } } onCLS(sendToAnalytics); onINP(sendToAnalytics); onLCP(sendToAnalytics); ``` ## Quick Wins: Implementasi Cepat dengan Impact Besar Ini optimizations yang bisa kamu implement dalam hitungan menit tapi kasih impact significant: ### 1. Compress Images dengan TinyPNG/Squoosh (10 menit) **Impact: HIGH** - Images often 50-70% of page weight **Steps:** 1. Identify large images (> 200KB) 2. Upload ke TinyPNG.com atau Squoosh.app 3. Download compressed versions (typically 60-80% smaller) 4. Replace originals 5. Convert to WebP format **Expected result:** 30-50% reduction in page weight, LCP improvement **Tools:** - [TinyPNG](https://tinypng.com) - Batch compression - [Squoosh](https://squoosh.app) - Advanced options, WebP/AVIF - ImageOptim (Mac) - Desktop app ### 2. Enable Compression - Gzip/Brotli (5 menit) **Impact: HIGH** - 70-80% reduction in file size **Next.js (automatic):** ```javascript // next.config.js module.exports = { compress: true, // Enabled by default } ``` **Vercel/Netlify:** Automatic **Nginx:** ```nginx gzip on; gzip_types text/plain text/css application/json application/javascript text/xml; gzip_min_length 1000; ``` **Expected result:** 50-70% smaller HTML/CSS/JS files ### 3. Add Native Lazy Loading (5 menit) **Impact: MEDIUM-HIGH** - Defer offscreen images **Before:** ```html Description

``` **After:** ```html Description

``` **Apply to:** - All images below the fold - Iframes (YouTube embeds, etc.) - Not for above-the-fold/hero images **Expected result:** 20-30% faster initial load ### 4. Preconnect to External Domains (2 menit) **Impact: MEDIUM** - Save 100-500ms on external resources ```html ``` **Use for:** - Google Fonts - CDN resources - API domains - Analytics services **Expected result:** 100-300ms faster for external resources ### 5. Remove Unused CSS/JS (15 menit) **Impact: HIGH** - Reduce bundle size 30-50% **Chrome DevTools:** 1. Open DevTools → Coverage tab 2. Record page load 3. See unused code (red) 4. Remove or lazy load unused code **Tools:** - PurgeCSS - Remove unused CSS - webpack-bundle-analyzer - Find large dependencies - Chrome Coverage tab - Identify unused code **Expected result:** 30-50% smaller bundles ### 6. Use Production Build (1 menit) **Impact: CRITICAL** - 5-10x faster than dev build **Check:** ```bash # React/Next.js npm run build npm start # NOT npm run dev in production! ``` **Vercel/Netlify:** Automatic production builds **Expected result:** Minification, tree-shaking, optimizations applied ### 7. Enable Browser Caching (5 menit) **Impact: HIGH** - Instant repeat visits **Next.js (automatic):** Static assets cached for 1 year **Nginx:** ```nginx location ~* \.(jpg|jpeg|png|gif|ico|css|js|webp|svg)$ { expires 1y; add_header Cache-Control "public, immutable"; } ``` **Expected result:** Instant load for returning visitors ### 8. Defer Non-Critical JavaScript (10 menit) **Impact: HIGH** - Faster initial render **Before:** ```html ``` **After:** ```html ``` **Or load after page interactive:** ```javascript // After page load window.addEventListener('load', () => { // Load non-critical scripts const script = document.createElement('script') script.src = 'non-critical.js' document.body.appendChild(script) }) ``` **Expected result:** 200-500ms faster initial render ### 9. Optimize Web Fonts (10 menit) **Impact: MEDIUM** - Prevent FOIT (Flash of Invisible Text) **Before:** ```html ``` **After (with preload):** ```html ``` **CSS:** ```css @font-face { font-family: 'Inter'; font-display: swap; /* Show fallback immediately */ src: url('/fonts/inter.woff2') format('woff2'); } ``` **Next.js (best):** ```typescript import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) ``` **Expected result:** No layout shift, faster perceived load ### 10. Optimize Largest Contentful Paint (LCP) Element (15 menit) **Impact: CRITICAL** - Biggest Core Web Vital fix **Identify LCP element:** 1. PageSpeed Insights → See LCP element 2. Usually hero image atau large text block **If image:** ```html

``` **If using Next.js Image:** ```tsx

``` **Additional optimizations:** - Reduce image size (compress heavily) - Use CDN - Preload if critical - Consider WebP/AVIF format **Expected result:** LCP < 2.5s (passing threshold) ### Quick Wins Checklist (1-2 Hours Total) - [ ] Compress all images > 100KB - [ ] Enable Gzip/Brotli compression - [ ] Add `loading="lazy"` to below-fold images - [ ] Preconnect to external domains - [ ] Remove unused CSS/JS - [ ] Verify production build - [ ] Enable browser caching - [ ] Defer non-critical scripts - [ ] Optimize web fonts - [ ] Prioritize LCP element **Expected overall impact:** - **30-50%** faster load time - **20-40 point** Lighthouse score improvement - **LCP improvement** 500ms-1s - **Better Core Web Vitals** passing thresholds **Timeline:** Implement dalam 1-2 hours, see results immediately ## Framework-Specific Tips ### Next.js ```javascript // Automatic image optimization import Image from 'next/image';

// Built-in font optimization import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'] }); ``` ### React ```javascript // Memoization to prevent unnecessary re-renders import { memo, useMemo, useCallback } from 'react'; const ExpensiveComponent = memo(({ data }) => { const processedData = useMemo( () => heavyComputation(data), [data] ); return

{processedData}

; }); ``` ### Vue ```javascript // Async components const AsyncComponent = defineAsyncComponent(() => import('./HeavyComponent.vue') ); // Keep-alive for cached components ``` ## Performance Audit Checklist Comprehensive checklist untuk audit performance website secara menyeluruh: ### Core Web Vitals (Google's Requirements) - [ ] **LCP < 2.5s** - Test: PageSpeed Insights, Search Console - [ ] **INP < 200ms** - All interactions responsive - [ ] **CLS < 0.1** - No unexpected layout shifts - [ ] **First Contentful Paint (FCP) < 1.8s** - Initial content render - [ ] **Time to First Byte (TTFB) < 600ms** - Server response time ### Image Optimization - [ ] **All images compressed** - Use TinyPNG/Squoosh (target 80% compression) - [ ] **Modern formats** - WebP or AVIF (with fallbacks) - [ ] **Responsive images** - srcset for different screen sizes - [ ] **Lazy loading** - All below-fold images have `loading="lazy"` - [ ] **Dimensions specified** - width & height to prevent CLS - [ ] **Hero image optimized** - LCP element < 500KB compressed - [ ] **Alt text present** - All images (SEO + accessibility) - [ ] **CDN usage** - Images served from CDN for global performance ### JavaScript Optimization - [ ] **Code splitting** - Route-based chunks, no single large bundle - [ ] **Tree shaking** - Remove unused code - [ ] **Minification** - JS minified in production - [ ] **Bundle size < 200KB** - Initial JS bundle (gzipped) - [ ] **Dynamic imports** - Heavy components lazy loaded - [ ] **Third-party scripts deferred** - Analytics, ads loaded after main content - [ ] **No render-blocking JS** - Critical JS inline atau defer/async ### CSS Optimization - [ ] **Critical CSS inlined** - Above-fold styles in `` - [ ] **Unused CSS removed** - PurgeCSS or similar - [ ] **Minification** - CSS minified in production - [ ] **CSS size < 50KB** - Initial CSS bundle (gzipped) - [ ] **No render-blocking CSS** - Non-critical CSS deferred ### Font Optimization - [ ] **Web fonts preloaded** - Critical fonts with `` - [ ] **font-display: swap** - Prevent FOIT (Flash of Invisible Text) - [ ] **WOFF2 format** - Modern, compressed format - [ ] **Variable fonts** - Consider for multiple weights - [ ] **Font subsetting** - Only include needed characters - [ ] **System fonts as fallback** - Match metrics to prevent CLS ### Network & Caching - [ ] **Compression enabled** - Gzip or Brotli (target 70-80% reduction) - [ ] **HTTP/2 or HTTP/3** - Modern protocol for multiplexing - [ ] **Browser caching** - Long-term cache for static assets (1 year) - [ ] **CDN usage** - Global distribution for static assets - [ ] **DNS prefetch** - Preconnect to external domains - [ ] **Resource hints** - preload, prefetch untuk critical resources ### Server & Hosting - [ ] **TTFB < 600ms** - Fast server response - [ ] **Edge caching** - CDN/edge functions where applicable - [ ] **Serverless/edge** - Consider for dynamic content - [ ] **Database optimization** - Indexed queries, connection pooling - [ ] **API response caching** - Cache frequent requests ### Framework-Specific (Next.js) - [ ] **Next/Image component** - All images using optimized component - [ ] **Next/Font** - Optimized font loading - [ ] **Dynamic imports** - React.lazy for heavy components - [ ] **Static generation** - ISR or SSG where possible - [ ] **Production build** - Never deploy dev build ### Mobile Performance - [ ] **Mobile score > 90** - PageSpeed Insights mobile - [ ] **3G testing** - Test on throttled connection - [ ] **Touch targets** - Minimum 44x44px for mobile - [ ] **Viewport optimization** - No horizontal scroll, readable text - [ ] **Adaptive loading** - Load less on slow connections ### Monitoring & Analytics - [ ] **Real User Monitoring (RUM)** - Track actual user metrics - [ ] **Core Web Vitals tracking** - web-vitals library - [ ] **Error monitoring** - Catch performance regressions - [ ] **Lighthouse CI** - Automated tests in CI/CD - [ ] **Performance budgets** - Set & enforce limits ### Third-Party Scripts - [ ] **Audit all scripts** - Identify performance impact - [ ] **Async/defer attributes** - Don't block main thread - [ ] **Load after interaction** - Lazy load chat widgets, etc. - [ ] **Self-host if possible** - Reduce external dependencies - [ ] **Remove unused scripts** - Analytics, ads you don't need ### Tools untuk Audit Performance **Essential Tools (Free):** - **PageSpeed Insights** - Core Web Vitals + recommendations - 🔗 https://pagespeed.web.dev - **Lighthouse** - Comprehensive audit (built into Chrome) - DevTools → Lighthouse tab - **WebPageTest** - Detailed waterfall, multiple locations - 🔗 https://www.webpagetest.org - **Chrome DevTools Performance** - Profiling, identify bottlenecks - DevTools → Performance tab - **Chrome DevTools Coverage** - Find unused code - DevTools → Coverage tab **Image Tools:** - **TinyPNG** - Batch image compression - 🔗 https://tinypng.com - **Squoosh** - Advanced compression, format conversion - 🔗 https://squoosh.app - **ImageOptim** - Desktop app (Mac) **Bundle Analyzers:** - **webpack-bundle-analyzer** - Visualize bundle composition ```bash npm install --save-dev webpack-bundle-analyzer ``` - **Next.js Bundle Analyzer** ```bash npm install @next/bundle-analyzer ``` **Monitoring (Production):** - **web-vitals library** - Track Core Web Vitals ```bash npm install web-vitals ``` - **Google Search Console** - Real user Core Web Vitals - **Vercel Analytics** - Built-in for Vercel deploys - **Sentry** - Error + performance monitoring ### Audit Workflow **Monthly Quick Check (30 min):** 1. Run PageSpeed Insights on key pages 2. Check Core Web Vitals in Search Console 3. Review slow pages in Analytics 4. Fix top 3 issues **Quarterly Deep Dive (2-3 hours):** 1. Full Lighthouse audit all pages 2. WebPageTest with multiple locations 3. Bundle analyzer for size optimization 4. Third-party script audit 5. Mobile performance testing (real device) 6. Competitor benchmarking **Continuous Monitoring:** - Setup Lighthouse CI in deployment pipeline - Track Core Web Vitals dengan RUM - Alert on performance regressions - Review monthly performance reports ### Performance Budget Set limits dan enforce: ```javascript // Example performance budget { "budget": { "LCP": 2500, // ms "INP": 200, // ms "CLS": 0.1, // score "FCP": 1800, // ms "TTFB": 600, // ms "totalSize": 500, // KB (initial load) "jsSize": 200, // KB "cssSize": 50, // KB "imageSize": 200 // KB } } ``` **Enforce in CI:** ```bash # Lighthouse CI with budgets lhci autorun --collect.numberOfRuns=3 --assert.preset=lighthouse:recommended ``` ### Priority Order **Week 1: Low-Hanging Fruit** 1. Compress images (biggest impact) 2. Enable compression (Gzip/Brotli) 3. Add lazy loading 4. Use production build **Week 2: Core Web Vitals** 5. Optimize LCP element 6. Fix CLS issues (add dimensions) 7. Reduce INP (defer heavy JS) 8. Improve TTFB (server optimization) **Week 3: Advanced** 9. Code splitting aggressive 10. Remove unused code 11. Optimize fonts 12. Third-party script audit **Week 4: Monitoring** 13. Setup RUM tracking 14. Lighthouse CI in pipeline 15. Performance dashboards 16. Document baselines & goals ## Kesimpulan Performance optimization itu bukan one-time thing. Kamu harus consistently monitor dan improve. Start dari Core Web Vitals, implement lazy loading dan code splitting, optimize images, dan monitor real user data. Remember: **1 detik delay = 7% reduction in conversion**. Worth the effort kan? Happy optimizing!