Cara Cek Kecepatan Blog Pakai Google Apps Script + PageSpeed Insights API

Halo semua! Kali ini mau sharing cara otomatis cek kecepatan blog pakai Google Apps Script. Jadi nggak perlu buka-buka PageSpeed Insights manual tiap kali mau cek performa blog. Tinggal klik run, langsung keluar hasilnya di log. Praktis banget buat yang suka utak-atik template terus mau tahu dampaknya ke kecepatan.

Apa yang Dibutuhin?

Cuma dua hal:

• API Key PageSpeed Insights — gratis dari Google Cloud, nanti aku jelasin cara dapetinnya
• Akun Google — buat akses Google Apps Script

Nggak perlu install aplikasi apa-apa. Semua jalan di browser. Bahkan bisa di-schedule biar jalan otomatis tiap minggu kalau mau monitoring rutin.

Langkah 1: Dapetin API Key Gratis

Pertama, buka Google Cloud Console. Kalau belum pernah pakai, daftar dulu pakai akun Google biasa.

Setelah masuk dashboard:

1. Buat project baru — klik tombol select project di atas, terus New Project, kasih nama bebas (misal: "Blog Speed Check")
2. Aktifin PageSpeed Insights API — cari di menu APIs & Services > Library, ketik "PageSpeed Insights", klik Enable
3. Buat API Key — ke menu APIs & Services > Credentials, klik + CREATE CREDENTIALS > API Key
4. Copy API Key yang muncul, simpen dulu di notepad

Catatan penting: API Key ini punya kuota gratis 25.000 request per hari. Buat cek blog pribadi yang jalan seminggu sekali, itu lebih dari cukup. Kalau mau aman, bisa dibatasin restriction-nya ke IP address saja, tapi kalau dipakai di Apps Script, saran aku pilih None dulu biar nggak error 403 kayak yang aku alamin awal-awal.

Langkah 2: Bikin Script di Google Apps Script

Buka script.google.com. Ini gratis, nggak perlu domain sendiri.

1. Klik + New Project
2. Hapus semua kode default (fungsi myFunction), ganti dengan kode di bawah ini
3. Ganti API_KEY sama key yang tadi dicopy dari Google Cloud
4. Ganti BLOG_URL dengan URL blog kamu

Berikut kode lengkapnya:

