Meningkatkan Performa Admin Panel di FilamentPHP

Ketika membangun admin panel dengan FilamentPHP, performa sangat penting untuk memastikan pengalaman pengguna yang lancar. Panel yang lambat dapat mengganggu produktivitas dan membuat pengguna frustrasi. Berikut adalah beberapa teknik yang bisa digunakan untuk meningkatkan performa admin panel Anda.

1️⃣ Optimasi Query Database

FilamentPHP bekerja di atas Eloquent, yang sangat fleksibel tetapi juga bisa menjadi lambat jika tidak dioptimalkan. Berikut beberapa strategi yang bisa Anda gunakan:

a. Gunakan Eager Loading untuk Mengurangi Query Berulang

Secara default, Eloquent menggunakan lazy loading, yang berarti setiap relasi diambil dalam query terpisah. Jika Anda menampilkan daftar data dengan relasi, ini bisa menyebabkan N+1 Query Problem—di mana setiap baris data memicu query tambahan.

🔴 Tanpa Eager Loading (N+1 Query Problem):

$orders = Order::all();
foreach ($orders as $order) {
    echo $order->customer->name;
}

Kode di atas akan menjalankan satu query untuk mengambil semua Order, lalu satu query tambahan untuk setiap customer yang terkait. Jika ada 100 orders, berarti 101 query akan dijalankan!

✅ Dengan Eager Loading:

$orders = Order::with('customer')->get();
foreach ($orders as $order) {
    echo $order->customer->name;
}

Dengan with('customer'), hanya dua query yang dijalankan: satu untuk orders dan satu lagi untuk customers. Ini menghemat banyak waktu!

b. Gunakan Select Kolom yang Diperlukan Saja

Jangan mengambil semua kolom jika tidak diperlukan. Ini menghemat memori dan mempercepat pengambilan data.

$orders = Order::select(['id', 'customer_id', 'total_price'])->get();

c. Gunakan Indexing pada Kolom yang Sering Dicari

Pastikan kolom yang sering digunakan dalam WHERE dan JOIN memiliki indeks untuk mempercepat pencarian.

CREATE INDEX idx_customer_id ON orders (customer_id);

d. Hindari Query di dalam Loop

Melakukan query di dalam loop dapat menyebabkan aplikasi Anda melakukan banyak request ke database secara berulang. Ini sangat tidak efisien dan dapat memperlambat aplikasi Anda secara signifikan.

❌ Contoh yang Buruk:

$users = User::all();

foreach ($users as $user) {
    echo $user->posts()->count(); // Query dijalankan di setiap iterasi
}

✅ Solusi yang Lebih Baik (Menggunakan withCount):

$users = User::withCount('posts')->get();

foreach ($users as $user) {
    echo $user->posts_count; // Data sudah dihitung sebelumnya
}

Dengan withCount, kita hanya melakukan satu query ke database, bukan query di setiap iterasi.

2️⃣ Gunakan Caching untuk Mengurangi Query Berulang

Setiap kali panel admin menampilkan data yang sama berulang kali, itu bisa menyebabkan beban tinggi pada database. Untuk mengatasinya, gunakan caching:

a. Caching Query Database

Gunakan Laravel Cache untuk menyimpan hasil query yang jarang berubah:

$orders = Cache::remember('orders_list', 60, function () {
    return Order::with('customer')->get();
});

Kode di atas akan menyimpan data orders_list selama 60 detik. Saat dipanggil lagi dalam waktu itu, data akan diambil dari cache, bukan dari database.

b. Gunakan View Caching

Filament menggunakan Blade untuk tampilan. Aktifkan caching dengan perintah:

php artisan view:cache

Ini akan mempercepat rendering tampilan admin panel.

c. Gunakan Perintah Optimasi Filament

Untuk mengoptimalkan Filament dalam production, jalankan perintah berikut:

php artisan filament:optimize

Perintah ini akan melakukan caching pada komponen Filament dan Blade icons untuk meningkatkan performa secara signifikan. Ini adalah shortcut dari:

php artisan filament:cache-components
php artisan icons:cache

Untuk membersihkan cache sekaligus, gunakan:

php artisan filament:optimize-clear

d. Caching Komponen Filament

Jika tidak menggunakan filament:optimize, Anda dapat menjalankan:

php artisan filament:cache-components

Perintah ini menyimpan indeks komponen seperti resources, pages, widgets, relation managers, dan custom Livewire components di bootstrap/cache/filament.

Catatan: Saat pengembangan lokal, hindari menggunakan perintah ini karena perubahan baru tidak akan terdeteksi hingga cache dibersihkan.

Untuk membersihkan cache komponen tanpa membangun ulang:

php artisan filament:clear-cached-components

e. Caching Blade Icons

php artisan icons:cache

Filament menggunakan Blade Icons, yang bisa lebih cepat jika dikonfigurasi untuk menggunakan cache.

f. Optimalkan Config dan Route Caching

php artisan config:cache
php artisan route:cache

Perintah ini akan menyimpan konfigurasi dan routing dalam cache, sehingga aplikasi tidak perlu membaca file konfigurasi setiap kali ada request.

g. Gunakan OPcache untuk Mempercepat Eksekusi PHP

OPcache menyimpan bytecode PHP yang sudah dikompilasi, sehingga PHP tidak perlu menginterpretasi ulang kode setiap kali dijalankan. Aktifkan OPcache di server Anda untuk peningkatan performa yang signifikan.

h. Gunakan Redis atau Memcached untuk Caching yang Lebih Cepat

Untuk caching yang lebih cepat dibandingkan file-based cache, gunakan Redis atau Memcached.

Konfigurasi Redis di Laravel:

