Apa itu jampack?
jampack bukan bundler maupun framework, melainkan alat pascapemrosesan yang mengoptimalkan output dari static site generator (SSG) untuk meningkatkan pengalaman pengguna dan skor Core Web Vitals.
Apa yang bisa dilakukan jampack?
- Gambar dalam tag
<img> diubah menjadi responsif agar mendukung berbagai resolusi, dan atribut loading="lazy" serta decoding="async" ditambahkan untuk meningkatkan performa.
- Diubah menjadi gambar responsif yang mencakup berbagai format gambar dengan menggunakan tag
<picture>, serta mendukung format AVIF.
- Gambar CDN diubah menjadi responsif, sehingga gambar dengan berbagai resolusi dapat disajikan melalui
srcset.
- Dapat mengunduh dan mengoptimalkan gambar eksternal, lalu menyimpan file gambar yang telah dioptimalkan di dalam folder
_jampack.
- Gambar yang langsung terlihat di layar (above-the-fold) dimuat dengan prioritas tinggi, sedangkan gambar yang baru terlihat saat menggulir ke bawah (below-the-fold) dimuat secara lazy.
CSS penting inline
- Untuk mencegah FOUC (Flash of Unstyled Content) yang bisa terjadi saat stylesheet diunduh dan diparsing,
jampack meng-inline CSS penting dan memuat CSS sisanya secara lazy.
Prefetch tautan
- Melakukan prefetch tautan di dalam halaman untuk meningkatkan kecepatan navigasi ke halaman berikutnya. Berkat quicklink, tautan yang masuk ke viewport bisa diprefetch secara dinamis.
Kompresi semua aset
jampack mengompresi semua aset yang belum tersentuh pada pass kedua, sambil mempertahankan nama dan format yang sama. Untuk berbagai ekstensi file, digunakan alat kompresi yang sesuai.
Dan lebih banyak lagi!
jampack dapat mengoptimalkan situs web statis di dalam folder dist melalui perintah npx @divriots/jampack ./dist.
Contoh penggunaan jampack
jampack digunakan di berbagai situs web seperti situs web ‹div›RIOTS, keycloak.ch, bayjs.org, dan lainnya.
Asal nama jampack
jam: berasal dari Jamstack.pack: mengingatkan pada executable packer dari era 90-an.
Lisensi
- Perangkat lunak ini dirilis di bawah ketentuan lisensi MIT.
Opini GN⁺
jampack bisa menjadi alat yang berguna bagi software engineer pemula yang sangat tertarik pada optimasi performa web. Khususnya, alat ini tampak bermanfaat bagi pengembang yang mementingkan metrik performa seperti Core Web Vitals.- Alat ini tidak hanya menyediakan optimasi gambar, tetapi juga berbagai fitur optimasi web seperti kompresi CSS dan JavaScript, sehingga dapat mempersingkat waktu muat halaman dan meningkatkan pengalaman pengguna.
- Dari sudut pandang kritis, penggunaan alat seperti
jampack dapat menambah kompleksitas situs web, dan jika digunakan secara keliru justru bisa menimbulkan masalah performa. Karena itu, pengujian dan peninjauan yang memadai diperlukan sebelum menggunakan alat ini.
- Sudah ada banyak alat untuk optimasi performa web, misalnya Google Lighthouse atau WebPageTest. Dengan menggunakan
jampack bersama alat-alat tersebut, performa situs web dapat dianalisis dan ditingkatkan secara menyeluruh.
- Saat mengadopsi
jampack, strategi optimasi perlu disusun dengan mempertimbangkan struktur situs web dan tech stack yang digunakan. Selain itu, menggunakan alat open source memang memberi keuntungan berupa dukungan komunitas, tetapi tanggung jawab atas keberlanjutan dan pemeliharaan proyek juga perlu dipertimbangkan.
1 komentar
Komentar Hacker News
Seorang pengguna menyebut bahwa ia akhirnya menemukan apa yang selama ini ia cari. Sebelumnya ia mengoptimalkan gambar dengan skrip buatannya sendiri yang menggunakan Sharp, tetapi setelah memakai Jampack hal itu tidak lagi diperlukan. Setelah membangun situs statis Quarto lalu menjalankan Jampack, ukuran folder berkurang 32%, dan sejauh ini belum ada kekurangan yang terlihat. Ia juga membagikan metrik performa sebelum dan sesudah menggunakan Jampack dengan PageSpeed Insights.
Pengguna lain menyebut bahwa fitur ini mengingatkannya pada modul PageSpeed untuk Apache dan Nginx.
Seorang pengguna mengatakan ia menyukai Jampack dan berniat menggunakannya, lalu bertanya cacat apa yang mungkin akan ditunjukkan oleh orang-orang yang lebih kritis. Menurutnya, Jampack melakukan hal yang mirip dengan mengompilasi kode C menjadi assembly yang dioptimalkan, yakni menangani pekerjaan yang secara pribadi tidak ingin ia lakukan sendiri.
Pengguna lain tertarik pada konsep mengidentifikasi CSS yang "penting" lalu menjadikannya inline. Ia berharap ada cara yang lebih prinsipil untuk mengidentifikasi CSS yang tidak penting, tetapi library yang digunakan tampaknya merender halaman lalu berusaha mendeteksi aturan mana yang penting sebaik mungkin.
Seorang pengguna ingin melihat cara memilih subset font berdasarkan rentang Unicode dari output SSG, serta mengunci sumbu OpenType sesuai
font-feature-settingsyang didefinisikan di CSS.Seorang pengguna yang menganggap Jampack sangat keren bertanya apakah bisa dibuat kontainer Docker untuk mempermudah penggunaan bagi orang-orang yang takut memakai Node.js.
Seorang pengguna yang tidak suka tata letak halaman web dan menolak mempelajarinya tetapi kadang tetap harus melakukannya, menyebut Jampack tampak hebat.
Ada pengguna yang bertanya tentang static site generator yang digunakan di lingkungan produksi nyata. Ia merasa alat seperti ini dapat dipakai untuk lebih mengoptimalkan output. Misalnya, ia sudah mencoba seharian untuk mengubah situs web Divjoy React menjadi HTML sederhana yang bisa disajikan dari bucket S3, tetapi mengalami kesulitan. Ia membutuhkan alat yang dapat otomatis melakukan deployment ke bucket S3 dan mengarahkan domain.
Ada pengguna yang menyebut Jampack tampaknya mencakup banyak kasus penggunaan yang ingin ditangani oleh SSG dan pluginnya. Ia penasaran apakah alasan memilih Astro atau Eleventy adalah karena lebih menyukai tahap pasca-build yang terpisah. Mungkin ada trade-off antara rebuild yang cepat selama pengembangan dan kemungkinan melewatkan bug halus yang bisa muncul ketika memperkenalkan hal-hal seperti deklarasi lebar gambar.
Seorang pengguna menyampaikan terima kasih kepada orang-orang yang mengirim contoh nyata lewat email. Ia mengatakan sangat menghargai dukungan tersebut.