function testPageSpeed() {
  // ==========================================
  // KONFIGURASI — WAJIB DIISI
  // ==========================================
  var API_KEY = 'AIzaSyxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; // GANTI dengan API Key kamu
  var BLOG_URL = 'https://ruangdebug.blogspot.com/';       // GANTI dengan URL blog kamu

  // ==========================================
  // PENGATURAN PARAMETER API
  // ==========================================
  var api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
  var params = {
    'url': encodeURIComponent(BLOG_URL),
    'key': API_KEY,
    'locale': 'id',
    'strategy': 'mobile',
  };
  var categories = ['performance'];

  // ==========================================
  // MEMBUAT QUERY URL
  // ==========================================
  var queryParts = [];
  for (var key in params) {
    queryParts.push(key + '=' + params[key]);
  }
  categories.forEach(function(cat) {
    queryParts.push('category=' + cat);
  });
  var url = api + '?' + queryParts.join('&');

  Logger.log('URL Request: ' + url);
  Logger.log('==========================================');

  try {
    // ==========================================
    // MENGAMBIL DATA DARI GOOGLE API
    // ==========================================
    var response = UrlFetchApp.fetch(url);
    var json = JSON.parse(response.getContentText());

    // ==========================================
    // FIELD DATA (CrUX — data pengguna nyata)
    // ==========================================
    Logger.log('[📊 DATA LAPANGAN / FIELD DATA]');
    Logger.log('Sumber: Chrome User Experience Report');
    Logger.log('------------------------------------------');

    if (json.loadingExperience && json.loadingExperience.metrics) {
      var metrics = json.loadingExperience.metrics;

      function logMetric(name, metricObj) {
        if (metricObj && metricObj.percentile) {
          var value = metricObj.percentile;
          var category = metricObj.category || 'N/A';
          Logger.log(name + ' = ' + value + (name.includes('CLS') ? '' : ' ms') + ' [' + category + ']');
        } else {
          Logger.log(name + ' = Data tidak tersedia');
        }
      }

      logMetric('FCP (First Contentful Paint)', metrics.FIRST_CONTENTFUL_PAINT_MS);
      logMetric('LCP (Largest Contentful Paint)', metrics.LARGEST_CONTENTFUL_PAINT_MS);
      logMetric('FID (First Input Delay)', metrics.FIRST_INPUT_DELAY_MS);
      logMetric('CLS (Cumulative Layout Shift)', metrics.CUMULATIVE_LAYOUT_SHIFT_SCORE);
      logMetric('INP (Interaction to Next Paint)', metrics.INTERACTION_TO_NEXT_PAINT_MS);
      logMetric('TTFB (Time to First Byte)', metrics.EXPERIMENTAL_TIME_TO_FIRST_BYTE_MS);

    } else {
      Logger.log('⚠️ Field Data belum tersedia untuk blog ini.');
      Logger.log('   Penyebab: Blog belum masuk dataset Chrome UX Report.');
      Logger.log('   Ini normal untuk blog dengan traffic masih kecil.');
      Logger.log('   Solusi: Fokus naikin konten dan traffic dulu.');
    }

    // ==========================================
    // LAB DATA (Lighthouse — simulasi Google)
    // ==========================================
    Logger.log('');
    Logger.log('[🔬 DATA LABORATORIUM / LAB DATA]');
    Logger.log('Sumber: Lighthouse (Simulasi Robot Google)');
    Logger.log('------------------------------------------');

    if (json.lighthouseResult) {
      var lh = json.lighthouseResult;
      var audits = lh.audits || {};
      var cats = lh.categories || {};

      var perfScore = cats.performance ? (cats.performance.score * 100).toFixed(0) : 'N/A';
      Logger.log('⭐ Skor Performa Lighthouse = ' + perfScore + '/100');
      Logger.log('');

      Logger.log('--- Core Web Vitals ---');
      logAudit('LCP (Largest Contentful Paint)', audits['largest-contentful-paint']);
      logAudit('FCP (First Contentful Paint)', audits['first-contentful-paint']);
      logAudit('CLS (Cumulative Layout Shift)', audits['cumulative-layout-shift']);
      logAudit('TBT (Total Blocking Time)', audits['total-blocking-time']);
      logAudit('TTFB (Time to First Byte)', audits['server-response-time']);

      Logger.log('');
      Logger.log('--- Metrik Lainnya ---');
      logAudit('Speed Index', audits['speed-index']);
      logAudit('Time to Interactive', audits['interactive']);

      if (audits['first-meaningful-paint']) {
        logAudit('First Meaningful Paint', audits['first-meaningful-paint']);
      }
      if (audits['max-potential-fid']) {
        logAudit('Max Potential FID (deprecated)', audits['max-potential-fid']);
      }

      // ==========================================
      // PELUANG OPTIMASI
      // ==========================================
      Logger.log('');
      Logger.log('[🚀 PELUANG OPTIMASI]');
      Logger.log('------------------------------------------');

      var opportunities = [
        'unused-css-rules', 'unused-javascript', 'modern-image-formats',
        'efficiently-encode-images', 'offscreen-images', 'render-blocking-resources',
        'unminified-css', 'unminified-javascript', 'uses-text-compression',
        'uses-optimized-images', 'uses-responsive-images'
      ];

      var hasOpp = false;
      opportunities.forEach(function(key) {
        if (audits[key] && audits[key].score !== null && audits[key].score < 1) {
          var savings = audits[key].displayValue || '';
          Logger.log('• ' + audits[key].title + (savings ? ' — Hemat: ' + savings : ''));
          hasOpp = true;
        }
      });

      if (!hasOpp) {
        Logger.log('✅ Nggak ada peluang optimasi mayor. Blog udah cukup cepat!');
      }

    } else {
      Logger.log('❌ Data Lighthouse nggak tersedia.');
    }

  } catch (error) {
    Logger.log('❌ ERROR: ' + error.message);
    Logger.log('Detail: ' + error.stack);
  }
}

