Post-Mortem & Technical Guide: Mengapa Skor Core Web Vitals Bisa Jatuh dari 95+ ke 60 Tanpa Aktivitas Deployment

Tiga hari setelah sebuah platform mencapai skor Google Lighthouse 95%+ di seluruh metrik (Performance, Accessibility, Best Practices, SEO), audit berkala mendeteksi anomali kritis: skor Performance anjlok ke 60, Best Practices jatuh ke 58, Total Blocking Time (TBT) membengkak hingga 2.290 ms, dan beban Main-Thread melonjak ke 13,0 detik.

Anomali ini terjadi tanpa adanya commit kode baru atau aktivitas deployment selama 72 jam.

Dokumentasi teknis ini mengurai akar masalah sistemik tersebut, membongkar benturan antara optimasi edge computing (Cloudflare) dengan arsitektur JavaScript modern (ES Modules/Astro), serta menyajikan cetak biru remediasi bertahap dari sudut pandang lintas disiplin.

Matriks Keterlibatan Peran (Role Engagement Matrix)

Dalam penanganan insiden performa, inefisiensi terbesar terjadi saat seluruh tim berkumpul di setiap tahap.

Tabel berikut mengatur kapan setiap disiplin harus hadir dan kapan mereka dapat fokus pada pekerjaan lain.

Lihat semua dari Rochman Maarif →

Investigasi Forensik & Triangulasi Lingkungan - Fase 1

Pertanyaan Pemicu: Bagaimana cara membuktikan bahwa regresi performa bukan berasal dari kode aplikasi?

Saat skor performa anjlok secara tiba-tiba, langkah pertama bukan mengutak-atik kode, melainkan memvalidasi lingkungan audit (auditor environment) dan konsol browser.

[Auditor Browser Profile] ──> Ekstensi Aktif (Grammarly, DevTools, Password Mgr) ──> DOM Injections (+8-10s Main Thread)
[Cloudflare Edge Layer]   ──> Rocket Loader Injected ──> Preload Script Rewritten ──> Best Practices Anjlok ke 58
[Origin Source Code]      ──> Tidak ada perubahan Git commit (Clean Baseline)

Sudut Pandang Peran:

• Dev Lead: Mengisolasi variabel pengujian. Melarang tim melakukan refactoring sebelum audit lingkungan selesai.
• SEO Specialist: Memastikan tidak ada script tracking baru dari pihak ketiga yang dimasukkan via Google Tag Manager (GTM) tanpa izin tim teknis.

The Smoking Gun: Cloudflare Rocket Loader vs ES Modules - Fase 2

Pertanyaan Pemicu: Mengapa fitur auto-optimizaton di CDN justru merusak arsitektur framework web modern?

Rocket Loader adalah teknologi warisan Cloudflare yang dirancang untuk era Web 2.0 (skrip jQuery/monolitik). Cara kerjanya adalah mengubah atribut <script type="text/javascript"> menjadi <script type="text/rocketscript"> dan menunda eksekusinya sampai event window.onload.

[Arsitektur Astro Modern]
HTML Head ──> <link rel="modulepreload" href="hoisted.js"> ──> Download Async High Priority
                                                                        │
[Intervensi Rocket Loader]                                              ▼
HTML Body ──> <script type="text/rocketscript"> ──> Browser Membatalkan Preload!
                                                                        │
                                                ┌───────────────────────┴───────────────────────┐
                                                ▼                                               ▼
                              20x Preload Mismatch Warning                     Script dieksekusi via `eval()`
                              (Best Practices jatuh ke 58)                     (20 Long Tasks, TBT 2.290 ms)
                              

Dampak Sistemik:

1. Preload Invalidation: Framework modern (Astro, Next.js, Vite) menghasilkan <link rel="modulepreload">. Karena Rocket Loader memodifikasi tipe eksekusi skrip, browser menganggap file yang di-preload tidak terpakai.
2. Double Fetch & Parse: Browser mendownload aset dua kali atau gagal memanfaatkan in-memory cache.
3. Execution Churn: Skrip dieksekusi secara serial via eval(), memicu 20 Long Tasks berturut-turut dan melipatgandakan TBT.

Aksi Teknis (DevOps / Infrastructure):

1. Masuk ke Cloudflare Dashboard ➔ Domain Target ➔ Speed ➔ Optimization.
2. Ubah Rocket Loader™ menjadi OFF / Disabled.
3. Masuk ke Caching ➔ Configuration ➔ Klik Purge Everything untuk membuang HTML cache yang sudah terkontaminasi script Rocket Loader.

