matriphe! personal blog

Setelah tahun kemarin saya menggunakan tema blog Upus, kini saya mengganti tema blog saya di tahun 2018 ini dengan tema Meng.

Jika tema-tema sebelumnya, yaitu Upus dan Primasty dibuat dengan menggunakan framework CSS Bootstrap, sedangkan Miranti menggunakan framework CSS Materialize, kali ini saya menggunakan Bulma.

Bulma merupakan framework CSS yang berbasis pada flexbox. Saya yang sudah lama tidak mengikuti perkembangan CSS, cukup takjub dengan penggunaan flexbox yang cukup powerful.

Dibandingkan dengan Bootstrap, Bulma fiturnya mungkin tidak selengkap Bootstrap. Apalagi Bootstrap 4 akhirnya resmi dirilis setelah beberapa lama tertahan.

Namun karena Bulma cukup ringan dan komponen yang saya butuhkan tersedia, saya memilih menggunakan Bulma.

Ada satu komponen yang tidak ada di Bulma, yaitu komponen grid foto yang biasa saya gunakan untuk tampilan galeri.

Saya pun akhirnya membuat sendiri komponen ini dengan menggunakan komponen yang ada.

Saya juga masih menggunakan Font Awesome untuk tampilan ikon, font Ubuntu, Roboto, EB Garamond, dan Share Tech Mono yang saya ambil dari Google Font.

Untuk kompilasi aset CSS dan JavaScript, saya memanfaatkan SCSS dan Grunt.

Warna yang saya gunakan sebagai warna dasar tema ini adalah warna Ultra Violet (Pantone 18-3838) yang ditetapkan menjadi Warna Tahun 2018 oleh Pantone.

Tema kali ini saya mengurangi penggunaan JavaScript demi mengejar performa. Saya hanya menggunakan JavaScript untuk menampilkan modal pada galeri foto dan bLazy untuk memuat gambar secara asynchronous.

Dari hasil statistik kunjungan ke blog ini, sebagian besar berasal dari perangkat mobile. Oleh karena itu, dukungan untuk tampilan mobile juga saya utamakan.

Saya juga mengaktifkan fitur AMP (Accelerated Mobile Page) yang memberikan performa maksimal bagi pengguna perangkat bergerak.

Total sekitar 5 hari waktu yang digunakan untuk membuat tema ini. Tema ini saya kerjakan di waktu luang saya di saat akhir pekan.

Performa

Saya menggunakan GTmetrix untuk melakukan pengecekan performa blog ini. GTmetrix adalah layanan untuk mengukur performa sebuah situs web. GTmetrik menggabungkan 2 cara pengukuran, yaitu dengan Google PageSpeed dan Yahoo! Slow (YSlow).

GTmetrix akan memberikan skor performa dengan huruf A sampai F. Nilai A adalah nilai yang paling bagus, sedangkan nilai F adalah nilai yang buruk.

Skor performa blog ini saat menggunakan tema blog Meng adalah A (92%) untuk skor PageSpeed, dan C (76%) untuk skor YSlow. Sedangkan saat menggunakan tema blog Upus, saya mendapat skor A (90%) untuk skor PageSpeed dan C (77%) untuk skor YSlow.

Namun perbandingan performa terlihat mencolok pada bagian pemuatan halaman. Jika sebelumnya untuk memuat seluruh halaman depan blog ini membutuhkan waktu 6,6 detik, dengan tema baru, halaman muka akan termuat seluruhnya hanya dalam waktu 2,4 detik.

Ukuran berkas yang dimuat pun jauh berkurang. Jika sebelumnya server akan mengirim data sebesar 1,45 MB, kini server hanya mengirim sebesar 427 KB.

Demikian juga dengan permintaan eksternal yang terjadi di blog, misalnya untuk mengambil berkas JavaScript, berkas CSS, pada tema lama ada 63 permintaan yang dilakukan. Pada tema baru, permintaan keluar ini hanya ada 40.

Saya sendiri cukup puas dengan tampilan dan performa tema baru ini, meski masih ada beberapa hal kecil yang belum selesai, namun bisa saya lakukan bertahap ke depan.

Dengan tema baru ini semoga blog ini bisa lebih banyak memberi manfaat.