Jalur Rendering Kritis: Apa Itu dan Bagaimana Mengoptimalkannya

Ketika kami berbicara tentang memberikan pengalaman web yang sangat cepat kepada pengguna, kami sering kali hanya berfokus pada apa yang harus kami, sebagai pemilik situs web dan pengembang web, lakukan.

Tapi kenyataannya adalah:

Memberikan pengalaman web yang cepat juga membutuhkan banyak pekerjaan dari browser.

Itu menerima file HTML, CSS, dan JavaScript kami dan mengambil langkah spesifik untuk mengubahnya menjadi piksel di layar.

Rahasia untuk mempercepat kinerja Anda terletak pada pemahaman tentang apa yang terjadi antara penerimaan sumber daya dan pemrosesannya untuk mengubahnya menjadi piksel yang dirender.

Proses ini juga dikenal sebagai jalur rendering kritis (CRP) .

Dan dalam artikel ini, Anda akan mempelajari semua yang perlu Anda ketahui tentang CRP, dan cara mengoptimalkannya untuk rendering yang lebih cepat.

• Apa itu Jalur Rendering Kritis?
• Urutan Jalur Rendering Kritis dijelaskan
• Cara mengoptimalkan Jalur Rendering Kritis situs Anda
• Plugin 3 WordPress untuk mengoptimalkan CRP Anda
• Daftar periksa pengoptimalan CRP

Mari kita mulai!

Apa itu Jalur Rendering Kritis?

Jalur Rendering Penting mengacu pada urutan langkah-langkah yang diambil browser web untuk mengonversi kode HTML, CSS, dan JavaScript menjadi representasi visual di layar pengguna.

Ini melibatkan serangkaian proses, seperti membangun Document Object Model (DOM), menghasilkan CSS Object Model (CSSOM), dan menggabungkan keduanya untuk membuat Render Tree. Pohon Render kemudian digunakan untuk menghitung tata letak dan mewarnai piksel pada layar pengguna.

Optimalisasi Jalur Rendering Kritis, di sisi lain, mengacu pada pengurangan waktu yang dihabiskan oleh browser web untuk mengeksekusi setiap langkah urutan sambil memprioritaskan konten yang relevan dengan tindakan pengguna saat ini.

Untuk memastikan upaya pengoptimalan Anda berhasil, Anda harus memiliki pemahaman mendalam tentang setiap langkah dari urutan. Jadi, beberapa paragraf berikutnya sangat penting, dan kami sangat menyarankan untuk membacanya sebelum mengambil tindakan.

Urutan Jalur Rendering Kritis Dijelaskan

Berikut ikhtisar singkat tentang langkah-langkah yang dilakukan oleh browser saat merender halaman:

1. Peramban mengunduh dan mem-parsing markup HTML dan membuat DOM.
2. Selanjutnya, mengunduh dan memproses markup CSS dan membuat CSS Object Model (CSSOM).
3. Kemudian, menggabungkan node yang diperlukan dari DOM dan CSSOM untuk membuat Render Tree, struktur pohon dari semua node terlihat yang diperlukan untuk merender halaman.
4. Itu menghitung dimensi dan posisi setiap elemen pada halaman melalui proses Tata Letak.
5. Terakhir, browser menggambar piksel di layar.

Sekarang mari masuk ke dalam setiap langkah.

DOM

Document Object Model (DOM) adalah representasi internal browser dari dokumen HTML.

Saat halaman web dimuat, browser mem-parsing HTML dan membuat struktur simpul seperti pohon yang mewakili elemen dalam dokumen. Setiap node sesuai dengan elemen HTML dan memiliki properti yang menggambarkan atribut, konten, dan posisinya di pohon.

Penting: Browser membuat DOM secara bertahap, memungkinkan kami mengoptimalkan rendering halaman dengan membuat struktur yang efisien dan menghindari ukuran DOM yang berlebihan.

CSSOM

Sementara DOM berisi semua konten halaman, CSSOM menyertakan semua informasi tentang cara mengatur gaya DOM.

