Preload, Preconnect, Prefetch: Tingkatkan Performa Situs Anda dengan Petunjuk Sumber Daya

Peramban web modern menggunakan segala macam teknik yang berbeda untuk meningkatkan kinerja situs web Anda secara keseluruhan - mulai dari memprioritaskan sumber daya yang paling penting dan mengambilnya terlebih dahulu hingga menebak halaman mana yang akan dikunjungi pengguna berikutnya.

Namun, Anda tidak boleh mengandalkan browser, secanggih apa pun, untuk mengambil semua keputusan dengan kinerja situs Anda.

Sebagai pemilik situs web, Andalah yang mengetahui sumber daya mana yang paling penting dan apa perjalanan pengguna yang sebenarnya di situs Anda. Dan untuk meningkatkan kinerja keseluruhan, kecepatan yang dirasakan, dan pengalaman pengguna situs web Anda, Anda dapat menggunakan pengetahuan itu untuk membantu browser memuat halaman Anda lebih cepat.

Di situlah petunjuk sumber daya masuk.

Pada baris berikut, kita akan melihat mereka dan bagaimana memanfaatkan keuntungan mereka dengan cara terbaik.

Mari kita menyelam ke dalamnya.

Cara Kerja Browser (Singkatnya)

Untuk lebih memahami petunjuk sumber daya dan di mana itu berlaku, mari kita lihat sekilas bagaimana browser sebenarnya memuat konten.

Kami dapat membagi seluruh proses browser memuat halaman menjadi tiga langkah:

• Membangun koneksi;
• Mengunduh, menguraikan, dan merender kode;
• Membuat halaman menjadi interaktif;

Selama tahap pertama, browser perlu membuat koneksi dengan server untuk mengunduh sumber daya. Itu termasuk mencari nama domain dan menyelesaikannya ke alamat IP, menyiapkan koneksi ke server, dan mengenkripsi koneksi untuk keamanan.

Setelah semuanya selesai, browser dapat melanjutkan dengan mengunduh dan menguraikan informasi, membuat Model Objek Dokumen (DOM) dan Model Objek CSS (CSSOM), dan kemudian merender konten.

Bagian terakhir adalah membuat halaman menjadi interaktif. Semua proses yang disebutkan di atas berlangsung di utas utama. Jadi setelah utas utama browser selesai dengan penguraian, rendering, dan pengecatan halaman, saatnya untuk menangani file JavaScript yang ditangguhkan agar halaman tersedia untuk pengguliran, sentuhan, dan interaksi lainnya.

Singkatnya, itulah proses di balik layar setiap kali halaman dimuat.

Mari kita lihat bagaimana Anda dapat memberi dampak positif pada setiap tahapan ini dengan mengintegrasikan petunjuk sumber daya.

Petunjuk Sumber Daya: Prefetch, Preconnect, Preload

Seperti namanya, petunjuk sumber daya adalah petunjuk atau instruksi yang memberi tahu browser bagaimana seharusnya menangani sumber daya atau halaman web tertentu. Dengan kata lain, rangkaian instruksi ini memungkinkan Anda membantu browser dalam memprioritaskan asal atau sumber daya yang perlu diambil dan dirender.

Semua petunjuk sumber daya menggunakan atribut rel dari elemen tautan yang akan Anda temukan di kepala dokumen HTML Anda.

Mengintegrasikan cuplikan kode HTML tersebut di situs web Anda akan memungkinkan browser untuk mulai memuat file yang dipilih lebih cepat daripada jika browser menemukannya melalui proses pemuatan halaman yang normal.

Dan sekarang setelah dasar-dasarnya ada di belakang kita, mari kita beralih ke bagian tempat Anda berada di sini - gambaran umum tentang petunjuk sumber daya, manfaatnya, dan kapan menggunakannya.

Ambil terlebih dahulu

link rel=prefetch adalah petunjuk sumber daya berprioritas rendah yang memungkinkan browser mengambil sumber daya yang mungkin diperlukan nanti dan menyimpannya di cache browser.

Karena prefetch menetapkan prioritas yang sangat rendah, jangan gunakan petunjuk ini untuk file yang sangat penting .

Salah satu kasus penggunaan yang hebat adalah memanfaatkan prefetch untuk meningkatkan waktu buka halaman berikutnya. Misalnya, Anda dapat menerapkan direktif prefetch selama otentikasi pengguna. Dengan cara ini, Anda dapat memanfaatkan waktu yang dibutuhkan mereka untuk memasukkan kredensial mereka untuk memuat sumber daya yang diperlukan untuk halaman yang akan mereka lihat selanjutnya.

Dengan mengantisipasi langkah pengunjung di situs Anda dan mengambil lebih dulu sumber daya, Anda dapat meningkatkan metrik seperti First Contentful Paint dan Time to Interactive. Sesuatu yang dilakukan Netflix dan mengurangi Waktu mereka untuk Interaktif sebesar 30%.

