Improvisasi Performa Web Pribadi

5 minutes read
web development
web performance

Di artikel sebelumnya, saya telah diberikan daftar peluang oleh Lighthouse report untuk meningkatkan performa website saya. Sekarang waktunya saya membagikan referensi yang saya peroleh untuk meningkatkan performa tersebut. Referensi yang saya gunakan rata-rata didapatkan dari situs web.dev

Mengecilkan ukuran (size) avatar di website pribadi

Saya menggunakan ImageMagick sebuah CLI untuk mengubah ukuran avatar di website pribadi saya dan me-resize avatar sekitar 75%. Perintahnya cukup sederhana.

convert avatar.jpg -resize 75% avatar_small.jpg

Hasil yang saya peroleh sekarang adalah avatar dengan ukuran 26 KB. Silahkan dibaca lebih lanjut di artikel Serve images with correct dimmensions.

Menyediakan avatar tersebut dalam format JPEG 2000, JPEG XR dan WebP

Hasil avatar 26 KB tersebut saya gunakan untuk dikonversi ke dalam format WebP dengan menggunakan cwebp (CLI tool). Untuk menggunakan cwebp cukup sederhana, silahkan unduh di tautan ini dan cari versi paling baru di bagian paling bawah.

Berikutnya, ekstrak unduhan tadi dan masuk ke dalam folder examples dengan menggunakan command line atau cmd. Kemudian, pindahkan avatar 26 KB tadi ke dalam folder examples tersebut dan menjalankan dengan perintah:

cwebp -q 40 avatar_small.jpg -o avatar_small.webp

Angka 40 tersebut mengacu pada kualitas webp tersebut, semakin kecil angkanya maka semakin kecil pula kualitas dan ukuran gambarnya.

Setelah berhasil mengubah format avatar ke dalam webp, langkah terakhir adalah cara menyajikan gambar dengan format webp tersebut ke dalam browser. WebP saat ini belum didukung oleh Safari saat artikel ini ditulis, sehingga jika gagal dimuat maka yang akan dimuat adalah format JPG.

Dengan menggunakan tag picture dan source, kita dapat menanggulangi hal tersebut.

Jika sebelumnya sintaks untuk menampilkan gambar seperti ini

<img src="avatar_small.jpg" alt="Avatar">

Maka sekarang seperti ini

<picture>
  <source type="image/webp" srcset="avatar_small.webp">
  <source type="image/jpg" srcset="avatar_small.jpg">
  <img src="avatar_small.jpg" alt="">
</picture>

Browser akan menggunakan urutan source yang pertama yakni image/webp, jika gagal maka akan menggunakan image/jpg.

Untuk lebih lanjut silahkan baca Use WebP images.

Mengeliminasi sumber yang bersifat render-blocking

Terdapat tiga sumber dari pihak ketiga yang bersifat render-blocking antara lain font-awesome, normalize.css, dan google fonts. Kemudian dengan sumber pribadi yakni coder.min.css yang merupakan theme dari website pribadi. Saya akan jabarkan satu per satu.

Font awesome

Jika saya perhatikan kembali halaman depan web saya, saya hanya menggunakan font awesome untuk icon Github, Medium, Linkedin, Twitter dan Bar (hamburger menu mobile web). Sehingga solusi yang bisa dipakai adalah menampilkan icon tersebut dalam format svg yang sudah diunduh dari repository Font Awesome.

Kemudian, agar icon tersebut benar-benar tampil kita set class .inline-svg dan memasang atribut fill="currentColor" agar warna svg sesuai dengan warna yang dipasang oleh induk body.

.inline-svg {
  display: inline-block !important;
  height: 2.4rem;
  width: 2.4rem;
  top: .24rem;
  position: relative;
}

Cara memasang svg bisa dilihat di repositori website pribadi saya.

Psst, saya dapatkan referensi tersebut dari website pribadi mas Yohan Totting. Cukup inspect element. 🤫

Berikutnya, setelah selesai saya tinggal hapus saja CDN font-awesome. 😁

Normalize CSS

Fungsinya adalah untuk menormalisasi style CSS bawaan browser agar seragam. Setelah saya amati repositorinya ternyata sudah lebih dari 3 tahun. Alhasil saya mencari dan mendapatkan mordern-normalize milik Sindre Sorhus. Berikutnya, saya tinggal mengeluarkan semua isi dari modern-normalize dan minify CSS nya, taruh sebagai internal style di dalam tag head dan pastinya lebih cepat dimuat karena tidak memanggil CDN modern-normalize. 😝

Google fonts

Saya memiliki tips agar cukup menggunakan satu font dengan dua ukuran misalnya saya menggunakan font Roboto Mono dengan ukuran 400 dan 700. Kemudian, saya hanya memilih opsi Latin saja pada Roboto Mono ini. Agar font saya lebih cepat diunduh oleh browser maka saya menggunakan atribut preload dan preconnect untuk memajukan DNS dan TLS handshake.

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&display=swap">
<link rel="preload" href="https://fonts.gstatic.com/s/robotomono/v6/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/robotomono/v6/L0xkDF4xlVMF-BfR8bXMIjDwjmqxf7-pAVU_.woff2" as="font" type="font/woff2" crossorigin>

Untuk detailnya silahkan baca tentang Preconnect, Preload Google Fonts dan Preload web fonts to improve loading speed

Coder.min.css

Tidak semua style dalam file coder.min.css dimuat dalam browser. Jadi, saya pikir saya bisa menarik isi-isi yang diperlukan (termasuk media query yang diperlukan) untuk memuat halaman utama website saya. Dengan adanya artikel yang disediakan oleh web.dev tentang Defer non-critical CSS membantu saya melakukan langkah-langkahnya.

Menambahkan preconnect atau dns-prefetch ke third party google analytics

dns-prefetch = DNS dan preconnect = DNS + TCP + TLS. Alhasil, saya memilih opsi preconnect karena sudah dilengkapi dengan DNS, TCP dan TLS. Hanya saja gunakan atribut preconnect secara bijak seperti yang disampaikan di tautan ini.

Tambahan: defer google analytics

Saya menggunakan Google Analytics di web pribadi untuk memantau jumlah orang yang membuka tautan artikel saya. Hanya saja, saya lebih memprioritaskan website saya dimuat semuanya kemudian barulah Google Analytics atau Google Analytics belakangan saja tidak apa. Akhirnya saya menggunakan atribut defer untuk Google Analytics seperti skrip di bawah.

<script defer src='https://www.google-analytics.com/analytics.js'></script>
<!-- Google Analytics -->
<script defer>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  
  ga('create', 'UA-YYYYYYYY-X', 'auto');
  ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Setelah mengimplementasikan hal-hal di atas, skor performa website saya naik sekitar 96-99 dengan catatan First Contentful Paint sebesar 1.9 detik, First Meaningful Paint sebesar 1.9 detik dan Time to Interactive sebesar 2.0 detik. 🎊 Hasilnya bisa diklik pada tautan ini.

Image of summary web performance personal website part 2

Untuk waterfall first view di run 1 halaman web membutuhkan waktu render sekitar 3.5 detik dan saat itu sudah dinyatakan interaktif pada kolom Page is Interactive. Dari waterfall tersebut hanya memuat dua sumber pihak ketiga yakni Google Fonts dan Google Analytics. Hasilnya bisa diklik pada tautan ini.

Image of waterfall view run 1 part 2