Web Frontend Performance Indicator 🚀

Periksa performa web frontend dengan cepat dan dapatkan saran yang langsung bisa diterapkan dalam Bahasa Indonesia.

🎯 Tujuan

Membantu frontend developer (pemula hingga profesional) untuk:

1. ✅ Mengecek performa web (local atau production) di berbagai devices dengan parameter yang penting & mudah dipahami
2. 💡 Mendapatkan saran perbaikan yang spesifik & actionable (bukan hanya angka tanpa arahan)
3. 🛠️ Tidak perlu setup rumit atau memahami laporan teknis yang kompleks

✨ Fitur Utama

1. Periksa Performa dengan 1 Perintah

Dijalankan via CLI tanpa perlu instalasi awal:

# Mode Local - cek proyek di server lokal
npx web-frontend-performance-ind check http://localhost:3000

# Mode Production - cek URL public
npx web-frontend-performance-ind check https://my-webapp.com

2. Parameter yang Diperiksa

• ⏱️ Load Time - Waktu total yang dibutuhkan halaman untuk dimuat sepenuhnya
• 📦 Total Request - Jumlah request yang dilakukan (HTML, CSS, JS, gambar, dll)
• 📏 Total File Size - Ukuran keseluruhan sumber daya halaman
• 🗑️ Unused Resources - CSS/JS yang tidak digunakan
• 🖼️ Image Optimization - Cek format dan ukuran gambar
• 🚧 Render Blocking - File CSS/JS yang menghambat rendering

3. Saran Perbaikan yang Actionable

Contoh output:

❌ Load Time: 4.2 detik (idealnya < 2 detik).
💡 Saran: Kompres gambar di halaman, atau gunakan lazy loading untuk gambar yang tidak berada di viewport awal.

❌ Unused JS: Package lodash (ukuran 50KB) hanya digunakan untuk fungsi debounce.
💡 Saran: Ganti dengan lodash.debounce (ukuran hanya 2KB) atau buat fungsi debounce sendiri.

❌ Image Format: Gambar banner.jpg (ukuran 200KB) bisa dikonversi ke WebP untuk menghemat 60% ukuran.
💡 Saran: Gunakan perintah squoosh-cli untuk mengkonversi gambar, atau setup plugin otomatis di bundler kamu.

4. Output yang Mudah Dibaca

• 🎨 Tampilan CLI dengan warna (hijau untuk baik, kuning untuk perlu perhatian, merah untuk bermasalah)
• 📄 Opsi untuk mengekspor hasil ke file CSV/JSON untuk dokumentasi

🚀 Cara Penggunaan

Instalasi Lokal

Install package ke project kamu:

npm install web-frontend-performance-ind

Atau gunakan langsung dengan npx tanpa instalasi:

npx web-frontend-performance-ind check <url>

Menggunakan npm Scripts (Setelah Instalasi)

Setelah instalasi via npm, kamu bisa menjalankan tool ini dengan perintah npm run:

# Cek URL custom (tambahkan URL setelah perintah)
npm run check -- https://example.com

# Cek halaman local development (default: http://localhost:3000)
npm run check:local

# Cek halaman production (default: https://example.com)
npm run check:prod

# Cek dan ekspor hasil ke JSON
npm run check:export-json

# Cek dan ekspor hasil ke CSV
npm run check:export-csv

# Lihat bantuan CLI
npm start

Contoh Penggunaan via npx

1. Cek halaman local:

npx web-frontend-performance-ind check http://localhost:3000

2. Cek halaman production:

npx web-frontend-performance-ind check https://my-webapp.com

3. Ekspor hasil ke CSV:

npx web-frontend-performance-ind check http://localhost:3000 --export=result.csv
npx web-frontend-performance-ind check https://my-webapp.com --export=result.csv

4. Ekspor hasil ke JSON:

npx web-frontend-performance-ind check http://localhost:3000 --export=result.json

Output CLI Contoh