Semua yang kami sebutkan sampai saat ini berkaitan dengan prefetching, juga dikenal sebagai link prefetching. Tetapi ada dua jenis prefetching lain yang sama pentingnya, dan kami harus menyebutkan:

1. DNS Prefetching
Browser perlu melakukan pencarian DNS untuk mengonversi nama host (URL) ke alamat IP sebelum terhubung ke host (server asal).

Meskipun ini biasanya hanya membutuhkan waktu beberapa milidetik, jika situs web memuat file dari nama domain pihak ketiga, sesuatu yang dilakukan sebagian besar situs web, browser harus melakukan pencarian DNS untuk setiap domain. Beberapa situs (misalnya, situs web berita) menggunakan banyak sumber daya eksternal, yang berarti mungkin ada lusinan pencarian DNS yang diperlukan per halaman.

Dalam kasus ini, menggunakan petunjuk dns-prefetch mungkin menghemat beberapa milidetik karena instruksi memberi tahu browser untuk memulai proses itu segera, daripada saat kebutuhan ditemukan nanti dalam proses pemuatan.

Seperti yang disarankan di Web Almanac 2021, praktik yang baik adalah menggabungkan dns-prefetch dengan petunjuk prakoneksi untuk hasil yang optimal. Anda dapat melihat alasannya di bagian di mana kita berbicara tentang preconnect .

2. Prarendering
Prarendering sangat mirip dengan prefetching karena mengoptimalkan sumber daya yang dapat dinavigasi pengguna berikutnya. Perbedaannya adalah bahwa pra- perenderan benar-benar merender seluruh halaman alih-alih sumber daya tertentu.

Prakoneksi

Seperti dns-prefetch , direktif preconnect membantu browser membuat koneksi awal sebelum mengirim permintaan awal ke server.

Namun, petunjuk prakoneksi membawanya selangkah lebih maju. Saat melakukan pencarian DNS, ini juga mencakup negosiasi TLS dan jabat tangan TCP. Ini, pada gilirannya, menghilangkan latensi perjalanan pulang pergi dan menghemat lebih banyak waktu.

Tapi di sini muncul pertanyaan:

Jika preconnect melakukan semua yang dilakukan dns-prefetch , dan di atasnya, mengapa saya menggunakan dns-prefetch ?

Dalam kebanyakan kasus, preconnect adalah opsi yang lebih disukai daripada dns-prefetch , tetapi masalahnya adalah preconnect tidak didukung oleh beberapa browser:

Sumber: caniuse.com

Hal baiknya adalah Anda dapat menggunakannya bersama untuk mendapatkan hasil maksimal darinya. Anda bisa mendapatkan keuntungan dari preconnect di browser yang mendukungnya dengan fallback ke dns-prefetch :

Menurut Google:

Kembali pada tahun 2019, Chrome berhasil meningkatkan Time To Interactive mereka hampir 1 detik dengan melakukan prakoneksi ke sumber yang penting.

Pramuat

Sebelum menjelaskan cara kerja direktif preload , kita harus membuat sesuatu yang jelas.

Meskipun pramuat secara teratur disebutkan sebagai "Petunjuk Sumber Daya", sebenarnya tidak. Pramuat adalah pengambilan deklaratif, dan itu wajib untuk browser , menjadikannya lebih sebagai perintah daripada petunjuk.

Meskipun demikian, pramuat digunakan untuk memaksa browser mengunduh sumber daya lebih cepat daripada yang akan ditemukan browser karena sangat penting untuk halaman.

Arahan pramuat berfungsi paling baik pada sumber daya yang merupakan bagian dari jalur rendering penting tetapi tidak mudah ditemukan oleh browser. Misalnya, font, CSS, atau JavaScript penting.

Perbedaan lain dari petunjuk dns-prefetch dan preconnect adalah bahwa sementara mereka hanya membutuhkan atribut rel dan href , pramuat lebih rumit. Anda harus menambahkan atribut as , yang menunjukkan jenis konten sumber daya yang ingin Anda muat sebelumnya.

Menurut Addy Osmani, seorang manajer teknik di Google, menyediakan atribut as saat pramuat adalah wajib:

Berikut daftar lengkap nilai as yang dapat Anda tentukan:

Menyertakan atribut as membantu browser menyetel prioritas sumber daya yang diambil sebelumnya menurut jenisnya dan menentukan apakah sumber daya sudah ada dalam cache.

Lihat dokumen Prioritas dan Penjadwalan Sumber Daya Chrome untuk mempelajari lebih lanjut tentang bagaimana berbagai jenis sumber daya diprioritaskan.

Untuk beberapa sumber, seperti font, Anda juga harus menyertakan atribut crossorigin .

Atribut crossorigin menyetel mode permintaan ke Permintaan HTTP CORS. CORS (Cross-Origin Resource Sharing) adalah mekanisme yang memungkinkan server untuk menunjukkan asal apa pun selain miliknya yang darinya browser harus mengizinkan pemuatan sumber daya. Kami tidak akan membahasnya lebih dalam karena ini bukan fokus dari artikel ini, tetapi Anda dapat menemukan informasi lebih lanjut di sini.