Rekayasa Edge Caching & Browser TTL - Fase 3

Pertanyaan Pemicu: Mengapa aturan "Cache Everything" di CDN masih bisa memicu penalti cache di Lighthouse?

Lighthouse memeriksa header Cache-Control pada semua file statis (.js, .css, .webp, .svg, .mp4). Jika header ini memiliki nilai TTL yang terlalu pendek (misalnya 4 jam atau respect origin tanpa konfigurasi tegas), Lighthouse memotong skor pada audit:

[Browser Request] ──> [Cloudflare Edge Rule: Cache Everything]
                                  │
          ┌───────────────────────┴───────────────────────┐
          ▼                                               ▼
   Edge TTL: 1 Month                              Browser TTL: 1 Year
(Disimpan di Server CDN)                    (Disimpan di Disk/Memory User)
                                                          │
                                                          ▼
                                            Response Header yang Diterima:
                                            Cache-Control: public, max-age=31536000, immutable

                         

Konfigurasi yang Benar di Cloudflare Cache Rules:

• Matching Rule: (http.request.uri.path starts_with "/_astro/") or (http.request.uri.path.extension in {"png" "jpg" "jpeg" "webp" "svg" "woff2" "mp4"})
• Edge TTL: Ignore cache-control header ➔ 1 Month (atau 1 Year).
• Browser TTL: Override origin ➔ 1 Year (max-age=31536000).

Mengapa Aman Menggunakan Cache 1 Tahun (immutable)?

Framework modern menggunakan content-hashing pada setiap build. File hoisted.BBf94BOM.js tidak akan pernah diubah isinya. Ketika ada perubahan kode, Astro akan menghasilkan file baru bernama hoisted.C1x89dKa.js, sehingga browser otomatis mengunduh file baru tanpa risiko stale assets.

De-Choking Main-Thread & Penjadwalan Third-Party Trackers - Fase 4

Pertanyaan Pemicu: Bagaimana cara menjalankan 4 script analitik sekaligus tanpa merusak Total Blocking Time (TBT)?

Script pelacak pihak ketiga (Google Analytics 4, Microsoft Clarity, Ahrefs, Meta Pixel) sering kali bersaing merebut CPU thread pada 1,5 detik pertama pemuatan halaman.

[TRADISIONAL (Blocking Flow)]
HTML Parsed ──> [Download GA4 + Clarity + Ahrefs + Meta] ──> CPU Tercekik (TBT > 2.000ms) ──> User Tertunda

[YPYM DEFERRED ARCHITECTURE]
HTML Parsed ──> Render UI Bersih (FCP & LCP Instan)
                       │
         ┌─────────────┴─────────────┐
         ▼                           ▼
[Event Interaksi User]     [requestIdleCallback]
(scroll, touch, click)     (Timeout Max: 3.500ms)
         │                           │
         └─────────────┬─────────────┘
                       ▼
          Injeksi Skrip Analitik ──> Main-Thread Tetap Bersih (TBT < 150ms)
          

Implementasi Kode: Deferral Berbasis Idle & Interaksi

A. Google Analytics 4 (Consent Mode v2 Safe)

Consent Mode dan antrean dataLayer harus tetap diinisialisasi secara sinkron, namun file eksternal gtag.js ditunda pemuatannya:

<!-- Inisialisasi Synchronous Consent Mode v2 (0 KB Network Overhead) -->
<script is:inline>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  gtag('consent', 'default', {
    'analytics_storage':  'denied',
    'ad_storage':         'denied',
    'ad_user_data':       'denied',
    'ad_personalization': 'denied',
    'wait_for_update':    500
  });

  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX', { 'send_page_view': false });

  // Pemuatan Asinkron Terjadwal
  function _loadGtagScript() {
    if (window._gtagScriptLoaded) return;
    window._gtagScriptLoaded = true;
    var s = document.createElement('script');
    s.async = true;
    s.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
    document.head.appendChild(s);
  }

  // Eksekusi saat Idle atau saat ada Interaksi Pertama
  if (document.readyState === 'complete') {
    if ('requestIdleCallback' in window) {
      requestIdleCallback(_loadGtagScript, { timeout: 3500 });
    } else {
      setTimeout(_loadGtagScript, 2500);
    }
  } else {
    window.addEventListener('load', function() {
      if ('requestIdleCallback' in window) {
        requestIdleCallback(_loadGtagScript, { timeout: 3500 });
      } else {
        setTimeout(_loadGtagScript, 2500);
      }
    });
  }

  ['pointerdown', 'touchstart', 'scroll', 'keydown'].forEach(function(evt) {
    window.addEventListener(evt, _loadGtagScript, { once: true, passive: true });
  });
