Gw udah nyerah, angkat tangan mengoptimalkan website yang di blogger. Emang udah dari sananya lemot mau gimana lagi. Akhirnya sekarang gw mau pindah haluan. Mending bikin web sendiri daripada pake yg dari blogger. Semuanya bisa diatur sesuka hati sesuai kebutuhan dan lebih cepat loadingnya. Apalagi jaman sekarang jaman dimana sebuah web itu ga harus loading lagi setiap pindah halaman, langsung kebuka. Loadingnya pas pertama kali buka aja, karena survey membuktikan website yang loadingnya lebih dari 3 detik, user bakal meninggalkan website tersebut, termasuk gw. gw juga males kalau nungguin website yang loadingnya kelamaan. Awalnya gw sempat mau pakai jekyll karena berpengalaman menggunakannya saat bikin CV online dulu, tapi menurut gw masih agak lambat, hasil GT metrix dan google page speed test di website CV online gw juga biasa aja, ga lambat dan ga terlalu cepat juga. Trus gw nemu postingan di grup facebook tentang gatbsyJS dan nextJS. Gw langsung tertarik dengan kedua framework statis tersebut.
Pilihan gw jatuh ke gatsbyJS. Gatsby ini turunan dari React framework yang udah cukup terkenal karena speed-nya khusus untuk static site. Gatsby menggunakan sistem render dari sisi server, kayak jsp pada java, tapi ini menggunakan node JS. Framework ini merender javascript atau typescript saat di build dari sisi server menjadi sebuah content static berbasis HTML biasa. Pemanggilan API menggunakan graphql ini dilakukan dari sisi server saat deploy. Jadi setelah di-build ga ada lagi pemanggilan API di client, murni static page biasa, kecuali pakai plugin pihak ketiga. Gw coba test pakai google speed test juga hasilnya nyaris sempurna, sangat cepat. Semua foto internalnya lazy load, jadi saat pertama buka, gambar yang ditampilkan bakal berupa blur image atau svg sebelum menampilkan foto aslinya, mirip medium gitu. Load image-nya pas scroll ke image tersebut, jadi ga semua image di-load saat halaman dibuka. Dan gatsby ini ga butuh Jquery tentunya, plugin yang sangat legend ini masanya udah habis, jadi good bye jquery!
Gw juga memakai beberapa plugin diantaranya medium zoom, contentful, algolia dan lainnya. Sebenarnya secara default gatsby menggunakan file markdown untuk menampilkan kontennya. Berhubung karena gw males banget dan ribet bikin MD files tiap nge-post, akhirnya gw memilih Contentful sebagai sumber kontennya. Selain Cotentful juga ada Ghost, DatoCMS, Netlify cms dan lainnya. Tapi gw lebih memilih Contentful karena gratis pastinya, dan cukup mudah menurut gw. Jadi kayak blogger gitu, gw tinggal bikin konten di sana trus saat publish gatsby bisa mengambil kontennya via graphql saat di build nanti. Jadi ga ribet harus bikin file markdown dulu setiap mau ngepost trus push lagi ke master. Lagian ntar kalau post gw udah banyak, file markdown di branch bakal membludak ga beraturan.
Untuk sisi server gw pakai zeit atau vercel aja. Dulu namanya zeit, tapi sekarang ganti jadi Vercel. Alasan utamanya karena gratis. Ada beberapa pilihan sih seperti fast io atau netlify. Cuma kalau fast io ga full support gatsby, sedangkan netlify gw udah punya domain https://ferry.netlify.app/resume/ untuk CV online. Selain itu domain netlify kepanjangan, sedangkan di vercel lebih singkat di https://ferry.now.sh. Lebih elegan aja sih menggunakan domain yang singkat daripada yang panjang-panjang. Di vercel ini fiturnya kurang lebih sama dengan netlify, bisa di atur environment variable nya lewat command line, tentu saja harus install lewat npm dulu. Dan saat konten baru di publish dari contentful, dia bakal auto deploy sendiri. Karena menggunakan server-side rendering, tiap ada konten baru memang harus dideploy ulang, karena pemanggilan graphql-nya saat di-build di server. Begitu juga saat push ke branch master dia juga bakal auto deploy sendiri.
Untuk fitur pencarian gw pakai algolia, karena ada versi gratisannya dan ga ribet set-up-nya. Fitur gratisnya ada limitnya sih, tapi semoga aja perbulannya gw ga melampaui limit. Selain algolia ada yang murni gratis, kayak elastic lunr, tapi settingnya rada ribet. Jadi mending pakai algolia saja. Oh ya, algolia ini untuk index datanya dilakukan saat build di server, tapi pemanggilan datanya dilakukan saat search menggunakan client-side rendering. Jadi sama kayak manggil API biasa ke server algolia. Selain itu algolia ini ada fitur voice search, kayak ok google gitu, tapi sayangnya hanya support di chrome-based browser aja. Tapi di beberapa versi ada yang ga jalan juga sih. Untung di google chrome jalan, jadi blog gw kayak keren gitu (kontennya mah biasa aja 😁).
Plugin lainnya yang gw pake yang menurut gw menarik yaitu medium zoom. Jadi ketika klik gambar, gambarnya bakal pop-up nge-zoom gitu kayak di medium. Jadi ga hanya blur-up mirip medium, tapi zoom-nya juga biar keren. Untuk fitur komen masih belum nemu yang cocok. Disqus bagus tapi yang gratisnya ada iklannya, mana iklannya kadang gede lagi. Facebook bagus sih, tapi hanya orang yang login di facebook doang yang bisa komen. Yang lainnya pada bayar. Tapi gw masih nyari-nyari, survey gitu, siapa tau ada yang gratis dan menarik.
Semoga aja blog gw kali ini banyak manfaatnya. Dan gw lebih sering bikin kontennya secara konsisten, baik itu tentang pemrograman maupun tentang keluh kesah kehidupan gw secara personal. Harapannya sih bisa bermanfaat bagi orang-orang. Walaupun kayaknya ga ada faedahnya sih buat orang lain. Tapi yang penting gw ada kerjaan buat menyalurkan hasrat menulis gw lewat blog ini. Oh ya, rencananya sih template blog ini bakal gw bikin open source, kali aja ada yang tertarik dengan tampilan blog ini. Buat yang penasaran silakan di-garpu lewat github gw. Boleh dipake di environment masing-masing. Disana Readme-nya Insya Allah udah lengkap gw tulis. Bagi yang mau ikut berkontribusi juga silakan bikin pull request-nya. Kali aja ada bug atau code yang bisa di-optimize lagi.