Dua cara untuk mengambil data: tag <link> dan header HTTP

Demián Renzulli
Demián Renzulli
X GitHub Gangguan

Dalam codelab ini, Anda akan mengimplementasikan pengambilan data dengan dua cara: dengan <link rel="prefetch"> dan dengan header HTTP Link.

Aplikasi contoh adalah situs yang memiliki halaman landing promosi dengan diskon khusus untuk kaus terlaris di toko tersebut. 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:

  1. Klik Remix to Edit untuk menjadikan project dapat diedit.
  2. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh layar penuh.
  3. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.

  4. Klik tab Jaringan.

  5. Di menu drop-down Throttling, pilih Fast 3G untuk menyimulasikan jenis koneksi lambat.

  6. Untuk memuat halaman produk, klik Beli sekarang di aplikasi contoh.

Halaman product-details.html memerlukan waktu sekitar 600 md untuk dimuat:

Panel jaringan yang menampilkan waktu pemuatan untuk product-details.html

Mengambil halaman produk terlebih dahulu dengan <link rel="prefetch">

Untuk meningkatkan navigasi, sisipkan tag prefetch di halaman landing untuk mengambil data halaman product-details.html:

  • Tambahkan elemen <link> berikut ke head file 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>

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 memastikan bahwa pengambilan data berfungsi:

  1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh layar penuh.
  2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.

  3. Klik tab Jaringan.

  4. Di menu drop-down Throttling, pilih Fast 3G untuk menyimulasikan jenis koneksi lambat.

  5. Hapus centang pada kotak centang Nonaktifkan cache.

  6. Muat ulang aplikasi.

Sekarang, saat halaman landing dimuat, halaman product-details.html juga akan dimuat, tetapi dengan prioritas terendah:

Panel jaringan yang menampilkan pengambilan data product-details.html.

Halaman disimpan dalam cache HTTP selama lima menit, setelah itu aturan Cache-Control normal untuk dokumen akan 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.

Evaluasi ulang performa

  1. Muat ulang aplikasi.
  2. 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 sekarang sekitar 10 milidetik.

Ini kira-kira berkurang 98% dibandingkan versi sebelumnya, yang memerlukan waktu sekitar 600 md.

Panel jaringan yang menampilkan product-details.html yang diambil dari cache pengambilan data.

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 dengan prefetch sebagai jenis petunjuk, meneruskan URL yang akan diambil sebelumnya di atribut href, dan menunjukkan bahwa resource adalah document HTML di atribut as.
  • 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:

  1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh layar penuh.
  2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  3. Klik tab Jaringan.
  4. Di menu drop-down Throttling, pilih Online.
  5. Muat ulang aplikasi.

Anda akan melihat product-details.html di panel Jaringan:

Panel jaringan yang menampilkan product-details.html yang dipramuat.

Untuk memastikan bahwa halaman produk tidak dipramuat pada koneksi lambat:

  1. Di menu drop-down Throttling, pilih 3G Lambat.
  2. Muat ulang aplikasi.

Panel Jaringan hanya boleh menyertakan resource untuk halaman landing tanpa product-details.html:

Panel jaringan yang menampilkan product-details.html tidak dipramuat.

Mengambil stylesheet untuk halaman produk dengan header Link HTTP

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:

  1. Buka file server.js dan cari pengendali get() untuk URL root: /.
  2. 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');
});
  1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh layar penuh.
  2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  3. Klik tab Jaringan.
  4. Muat ulang aplikasi.

style-product.css kini diambil sebelumnya dengan prioritas terendah setelah halaman landing dimuat:

Panel jaringan yang menampilkan style-product.css yang dipramuat.

Untuk membuka halaman produk, klik Beli sekarang. Lihat panel Jaringan:

Panel jaringan yang menampilkan style-product.css yang diambil dari cache pengambilan data.

File style-product.css diambil dari "cache pengambilan data" dan hanya memerlukan waktu 12 md untuk dimuat.