Halo teman-teman, kali ini saya bakalan bahas mengenai jalur rendering penting. Mungkin teman-teman bertanya-tanya, istilah apaan sih itu, kok kedengarannya asing. Sabar teman-teman, pertanyaan itu akan terjawab pada penjelasan selanjutnya. Selain membahas mengenai jalur rendering penting, saya juga bahas mengenai link preload, yang sebenarnya kedua hal tersebut saling berhubungan satu sama lain. Jalur Rendering PentingUntuk memahami apa itu critical rendering path, saya mengutip tulisan Ilya Grigorik di halaman Google Developers: Web Fundamentals,
Untuk mendefinisikan jalur rendering penting, kita harus memahami dulu apa itu sumber daya penting atau critical resource. Sumber daya penting
adalah sumber daya yang dapat menghalangi rendering awal halaman. Sumber daya tersebut dapat berupa CSS, JavaScript atau font eksternal. Biasanya sumber daya penting tersebut terletak di dalam tag Kemudian yang disebut jalur rendering penting adalah serangkaian even yang harus dilakukan oleh peramban untuk menampilkan tampilan awal sebuah situs web. Contoh even tersebut adalah mendapatkan html, mendapatkan aset (CSS, JavaScript, Gambar, Font), memparse data, menampilkan situs web. Bayangkan jika ada situs web yang memiliki kode HTML5 seperti berikut,
Di dalam tag Tampilan AwalTampilan awal yang dimaksud di sini adalah tampilan yang dilihat pengguna tanpa harus menggulung layar terlebih dahulu. Tampilan awal ini lebih dikenal dengan istilah di atas lipatan atau above the fold. Sedangkan tampilan di bawahnya disebut di bawah lipatan atau below the fold. Untuk lebih memahami istilah di atas lipatan, teman-teman dapat melihat gambar di bawah ini, Ketika membuka situs web, pengguna seharusnya sudah dapat melihat tampilan awal secara langsung. Tampilan awal tersebut sesuai dengan viewport. Misal pengguna membuka situs web tersebut menggunakan desktop dengan resolusi 1920x1200, maka tampilan awal yang harus dilihat pengguna secara langsung adalah sebesar 1920x1200. Sedangkan jika pengguna membuka situs web menggunakan ponsel beresolusi 768x1024, maka tampilan awal yang harus dilihat pengguna secara langsung adalah sebesar 768x1024. Sebenarnya nggak pas 1920x1200 atau 768x1024 juga sih, karena kan kepotong sama toolbar peramban. Tapi, untuk lebih mudahnya, anggap saja ukurannya sesuai dengan resolusi layar. Jika teman-teman mengecek halaman yang belum teroptimasi dengan baik menggunakan ]Google PageSpeed Insight](https://developers.google.com/speed/pagespeed/insights/?hl=en), maka teman-teman akan mendapat hasil seperti pada gambar berikut, Salah satu peringatan yang dapat dioptimasi adalah menghilangkan pemuatan JavaScript dan CSS yang dapat menghalangi pe-render-an konten. Sesuai dengan permasalahan yang saya uraikan di atas, pos kali ini juga bakalan menghilangkan peringatan tersebut dan membuat skor Google PageSpeed situs web teman-teman menjadi lebih baik. SolusiKita harus membuat tampilan awal dapat dilihat pengguna secara
langsung terlebih dahulu, walaupun bagian bawahnya masih belum termuat sempurna. Solusinya adalah dengan menggunakan metode pemisahan CSS. CSS yang digunakan untuk menampilkan tampilan awal dipisah dan diletakkan di dalam tag Pemisahan CSSAda beberapa hal yang harus dipersiapkan sebelum pemisahan CSS dilakukan. Menggabungkan Semua CSS EksternalPastikan teman-teman telah menggabungkan semua CSS eksternal menjadi satu. Yang perlu diperhatikan ketika menggabungkannya menjadi satu adalah urutan peletakkannya. CSS framework diletakkan paling atas kemudian diikuti CSS lainnya yang bergantung pada CSS framework tersebut. Contohnya misal situs web teman-teman menggunakan bootstrap dan CSS kustom buatan teman-teman sendiri, urutan ketika digabungkan adalah bootstrap terlebih dahulu kemudian CSS kustom. Mengapa urutan penggabungan CSS sangat penting? Karena ketika CSS dibaca oleh peramban jika terdapat aturan yang sama, maka yang digunakan oleh peramban adalah aturan terakhir.
MinifyJika CSS yang teman-teman gunakan dalam keadaan unminify seperti contoh sebelumnya, silahkan minify terlebih dahulu. Tujuannya agar ukuran CSS menjadi lebih kecil. Teman-teman dapat menggunakan tool berikut untuk melakukan minify,
PemisahanUntuk memisahkan CSS antara yang digunakan untuk menampilkan tampilan awal dengan yang tidak, teman-teman dapat menggunakan tool berikut, Critical Path CSS Generator untuk versi gratis dan tool berikut, Critical CSS untuk versi berbayar. Silahkan teman-teman mem-paste-kan semua CSS yang telah digabungkan dan di-minify tadi ke form di sebelah kiri. Paste-kan juga tautan halaman yang ingin
dipisahkan CSS-nya. Kemudian silahkan klik tombol Create Critical Path CSS. Setelah proses selesai, akan muncul form baru di sebelah kanan berisi CSS yang digunakan untuk menampilkan tampilan awal. Copy CSS tersebut dan letakkan di dalam tag Sebelum Pemisahan
Sesudah Pemisahan
Link PreloadSetelah teman-teman berhasil memisahkan CSS antara yang
digunakan untuk menampilkan tampilan awal dan yang tidak dan menaruhnya di dalam tag Link preload digunakan untuk memprioritaskan pemuatan suatu sumber daya sebelum peramban selesai memparse dokumen HTML5 seluruhnya. Cara kerjanya adalah ketika peramban menemukan tag link dengan atribut Untuk menggunakan fitur ini, silahkan teman teman mengubah atribut Sebelum Atribut Dirubah
Sesudah Atribut Dirubah
Namun sayangnya fitur atribut Untuk mengatasinya, kita perlu menggunakan plugin JavaScript bernama loadCSS yang dibuat oleh Fillament Group. Plugin ini berfungsi untuk memuat CSS eksternal secara asinkron. Maksud dari asinkron di sini, CSS eksternal akan dimuat tidak secara bersamaan dengan pemuatan sumber daya eksternal lainnya. Dalam hal ini, CSS eksternal akan diprioritaskan sehingga akan dimuat terlebih dahulu. Dengan kata lain, plugin loadCSS ini berfungsi seperti atribut
Kemudian copy dan paste-kan kode di bawah ini ke dalam tag
Sehingga secara keseluruhan menjadi seperti berikut,
Oke cukup sekian pembahasan mengenai jalur rendering penting dan link preload kali ini. Kode di atas masih belum teroptimasi dengan baik karena masih terdapat beberapa JavaScript eksternal. Pada pos selanjutnya saya akan bahas mengenai cara menggabungkan beberapa JavaScript eksternal tersebut dengan lebih aman. Semoga bermanfaat dan tetap semangat untuk terus belajar. Referensi
|