</script>

B. Ahrefs & Microsoft Clarity Script Deferral

<script is:inline>
  function _loadTrackers() {
    if (window._trackersLoaded) return;
    window._trackersLoaded = true;

    // Ahrefs Webmaster Analytics
    var ahrefs = document.createElement('script');
    ahrefs.src = 'https://analytics.ahrefs.com/analytics.js';
    ahrefs.setAttribute('data-key', 'YOUR_AHREFS_KEY');
    ahrefs.async = true;
    document.head.appendChild(ahrefs);

    // Microsoft Clarity
    (function(c,l,a,r,i,t,y){
      c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
      t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
      y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "YOUR_CLARITY_TAG");
  }

  if (document.readyState === 'complete') {
    if ('requestIdleCallback' in window) {
      requestIdleCallback(_loadTrackers, { timeout: 3500 });
    } else {
      setTimeout(_loadTrackers, 2500);
    }
  } else {
    window.addEventListener('load', function() {
      if ('requestIdleCallback' in window) {
        requestIdleCallback(_loadTrackers, { timeout: 3500 });
      } else {
        setTimeout(_loadTrackers, 2500);
      }
    });
  }

  ['pointerdown', 'touchstart', 'scroll', 'keydown'].forEach(function(evt) {
    window.addEventListener(evt, _loadTrackers, { once: true, passive: true });
  });
</script>

Sudut Pandang Peran:

• Frontend Dev: Bertanggung jawab atas integritas listener event dan cleanup logic.
• SEO Specialist: Memvalidasi bahwa konversi GA4 dan event page view tetap terkirim secara akurat saat pengunjung nyata menjelajahi halaman.

Layout Reflow Prevention & Animation Off-Threading - Fase 5

Pertanyaan Pemicu: Mengapa animasi JavaScript di bagian bawah halaman (below-the-fold) bisa memperlambat rendering elemen di bagian atas (above-the-fold)?

Browser hanya memiliki satu Main Thread untuk mengeksekusi JavaScript, menghitung CSS style (Recalculate Style), dan merender layout (Layout Paint). Jika ada script animasi typewriter yang menjalankan setTimeout setiap 12ms di footer atau section tengah:

1. Main Thread tidak pernah idle.
2. Browser menunda rendering elemen hero banner di atas layar.

// SEBELUM: Mengetik langsung aktif di detik ke-0 (Membunuh Skor FCP/LCP)
startTyping();

// SESUDAH: Bungkus dengan IntersectionObserver
if ('IntersectionObserver' in window) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        startTyping();
        observer.disconnect(); // Hanya jalankan sekali saat terlihat
      }
    });
  }, { rootMargin: '100px' });
  observer.observe(visCodeEl);
} else {
  setTimeout(startTyping, 2000);
}

Penegasan Dimensi Gambar (Preventing Cumulative Layout Shift & Forced Reflow)

Lighthouse menandai gambar tanpa ukuran eksplisit:

Setiap elemen gambar di navbar, mega-menu, dan footer wajib memiliki atribut dimensi pasti serta decoding asinkron:

<!-- Logo Navbar -->
<img src="https://ghost.ypym.app/ypym-icon-light.png" alt="YPYM Icon" class="logo-icon" width="24" height="24" decoding="async" />

<!-- Logo Platform Mega Menu -->
<img class="platform-logo" src="https://ghost.ypym.app/logos/ypym-google-logo.svg" alt="Google Search" width="22" height="22" loading="lazy" decoding="async" />

Validasi Sanitasi & Protokol Pengujian Bersih - Fase 6

Pertanyaan Pemicu: Mengapa hasil Lighthouse lokal di Chrome biasa sering kali tidak valid untuk mengukur performa produksi?

Untuk mendapatkan data performa murni yang mencerminkan apa yang dinilai oleh algoritma Google Search:

[PROTOKOL AUDIT RESMI]

1. Jalankan Chrome Incognito (`Ctrl + Shift + N`) tanpa ekstensi browser.
2. ATAU Gunakan Google PageSpeed Insights resmi: https://pagespeed.web.dev/
3. ATAU Jalankan via Lighthouse CLI headless:
   npx lighthouse https://ypym.app/ --chrome-flags="--headless" --output html --output-path ./report.html