Dan mirip dengan atribut as , font preloading tanpa crossorigin akan mengambil ganda. Berikut kutipan lain dari artikel Addy Osmani tentang topik tersebut:

Lebih Banyak Petunjuk Sumber Daya, Lebih Banyak Masalah

Membaca semuanya sampai sekarang, Anda mungkin mulai berpikir bahwa menggunakan petunjuk sumber daya sebanyak mungkin hanya akan menyebabkan browser memuat halaman Anda secepat kilat.

Sayangnya, ini tidak terjadi.

Berikut adalah beberapa kemunduran yang harus Anda perhitungkan saat mengintegrasikan petunjuk sumber daya:

1. Prefetch mungkin meningkatkan konsumsi data

Meskipun prefetch menetapkan prioritas unduhan yang rendah, itu tidak berarti bahwa itu tidak berbahaya. Penggunaannya dapat meningkatkan konsumsi data di situs Anda, yang dapat menimbulkan masalah baik untuk Anda (peningkatan lalu lintas di server Anda), dan pengguna Anda (konsumsi sumber daya yang berlebihan yang tidak perlu). Selain itu, Anda akhirnya dapat memuat byte tambahan yang mungkin tidak akan digunakan pada akhirnya. Jadi pikirkan dua kali sebelum mengintegrasikannya.

2. Prarender dapat menyebabkan pemborosan bandwidth

Taruhan dengan prerender bahkan lebih besar daripada prefetch , karena Anda mengunduh seluruh halaman terlebih dahulu. Ini membuat petunjuk menjadi banyak sumber daya dan dapat menyebabkan pemborosan bandwidth, terutama pada perangkat seluler. Dan bagian terburuknya adalah pengguna bahkan mungkin tidak melihat efek petunjuk jika mereka tidak meminta halaman tersebut.

3. Prakoneksi dapat menyebabkan penggunaan CPU ekstra

Meskipun prakoneksi adalah petunjuk dengan prioritas rendah, ini mungkin masih membahayakan kinerja situs web Anda. Jika koneksi yang dibuat tidak digunakan dengan cepat (dalam 10 detik di Chrome), maka arahan preconnect hanya menambahkan penggunaan CPU tambahan, dan itu akan ditutup secara otomatis oleh browser. Selain itu, Anda harus menggunakan prakoneksi dengan hemat karena ukuran sertifikat enkripsi sekitar 3 KB, yang akan bersaing dengan bandwidth untuk sumber daya penting lainnya.

4. Pramuat mengesampingkan prioritas yang ditetapkan oleh penganalisis browser

preload adalah instruksi yang kuat karena memungkinkan Anda untuk membuat browser segera mengunduh sumber daya. Namun, browser web modern cukup bagus dalam memprioritaskan sumber daya, sehingga penggunaan pramuat yang berlebihan dapat menyebabkan hasil negatif. Misalnya, Jika Anda menambahkan direktif pramuat yang cocok dengan URL sumber daya yang tidak disinkronkan, browser akan mengambilnya lebih cepat, sehingga akan menguraikannya lebih cepat, meniadakan efek atribut async Anda dengan menginterupsi utas utama di awal pemuatan halaman.

rekap

Kami telah membahas banyak hal dalam artikel ini, jadi mari kita rekap cepat dari poin yang paling penting:

• dns-prefetch dan preconnect digunakan untuk memprioritaskan nama domain (misalnya, https://example.com).
• prefetch dan preload digunakan untuk memprioritaskan pemuatan sumber daya. Sementara prefetch digunakan untuk meningkatkan waktu buka halaman berikutnya, preload berfungsi paling baik pada sumber daya penting untuk halaman saat ini.
• prarender mereferensikan seluruh halaman (mis., blog.html).
• prefetch , prerender , dan preconnect adalah petunjuk sumber daya, dan semuanya dijalankan sesuai keinginan browser. Direktif preload adalah perintah yang wajib untuk browser.
• Saat menggunakan preload , jangan lupa untuk memberikan atribut as dan crossorigin untuk menghindari pengambilan ganda.
• Meskipun petunjuk sumber daya adalah petunjuk berprioritas rendah, petunjuk tersebut tetap menjadi ancaman bagi kinerja situs Anda. Gunakan dalam jumlah sedang dan hanya jika diperlukan.
• preload adalah arahan kuat yang dapat mengesampingkan prioritas penganalisis browser. Jangan lupa bahwa peramban modern cukup bagus dalam memprioritaskan sumber daya, jadi gunakan "petunjuk" pramuat dengan hemat.

Gunakan pengetahuan yang baru diperoleh tentang petunjuk sumber daya untuk mempercepat pengiriman konten dan aset serta meningkatkan kinerja situs Anda secara keseluruhan. Dan jangan lupa untuk menguji website Anda di dunia nyata (fokus pada data lapangan) setiap kali Anda melakukan perubahan.