- 8 Sections
- 46 Lessons
- Lifetime
Expand all sectionsCollapse all sections
- Modul 1: Fondasi & Psikologi Kecepatan Web3
- 1.11.1 Kenapa Speed Penting? Analisis data korelasi antara loading time terhadap conversion rate dan bounce rate.
- 1.21.2 Anatomi Browser: Bagaimana Chrome/Firefox membaca URL hingga merender visual (DNS Lookup, TCP Handshake, SSL Global).
- 1.31.4 Terminologi Performa: Perbedaan antara Latency, Bandwidth, dan Throughput.
- Modul 2: Menguasai Tools Pengukuran (The Diagnostics)6
- 2.12.1 Google Lighthouse vs PageSpeed Insights: Cara membaca data Lab vs data Field (CrUX).
- 2.22.2 Chrome DevTools Deep Dive:
- 2.3Network Tab: Mengidentifikasi file “gemuk” yang menghambat loading.
- 2.4Performance Tab: Menganalisis Long Tasks dan aktivitas Main Thread.
- 2.52.3 GTmetrix & WebPageTest: Melakukan pengujian dari berbagai lokasi server di seluruh dunia.
- 2.62.4 Audit Report: Cara membuat laporan profesional untuk klien atau atasan.
- Modul 3: Optimasi Core Web Vitals (The Big Three)9
- 3.13.1 Largest Contentful Paint (LCP):
- 3.2Teknik Preloading critical images.
- 3.3Optimasi Server Response Time.
- 3.43.2 Interaction to Next Paint (INP):
- 3.5Mengidentifikasi hambatan interaksi.
- 3.6Mengurangi eksekusi JavaScript yang berat pada Main Thread.
- 3.73.3 Cumulative Layout Shift (CLS):
- 3.8Menetapkan aspek rasio gambar (Aspect Ratio).
- 3.9Mencegah pergeseran konten akibat iklan atau font yang terlambat dimuat.
- Modul 4: Optimasi Aset Visual (Image & Video)4
- 4.14.1 Format Masa Depan: Migrasi dari JPEG/PNG ke WebP dan AVIF.
- 4.24.2 Responsive Images: Menggunakan srcset dan agar gambar menyesuaikan ukuran layar (Mobile vs Desktop).
- 4.34.3 Smart Lazy Loading: Cara menerapkan Lazy Load tanpa merusak skor LCP (Eager vs Lazy).
- 4.44.4 SVG Optimization: Membersihkan kode XML pada logo dan ikon agar lebih ringan.
- Modul 5: Optimasi Kode (CSS & JavaScript)8
- 5.15.1 Minifikasi & Kompresi: Implementasi Gzip dan Brotli pada sisi server.
- 5.25.2 CSS Optimization:
- 5.3Ekstraksi Critical CSS (Inline CSS untuk konten Above the Fold).
- 5.4Menghapus Unused CSS secara otomatis.
- 5.55.3 JavaScript Optimization:
- 5.6Strategi Async vs Defer.
- 5.7Code Splitting dan Tree Shaking.
- 5.8Menangani Third Party Script (GTM, FB Pixel, Chatbot) menggunakan Web Workers (Partytown).
- Modul 6: Infrastruktur Server & Caching7
- 6.16.1 Time To First Byte (TTFB): Memilih hosting yang tepat dan konfigurasi PHP/Database.
- 6.26.2 Advanced Caching:
- 6.3Browser Caching via .htaccess atau Nginx.
- 6.4Object Caching menggunakan Redis untuk website dinamis.
- 6.56.3 Content Delivery Network (CDN):
- 6.6Konfigurasi Cloudflare (Auto Minify, Polish, Rocket Loader).
- 6.7Edge Caching untuk memangkas jarak data ke user.
- Modul 7: Studi Kasus Khusus (WordPress & Framework)6
- 7.17.1 WordPress Speed Mastery:
- 7.2Konfigurasi plugin premium: WP Rocket, Perfmatters, atau LiteSpeed Cache.
- 7.3Database Cleanup & Heartbeat Control.
- 7.47.2 Modern Stack (React/Next.js):
- 7.5Optimasi next/image dan next/font.
- 7.6Strategi Static Site Generation (SSG) vs Incremental Static Regeneration (ISR).
- Modul 8: Maintenance & Monitoring3
1.2 Anatomi Browser: Bagaimana Chrome/Firefox membaca URL hingga merender visual (DNS Lookup, TCP Handshake, SSL Global).
Next