Replatforming the Bakorwil III Malang portal from WordPress to a headless Next.js and Payload CMS architecture, measured with Google Lighthouse and Core Web Vitals.Replatform portal Bakorwil III Malang dari WordPress ke arsitektur headless Next.js dan Payload CMS, diukur dengan Google Lighthouse dan Core Web Vitals.
Bakorwil III Malang's public site ran on a monolithic WordPress install loading more than 40 CSS and JavaScript files from assorted plugins, making it slow and hard to extend. I rebuilt it from scratch as a headless prototype: content modeling, admin panel, custom modules, and deployment. The prototype runs on Vercel and is under evaluation by the agency.Situs publik Bakorwil III Malang berjalan di WordPress monolitik yang memuat lebih dari 40 file CSS dan JavaScript dari berbagai plugin, sehingga lambat dan sulit dikembangkan. Saya membangunnya ulang dari nol sebagai prototipe headless: pemodelan konten, panel admin, modul kustom, hingga deployment. Prototipe ini berjalan di Vercel dan sedang dievaluasi oleh instansi.
Built with Next.js, Payload CMS, and MongoDB following the Rational Unified Process (RUP). In Google Lighthouse lab audits the homepage rose from 57 to 100 and LCP fell from 5.2s to 1.9s, in line with Indonesia's SPBE e-government agenda (Presidential Regulation No. 95/2018).Dibangun dengan Next.js, Payload CMS, dan MongoDB mengikuti metodologi Rational Unified Process (RUP). Dalam audit lab Google Lighthouse, skor beranda naik dari 57 menjadi 100 dan LCP turun dari 5,2 detik menjadi 1,9 detik, sejalan dengan agenda SPBE (Perpres No. 95/2018).
Problem Investigation: The Fragility of Monolithic WordPressInvestigasi Masalah: Kerapuhan Sistem Monolitik WordPress
Bakorwil III Malang serves as the pivotal coordinator across nine regencies and municipalities in East Java. For a public agency of this magnitude, its official portal is the frontline interface for citizens, researchers, student interns, and inter-agency civil servants.Badan Koordinasi Wilayah Pemerintahan dan Pembangunan III Provinsi Jawa Timur di Malang (Bakorwil III Malang) mengemban peran strategis mengoordinasikan sembilan kabupaten dan kota di Jawa Timur. Sebagai instansi publik, situs web resmi merupakan garda terdepan komunikasi bagi warga, akademisi, mahasiswa pemagang, dan sesama aparatur negara.
Yet a baseline Google Lighthouse audit of the live WordPress site put the homepage's Performance score at just 57 out of 100. Largest Contentful Paint (LCP) took 5.2 seconds, well over Google's ≤ 2.5s standard, and Speed Index reached 11.7 seconds.Namun, audit awal Google Lighthouse pada situs WordPress yang sedang berjalan menunjukkan skor Performa beranda hanya 57 dari 100. Largest Contentful Paint (LCP) mencapai 5,2 detik, jauh di atas standar Google ≤ 2,5 detik, dan Speed Index mencapai 11,7 detik.
Why was WordPress so slow? In a monolithic WordPress architecture, the presentation layer and management layer are tightly coupled in a shared PHP runtime. To create an editorial news aesthetic, the agency relied on the Newsmatic theme and Elementor page builder, layered with Autoptimize and Google Site Kit.Mengapa WordPress begitu lambat? Dalam arsitektur monolitik WordPress, lapisan tampilan (frontend) dan manajemen (backend) terikat erat dalam satu runtime PHP. Untuk membangun tampilan majalah berita, instansi menginstal tema Newsmatic dan page builder Elementor, didukung plugin Autoptimize dan Google Site Kit.
This combination forced over 40 external CSS and JavaScript files to load concurrently. The resulting render-blocking bottleneck crippled browser execution queues, driving Total Blocking Time (TBT) to 1,140 ms (over 5x the 200 ms acceptable threshold). Citizens on mobile devices experienced painful layout freezes before any button responded.Kombinasi tersebut memicu penumpukan lebih dari 40 berkas CSS dan JavaScript eksternal yang dimuat serentak. Akibatnya, terjadi render-blocking parah yang membebani antrean peramban pengguna, menyebabkan Total Blocking Time (TBT) menyentuh 1.140 milidetik (lebih dari 5 kali batas wajar 200 ms). Pengguna di ponsel pintar terpaksa menunggu layar putih beku sebelum konten dapat disentuh.
| PageHalaman | WP ScoreSkor WordPress | Google StatusStatus Google |
|---|---|---|
| Beranda | 57 | Buruk |
| SiMagang | 67 | Perlu Perbaikan |
| Peta Wilayah Kerja | 71 | Perlu Perbaikan |
| Foto Kegiatan | 75 | Perlu Perbaikan |
| Penghargaan | 77 | Perlu Perbaikan |
| Anggaran | 77 | Perlu Perbaikan |
| Sejarah | 78 | Perlu Perbaikan |
| Tugas dan Fungsi | 83 | Perlu Perbaikan |
| Kedudukan dan Alamat | 87 | Perlu Perbaikan |
| Laporan Kinerja | 87 | Perlu Perbaikan |
Why the Shift to a Headless Stack?Mengapa Memilih Headless CMS?
Bypassing fragile plugin patchworks by separating the content repository from the client presentation layer.Menghindari plugin yang rapuh dengan memisahkan repositori data dari antarmuka presentasi pengguna.
Next.js
Delivers hybrid rendering: Server-Side Rendering (SSR) for dynamic views and Static Site Generation (SSG) for static public portals. Features automatic code-splitting, route compression, and modern image optimization.Menyediakan kapabilitas rendering hybrid: Server-Side Rendering (SSR) untuk konten dinamis dan Static Site Generation (SSG) untuk halaman statis. Dilengkapi automatic code splitting, kompresi rute, dan optimasi gambar bawaan.
Payload CMS
A code-first headless CMS built with Node.js and TypeScript. Unlike plugin-heavy PHP platforms, Payload is code-configured without injecting unnecessary scripts into the client frontend.Headless CMS modern berbasis Node.js dan TypeScript. Berbeda dengan instalasi WordPress dengan plugin berat, konfigurasi Payload dilakukan berbasis kode tanpa menyuntikkan skrip yang tidak perlu ke frontend pengguna.
MongoDB
Document-oriented NoSQL database storing JSON-like dynamic BSON documents. Well suited for modular page builder blocks where each layout section requires flexible content structures.Database NoSQL berbasis dokumen JSON dinamis. Sangat ideal untuk mendukung sistem Blok Halaman Fleksibel (Dynamic Layout Blocks) yang memiliki struktur komponen beragam tanpa batasan skema tabel kaku.
Software Design & System FunctionalityDesain & Fungsionalitas Perangkat Lunak
The official website of Bakorwil III Malang is developed based on a headless CMS architecture. The system utilizes Next.js on the frontend to deliver fast, responsive public web pages, and Payload CMS with a MongoDB Atlas database on the backend for dynamic content administration. This modern system was engineered to replace the legacy WordPress platform, substantially elevating loading performance, content maintainability, visual responsiveness, and overall user experience without fragile third-party plugin overhead.Situs web resmi Bakorwil III Malang dikembangkan berbasis arsitektur headless CMS. Sistem ini dibangun menggunakan Next.js sebagai frontend untuk menampilkan halaman situs web kepada pengguna secara cepat dan responsif, serta Payload CMS dengan basis data MongoDB Atlas sebagai backend untuk mengelola konten secara dinamis. Arsitektur ini dirancang menggantikan sistem lama berbasis WordPress dengan tujuan meningkatkan performa, kemudahan pengelolaan konten, responsivitas tampilan, serta kualitas pengalaman pengguna tanpa beban plugin pihak ketiga yang rapuh.
Visitor FunctionalityFitur untuk Pengunjung
Viewing Post Lists & DetailsMelihat Daftar dan Detail Artikel
Visitors can access all published official news articles with server-side pagination, category taxonomy filtering, and read complete articles on detail pages with automated view counter increments.Pengunjung dapat mengakses seluruh artikel dan berita resmi yang telah dipublikasikan oleh Bakorwil III Malang dengan paginasi cepat, filter taksonomi kategori, serta membaca isi artikel secara lengkap pada halaman detail dengan pencatatan view counter otomatis.
Instant Multi-Field Article SearchPencarian Artikel Cepat
Visitors can search news via keywords indexed across titles, meta descriptions, and slugs, returning sub-50ms query responses without third-party search plugins.Pengunjung dapat mencari artikel berita berdasarkan kata kunci yang dicocokkan secara cepat dengan judul, meta deskripsi, dan slug artikel, memberikan respons kueri di bawah 50 milidetik tanpa plugin pencarian pihak ketiga.
Viewing Regional Coordination AgendaMelihat Agenda Kegiatan Kedinasan
Visitors can view the official coordination agenda spanning regional jurisdictions, complete with event titles, descriptions, schedules, and venue locations.Pengunjung dapat mengakses kalender dan daftar agenda kegiatan resmi Bakorwil III Malang lintas wilayah kerja yang telah dipublikasikan, lengkap dengan informasi judul, deskripsi, tanggal pelaksanaan, dan lokasi kegiatan.
Viewing Internship Directory (SiMagang)Melihat Data Magang (SiMagang)
Visitors can browse the public intern directory where participant operational statuses (Upcoming, Active, Completed) are dynamically computed from calendar dates without manual toggling.Pengunjung dapat mengakses daftar peserta magang beserta informasi detailnya. Status magang dihitung secara otomatis oleh sistem berdasarkan tanggal kalender berjalan (Akan Datang, Aktif, Selesai) dan dapat disaring dengan filter status.
Submitting & Viewing Public CommentsMenulis dan Melihat Komentar
Visitors can submit feedback comments on published news articles with name, email, and message, processed through an automated pre-publication moderation queue before public display.Pengunjung dapat mengirimkan komentar aspirasi pada artikel berita yang dipublikasikan dengan mengisi nama, email, dan isi komentar. Setiap komentar masuk ke dalam antrean moderasi otomatis sebelum ditampilkan secara publik.
Accessing Public Informational PagesMengakses Halaman Informasi Publik
Visitors can access agency profile pages, statutory duties, jurisdictional maps, and transparency reports rendered dynamically through polymorphic content block schemas.Pengunjung dapat mengakses seluruh halaman informasi resmi instansi seperti profil instansi, tugas dan fungsi, peta wilayah kerja, dan transparansi kinerja yang dikelola melalui sistem manajemen blok dinamis polimorfik.
Admin FunctionalityFitur untuk Pengelola
Admin Login & Role-Based AccessLogin & Kontrol Akses Berbasis Peran
Administrators sign in to the control dashboard using bcrypt-hashed credentials secured with role-based JWT sessions and brute-force login rate limiting.Admin dapat masuk ke panel administrasi menggunakan email dan kata sandi aman (bcrypt), dengan sesi terproteksi berbasis peran dan pembatasan percobaan login.
Post & Content Lifecycle ManagementManajemen Post & Siklus Konten
Administrators create, draft, edit, publish, and delete news articles. Publishing automatically triggers on-demand ISR hooks to purge and refresh public edge caches.Admin dapat membuat, mengedit, mempublikasikan, dan menghapus artikel. Setiap artikel dapat disimpan sebagai draft terlebih dahulu, dan publikasi otomatis memicu hook on-demand ISR untuk me-refresh cache halaman publik seketika.
Polymorphic Page Builder ManagementManajemen Halaman Blok Dinamis
Administrators compose and manage public pages using modular polymorphic blocks without touching code or relying on external web developers.Admin dapat membuat, mengedit, dan menghapus halaman informasi publik menggunakan sistem blok konten polimorfik tanpa perlu menyentuh source code atau bergantung pada developer.
Automated 7-Tier Media PipelineManajemen Media & Pipeline Otomatis
Administrators upload and manage image assets, automatically compressed to WebP and generated into 7 responsive viewport sizes for optimal LCP scores.Admin dapat mengunggah, mengelola, dan menghapus aset media gambar. Sistem secara otomatis mengompresi gambar ke format WebP dan menghasilkan 7 varian ukuran responsif demi menjamin skor LCP optimal.
Category & Taxonomy ManagementManajemen Kategori & Taksonomi
Administrators organize articles into categories with automated SEO-friendly URL slug generation and relationship mapping.Admin dapat menambah, menyunting, dan menghapus kategori artikel untuk mengelompokkan konten berita, lengkap dengan pembuatan URL slug otomatis yang ramah SEO.
SEO & Open Graph Metadata ConfigurationPengisian Metadata SEO & Open Graph
Administrators configure custom title tags, meta descriptions, social media preview cards, and crawler indexing directives for every article and page.Admin dapat mengisi dan memperbarui metadata pencarian, tag judul kustom, deskripsi meta, pratinjau kartu media sosial (OG:Image), dan indeks robot pada setiap artikel dan halaman publik.
Comment Moderation QueueAlur Moderasi Komentar
Administrators review incoming public comments in a triage queue, approving or rejecting submissions before they appear on the live portal.Admin dapat meninjau seluruh komentar publik yang masuk dengan status pending dan menetapkan status disetujui (approved) agar tampil ke publik, atau ditolak (rejected) agar disaring.
Regional Coordination Agenda ManagementManajemen Agenda Kedinasan
Administrators schedule and publish regional coordination meetings, leadership forums, and agency activities with date ranges and venues.Admin dapat membuat, mengedit, mempublikasikan, dan menghapus agenda kegiatan dinas yang mencakup informasi judul rapat, deskripsi, tanggal pelaksanaan, dan lokasi acara.
SiMagang Internship Records ManagementManajemen Data & Rekap SiMagang
Administrators manage intern records with strict chronological date integrity validation (end date after start date) and academic institution tracking.Admin dapat menambah, mengedit, dan menghapus data peserta magang dengan validasi integritas tanggal (tanggal selesai harus setelah tanggal mulai) serta rekapitulasi asal perguruan tinggi.
Bespoke Modules Free From Plugin Lock-inFitur Kustom Mandiri Tanpa Keterikatan Plugin
Translating real-world provincial government operations into modular, high-performance web applications free from third-party plugin lock-in and performance decay.Menerjemahkan kebutuhan operasional nyata birokrasi pemerintahan daerah menjadi modul web fungsional yang mandiri, kencang, dan bebas dari beban plugin monolitik yang rentan.
Lighthouse Results: Homepage from 57 to 100Hasil Audit Lighthouse: Beranda dari 57 ke 100
Google Lighthouse lab audits of the ten lowest-scoring pages, comparing the legacy WordPress site with the prototype deployed on Vercel.Audit lab Google Lighthouse pada sepuluh halaman dengan skor terendah, membandingkan situs WordPress lama dengan prototipe yang di-deploy di Vercel.
| PageHalaman | Legacy WordPressSkor WordPress Lama | Next.js + PayloadSkor Next.js + Payload | ImprovementPeningkatan |
|---|---|---|---|
| HomepageBeranda | 57/100 | 100/100 | +43 ptspoin |
| SiMagang (Internship)SiMagang | 67/100 | 100/100 | +33 ptspoin |
| Regional MapPeta Wilayah Kerja | 71/100 | 98/100 | +27 ptspoin |
| Photo GalleryFoto Kegiatan | 75/100 | 99/100 | +24 ptspoin |
| AwardsPenghargaan | 77/100 | 98/100 | +21 ptspoin |
| Budget & TransparencyAnggaran | 77/100 | 100/100 | +23 ptspoin |
| HistorySejarah | 78/100 | 100/100 | +22 ptspoin |
| Duties & FunctionsTugas dan Fungsi | 83/100 | 99/100 | +16 ptspoin |
| Location & AddressKedudukan dan Alamat | 87/100 | 99/100 | +12 ptspoin |
| Performance ReportsLaporan Kinerja | 87/100 | 100/100 | +13 ptspoin |
Black Box TestingBlack Box Testing
Functional validation was tested and verified directly by Mukhammad Wildan Alauddin, IT Coordinator at Bakorwil III Malang, across 61 test scenarios:Pengujian fungsional divalidasi langsung oleh Mukhammad Wildan Alauddin, selaku Koordinator TI Bakorwil III Malang, mencakup 61 skenario pengujian:
User Experience Questionnaire (UEQ)Kuesioner Pengalaman Pengguna (UEQ)
Conducted with 31 verified respondents engaging directly with the deployed portal. All 6 UEQ evaluation scales attained mean scores significantly exceeding the 0.8 benchmark threshold:Melibatkan 31 responden terverifikasi yang menguji langsung portal baru. Seluruh 6 skala UEQ memperoleh skor rata-rata (mean) jauh di atas ambang batas 0,8, membuktikan penerimaan yang sangat positif:
Modernizing Regional Government Portals with Modern Web StandardsMewujudkan Portal Pemerintah Daerah yang Modern dan Responsif
By separating content management from presentation with Next.js and Payload CMS, the Bakorwil III Malang portal delivers fast load times and clean maintainability. The evaluative prototype runs on Vercel and is under evaluation by the agency.Dengan memisahkan lapisan konten dan presentasi menggunakan Next.js dan Payload CMS, portal Bakorwil III Malang dapat mencapai performa cepat dan mudah dikelola. Prototipe fungsional ini berjalan di Vercel dan sedang dievaluasi oleh instansi.
Key Strategic Recommendations for Public Sector Web:Rekomendasi Strategis untuk SPBE Indonesia:
- Phase out monolithic, plugin-heavy WordPress setups for citizen-facing portals subject to high concurrent traffic.Tinggalkan arsitektur WordPress monolitik berat untuk portal publik yang memiliki lalu lintas warga tinggi.
- Adopt code-configured Headless CMSs (such as Payload CMS) enabling PR teams to manage content without incurring frontend runtime debt.Adopsi Headless CMS berbasis kode (seperti Payload CMS) agar staf birokrasi bebas mengelola konten tanpa merusak performa frontend.
- Institutionalize Core Web Vitals (LCP, INP, CLS) as non-negotiable compliance criteria in e-government software procurement.Jadikan metrik Core Web Vitals (LCP, INP, CLS) sebagai standar kepatuhan teknis wajib dalam pengadaan situs web pemerintah daerah.