image

TwentySeventeen — WordPress Default Theme

Web yang modern saat ini mencoba menaikkan standar kecepatan tampil di layar yang rata-rata 19 detik di 3G menjadi 5 detik atau kurang. Dengan demikian potensi kehilangan user yang tidak ingin menunggu lebih dari 3 detik bisa dihindari.

WordPress adalah CMS paling populer di dunia dengan angka penggunaan sekitar 24% dari semua website yang ada di internet. Dan karena WordPress dikembangkan sejak lama, maka metode pengembangan web dengan WordPress secara default belum cukup optimal untuk kondisi jaringan cellular yang masih sebagian besar di 2G dan spesifikasi rendah dari sebagian besar smart phone yang digunakan.

Bila kalian memasang WordPress secara default dia menggunakan template Twentyseventeen bawaan dimana bila diaudit dengan tool Lighthouse maka hasilnya adalah sebagai berikut.

image

Mengoptimalkan Critical Rendering Path

Dan bila dianalisa lebih lanjut penyebab loading lebih dari 5 detik tersebut karena banyaknya critical requests yang dibutuhkan untuk menampilkan website WordPress tersebut.

image

Padahal kalau melihat list di-atas, untuk sekedar menampilkan website tersebut harusnya cukup menggunakan HTML document awal dan CSS untuk layout. File Javascript lainnya cuma digunakan untuk berinteraksi, yaitu pada saat website sudah ditampilkan.

Merujuk dari hasil audit Lighthouse di atas menunjukan first meaningfull paint adalah 6,7 detik, penyebabnya adalah fonts, scripts dan CSS files yang di-load di halaman WordPress tersebut memblok parsing HTML yang ada di-halaman WordPress sehingga butuh waktu lama browser bisa menampilkan halaman karena harus menunggu semua fonts, scripts dan css files selesai dipanggil dan di-parsing. Padahal fonts dan scripts tidak terlalu berpengaruh terhadap layout halaman.

Untuk itu, saya mencoba untuk membuat loading fonts, Javascripts, dan CSS file tersebut tidak mem-block proses rendering halaman. Pada Javascripts file, solusinya cukup mudah, cukup dengan menambahkan attribute async atau defer pada Javascripts file tags tersebut.

Yang perlu diperhatikan di sini adalah async defer membuat file tidak digaransi bisa di-load secara berurutan, sehingga Javascript file yang butuh library lain di-load sebelumnya ada kemungkinan akan bermasalah karena file tersebut selesai di-load sebelum file yang dibutuhkan selesai di-load. Salah satu contohnya adalah jQuery library yang banyak dibutuhkan oleh JQuery plugins lainnya.

Setelah mencoba menghilangkan scripts dan custom fonts loading di tema dari yang tadinya total 8 critical request, turun menjadi cuma 1 critical request. WordPress hasil audit Lighthouse naik hampir 2 kali lipat. Dan first meaningful paint bahkan turun dari 6,7 detik menjadi 1,8 detik atau menghemat 4,9 detik.

image

Critical request turun dari 8 jadi 1

image

Hasil setelah menghapus scripts dan CSS files dari critical render assets

Membuat Gambar Ditampilkan Setelah Selesai Di-render

Yang berikutnya dari hasil audit Lighthouse, yang disarankan adalah bagaimana gambar-gambar yang ukurannya terlalu besar, jumlah yang cukup banyak, dan di-load walaupun berada di luar tampilan layar. Solusinya adalah bagaimana untuk menampilkan gambar-gambar tersebut setelah halaman selesai di-load terutama untuk gambar yang tidak muncul di layar pada saat pertama kali di-load.

Teknik yang biasa dilakukan adalah lazy load, di mana attribute src yang memuat lokasi file gambar di server diganti dengan thumbnail kecil yang kadang dibuat blur dengan format base64 string. Format string membuat gambar bisa di-embed langsung di halaman HTML tanpa perlu request terpisah. Yang perlu dipastikan adalah ukuran base64 ini cukup kecil sehingga tidak membuat file HTML kita menjadi terlalu besar. Dan lokasi file gambar sebenarnya disimpan di attribute data-src sebagai referensi. Contoh berikut adalah bagaimana mem-filter tag <img> dan mengganti attribute src dengan data-lazy-src lalu menggunakan 1 pixel base64 image warna abu-abu sebagai gambar sementara.

Hasil img tag yang sudah di-filter seperti berikut di mana yang ditampilkan di awal adalah image gif dengan 1 pixel warna abu-abu.

Lalu tentunya setelah halaman selesai di-render, kita masih perlu untuk mengubah kembali tag img tersebut ke gambar aslinya. Dan untuk itu diperlukan Javascript file yang akan mengembalikan attribute src yang sebenarnya dari data-lazy-src .

Menampilkan gambar dengan Intersection Observer API

Dari Javascript di-atas bisa dilihat setelah halaman selesai di-render baru kita melakukan perubahan gambar dengan mengubah attribute src menggunakan lokasi gambar sebenarnya yang ada di data-lazy-src. Tapi perubahan itu tidak langsung, melainkan dengan mengecek terlebih dahulu apakah gambar tersebut tampil di layar atau tidak. Karena terkadang gambar masih berada di bawah dan perlu scrolling terlebih dahulu agar muncul di layar. Untuk itu kita menggunakan Intersection Observer APIuntuk membuat tiap gambar hanya akan ditampilkan bila sudah mendekati layar pada saat di-scrolling.

Intersection Observer API

image

Intersection Observer dengan threshold

Dengan Intersection Observer API, kita bisa mengecek bila suatu elemen tampil di layar seperti contoh berikut. Pada kasus di atas, kita menggunakan threshold 50 pixel sehingga bila halaman di-scrolling dan posisi atas gambar berjarak 50 pixel dari posisi bawah layar maka gambar langsung ditampilkan pada layar dengan mengembalikan attribute src ke lokasi gambar yang sebenarnya. Ini juga bisa berguna bila kita ingin melakukan lazy loading pada bagian komentar di WordPress.

Hasil Test Terakhir

Setelah melakukan optimasi pada critical rendering parts dan images loading berikut hasil akhir audit Lighthouse pada performance website WordPress kita.

image

Audit Final Lighthouse

Dari hasil di atas bisa dilihat bahwa dengan melakukan dua optimasi saja di critical rendering path dan lazy loading gambar maka kita bisa menaikkan nilai audit Lighthouse kita dari 49 menjadi 95, first meaningful paint di 1,4 detik, serta time to interactive menjadi 3 detik. Seperti judul di atas, bagaimana kita bisa membuat WordPress bisa ditampilkan kurang dari 5 detik.Source code untuk theme Twentyseventeen yang sudah dimodifikasi bisa diakses di repo Github ini.