Dalam codelab ini, Anda akan menerapkan pengambilan data secara otomatis dengan dua cara: dengan <link rel="prefetch">
dan dengan header Link
HTTP.
Aplikasi contoh adalah situs yang memiliki halaman landing promosi dengan diskon khusus untuk kaus terlaris toko. Karena halaman landing tertaut ke satu produk, dapat diasumsikan bahwa sebagian besar pengguna akan membuka halaman detail produk. Hal ini menjadikan halaman produk sebagai kandidat yang tepat untuk melakukan pengambilan data di halaman landing.
Mengukur performa
Pertama, tetapkan performa dasar pengukuran:
- Klik Remix to Edit untuk membuat project dapat diedit.
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh .
- 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:
Mengambil halaman produk terlebih dahulu dengan <link rel="prefetch">
Untuk meningkatkan navigasi, sisipkan tag prefetch
di halaman landing untuk melakukan pengambilan data sebelumnya pada halaman product-details.html
:
- Tambahkan elemen
<link>
berikut ke bagian awal 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 menetapkan 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 sebelumnya berfungsi:
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh .
- 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 centang Nonaktifkan cache.
Muat ulang aplikasi.
Sekarang, saat halaman landing dimuat, halaman product-details.html
juga akan dimuat, tetapi dengan prioritas terendah:
Halaman disimpan di cache HTTP selama lima menit, setelah itu aturan Cache-Control
normal untuk dokumen akan diterapkan. 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 Waktu menunjukkan bahwa waktu yang diperlukan untuk memuat dokumen kini sekitar 10 md.
Ini adalah pengurangan sekitar 98% dibandingkan dengan versi sebelumnya, yang memerlukan waktu sekitar 600 md.
Poin tambahan: Menggunakan prefetch
sebagai peningkatan progresif
Pengambilan data paling baik diterapkan sebagai progressive enhancement untuk pengguna yang menjelajah dengan koneksi cepat. Anda dapat menggunakan Network Information API untuk memeriksa kondisi jaringan dan berdasarkan hal tersebut, memasukkan tag pengambilan data 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 adaptif, hapus tag <link rel="prefetch">
dari views/index.html
terlebih dahulu:
<!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 secara dinamis memasukkan tag prefetch
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);
}
}
Fungsi ini berfungsi sebagai berikut:
- Fungsi ini memeriksa properti effectiveType dari Network Information API untuk menentukan apakah pengguna menggunakan koneksi 4G (atau lebih cepat).
- Jika kondisi tersebut terpenuhi, tag
<link>
akan dibuat denganprefetch
sebagai jenis petunjuk, meneruskan URL yang akan diambil sebelumnya di atributhref
, dan menunjukkan bahwa resource adalahdocument
HTML di atributas
. - Terakhir, skrip akan dimasukkan secara dinamis di
head
halaman.
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 sebelumnya 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 pramuat product-details.html
hanya pada koneksi yang cepat. Untuk memverifikasi bahwa:
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh .
- 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 Jaringan:
Untuk memastikan bahwa halaman produk tidak dipramuat pada koneksi lambat:
- Di menu drop-down Throttling, pilih 3G Lambat.
- Muat ulang aplikasi.
Panel Jaringan hanya boleh menyertakan resource untuk halaman landing tanpa product-details.html
:
Mengambil stylesheet untuk halaman produk dengan header HTTP Link
Header Link
HTTP dapat digunakan untuk melakukan pramuat jenis resource yang sama dengan tag link
. Menentukan kapan harus menggunakan salah satu dari keduanya sebagian besar bergantung pada preferensi Anda, karena perbedaan performanya tidak signifikan. Dalam hal ini, Anda akan menggunakannya untuk melakukan pramuat CSS utama halaman produk, untuk lebih meningkatkan renderingnya.
Tambahkan header Link
HTTP untuk style-product.css
dalam respons server untuk halaman landing:
- Buka file
server.js
dan cari pengendaliget()
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');
});
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh .
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Jaringan.
- Muat ulang aplikasi.
style-product.css
kini diambil sebelumnya dengan prioritas terendah setelah halaman landing dimuat:
Untuk membuka halaman produk, klik Beli sekarang. Lihat panel Jaringan:
File style-product.css
diambil dari "cache pengambilan data" dan hanya memerlukan waktu 12 md untuk dimuat.