Mengoptimalkan Performa Situs Web dan Jalur Rendering Kritis

Apakah kinerja rendering halaman web Anda memenuhi standar saat ini? Rendering adalah proses menerjemahkan respons server ke dalam gambar yang "dilukis" oleh browser ketika pengguna mengunjungi situs web. Performa rendering yang buruk dapat menghasilkan rasio pentalan yang relatif tinggi.

Ada respons server berbeda yang menentukan apakah halaman dirender atau tidak. Dalam artikel ini, kita akan fokus pada render awal halaman web, yang dimulai dengan parsing HTML (asalkan browser telah berhasil menerima HTML sebagai respons server). Kami akan mengeksplorasi hal-hal yang dapat menyebabkan waktu rendering tinggi, dan cara memperbaikinya.

Jalur Rendering Kritis

Jalur rendering kritis (CRP) adalah proses yang dilalui browser Anda untuk mengubah kode menjadi piksel yang dapat ditampilkan di layar Anda. Ini memiliki beberapa tahap, beberapa di antaranya dapat dilakukan secara paralel untuk menghemat waktu, tetapi beberapa bagian harus dilakukan secara berurutan. Berikut visualisasinya:

Pertama-tama, setelah browser mendapat respons, browser mulai menguraikannya. Ketika menemukan ketergantungan, ia mencoba mengunduhnya.

Jika ini adalah file stylesheet, browser harus menguraikannya sepenuhnya sebelum merender halaman, dan itulah mengapa CSS dikatakan sebagai pemblokiran render .

Jika itu skrip, browser harus: berhenti menguraikan, mengunduh skrip, dan menjalankannya. Hanya setelah itu dapat melanjutkan penguraian, karena program JavaScript dapat mengubah isi halaman web (HTML, khususnya). Dan itulah mengapa JS disebut pemblokiran parser .

Setelah semua penguraian selesai, browser memiliki Model Objek Dokumen (DOM) dan Model Objek Lembar Gaya Cascading (CSSOM). Menggabungkan mereka bersama-sama memberikan Pohon Render. Bagian halaman yang tidak ditampilkan tidak akan masuk ke Pohon Render, karena hanya berisi data yang diperlukan untuk menggambar halaman.

Langkah kedua dari belakang adalah menerjemahkan Pohon Render ke dalam Tata Letak. Tahap ini juga disebut Reflow. Di situlah setiap posisi setiap node Render Tree, serta ukurannya, akan dihitung.

Terakhir, langkah terakhir adalah Paint. Ini melibatkan pewarnaan piksel secara harfiah sesuai dengan data yang telah dihitung browser selama tahap sebelumnya.

Kesimpulan terkait pengoptimalan

Seperti yang bisa Anda tebak, proses optimasi kinerja situs web melibatkan perubahan pada situs web yang mengurangi:

• Jumlah data yang harus ditransfer
• Jumlah sumber daya yang harus diunduh browser (terutama yang memblokir)
• Panjang CRP

Selanjutnya, kita akan menyelami detail tentang bagaimana hal itu dilakukan, tetapi pertama-tama, ada aturan penting yang harus diperhatikan.

Bagaimana Mengukur Kinerja

Aturan pengoptimalan yang penting adalah: Ukur dulu, optimalkan sesuai kebutuhan . Sebagian besar alat pengembang browser memiliki tab yang disebut Performance , dan di situlah pengukuran terjadi. Saat mengoptimalkan render awal (pertama) tercepat, hal terpenting yang harus diperhatikan adalah waktu kejadian berikut:

• cat pertama
• Cat Berpuasa Pertama
• Cat Bermakna Pertama

Di sini, "Paint" berarti perenderan halaman yang berhasil, tahap terakhir dalam jalur perenderan kritis. Beberapa render dapat terjadi satu demi satu karena browser mencoba menampilkan sesuatu secepatnya dan memperbaruinya nanti.

Selain waktu rendering, ada hal lain yang perlu dipertimbangkan—yang terpenting, berapa banyak sumber daya pemblokiran yang digunakan dan berapa lama waktu yang dibutuhkan untuk mengunduhnya. Informasi ini ditemukan di tab Performa setelah pengukuran dilakukan.