Ringkasan Perbandingan Teknis (Before vs. After)

Tim sudah melakukan cek, dan berikut ini proses yang terlampir dari proses awal hingga final.

Fetch Page Pertama

Fetch Page Kedua

Fetch-Page Ketiga

Hasilnya memang belum sampai di threshold (95+) yang sudah ditetapkan manajemen, namun progres ini sudah cukup untuk hari ini.

Kami akan optimize untuk sampai ke target.

Checklist Operasional Tim (Engineering Quick-Sheet)

Simpan checklist ini sebagai prosedur standar sebelum mempublikasikan atau mengubah konfigurasi domain:

•  Cloudflare Rocket Loader: Status dipastikan OFF pada domain yang menggunakan modul JavaScript modern.
•  Cloudflare Auto Minify: Status OFF (diserahkan sepenuhnya pada compiler aplikasi).
•  Cache Rules: Header Cache-Control: public, max-age=31536000, immutable aktif untuk direktori /_astro/* dan format media statis.
•  Third-Party Trackers: Semua script analitik (GA4, Clarity, Ahrefs, Pixel) diinjeksi via requestIdleCallback / listener interaksi user, bukan synchronous head tag.
•  Below-the-fold Animations: Animasi JavaScript dibungkus dengan IntersectionObserver.
•  Image Tag Integrity: Seluruh tag <img> memiliki atribut width, height, loading="lazy", dan decoding="async".
•  Audit Validation: Verifikasi dilakukan pada mode Incognito atau via PageSpeed Insights API.

Sehingga Konklusinya Adalah

Kasus anjloknya skor Core Web Vitals ini menegaskan satu prinsip penting dalam rekayasa web modern bahwa degradasi performa tidak selalu lahir dari kesalahan baris kode aplikasi (origin repo). Fitur otomatisasi warisan di tingkat CDN, seperti Rocket Loader yang dirancang untuk era Web 2.0 dapat secara diam-diam membatalkan optimasi native bundler modern (ES Modules, modulepreload, dan tree-shaking).

Kecepatan dan stabilitas web bukan sekadar persoalan mengejar angka hijau di Lighthouse, melainkan orkestrasi yang presisi antara build pipeline, konfigurasi edge cache, dan manajemen alokasi Main-Thread. Ketika batas kewenangan dan konfigurasi lintas infrastruktur dipetakan dengan disiplin, pemulihan performa produksi dapat dieksekusi secara terukur tanpa trial-and-error.

ALAMI CASE SERUPA?

Butuh Audit Mendalam untuk Infrastruktur & Core Web Vitals Platform Anda?

Minta Penawaran / Konsultasi

Mengatasi blocking tasks, benturan arsitektur CDN, dan kebocoran beban komputasi third-party membutuhkan investigasi sistemik di tingkat infrastruktur, bukan sekadar penyesuaian kosmetik pada kode antarmuka.

Jika platform web atau sistem skala enterprise Anda mengalami degradasi performa yang memengaruhi retensi pengguna dan visibilitas pencarian organik, jelajahi layanan rekayasa performa dan audit infrastruktur komprehensif kami di YPYM Technical Services untuk diagnostik mendalam hingga tingkat runtime & edge layer.

Update Hari Ini Pada Agustus 31, 2026

HASIL TEST PER AGUTUS 31, 2026 PADA 10:XX:XX

Hasil per waktu saat ini, Agustus 2026, tanggal 31.

Setelah beberapa hari ini kami sengaja menunggu apakah ada perubahan ke skor Core Web Vitals kami - tanpa aktivitas apapun di Dev Team, maka berikut ini adalah hasilnya yang secara merasa antara 95% hingga 100%.

Kami cek secara acak, pada beberapa URL

• https://ypym.app/id-id/company/privacy-policy -- Cek skor realtime untuk device Mobile & Desktop
• https://ypym.app/id-id/ -- Cek skor realtime untuk device Mobile & Desktop
• https://ypym.app/id-id/business/seo-for-website-revamp -- Cek skor realtime untuk device Mobile & Desktop
• https://ypym.app/business/seo-for-entry-new-market -- Cek skor realtime untuk device Mobile & Desktop

Catatan: Selebihnya, pages lainnya cenderung serupa skornya - meskipun kami belum melakukan cek ke 100% pages kami.

Skor CWV Homepage (ID) YPYM