Peramban memuat dan merender sumber daya seperti HTML, CSS, JavaScript, dan gambar secara berurutan, tetapi penggunaan atribut seperti `async`, `defer`, `preload`, `media`, `loading="lazy"`, `srcset`, dan `sizes` dapat mengoptimalkan kecepatan pemuatan.
Terutama untuk gambar, atribut `loading="lazy"`, `srcset`, dan `sizes` dapat digunakan untuk memilih gambar optimal yang sesuai dengan ukuran layar dan menunda pemuatan gambar yang tidak perlu, sehingga meningkatkan kecepatan pemuatan halaman.
Atribut seperti prefetch, preconnect, dan dns-prefetch efektif untuk meningkatkan kecepatan pergantian halaman dengan memuat sumber daya halaman berikutnya terlebih dahulu.
Browser biasanya melakukan rendering dengan urutan sebagai berikut.
- Parsing HTML (dari atas ke bawah head -> body) :
1. Parsing HTML dan pembuatan DOM 2. Memuat dan menerapkan file CSS (memblokir rendering) 3. Memuat dan menjalankan skrip (memblokir rendering)
4. Rendering konten bagian (gambar, teks, dll.)
Dengan mengontrol prioritas sumber daya browser, kecepatan pemuatan halaman dapat dioptimalkan.
Berikut ini adalah catatan tentang atribut-atribut utama yang dapat meningkatkan urutan rendering di atas.
async : Diunduh secara paralel dengan parsing HTML, dan dijalankan segera setelah diunduh. Jika ada sumber daya halaman yang terkait dengan js ini, sebaiknya tag async dihilangkan.
defer : Diunduh secara paralel dengan parsing HTML, dan dijalankan setelah parsing HTML selesai sepenuhnya. = Urutannya terjamin. Jika harus dijalankan setelah semua HTML dirender, sebaiknya tambahkan tag defer.
Browser secara default memuat HTML terlebih dahulu, tetapi jika ada sumber skrip di dalam tag head, rendering akan diblokir. Dengan menambahkan dua tag di atas, pemblokiran rendering HTML dapat dicegah.
CSS
styleshee : Nilai default. Merupakan elemen yang memblokir rendering, dan digunakan jika CSS harus dimuat.
preload : Mengunduh terlebih dahulu tanpa memblokir rendering. Berubah menjadi stylesheet pada saat kejadian onload, dan gaya diterapkan.
media: Melakukan rendering jika sesuai dengan kondisi ukuran layar.
Gambar
loading="lazy" : Memuat gambar saat gambar muncul di layar. (Saat posisi gulir berada di dekat elemen tempat gambar berada)
srcset : Memilih gambar optimal yang sesuai dengan ukuran layar. (Optimasi ukuran gambar)
sizes : Memberikan petunjuk kepada browser untuk memilih gambar yang sesuai berdasarkan ukuran viewport.
Pada tag img terakhir, jika terdapat gambar dengan lebar 480px dan 1024px, maka atribut size akan menampilkan gambar 480px jika max-width 600px, dan gambar 1024px untuk selain itu.
* Pada e-commerce, karena terdapat puluhan gambar dalam satu halaman, mengurangi ukuran gambar akan sangat efektif.
Misalnya, di halaman hasil pencarian terdapat minimal 20 gambar, dan pencarian dilakukan 100.000 kali per hari...
Lainnya
rel="prefetch": Mengunduh sumber daya terlebih dahulu sebelum berpindah halaman untuk meningkatkan kecepatan pemuatan pada halaman berikutnya.
rel="preconnect": Mengatur koneksi jaringan terlebih dahulu ke tautan tertentu. (Untuk video, font, dll. berukuran besar)
rel="dns-prefetch": Melakukan pencarian dns sumber daya eksternal untuk memuat sumber daya lebih cepat. (Terutama CDN eksternal)
* preconnect vs dns-prefetch
preconnect adalah koneksi tcp (dns - tcp handshake - tls handshake), sehingga merupakan tindakan yang berat yang menggunakan sumber daya browser. Digunakan saat sumber daya eksternal harus dimuat dengan cepat. (Saat sumber daya sangat penting dan rendering cepat sumber daya ini penting)
dns-prefetch hanya melakukan pencarian dns, sehingga merupakan tindakan yang lebih ringan. Cocok untuk sumber daya yang tidak penting dan akan dimuat nanti.