Strategi Pengoptimalan Kinerja

Mengingat apa yang telah kita pelajari di atas, ada tiga strategi utama untuk pengoptimalan kinerja situs web:

1. Meminimalkan jumlah data yang akan ditransfer melalui kabel,
2. Mengurangi jumlah total sumber daya yang akan ditransfer melalui kabel, dan
3. Memperpendek jalur rendering kritis

1. Minimalkan Jumlah Data yang Akan Ditransfer

Pertama-tama, hapus semua bagian yang tidak digunakan, seperti fungsi yang tidak dapat dijangkau dalam JavaScript, gaya dengan pemilih yang tidak pernah cocok dengan elemen apa pun, dan tag HTML yang selamanya disembunyikan dengan CSS. Kedua, hapus semua duplikat.

Kemudian, saya sarankan untuk menerapkan proses minifikasi otomatis. Misalnya, itu harus menghapus semua komentar dari apa yang disajikan bagian belakang Anda (tetapi bukan kode sumber) dan setiap karakter yang tidak mengandung informasi tambahan (seperti karakter spasi di JS).

Setelah ini selesai, yang tersisa bisa berupa teks. Ini berarti kita dapat dengan aman menerapkan algoritme kompresi seperti GZIP (yang dipahami sebagian besar browser).

Akhirnya, ada caching. Ini tidak akan membantu saat pertama kali browser merender halaman, tetapi akan menghemat banyak pada kunjungan berikutnya. Sangat penting untuk mengingat dua hal, meskipun:

• Jika Anda menggunakan CDN, pastikan caching didukung dan disetel dengan benar di sana.
• Alih-alih menunggu tanggal kedaluwarsa sumber daya, Anda mungkin ingin memiliki cara untuk memperbaruinya lebih awal dari pihak Anda. Sematkan "sidik jari" file ke dalam URL mereka untuk dapat membatalkan cache lokal.

Tentu saja, kebijakan caching harus ditentukan per sumber daya. Beberapa mungkin jarang berubah atau tidak pernah berubah sama sekali. Lainnya berubah lebih cepat. Beberapa berisi informasi sensitif, yang lain dapat dianggap publik. Gunakan arahan "pribadi" untuk menjaga CDN agar tidak menyimpan data pribadi.

Mengoptimalkan gambar web juga dapat dilakukan, meskipun permintaan gambar tidak memblokir penguraian atau rendering.

2. Kurangi Jumlah Total Sumber Daya Kritis

"Kritis" hanya mengacu pada sumber daya yang dibutuhkan halaman web untuk dirender dengan benar. Oleh karena itu, kita dapat melewatkan semua gaya yang tidak terlibat dalam proses secara langsung. Dan semua skrip juga.

lembar gaya

Untuk memberi tahu browser bahwa file CSS tertentu tidak diperlukan, kita harus menyetel atribut media ke semua tautan yang merujuk lembar gaya. Dengan pendekatan ini, browser hanya akan memperlakukan sumber daya yang cocok dengan media saat ini (jenis perangkat, ukuran layar) seperlunya, sambil menurunkan prioritas semua stylesheet lainnya (mereka akan tetap diproses, tetapi bukan sebagai bagian dari rendering penting jalur). Misalnya, jika Anda menambahkan atribut media="print" ke tag style yang mereferensikan gaya untuk mencetak halaman, gaya ini tidak akan mengganggu jalur rendering penting Anda saat media tidak print (yaitu, saat menampilkan halaman di browser).

Untuk lebih meningkatkan prosesnya, Anda juga dapat membuat beberapa gaya sebaris. Ini menghemat setidaknya satu perjalanan pulang pergi ke server yang seharusnya diperlukan untuk mendapatkan stylesheet.

Skrip

Seperti disebutkan di atas, skrip memblokir parser karena dapat mengubah DOM dan CSSOM. Oleh karena itu, skrip yang tidak mengubahnya tidak boleh memblokir penguraian, sehingga menghemat waktu kita.

