Studi Kasus Ryandi Pratama: Pakai View Transitions API Naikkan Time on Page Portofolio Konsultan dari 47 ke 138 Detik di 2026

TL;DR: Ryandi Pratama, konsultan IT independen di Indonesia, mengaktifkan View Transitions API di portfolio Next.js untuk menggantikan hard reload antar halaman case study. Time on page rata-rata naik dari 47 detik menjadi 138 detik dalam 30 hari, dengan bounce rate turun 21 persen. Berikut breakdown teknis, hasil per halaman, dan langkah implementasi.

Dalam beberapa proyek terakhir, saya melihat pola yang sama berulang di portfolio konsultan independen. Halaman case study punya copy bagus dan visual rapi, tapi user hanya mampir 30 sampai 60 detik lalu pergi. Klik antar halaman terasa "putus" karena hard reload memotong momentum membaca.

Ryandi Pratama, konsultan IT yang pakai vitoatmo.com sebagai referensi struktur portfolio, mengalami ini. Tiga case study yang panjang dan detail, tapi user jarang pindah ke case study kedua. Setelah audit, asumsi awal adalah copy yang kurang menarik. Ternyata data berkata lain.

Diagnosis: Friction antar Halaman, Bukan Copy

Audit pakai Microsoft Clarity dan rekaman sesi menunjukkan pola spesifik. Setelah menyelesaikan satu case study, sebagian besar user scroll ke link case study berikutnya. Mereka klik, layar putih sepersekian detik, lalu halaman baru muncul dari nol. Pada momen putih itu, 4 dari 10 user keluar tab.

Hard reload menghancurkan "reading momentum". Pengalaman ini terasa seperti membaca buku lalu seseorang mencabut buku dari tangan, dan menyodorkan buku baru tanpa transisi. Praktik di UI UX modern menyebut ini sebagai "context break" yang bisa menurunkan continuity konten panjang.

Solusi: View Transitions API di App Router

Solusi yang dipilih adalah View Transitions API, fitur native browser yang menganimasikan transisi antar halaman tanpa hard reload, dengan dukungan progressive enhancement. Browser modern menampilkan animasi, browser lama jalan seperti biasa.

Implementasi di Next.js 15 App Router relatif ringkas. Yang dilakukan:

1. Bungkus root layout dengan <ViewTransition> component dari Next.js (experimental flag).
2. Aktifkan experimental.viewTransition: true di next.config.ts.
3. Tambahkan view-transition-name ke elemen utama yang harus "tetap" (foto profil, judul case study, breadcrumb).
4. CSS animation @view-transition mengontrol durasi dan easing.

Tidak ada library tambahan, tidak ada perubahan struktur file. Bundle size naik 0 KB karena API native.

Hasil dalam 30 Hari

Yang paling tidak diduga, tingkat submission form inquiry naik lebih dari dua kali lipat. Hipotesis: user yang membaca 2 sampai 3 case study secara berurutan menjadi lebih percaya pada otoritas Ryandi. Continuity konten ternyata berfungsi sebagai conversion lift, bukan sekadar polesan estetik.

Detail Teknis: Persistent Header

Bagian tersulit adalah membuat foto profil di header "terbang" mulus dari halaman A ke halaman B. Trik yang dipakai:

• Foto profil mendapat view-transition-name: ryandi-avatar di kedua halaman.
• Breadcrumb mendapat view-transition-name: breadcrumb.
• Judul case study individual mendapat view-transition-name: case-title-${slug} supaya animasi unik per case.
• Body content default fade in fade out, tanpa name.

Dengan setup ini, foto profil dan breadcrumb terasa seperti "stay in place" sementara body berubah, mirip pengalaman aplikasi native. Dokumentasi resmi tersedia di Chrome for Developers View Transitions.

Pertanyaan Umum

Apakah View Transitions API didukung semua browser?

Per Mei 2026, didukung penuh di Chromium, Safari 18+, dan Firefox 128+. Browser lama akan jalan tanpa animasi, tanpa error. Ini adalah progressive enhancement murni.

Apakah View Transitions menurunkan Core Web Vitals?

Tidak. Animasi berjalan di compositor thread, tidak memblokir main thread. Skor INP justru bisa membaik karena perceived performance naik. Validasi pakai field data dari CrUX.

Bisakah view-transition-name di-generate dinamis?

Bisa. Pakai template string di JSX seperti style={{ viewTransitionName: case-title-${slug} }} untuk membuat name unik per item. Hindari konflik dengan memastikan setiap name benar-benar unik di seluruh halaman.

Berapa lama implementasi?

Untuk situs Next.js dengan struktur rapi, 2 sampai 4 jam coding plus 1 sampai 2 jam testing. Implementasi Ryandi selesai dalam satu sore.

Apakah cocok untuk e-commerce besar?

Untuk e-commerce dengan ratusan produk, butuh strategi naming yang sistematis supaya tidak terjadi konflik view-transition-name. Mulai dari halaman dengan transisi paling penting (product detail page) lalu ekspansi bertahap.

Insight Aplikatif

Continuity matters lebih dari yang sering dianggap. Friction kecil antar halaman, seperti white flash 200 ms, terakumulasi menjadi keputusan keluar. Bagi konsultan dan personal brand di Indonesia, portfolio bukan cuma soal isi case study, tapi soal pengalaman membaca berurutan. View Transitions API adalah salah satu cara termurah untuk menaikkan continuity itu.

Untuk pembaca yang mengelola personal branding lewat website sendiri, audit dulu pola navigasi antar halaman pakai Microsoft Clarity atau Hotjar. Kalau bounce antar halaman tinggi dan time on page rendah, View Transitions layak diuji sebelum menyentuh copy.