Dalam codelab ini, Anda akan menerapkan pengambilan data terlebih dahulu dengan dua cara: menggunakan <link rel="prefetch"> dan menggunakan header HTTP Link.
Aplikasi contoh adalah situs yang memiliki halaman landing promosi dengan diskon khusus untuk kaus terlaris toko. Karena halaman landing ditautkan ke satu produk, dapat diasumsikan bahwa sebagian besar pengguna akan membuka halaman detail produk. Hal ini menjadikan halaman produk sebagai opsi yang tepat untuk melakukan pengambilan data terlebih dahulu di halaman landing.
Mengukur performa
Pertama, tetapkan performa dasar:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
Klik tab Jaringan.
Di menu drop-down Throttling, pilih Fast 3G untuk menyimulasikan jenis koneksi lambat.
Untuk memuat halaman produk, klik Beli sekarang di aplikasi contoh.
Halaman product-details.html memerlukan waktu sekitar 600 md untuk dimuat:
Melakukan pengambilan data halaman produk dengan <link rel="prefetch">
Untuk meningkatkan kualitas navigasi, sisipkan tag prefetch di halaman landing untuk melakukan pengambilan data halaman product-details.html terlebih dahulu:
- Tambahkan elemen
<link>berikut ke head fileviews/index.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="prefetch" href="/product-details.html" as="document">
...
</head>
Atribut as bersifat opsional tetapi direkomendasikan; atribut ini membantu browser menyetel header yang tepat dan menentukan apakah resource sudah ada dalam cache. Contoh nilai untuk atribut ini mencakup: document, script, style, font, image, dan lainnya.
Untuk memverifikasi bahwa pengambilan data terlebih dahulu berfungsi:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
Klik tab Jaringan.
Di menu drop-down Throttling, pilih Fast 3G untuk menyimulasikan jenis koneksi lambat.
Hapus centang pada kotak Nonaktifkan cache.
Muat ulang aplikasi.
Sekarang, saat halaman landing dimuat, halaman product-details.html juga dimuat, tetapi dengan prioritas terendah:
Halaman disimpan dalam cache HTTP selama lima menit, setelah itu aturan Cache-Control normal untuk dokumen berlaku. Dalam hal ini, product-details.html memiliki header cache-control dengan nilai public, max-age=0, yang berarti halaman disimpan selama total lima menit.
Mengevaluasi ulang performa
- Muat ulang aplikasi.
- Untuk memuat halaman produk, klik Beli sekarang di aplikasi contoh.
Lihat panel Jaringan. Ada dua perbedaan dibandingkan dengan rekaman aktivitas jaringan awal:
- Kolom Ukuran menampilkan "cache pengambilan data", yang berarti resource ini diambil dari cache browser, bukan dari jaringan.
- Kolom Time menunjukkan bahwa waktu yang diperlukan untuk memuat dokumen sekarang sekitar 10 md.
Hal ini merupakan pengurangan sekitar 98% dibandingkan dengan versi sebelumnya, yang memerlukan waktu sekitar 600 md.
Poin tambahan: Menggunakan prefetch sebagai peningkatan progresif
Pengambilan data lebih awal paling baik diterapkan sebagai peningkatan progresif bagi pengguna yang menjelajah di koneksi cepat. Anda dapat menggunakan Network Information API untuk memeriksa kondisi jaringan dan berdasarkan hal itu, menyisipkan tag pengambilan data di muka secara dinamis. Dengan begitu, Anda dapat meminimalkan konsumsi data dan menghemat biaya bagi pengguna yang menggunakan paket data lambat atau mahal.
Untuk menerapkan pengambilan data awal adaptif, hapus terlebih dahulu tag <link rel="prefetch"> dari views/index.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="prefetch" href="/product-details.html" as="document">
...
</head>
Kemudian, tambahkan kode berikut ke public/script.js untuk mendeklarasikan fungsi yang menyisipkan tag prefetch secara dinamis saat pengguna menggunakan koneksi cepat:
function injectLinkPrefetchIn4g(url) {
if (window.navigator.connection.effectiveType === '4g') {
//generate link prefetch tag
const linkTag = document.createElement('link');
linkTag.rel = 'prefetch';
linkTag.href = url;
linkTag.as = 'document';
//inject tag in the head of the document
document.head.appendChild(linkTag);
}
}
Fungsinya bekerja sebagai berikut:
- API ini memeriksa properti effectiveType dari Network Information API untuk menentukan apakah pengguna menggunakan koneksi 4G (atau yang lebih cepat).
- Jika kondisi tersebut terpenuhi, tag
<link>akan dibuat denganprefetchsebagai jenis petunjuk, meneruskan URL yang akan di-prefetch dalam atributhref, dan menunjukkan bahwa resource adalahdocumentHTML dalam atributas. - Terakhir, skrip akan disisipkan secara dinamis di
headhalaman.
Selanjutnya, tambahkan script.js ke views/index.html, tepat sebelum tag </body> penutup:
<body>
...
<script src="/script.js"></script>
</body>
Meminta script.js di akhir halaman memastikan bahwa script.js akan dimuat dan dieksekusi setelah halaman diuraikan dan dimuat.
Untuk memastikan bahwa pengambilan data di muka tidak mengganggu resource penting untuk halaman saat ini, tambahkan cuplikan kode berikut untuk memanggil injectLinkPrefetchIn4g() pada peristiwa window.load:
<body>
...
<script src="/script.js"></script>
<script>
window.addEventListener('load', () => {
injectLinkPrefetchIn4g('/product-details.html');
});
</script>
</body>
Halaman landing kini melakukan pengambilan data product-details.html hanya pada koneksi cepat. Untuk memverifikasi bahwa:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Jaringan.
- Di menu drop-down Throttling, pilih Online.
- Muat ulang aplikasi.
Anda akan melihat product-details.html di panel Network:
Untuk memverifikasi bahwa halaman produk tidak di-prefetch pada koneksi lambat:
- Di menu drop-down Pembatasan, pilih 3G Lambat.
- Muat ulang aplikasi.
Panel Network hanya boleh menyertakan resource untuk halaman landing tanpa product-details.html:
Melakukan pengambilan data awal stylesheet untuk halaman produk dengan header HTTP Link
Header HTTP Link dapat digunakan untuk melakukan pengambilan data terlebih dahulu dari jenis resource yang sama dengan tag link. Menentukan kapan harus menggunakan salah satu atau yang lainnya sebagian besar bergantung pada preferensi Anda, karena perbedaan performanya tidak signifikan. Dalam hal ini, Anda akan menggunakannya untuk melakukan pengambilan data CSS utama halaman produk terlebih dahulu, guna lebih meningkatkan rendering-nya.
Tambahkan header Link HTTP untuk style-product.css dalam respons server untuk halaman landing:
- Buka file
server.jsdan cari handlerget()untuk URL root:/. - Tambahkan baris berikut di awal pengendali:
app.get('/', function(request, response) {
response.set('Link', '</style-product.css>; rel=prefetch');
response.sendFile(__dirname + '/views/index.html');
});
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Jaringan.
- Muat ulang aplikasi.
style-product.css kini di-prefetch dengan prioritas terendah setelah halaman landing dimuat:
Untuk membuka halaman produk, klik Beli sekarang. Lihat panel Network:
File style-product.css diambil dari "cache pengambilan data" dan hanya membutuhkan waktu 12 md untuk dimuat.