Untuk menerapkannya, semua tag skrip harus ditandai dengan atribut—baik async atau defer .

Skrip yang ditandai dengan async tidak memblokir konstruksi DOM atau CSSOM, karena skrip tersebut dapat dieksekusi sebelum CSSOM dibuat. Namun, perlu diingat bahwa skrip sebaris akan memblokir CSSOM kecuali Anda meletakkannya di atas CSS.

Sebaliknya, skrip yang ditandai dengan defer akan dievaluasi pada akhir pemuatan halaman. Oleh karena itu, mereka tidak boleh memengaruhi dokumen (jika tidak, itu akan memicu rendering ulang).

Dengan kata lain, dengan defer , skrip tidak dieksekusi sampai setelah acara pemuatan halaman diaktifkan, sedangkan async memungkinkan skrip berjalan di latar belakang saat dokumen sedang diuraikan.

3. Persingkat Panjang Jalur Rendering Kritis

Akhirnya, panjang CRP harus dipersingkat seminimal mungkin. Sebagian, pendekatan yang dijelaskan di atas akan melakukan itu.

Kueri media sebagai atribut untuk tag gaya akan mengurangi jumlah total sumber daya yang harus diunduh. Atribut tag skrip defer dan async akan mencegah skrip terkait memblokir penguraian.

Pengecilan, kompresi, dan pengarsipan sumber daya dengan GZIP akan mengurangi ukuran data yang ditransfer (sehingga mengurangi waktu transfer data juga).

Menyejajarkan beberapa gaya dan skrip dapat mengurangi jumlah bolak-balik antara browser dan server.

Apa yang belum kita diskusikan adalah opsi untuk mengatur ulang kode di antara file. Menurut gagasan terbaru tentang kinerja terbaik, hal pertama yang harus dilakukan situs web tercepat adalah menampilkan konten ATF. ATF adalah singkatan dari atas flip. Ini adalah area yang langsung terlihat, tanpa menggulir. Oleh karena itu, yang terbaik adalah mengatur ulang semua yang terkait dengan rendering sedemikian rupa sehingga gaya dan skrip yang diperlukan dimuat terlebih dahulu, dengan yang lainnya berhenti - baik penguraian maupun rendering. Dan selalu ingat untuk mengukur sebelum dan sesudah Anda melakukan perubahan.

Kesimpulan: Pengoptimalan Mencakup Seluruh Stack Anda

Singkatnya, pengoptimalan kinerja situs web menggabungkan semua aspek respons situs Anda, seperti caching, pengaturan CDN, refactoring, pengoptimalan sumber daya, dan lainnya, namun semua ini dapat dilakukan secara bertahap. Sebagai pengembang web, Anda harus menggunakan artikel ini sebagai referensi, dan selalu ingat untuk mengukur kinerja sebelum dan sesudah eksperimen Anda.

Pengembang browser melakukan yang terbaik untuk mengoptimalkan kinerja situs web untuk setiap halaman yang Anda kunjungi, itulah sebabnya browser biasanya menerapkan apa yang disebut "pra-pemuat." Bagian program ini memindai sebelum sumber daya yang Anda minta dalam HTML untuk membuat beberapa permintaan sekaligus dan menjalankannya secara paralel. Inilah mengapa lebih baik untuk menjaga tag gaya tetap berdekatan satu sama lain dalam HTML (bijaksana baris), serta tag skrip.

Selain itu, cobalah untuk mengelompokkan pembaruan ke HTML untuk menghindari beberapa peristiwa tata letak, yang dipicu tidak hanya oleh perubahan DOM atau CSSOM tetapi juga oleh perubahan orientasi perangkat dan pengubahan ukuran jendela.

Sumber daya yang berguna dan bacaan lebih lanjut:

• Wawasan PageSpeed
• Daftar Periksa Caching
• Cara untuk menguji apakah GZIP diaktifkan untuk situs web Anda
• Jaringan Browser Berkinerja Tinggi: Sebuah buku oleh Ilya Grigorik