Perbedaan lain antara DOM dan CSSOM adalah:

Konstruksi DOM bertahap, sedangkan CSSOM tidak.

Saat situs web dimuat, browser harus memproses CSS untuk menerapkan gaya. Tidak seperti HTML yang dapat diproses sedikit demi sedikit, CSS perlu diproses sekaligus. Hal ini karena beberapa gaya mungkin akan ditimpa oleh orang lain nanti di file CSS, sehingga browser perlu menunggu hingga selesai membaca seluruh file CSS sebelum memutuskan gaya mana yang akan diterapkan.

Hal ini dilakukan untuk menghindari menampilkan gaya yang nantinya akan ditimpa dan membuang sumber daya.

Sederhananya:

Browser memblokir proses rendering hingga menerima dan mem-parsing semua CSS.

Itu sebabnya CSS dianggap sebagai sumber daya pemblokiran render.

Pohon Render

Render Tree adalah kombinasi dari DOM dan CSSOM yang digunakan browser untuk membuat representasi visual dari halaman web.

Browser menggunakan Render Tree untuk menghitung dimensi dan posisi node sebagai masukan untuk proses pengecatan.

Penting: Hanya konten yang terlihat yang ditangkap di pohon render. Biasanya, bagian kepala tidak berisi informasi yang terlihat dan oleh karena itu dikecualikan. Selain itu, Jika sebuah elemen memiliki properti display: none , baik elemen maupun keturunannya tidak disertakan dalam pohon render.

Tata letak

Setelah pohon render dibangun, langkah selanjutnya adalah tata letak. Tata letak menetapkan penempatan dan orientasi setiap elemen pada halaman dengan menentukan dimensi, posisi, dan keterkaitannya.

Tapi inilah masalahnya:

Performa tata letak dipengaruhi oleh DOM.

Dengan kata lain:

Semakin besar jumlah node DOM, semakin lama proses tata letaknya.

Cat

Tahap terakhir adalah mengecat piksel ke layar, yang mengikuti pembuatan pohon render dan tata letak.

Awalnya, seluruh layar diwarnai selama proses pemuatan. Selanjutnya, hanya bagian layar yang terpengaruh yang dicat ulang, karena browser dirancang untuk mengecat ulang hanya area yang diperlukan.

Perlu diingat bahwa durasi tahap cat bergantung pada sifat pembaruan yang diimplementasikan pada pohon render.

Sekarang mari kita lihat pengoptimalan apa yang dapat Anda terapkan untuk membantu browser dan mempercepat beberapa proses.

Cara Mengoptimalkan Jalur Rendering Penting Situs Anda

Waktu yang diperlukan browser untuk menjalankan seluruh proses dapat bervariasi. Ada banyak bagian bergerak yang berkontribusi pada panjang jalur kritis:

• Ukuran dokumen
• Jumlah permintaan
• Perangkat pengguna
• Gaya terapan

Namun demikian, ada tiga teknik yang dianggap sebagai opsi masuk dalam hal pengoptimalan CRP:

1. Minimalkan jumlah sumber daya penting dengan menunda yang tidak penting atau menghilangkannya sama sekali
2. Optimalkan jumlah permintaan yang diperlukan beserta ukuran file dari setiap permintaan
3. Prioritaskan pengunduhan aset penting, sehingga memperpendek panjang jalur kritis

Mari selami lebih dalam tentang cara menerapkan setiap strategi pengoptimalan yang disarankan:

Optimalkan resource CSS dan JS yang memblokir render

Anda sudah tahu bahwa ketika browser menghadapi sumber daya CSS dan JS yang memblokir perenderan, ia harus mengunduh, mengurai, dan menjalankannya sebelum melakukan hal lain, termasuk merender.

Untuk mengoptimalkan CSS, Anda dapat menerapkan teknik berikut:

