Website Bisnis

Cara Marketer Indonesia Pasang Element Timing API di Next.js untuk Ukur Paint Elemen Bisnis di Luar LCP 2026

Vito Atmo·26 Mei 2026·0 kali dibaca·3 min baca

Cara Marketer Indonesia Pasang Element Timing API di Next.js untuk Ukur Paint Elemen Bisnis di Luar LCP 2026

TL;DR: Element Timing API memungkinkan Anda menandai elemen DOM tertentu dengan atribut elementtiming lalu mengukur waktu paint-nya via PerformanceObserver. Berguna saat LCP default memilih logo atau gambar pertama, padahal yang penting secara konversi adalah headline penawaran atau hero kedua. Implementasi di Next.js cukup 1 hook client component.

Di sebuah proyek website konsultan yang saya audit awal April 2026, LCP terlapor 1,8 detik di field data CrUX. Skor hijau, tim puas. Tapi setelah kami pasang Element Timing API, terlihat headline CTA "Konsultasi Gratis" baru paint di 3,4 detik. Selisih 1,6 detik ini berdampak langsung ke konversi karena pengguna scroll lewat sebelum menyadari ada penawaran.

Masalahnya: browser memilih hero image background sebagai LCP, padahal secara KPI bisnis, elemen yang harus diukur adalah teks headline CTA. Sejak insight itu, saya selalu pasang Element Timing pada setiap project klien yang mengoptimasi konversi.

Kenapa LCP Default Bisa Misleading

LCP otomatis memilih elemen terbesar di viewport saat paint pertama. Algoritma ini optimal untuk konten artikel atau produk e-commerce dengan gambar utama yang jelas. Tapi pada halaman landing page bisnis, elemen "terbesar" sering tidak sejajar dengan KPI bisnis.

Contoh kasus umum:

Logo header dipilih sebagai LCP, padahal yang penting headline value proposition
Hero background image dipilih, padahal yang penting CTA button visible
Banner promo dipilih, padahal yang penting form lead capture

Untuk halaman dengan Core Web Vitals hijau tapi konversi rendah, salah satu hipotesis pertama yang saya periksa adalah: apakah elemen LCP yang dipilih browser sama dengan elemen yang harus pengguna lihat untuk mengambil keputusan.

Implementasi Element Timing di Next.js

Langkah 1: tandai elemen HTML dengan atribut elementtiming. Atribut ini bisa dipasang di JSX biasa.

jsx

<h1 elementtiming="hero-headline">
  Konsultasi Personal Brand Konsultan
</h1>
<button elementtiming="primary-cta">
  Booking Slot
</button>

Langkah 2: buat client component yang mengobservasi entries Element Timing dan mengirim ke endpoint analytics.

jsx

'use client';
import { useEffect } from 'react';

export default function ElementTimingReporter() {
  useEffect(() => {
    if (!('PerformanceObserver' in window)) return;
    const obs = new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        const data = {
          name: entry.identifier,
          renderTime: entry.renderTime,
          loadTime: entry.loadTime,
          url: location.pathname,
        };
        navigator.sendBeacon('/api/element-timing', JSON.stringify(data));
      });
    });
    obs.observe({ type: 'element', buffered: true });
    return () => obs.disconnect();
  }, []);
  return null;
}

Langkah 3: mount komponen di layout.tsx supaya jalan di semua halaman.

jsx

import ElementTimingReporter from '@/components/ElementTimingReporter';

export default function RootLayout({ children }) {
  return (
    <html lang="id-ID">
      <body>
        {children}
        <ElementTimingReporter />
      </body>
    </html>
  );
}

Langkah 4: di sisi server, terima POST dan agregasi data. Pakai PerformanceObserver untuk validasi schema entry sesuai spek.

Studi Kasus: Halaman Landing Klien Aris Setiawan

Saat audit landing page personal branding Aris Setiawan akhir April 2026, LCP di lab CrUX terlapor 2,1 detik. Tapi headline CTA "Booking Konsultasi" baru paint 3,8 detik. Setelah saya optimasi font loading dan inline CSS hero, headline paint turun ke 1,7 detik. Konversi lead form naik dari 4,2% ke 6,1% dalam 30 hari.

Tanpa Element Timing, optimasi ini tidak akan terlihat karena LCP default sudah hijau. Data lapangan dari Element Timing adalah yang mengarahkan prioritas optimasi.

Pertanyaan Umum

Apakah Element Timing menambah beban performance?

PerformanceObserver sendiri sangat ringan, sekitar 1-3 ms overhead per observe call. Yang lebih perlu diawasi adalah volume data yang dikirim ke analytics, bukan API-nya sendiri.

Bisakah pakai Element Timing untuk gambar dan teks bersamaan?

Bisa. Atribut elementtiming valid di hampir semua elemen HTML termasuk <img>, <h1>, <p>, <button>. Pastikan identifier unik per elemen agar mudah dianalisis.

Apakah Element Timing menggantikan Web Vitals library?

Tidak. Element Timing adalah pelengkap. Library web-vitals dari Google tetap dipakai untuk INP, CLS, dan LCP standar. Element Timing menambah dimensi metrik kustom.

Penutup

LCP default optimal untuk 80% kasus, tapi untuk landing page bisnis dengan KPI konversi, Element Timing API memberi visibilitas yang lebih sesuai bisnis. Implementasi di Next.js cukup 1 client component dan beberapa atribut HTML. Mulai dari mengukur 2-3 elemen kunci, validasi dengan data lapangan 2-4 minggu, lalu prioritaskan optimasi berdasarkan elemen yang paling banyak menunda interaksi pengguna. Untuk panduan lebih dalam soal API ini, dokumentasi resmi tersedia di web.dev Element Timing.

Butuh website yang benar-benar bekerja?

Hubungi Vito untuk konsultasi gratis 15 menit.

WhatsApp Sekarang