Studi Kasus Yuanita Sekar: Anchor Positioning untuk Tooltip Personal Brand Pangkas 14 KB Bundle JS di 2026

TL;DR: Yuanita Sekar, klien personal branding kami, awalnya pakai Floating UI untuk tooltip CV dan dropdown navigasi di portfolio website. Setelah migrasi ke CSS Anchor Positioning native, bundle JS initial turun 14 KB dan LCP membaik 0,3 detik. Studi kasus ini menunjukkan kapan migrasi ke fitur Baseline 2026 ini worth, dan kapan tidak.

Saat audit performa portfolio Yuanita Sekar di awal Mei 2026, satu hal langsung menonjol di waterfall Network. File floating-ui.dom.umd.min.js berukuran 14 KB di-block oleh main thread di iPhone 12 mid-range. Padahal, library itu cuma dipakai untuk dua hal: tooltip ringkasan skill di hero dan dropdown navigasi di mobile.

Berdasarkan praktik standar yang saya pakai di proyek client, library positioning seperti Popper.js dan Floating UI worth dipakai untuk kasus kompleks (multi-anchor, collision detection, virtual element). Untuk tooltip statis dan dropdown sederhana, CSS Anchor Positioning sudah cukup dan jauh lebih ringan.

Kondisi Awal Portfolio Yuanita Sekar

Portfolio Yuanita Sekar adalah Next.js 15 statis dengan delapan section, dibangun untuk audience HR dan recruiter di Jakarta. Stack frontend pakai Tailwind CSS plus Framer Motion untuk page transition, sementara Floating UI dipakai untuk dua interaksi spesifik.

Metrik baseline yang kami catat sebelum migrasi meliputi initial JS bundle 156 KB minified, LCP mobile 2,1 detik di Lighthouse throttling, INP rata-rata 110 ms, dan time to first interaction 1,8 detik di koneksi 4G simulasi. Floating UI menyumbang 14 KB di bundle, sekitar 9 persen dari total.

Analisis: Apakah Floating UI Worth?

Untuk kasus Yuanita, kami daftar use case Floating UI:

Dua-duanya tergolong kasus sederhana. Migrasi ke CSS Anchor Positioning jadi pilihan logis. Bandingkan dengan Popover API yang mengatur perilaku show/hide, sementara Anchor Positioning hanya mengurus posisi geometri.

Implementasi: Tooltip Skill Hero

Kode sebelum migrasi memakai Floating UI dengan useFloating hook React, sekitar 32 baris JSX dan import library. Setelah migrasi ke CSS Anchor Positioning, jadi seperti ini.

.skill-badge {
  anchor-name: --skill-badge;
}

.skill-tooltip {
  position: absolute;
  position-anchor: --skill-badge;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;

  opacity: 0;
  transition: opacity 200ms;
}

.skill-badge:hover + .skill-tooltip,
.skill-badge:focus + .skill-tooltip {
  opacity: 1;
}

<button className="skill-badge" aria-describedby="tooltip-seo">SEO</button>
<div id="tooltip-seo" role="tooltip" className="skill-tooltip">
  Spesialisasi SEO teknis dan konten cluster
</div>

Total kode jadi 18 baris CSS plus 4 baris JSX. Hilang sudah dependency Floating UI dari package.json.

Implementasi: Dropdown Nav Mobile

Untuk dropdown navigasi mobile, kami pasangkan Anchor Positioning dengan Popover API supaya manajemen show dan hide dilakukan browser secara native. Pola ini cocok karena Popover API otomatis menangani backdrop click dan keyboard Escape.

<button popovertarget="nav-menu" style="anchor-name: --nav-trigger;">Menu</button>
<div id="nav-menu" popover style="position-anchor: --nav-trigger; top: anchor(bottom); right: anchor(right);">
  <nav>...</nav>
</div>

Tidak ada React state, tidak ada event listener, tidak ada animation library.

Hasil Setelah Migrasi

Empat minggu setelah migrasi (data Mei 2026), kami bandingkan metrik baseline dengan post-migrasi.

Field data dari RUM yang kami pasang via web-vitals.js juga menunjukkan p75 LCP turun dari 2,4 ke 2,0 detik di traffic Indonesia, sebagian besar mobile. Untuk konteks Baseline support, lihat juga Baseline 2026.

Pertanyaan Umum

Kapan tetap pakai Floating UI atau Popper.js?

Saat butuh collision detection (auto-flip ke posisi lain kalau mentok viewport), virtual element (tooltip yang mengikuti kursor, bukan elemen DOM), atau positioning yang harus dihitung di JS karena depend pada data dinamis. Kasus-kasus ini di luar cakupan CSS Anchor Positioning saat ini.

Apakah ada risiko di Safari iOS lama?

Anchor Positioning baru stabil di Safari Technology Preview, jadi pakai @supports (anchor-name: --x) untuk fallback. Di Yuanita kami sediakan fallback ke position: absolute tradisional, tampilan tetap functional meski tidak sehalus versi native.

Bagaimana dengan accessibility?

Tetap pakai role="tooltip" dan aria-describedby di markup. Anchor Positioning hanya soal CSS, tidak memengaruhi semantic HTML.

Berapa lama proses migrasi?

Audit dan implementasi memakan waktu sekitar 4 jam, ditambah 2 jam QA cross-browser. Untuk landing page sederhana, ROI cepat tercapai dalam satu sprint.

Penutup

Migrasi ini bukan soal mengejar tren atau menghapus dependency demi kebersihan. Untuk personal brand seperti Yuanita Sekar yang target audiencenya HR dan recruiter, kecepatan halaman langsung memengaruhi first impression. Setiap 0,1 detik LCP yang membaik adalah satu kandidat lagi yang tidak abandon di tengah loading.