• CSS kritis. Ini mengidentifikasi kumpulan aturan CSS minimal yang diperlukan untuk merender bagian halaman web yang terlihat dan mengirimkannya ke browser sebagai CSS sebaris daripada memuat lembar gaya lengkap. Dengan hanya memuat CSS yang diperlukan untuk konten paruh atas, browser dapat merender laman lebih cepat dan meningkatkan pengalaman pengguna . Ini karena browser tidak harus menunggu seluruh stylesheet dimuat sebelum merender halaman.
  
• Gabungkan file CSS. Penggabungan CSS adalah proses menggabungkan beberapa file CSS menjadi satu file. Teknik ini meningkatkan performa dengan mengurangi jumlah permintaan HTTP yang diperlukan untuk memuat halaman web , karena browser hanya perlu mendownload dan mengurai satu file CSS, bukan beberapa file.

Dalam hal file JavaScript Anda, inilah yang dapat Anda lakukan:

• Tunda pemuatan JS. Tunda pemuatan JS adalah teknik yang akan mempercepat situs Anda dengan menunda pemuatan file JavaScript hingga setelah dokumen HTML dimuat dan diuraikan . Anda dapat menggunakan atribut defer pada tag skrip yang mereferensikan file JS. Penting untuk diperhatikan bahwa atribut defer hanya boleh digunakan untuk file JS yang tidak perlu dieksekusi segera setelah dimuat (mis., file yang hanya digunakan pada halaman tertentu), karena urutan eksekusi mungkin tidak dapat diprediksi jika ada beberapa skrip yang ditangguhkan digunakan.
  
• Muat JS secara asinkron. Beberapa file JS mungkin memerlukan penggunaan atribut async, yang memungkinkan file dimuat dan dieksekusi secara asinkron dengan penguraian dokumen HTML.

Ada beberapa pengoptimalan yang dapat Anda terapkan pada CSS dan JavaScript:

• Minifikasi. Minifikasi melibatkan penghapusan karakter yang tidak perlu, seperti spasi putih, komentar, dan jeda baris, dari file CSS dan JavaScript. Proses ini dapat secara signifikan mengurangi ukuran file tanpa mempengaruhi fungsionalitas atau tampilannya .
  
• Hapus CSS dan JS yang tidak digunakan. CSS dan JS yang tidak digunakan mengacu pada aturan khusus yang tidak digunakan pada halaman tertentu tetapi masih dimuat. Menghapus bagian ini dari file Anda akan secara langsung memengaruhi seberapa cepat browser membuat pohon render .

Optimalkan resource pemblokiran render Anda dengan autopilot. Instal NitroPack →

Kurangi ukuran file Anda

Untuk mengurangi jumlah data yang perlu diunduh browser, kita dapat menggunakan teknik seperti minifikasi, kompresi, dan caching sumber daya HTML, CSS, dan JavaScript.

Anda sudah tahu apa artinya minifikasi, jadi mari kita fokus pada dua hal lainnya:

• Kompresi. Kompresi adalah teknik yang menerapkan algoritme untuk menulis ulang kode biner file menggunakan bit yang lebih sedikit dari aslinya. Akibatnya, file Anda berukuran jauh lebih kecil yang mengurangi waktu pemuatan halaman dan penggunaan bandwidth.
  
• Caching. Caching memanfaatkan cache HTTP yang diterapkan di setiap browser. Untuk memastikan caching yang efektif, kita harus memastikan bahwa setiap respons server menyediakan header HTTP yang benar, menginstruksikan browser kapan dan berapa lama harus menyimpan sumber daya yang diminta.

Andalkan mekanisme caching tercanggih. Dapatkan NitroPack hari ini →

Prioritaskan pengunduhan aset penting

Secara umum, browser cukup bagus dalam memprioritaskan sumber daya yang paling penting dan mengambilnya terlebih dahulu. Namun, dalam beberapa kasus, Anda dapat membantu mereka memuat situs Anda lebih cepat dengan memprioritaskan sumber daya yang paling penting secara manual.

Anda dapat menggunakan petunjuk sumber daya untuk memberi tahu browser cara menangani sumber daya atau halaman web tertentu.

Inilah tiga yang utama:

