Alur Kerja Git, Audit Core Web Vitals & Deployment Produksi
Mengukur LCP, CLS, INP dan Menerapkan Pipeline Rilis Otomatis Berkelanjutan
01. Target Pembelajar & Prasyarat
Web engineer yang bersiap merilis aplikasi ke dunia nyata.
02. Kompetensi Konseptual (Level 1ā2)
- āMemahami tiga pilar Core Web Vitals: LCP (kecepatan), CLS (stabilitas visual), dan INP (kecepatan interaksi).
03. Kompetensi Praktis & Artefak Nyata (Level 3ā4)
- āMenjalankan audit Lighthouse dan memperbaiki skor LCP pada halaman modul.
04. Aplikasi Nyata & Verifikasi
Penerapan Industri: Standar rilis proyek klien Z-Automation.
Metode Verifikasi: Memverifikasi skor Lighthouse Desktop > 90 di seluruh kategori.
Mengapa Subjek Ini Krusial dalam Rekayasa Nyata?
Pelajari cara mengaudit metrik Core Web Vitals (LCP < 2.5s, CLS < 0.05, INP < 200ms), mengelola variabel environment, dan merilis aplikasi web ke cloud.
Dalam lingkungan produksi, kegagalan memahami batas-batas arsitektur sistem sering kali menyebabkan bug yang sulit dilacak, pemborosan biaya komputasi, atau antarmuka yang lambat bagi pengguna.
Bagaimana Sistem Sebenarnya Bekerja di Tingkat Protokol
Tiga Metrik Penentu Pengalaman Pengguna Google
Google menggunakan Core Web Vitals sebagai faktor peringkat resmi: LCP mengukur kapan konten utama muncul, CLS mengukur apakah elemen melompat-lompat saat dimuat, dan INP mengukur seberapa cepat antarmuka merespons ketukan pertama pengguna.
Alur Arsitektur Sistem Otonom & Runtime
Pesan bahasa alami diterima melalui antarmuka web atau webhook chat.
{
"input": "Berapa estimasi biaya pembuatan landing page bisnis?"
}Koreksi Asumsi Umum vs Realitas Rekayasa
āWebsite yang terlihat cepat di komputer developer pasti cepat bagi pengguna di jaringan seluler.ā
Komputer developer memiliki koneksi cepat dan CPU bertenaga. Pengujian harus dilakukan dengan emulasi throttling CPU dan 4G.
Implementasi Langkah-demi-Langkah
Hasil akhir yang diharapkan: Skrip audit build lokal yang memvalidasi tidak ada kebocoran file .env sebelum commit.
.git/hooks/ āāā pre-commit
1Memeriksa .gitignore dan Variabel Rahasia
Memastikan file .env.local tidak pernah ter-commit.
| 1 | # .gitignore standar Z-Automation |
| 2 | .env*.local |
| 3 | .env |
| 4 | node_modules/ |
| 5 | .next/ |
| 6 | out/ |
.env.local terdaftar di dalam daftar file yang diabaikan.
Mengantisipasi Masalah Umum & Tantangan Ekstensi
Tambahkan workflow GitHub Actions yang menjalankan npx tsc --noEmit sebelum merge.
Uji Kompetensi Mandiri & Verifikasi Hasil
Standar kelulusan Z-Automation mewajibkan skor minimum 80 / 100 Poin dengan komponen Implementasi Praktis minimal 21 / 35 Poin (60%). Jawab soal diagnostik dan centang hasil pengujian praktis Anda.
BAGIAN A // PERTANYAAN DIAGNOSTIK KONSEPTUAL & TEKNIS (40 POIN)
01.Berapa target standar LCP (Largest Contentful Paint) yang ditetapkan Google agar website mendapatkan predikat 'Good'?
BAGIAN B // DAFTAR PERIKSA HASIL IMPLEMENTASI PRAKTIS (35 POIN ā MIN. 21 POIN)
Centang item di bawah ini hanya jika Anda telah menjalankan kode di komputer Anda dan mengamati output yang benar: