Portfolio 3D yang tetap lolos Core Web Vitals
Website ini adalah studi kasusnya sendiri: scroll story Three.js yang tetap cepat dan terindeks. Semua teks dirender statis ke HTML, scene 3D dimuat belakangan, dan ada mode ringan untuk GPU lemah serta pengguna yang memilih gerakan minimal.
Stack
Dibangun dengan
Klik tiap teknologi untuk lihat fungsinya
Vite Build tool yang menghasilkan HTML statis dan bundle JavaScript kecil.
TypeScript JavaScript dengan tipe, supaya kode interaksi dan 3D lebih aman.
Three.js Library WebGL untuk semua adegan 3D, dimuat hanya saat mendekati layar.
GSAP Animasi scroll dan teks yang halus.
Lenis Smooth scroll yang tetap menghormati scroll bawaan pengguna.
Studi kasus
Dari masalah ke hasil
-
01
Masalah
Portfolio 3D biasanya berat: teks penting tersembunyi di dalam canvas, JavaScript besar menunda konten, dan HP kelas menengah tersendat. Untuk seorang SEO developer, portfolio yang lambat atau tidak terindeks langsung merusak kredibilitas.
-
02
Audit
Target ditetapkan sebelum coding: LCP ≤ 2,5 detik di 4G, unduhan awal ≤ 2,5 MB, ≥ 30 fps di HP menengah, skor Lighthouse SEO ≥ 95 dan Performance ≥ 85 di mobile.
-
03
Implementasi
Semua halaman dirender statis dari satu file content.json. Three.js dimuat sebagai chunk terpisah setelah konten tampil. Satu sistem partikel berbentuk link graph berubah menjadi globe rute karier, tanpa model atau tekstur besar. Data terstruktur Person, ProfilePage, Article, dan BreadcrumbList cocok dengan teks yang terlihat. Ada hreflang Indonesia/Inggris, sitemap, dan robots.txt yang mengatur crawler AI.
Pixel ratio dibatasi, render berhenti saat tab tidak aktif, dan jumlah partikel turun otomatis bila fps di bawah 30 selama 2 detik. Tanpa WebGL atau dengan prefers-reduced-motion, konten tetap lengkap.
-
04
Hasil
Skor Lighthouse diukur otomatis dari PageSpeed Insights setiap deploy dan ditampilkan di section Skill, jadi angkanya bisa dicek siapa saja.
Data sebelum/sesudah belum diisi.
Mau situs kayak gini?
Ceritain kebutuhanmu. Mas Toro bantu dari desain, development, sampai SEO-nya.