Sumber Daya yang Memblokir Rendering

Sumber daya yang menghambat rendering adalah file yang harus diunduh dan diproses oleh browser sebelum dapat menampilkan konten apa pun. File-file ini sebagian besar berupa stylesheet yang dirujuk di bagian head dokumen dan skrip sinkron yang ditemui selama parsing, dan merupakan alasan paling umum mengapa halaman membutuhkan waktu lebih lama untuk muncul daripada yang seharusnya sesuai dengan kontennya.

Penggunaan stylesheet menyebabkan penundaan karena alasan yang dapat dibenarkan. Menampilkan konten sebelum gaya tersedia akan menghasilkan tampilan konten tanpa gaya yang tiba-tiba diikuti oleh perubahan tata letak yang mengganggu, sehingga browser menunggu. Masalahnya bukan pada stylesheet yang menyebabkan penundaan, tetapi pada situs web yang biasanya memuat gaya jauh lebih banyak daripada yang dibutuhkan tampilan awal, termasuk gaya untuk komponen di bagian bawah halaman, untuk template lain, dan untuk fitur yang mungkin tidak pernah digunakan pengunjung, yang semuanya harus dimuat sebelum apa pun ditampilkan.

Skrip akan terblokir karena skrip yang ditemui selama proses parsing dapat memodifikasi dokumen, sehingga parser berhenti hingga skrip tersebut dieksekusi. Sebagian besar skrip tidak memerlukan perilaku ini: analitik, widget obrolan, alat personalisasi, dan sebagian besar kode aplikasi dapat dieksekusi setelah dokumen diurai tanpa kehilangan kebenaran. Menambahkan atribut `defer` memungkinkan parsing berlanjut dan mengeksekusi skrip secara berurutan setelahnya, sementara `async` mengeksekusi skrip segera setelah tiba tanpa jaminan urutan.

Solusi standar untuk stylesheet adalah memisahkan gaya yang dibutuhkan untuk tampilan awal dari sisanya. Bagian yang penting disisipkan langsung ke dalam dokumen, sehingga tidak diperlukan permintaan, dan sisanya dimuat dengan cara yang tidak memblokir. Ini efektif dan menambah kompleksitas pembuatan, karena kumpulan CSS penting harus dibuat ulang setiap kali gaya berubah, dan CSS penting yang usang akan menghasilkan cacat yang terlihat.

Sumber daya pihak ketiga seringkali menjadi kontributor terbesar dan paling sulit dikendalikan. Pengelola tag, platform persetujuan, penyedia font, alat obrolan, dan kerangka kerja pengujian biasanya ditambahkan ke bagian head dokumen dengan perilaku pemblokiran, masing-masing memerlukan koneksi ke sumber yang terpisah. Penundaan kumulatifnya cukup besar, dan karena masing-masing ditambahkan oleh tim yang berbeda untuk alasan yang dapat dibenarkan, tidak ada yang bertanggung jawab atas keseluruhannya. Mengaudit total biaya dan mengaitkannya dengan fungsi yang meminta adalah hal yang membuat pertimbangan tersebut terlihat.

Font memerlukan penanganan khusus karena font memblokir rendering teks, bukan struktur halaman. Tergantung pada strategi tampilan, teks mungkin tidak terlihat saat font sedang diunduh, yang berarti konten yang telah sepenuhnya diunduh sengaja ditahan. Memilih strategi yang menampilkan teks cadangan segera dan menggantinya saat font selesai diunduh, serta memuat font yang digunakan di bagian atas halaman terlebih dahulu, mencegah situasi di mana halaman secara teknis telah dirender tetapi tampak kosong.

Mengukur biaya sebenarnya membutuhkan kehati-hatian, karena menghilangkan sumber daya yang menghambat tidak selalu menghasilkan penghematan yang diprediksi. Sumber daya berjalan secara paralel, sehingga menghilangkan satu sumber daya mungkin hanya memungkinkan sumber daya lain menjadi penghambat, dan peningkatan yang diamati seringkali lebih kecil daripada jumlah perkiraan individual. Memverifikasi dengan pengukuran setelah setiap perubahan, daripada mempercayai total yang diproyeksikan, akan menjaga agar ekspektasi tetap akurat.

Mengidentifikasi apa yang sebenarnya menghambat cukup mudah dengan alat standar, yang melaporkan sumber daya yang menghambat dan memperkirakan penghematan dari mengatasi masing-masing sumber daya tersebut. Perkiraan tersebut harus dianggap sebagai indikatif dan bukan sebagai angka pasti, karena menghilangkan satu sumber daya yang menghambat seringkali mengungkapkan bahwa sumber daya lainlah yang sebenarnya menjadi kendala, dan peningkatan paling baik diverifikasi melalui pengukuran daripada diasumsikan dari laporan.

Karena sumber daya yang terlibat biasanya ditambahkan oleh beberapa tim dari waktu ke waktu, perbaikan membutuhkan tata kelola serta rekayasa. Dalam praktiknya, audit dan prioritas berada di dalam kinerja web pekerjaan, perubahan pembangunan diimplementasikan melalui pengembangan produk, dan keputusan tentang alat pihak ketiga mana yang membenarkan biaya pemblokirannya memerlukan persetujuan dari tim yang memintanya, yang bagi sebagian besar situs berarti departemen pemasaran digital.