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

Demián Renzulli
Demián Renzulli
X GitHub Gangguan

Dalam codelab ini, Anda akan menerapkan pengambilan data 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 di 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 pengambilan data di halaman landing.

Mengukur performa

Pertama-tama, tetapkan performa dasar pengukuran:

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

  4. Klik tab Network

  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 muat untuk product-details.html

Ambil halaman produk 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 menyetel header yang tepat dan menentukan apakah resource sudah ada dalam cache. Contoh nilai untuk atribut ini meliputi: document, script, style, font, image, dan others.

Untuk memverifikasi bahwa pengambilan data berfungsi:

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

  3. Klik tab Network

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

  5. Hapus centang pada kotak 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 tersebut disimpan dalam cache HTTP selama lima menit, setelah itu aturan Cache-Control normal untuk dokumen tersebut akan berlaku. Dalam hal ini, product-details.html memiliki header cache-control dengan nilai public, max-age=0, yang berarti halaman tersebut 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 Network. Ada dua perbedaan dibandingkan dengan trace jaringan awal:

  • Kolom Size menampilkan "cache pengambilan data", yang berarti resource ini diambil dari cache browser, bukan jaringan.
  • Kolom Waktu menampilkan bahwa waktu yang diperlukan untuk memuat dokumen sekarang sekitar 10 milidetik.

Ini adalah pengurangan sekitar 98% dibandingkan dengan versi sebelumnya, yang membutuhkan waktu sekitar 600 md.

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

Kredit tambahan: Gunakan prefetch sebagai progressive enhancement

Pengambilan data paling baik diterapkan sebagai peningkatan progresif untuk pengguna yang menjelajah dengan koneksi cepat. Anda dapat menggunakan Network Information API untuk memeriksa kondisi jaringan dan berdasarkan tag pengambilan data yang dimasukkan secara dinamis. Dengan begitu, Anda dapat meminimalkan konsumsi data dan menghemat biaya bagi pengguna yang menggunakan paket data yang 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:

  • Fitur ini memeriksa properti effectiveType pada Network Information API untuk menentukan apakah pengguna menggunakan koneksi 4G (atau lebih cepat).
  • Jika ketentuan tersebut terpenuhi, akan dihasilkan tag <link> dengan prefetch sebagai jenis petunjuk, meneruskan URL yang akan diambil data di atribut href, dan menunjukkan bahwa resource adalah document HTML di atribut as.
  • Terakhir, kode ini memasukkan skrip 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 halaman akan dimuat dan dijalankan setelah halaman diuraikan dan dimuat.

Untuk memastikan pengambilan data 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 sekarang mengambil data product-details.html hanya pada koneksi cepat. Untuk memastikan bahwa:

  1. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh layar penuh.
  2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  3. Klik tab Network
  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 pengambilan data product-details.html.

Untuk memastikan halaman produk tidak melakukan pengambilan data saat koneksi lambat:

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

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

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

Ambil stylesheet untuk halaman produk dengan header Link HTTP

Header Link HTTP dapat digunakan untuk mengambil data jenis resource yang sama dengan tag link. Memutuskan kapan akan menggunakan salah satunya bergantung pada preferensi Anda, karena perbedaan kinerja tidak signifikan. Dalam hal ini, Anda akan menggunakannya untuk mengambil data CSS utama halaman produk, untuk lebih meningkatkan renderingnya.

Tambahkan header Link HTTP untuk style-product.css di 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. Lalu tekan Layar Penuh layar penuh.
  2. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  3. Klik tab Network
  4. Muat ulang aplikasi.

Sekarang style-product.css dilakukan pengambilan data dengan prioritas terendah setelah halaman landing dimuat:

Panel jaringan yang menampilkan pengambilan data style-product.css.

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

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 milidetik untuk dimuat.