• Tautan rel=prefetch. Prefetch adalah petunjuk sumber daya prioritas rendah yang memungkinkan browser mengambil sumber daya yang mungkin diperlukan nanti dan menyimpannya di cache browser.

• Tautkan rel=prasambungkan. Direktif preconnect membantu browser membangun koneksi awal sebelum mengirim permintaan awal ke server.

• Tautkan rel=pramuat. Pramuat digunakan untuk memaksa browser mengunduh sumber daya lebih cepat daripada yang ditemukan browser karena sangat penting untuk halaman.

Penting: Prefetch dan preconnect adalah petunjuk sumber daya, dan dijalankan sesuai keinginan browser. Direktif preload adalah perintah yang wajib untuk browser. Pelajari lebih lanjut cara menerapkan petunjuk sumber daya.

Sekarang setelah Anda mengetahui cara menangani pengoptimalan Critical Rendering Path, mari kita lihat beberapa plugin WordPress yang dapat mengotomatiskan proses tersebut.

3 Plugin WordPress untuk Mengoptimalkan Jalur Rendering Kritis

Semua optimasi yang disebutkan di atas dapat dilakukan secara manual. Namun, beberapa di antaranya memerlukan pengetahuan teknis untuk memastikan Anda tidak akan merusak situs Anda selama proses berlangsung.

Beruntung bagi semua pengguna WordPress, ada plugin yang dapat membantu pengoptimalan CRP. Mari kita periksa 3 kandidat teratas, menurut pendapat kami:

NitroPack - Solusi All-in-One

NitroPack adalah solusi pengoptimalan kecepatan situs all-in-one terkemuka yang menggabungkan lebih dari 35+ fitur kinerja web. Saat mengoptimalkan jalur rendering penting Anda, NitroPack akan secara otomatis menangani pengoptimalan seperti:

• CSS kritis
• Minifikasi CSS dan JS
• Kompresi CSS dan JS
• Caching
• Tunda pemuatan JS
• Hapus CSS dan JS yang tidak digunakan

Tetapi fitur pengoptimalan tidak berakhir di sini. Anda juga akan mendapatkan perangkat kinerja lengkap:

• CDN bawaan
• Tumpukan pengoptimalan gambar lengkap
• Optimalisasi font
• Caching keranjang e-niaga
• dukungan 24/7

Percepat situs web Anda secara otomatis. Dapatkan NitroPack hari ini →

WP Super Cache - Plugin Hanya Caching

WP Super Cache adalah plugin caching yang terutama menawarkan fitur caching dan kompresi HTTP tetapi gagal dalam minifikasi sumber daya dan mengoptimalkan JavaScript dengan atribut async dan defer.

Fitur yang paling menonjol meliputi:

• Aktifkan caching untuk semua pengunjung
• Nonaktifkan caching untuk pengunjung yang masuk
• Kompres halaman agar disajikan lebih cepat kepada pengunjung
• Pembuatan ulang cache

Performa Cepat

Swift Performance adalah plugin lain yang mungkin berguna bagi Anda dalam mengejar CRP yang dioptimalkan. Beberapa fiturnya antara lain:

• Meminimalkan file CSS dan JavaScript
• CSS kritis
• Caching
• Pengoptimalan gambar

Mengoptimalkan Jalur Rendering Penting [Daftar Periksa]

Kami telah membahas banyak hal dalam artikel ini, jadi inilah daftar periksa praktis dari semua pengoptimalan yang kami sebutkan:

• Hasilkan CSS kritis
• Gabungkan file CSS
• Tunda pemuatan JavaScript
• Muat JavaScript secara asinkron
• Perkecil CSS dan JavaScript
• Kompres CSS dan JavaScript
• Hapus CSS dan JavaScript yang tidak digunakan
• Terapkan minifikasi
• Terapkan kompresi
• Gunakan cache
• Terapkan link rel=preload
• Terapkan tautan rel=prefetch
• Terapkan link rel=preconnect

Unduh daftar periksa pengoptimalan CRP →

Dan yang tak kalah pentingnya - jangan lupa untuk menguji sebelum dan sesudah setiap pengoptimalan!