================================================================================
📊 Web Frontend Performance -> Indonesia
--------------------------------------------------------------------------------
URL yang diperiksa: http://localhost:3000
--------------------------------------------------------------------------------
✅ Load Time: 1.8 detik (ideal)
✅ Total Requests: 12 (ideal < 20)
⚠️ Total File Size: 850KB (perlu diperkecil, ideal < 500KB)
❌ Unused Resources:
   - CSS: 30% tidak terpakai di `style.css`
   - JS: Package `lodash` (50KB) hanya digunakan 2%
❌ Image Optimization
   - `hero.jpg` (200KB) -> bisa jadi WebP (70KB)
   - `gallery.png` (150KB) -> bisa di-resize ke 800px lebar
--------------------------------------------------------------------------------
💡 Saran Perbaikan:
   1. Untuk file size besar: Kompres gambar & hapus CSS/JS tidak terpakai.
   2. Untuk `lodash`: Ganti dengan `lodash-es` atau import fungsi spesifik saja.
   3. Untuk gambar: Konversi ke WebP menggunakan `squoosh-cli` atau plugin Vite.
================================================================================

🛠️ Development

Struktur Kode

web-frontend-performance-ind
├── bin
│   └── cli.js                    # Entry point CLI (dijalankan via npx)
│
├── src
│   ├── analyzers                 # Logika analisis
│   │   ├── loadTime.js          # Cek waktu load dengan Lighthouse
│   │   ├── unusedResources.js   # Deteksi CSS/JS tidak terpakai
│   │   ├── imageChecker.js      # Cek optimasi gambar
│   │   └── renderBlocking.js    # Deteksi render-blocking resources
│   │
│   ├── suggestions               # Database saran perbaikan
│   │   └── suggestionsDB.js     # Kumpulan saran berdasarkan masalah
│   │
│   ├── utils                     # Fungsi utilitas
│   │   ├── fetchPage.js         # Fetch halaman web
│   │   └── formatOutput.js      # Format dan tampilkan output
│   │
│   └── index.js                  # Main entry point
│
├── package.json
└── README.md

Menjalankan Development

# Clone repository
git clone <repository-url>
cd web-frontend-performance-ind

# Install dependencies
npm install

# Test dengan URL contoh
npm test

# Atau gunakan npm scripts lainnya:
npm run check:local    # Cek localhost:3000
npm run check:prod     # Cek example.com
npm start              # Lihat bantuan CLI

NPM Scripts Tersedia

| Perintah | Deskripsi | | --------------------------- | ------------------------- | | npm run check -- <url> | Cek performa URL tertentu | | npm run check:local | Cek http://localhost:3000 | | npm run check:prod | Cek https://example.com | | npm run check:export-json | Cek & ekspor ke JSON | | npm run check:export-csv | Cek & ekspor ke CSV | | npm start | Tampilkan bantuan CLI | | npm test | Test dengan example.com |

Dependencies

• lighthouse - Untuk mengambil performa dasar dari Google
• axios - Untuk fetch halaman & sumber daya
• chalk - Untuk output CLI berwarna
• cli-table3 - Untuk tampilan tabel di CLI
• commander - Untuk menangani CLI commands
• image-size - Untuk mengecek format & ukuran gambar

🎯 Target Pengguna

• 🌱 Frontend Developer pemula yang kesulitan memahami laporan Lighthouse/WebPageTest
• 👥 Tim kecil yang ingin memastikan performa aplikasi tetap baik tanpa proses rumit
• ⚡ Developer yang ingin melakukan pemeriksaan cepat sebelum deploy ke production

📝 Lisensi

Project ini menggunakan lisensi MIT. Lihat file LICENSE untuk detail lengkap.

🤝 Kontribusi

Kontribusi sangat diterima! Silakan buat Pull Request atau Issue untuk improvement.

📮 Kontak

• 🔗 GitHub: https://github.com/udenbaguse
• � Gmail: [email protected]

Untuk pertanyaan atau saran, silakan buat issue di repository ini atau hubungi melalui email.

📚 Dokumentasi Lainnya

• CHANGELOG.md - Riwayat perubahan dan rilis
• NPM_SCRIPTS.md - Dokumentasi lengkap npm scripts
• LICENSE - Lisensi MIT

Dibuat dengan ❤️ untuk developer Indonesia