Teknologi

Hapus Next.js, Blog Ini Raih Skor Sempurna di Lighthouse

Daftar Isi
  1. Alasan Meninggalkan Berbagai Platform Blog
  2. Optimalisasi Kinerja dan Peran CDN
  3. Kendala JavaScript Warisan di Next.js
  4. Migrasi ke Hono dan Hasil Akhir

Seorang pengembang membagikan pengalamannya dalam membangun sebuah blog yang ringan, cepat, tanpa kekacauan, serta mudah diakses. Setelah melalui proses yang melelahkan, ia akhirnya memutuskan untuk melepas framework Next.js yang sebelumnya ia gunakan demi mencapai skor sempurna di setiap kategori Lighthouse.

Alasan Meninggalkan Berbagai Platform Blog

Menurut sang pengembang, berbagai platform blog populer seperti Medium dan Blogger dinilai terlalu sarat dengan fitur namun tidak memuaskan dari segi performa, serta menyulitkan penulisan langsung menggunakan markah dan kode mentah. Alternatif lain seperti WordPress dianggap memiliki masalah dengan terlalu banyak plugin, sementara Ghost memerlukan pengelolaan mandiri yang merepotkan dan kerap rusak saat pembaruan versi. Hugo sebenarnya dinilai sebagai opsi terbaik, tetapi proses pengaturannya tetap memakan tenaga, hingga akhirnya ia menyukai kesederhanaan dan performa Bear Blog meski memiliki keterbatasan pada antarmuka penyuntingan dan fitur gratis.

Optimalisasi Kinerja dan Peran CDN

Pengukuran performa yang dilakukan melalui pagespeed.web.dev menunjukkan pentingnya penggunaan penelusuran singgah atau caching. Meskipun Next.js menyediakan fitur caching yang sangat praktis, pengunjung dari berbagai belahan dunia tetap mengalami jeda jaringan. Untuk mengatasi hal tersebut, penggunaan Jaringan Pengiriman Konten atau CDN menjadi kunci. Walaupun Vercel menyediakan CDN bawaan yang praktis, kendala biaya paket Pro, masalah waktu tunggu awal peladen tanpa peladen, serta ketergantungan ekosistem membuatnya beralih menggunakan layanan Cloudflare yang dinilai lebih efisien untuk situs statis.

Kendala JavaScript Warisan di Next.js

Selain caching, optimalisasi gambar juga krusial untuk mencegah penurunan performa situs. Berkat pemanfaatan fitur Transformasi Gambar dari Cloudflare, pengelolaan ukuran dan kompresi gambar dapat teratasi dengan baik. Namun, pengujian performa pada Next.js versi 16.1.6 masih menyisakan masalah berupa keberadaan kode JavaScript warisan dalam jumlah besar yang berasal dari kerangka kerja itu sendiri, bukan kode buatan sendiri.

Meskipun seluruh komponen klien telah dicopot dan hanya menyisakan komponen peladen, skor performa tidak kunjung beranjak karena runtime klien Next.js tetap disertakan bahkan untuk halaman statis. Komponen seperti penaut dan penggambar gambar itu sendiri merupakan komponen klien yang memicu proses hidrasi. Menghapus skrip tersebut secara paksa dari HTML yang dirender memerlukan cara peretasan, yang membuatnya mempertanyakan keberadaan penggunaan Next.js sejak awal.

Migrasi ke Hono dan Hasil Akhir

Mengingat besarnya kode JavaScript yang tidak terpakai mencapai 230.460 bita pada halaman statis yang sebenarnya tidak membutuhkan JavaScript sama sekali, ia akhirnya memutuskan untuk meninggalkan Next.js sepenuhnya demi kualitas blog. Ia memilih Hono karena filosofi teknisnya yang cepat dan sederhana serta dukungan JSX yang memadai.

Hasilnya, halaman blog tersebut berhasil mencetak angka 100 di semua kategori Lighthouse tanpa JavaScript yang tidak perlu, sementara kode yang tidak terpakai turun drastis menjadi 407 bita dan waktu pembangunan situs terpangkas sekitar 40 persen. Perbandingan menunjukkan tugas panjang sebelum halaman dirender memakan waktu 309,3 milidetik pada Next.js, sedangkan Hono menyelesaikannya dalam 68,01 milidetik atau peningkatan sekitar 78 persen.

Pengembang tersebut menyimpulkan bahwa situs web statis pada umumnya tidak memerlukan muatan JavaScript maupun hidrasi dari Next.js, meskipun framework tersebut dinilai tetap hebat untuk aplikasi yang sarat dengan interaksi.

Mungkin Anda Suka

Tinggalkan Komentar

Alamat email tidak akan dipublikasikan. Kolom wajib ditandai *