CACHE_DRIVER=redis

Menggunakan cache Redis di Filament:

$orders = Cache::store('redis')->remember('orders_list', 60, function () {
    return Order::with('customer')->get();
});

Redis lebih cepat daripada file storage dan lebih fleksibel dibandingkan database caching karena dapat menyimpan struktur data yang kompleks.

3️⃣ Optimasi Tampilan dengan Blade dan Livewire

a. Kurangi Penggunaan Query di Livewire Components

Jika Anda memuat data di render() secara langsung, ini akan dipanggil setiap kali komponen diperbarui. Simpan data dalam properti dan gunakan metode mount() untuk mengambil data sekali saja.

❌ Kurang Efisien (Query Berulang)

public function render()
{
    return view('livewire.orders', [
        'orders' => Order::all()
    ]);
}

✅ Lebih Efisien (Query Sekali Saja)

public $orders;
public function mount()
{
    $this->orders = Order::all();
}
public function render()
{
    return view('livewire.orders');
}

Dengan menyimpan hasil query di mount(), data tidak akan dimuat ulang setiap kali Livewire merender ulang komponen.

b. Gunakan Blade Components untuk Menghindari Redundansi

Jika ada UI yang digunakan berulang kali, buat komponen Blade agar lebih ringan.

<x-button type="primary">Simpan</x-button>

4️⃣ Optimasi Aset Frontend

FilamentPHP menggunakan TailwindCSS dan Alpine.js. Pastikan aset frontend dioptimalkan dengan cara berikut:

a. Gunakan Asset Versioning

Asset versioning adalah teknik yang digunakan untuk menambahkan versi unik pada file statis seperti CSS dan JavaScript agar browser selalu mengambil versi terbaru.

Laravel menyediakan metode mix() untuk mengelola asset yang dibangun menggunakan Laravel Mix. Saat Anda menjalankan perintah npm run prod atau npm run dev, Laravel Mix akan menghasilkan file dengan hash unik agar browser selalu menggunakan versi terbaru.

<link rel="stylesheet" href="{{ mix('css/app.css') }}">

Perintah ini akan menghasilkan output seperti berikut:

<link rel="stylesheet" href="/css/app.css?id=abcdef123456">

Karena ada perubahan pada nama file (?id=abcdef123456), browser akan menganggapnya sebagai file baru dan tidak menggunakan cache lama.

Jika proyek Anda menggunakan Vite, Laravel menyediakan fungsi @vite() untuk menangani asset versioning secara otomatis:

@vite(['resources/css/app.css', 'resources/js/app.js'])

Vite akan secara otomatis menangani cache busting dengan menambahkan hash unik pada file setiap kali Anda membangun ulang aset.

b. Lazy Loading untuk Gambar dan Script Tambahan

Gunakan loading="lazy" pada gambar agar tidak dimuat saat pertama kali halaman diakses.

<img src="logo.png" loading="lazy" alt="Logo">

Untuk script tambahan, gunakan defer agar tidak menghambat rendering halaman.

<script src="script.js" defer></script>

6️⃣ Gunakan CDN untuk Asset Statis

CDN dapat membantu mempercepat loading asset seperti CSS, JavaScript, dan ikon dengan mengunduhnya dari server yang lebih dekat dengan pengguna.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/dist/tabler-icons.min.css">

Jika menggunakan Filament dengan Tailwind, pertimbangkan untuk menggunakan CDN Tailwind di mode production:

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">

7️⃣ Batasi Data yang Ditampilkan

Admin panel sering menangani tabel besar, tetapi tidak semua data harus ditampilkan sekaligus. Gunakan teknik berikut:

a. Gunakan Pagination

Jangan menampilkan semua data dalam satu halaman. Gunakan pagination:

$users = User::paginate(10);

Filament juga sudah memiliki fitur pagination bawaan untuk tabel.

b. Batasi Jumlah Kolom dalam Tabel

Hanya tampilkan kolom yang benar-benar diperlukan.

Table::make()
    ->columns([
        TextColumn::make('name')->sortable(),
        TextColumn::make('email')->searchable(),
    ]);

c. Gunakan Lazy Loading untuk Relasi yang Tidak Selalu Dibutuhkan

Daripada selalu memuat relasi, gunakan load() hanya saat dibutuhkan:

$user = User::find(1);
$user->load('profile');

Lazy loading membantu mengurangi jumlah query yang dieksekusi.

8️⃣ Debugging dan Monitoring Performa

Gunakan Laravel Debugbar atau Clockwork untuk mengecek performa aplikasi Anda.

a. Menggunakan Laravel Debugbar

composer require barryvdh/laravel-debugbar --dev

Setelah diinstal, Debugbar akan menampilkan query yang berjalan dan waktu eksekusi untuk membantu Anda menemukan bottleneck.

b. Menggunakan Clockwork

composer require itsgoingd/clockwork --dev

Clockwork memberikan informasi detail tentang performa aplikasi, termasuk query, request, dan response time.

🎯 Kesimpulan

Meningkatkan performa admin panel FilamentPHP melibatkan beberapa aspek:
✅ Optimasi query database
✅ Penggunaan caching (termasuk Redis dan OPcache)
✅ Pengurangan query Livewire yang tidak perlu
✅ Optimasi aset frontend
✅ Penggunaan CDN
✅ Pembatasan data yang ditampilkan pada admin panel
✅ Monitoring dan debugging

Dengan menerapkan teknik-teknik ini, admin panel Anda akan lebih cepat, lebih efisien, dan memberikan pengalaman pengguna yang lebih baik. 🚀

Jika Anda memiliki pengalaman atau teknik optimasi lainnya, bagikan di komentar! Happy coding! 😃