// Helper buat nampilin metrik
function logAudit(label, audit) {
  if (audit && audit.displayValue) {
    var score = audit.score;
    var scoreText = score !== null ? ' [Skor: ' + (score * 100).toFixed(0) + ']' : '';
    Logger.log(label + ' = ' + audit.displayValue + scoreText);
  } else if (audit) {
    Logger.log(label + ' = Data nggak tersedia di laporan');
  } else {
    Logger.log(label + ' = Metrik nggak ditemukan');
  }
}

Langkah 3: Simpan dan Jalankan

Setelah paste kode:

1. Tekan Ctrl + S (atau klik ikon disk) buat nyimpen project
2. Pilih fungsi testPageSpeed di dropdown atas (sebelah tombol debug)
3. Klik tombol ▶️ Run (play)

Pertama kali jalan, bakal muncul permintaan izin akses. Klik Review Permissions, pilih akun Google, terus klik Advanced > Go to [nama project] > Allow. Ini normal, Apps Script butuh izin buat jalanin UrlFetchApp.

Langkah 4: Lihat Hasilnya

Untuk lihat hasil log:

1. Klik menu View > Logs (atau tekan Ctrl + Enter)
2. Muncul jendela Execution Log dengan hasil lengkap

Contoh hasil yang aku dapet pas ngetes blog sendiri:

URL Request: https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=...
==========================================
[📊 DATA LAPANGAN / FIELD DATA]
Sumber: Chrome User Experience Report
------------------------------------------
⚠️ Field Data belum tersedia untuk blog ini.
   Penyebab: Blog belum masuk dataset Chrome UX Report.
   Ini normal untuk blog dengan traffic masih kecil.
   Solusi: Fokus naikin konten dan traffic dulu.

[🔬 DATA LABORATORIUM / LAB DATA]
Sumber: Lighthouse (Simulasi Robot Google)
------------------------------------------
⭐ Skor Performa Lighthouse = 98/100

--- Core Web Vitals ---
LCP (Largest Contentful Paint) = 1,8 dtk [Skor: 98]
FCP (First Contentful Paint) = 1,8 dtk [Skor: 89]
CLS (Cumulative Layout Shift) = 0,009 [Skor: 100]
TBT (Total Blocking Time) = 0 md [Skor: 100]
TTFB (Time to First Byte) = Dokumen root memerlukan waktu 0 md [Skor: 100]

--- Metrik Lainnya ---
Speed Index = 1,8 dtk [Skor: 100]
Time to Interactive = 1,8 dtk [Skor: 100]

[🚀 PELUANG OPTIMASI]
------------------------------------------
✅ Nggak ada peluang optimasi mayor. Blog udah cukup cepat!

Skor 98/100 untuk mobile — lumayan lah ya! 😄

Catatan Penting

Field Data vs Lab Data — bedanya apa?

• Field Data = data dari pengunjung beneran yang pakai Chrome. Ini paling akurat tapi cuma tersedia kalau blog udah cukup populer (masuk Chrome UX Report). Kalau masih kosong, jangan panik. Normal kok.
• Lab Data = hasil simulasi robot Google Lighthouse. Ini yang muncul selalu, meski blog masih sepi. Jadi fokus ke Lab Data dulu aja buat benchmark.

Metrik yang perlu diperhatiin:

Opsional: Jadwalkan Otomatis

Kalau mau script jalan sendiri tiap minggu tanpa klik manual:

1. Di Apps Script, klik ikon ⏰ Triggers (jam) di sidebar kiri
2. Klik + Add Trigger
3. Atur:
   • Choose function: testPageSpeed
   • Choose deployment: Head
   • Event source: Time-driven
   • Type: Week timer (pilih hari dan jam)
4. Klik Save

Jadi tiap minggu bakal otomatis cek kecepatan. Log-nya bisa dicek kapan aja buat lihat trend — naik atau turun dari minggu ke minggu.

Penutup

Itu aja tutorial singkatnya. Gampang kan? Nggak perlu install software, nggak perlu bayar. Cuma modal API Key gratis dan beberapa menit setup.

Kalau ada error 403 pas pertama jalan, cek lagi restriction API Key di Google Cloud. Pastikan pilih None atau IP addresses dengan range 0.0.0.0/0. Apps Script kadang nggak bisa kirim referer yang valid kalau dibatasin HTTP referer.

Selamat mencoba! Kalau ada yang bingung, tinggal tanya aja di kolom komentar. 👋