Meningkatkan performa pemuatan halaman berikutnya

Fitur web: Aturan spekulasi

Salah satu cara paling efektif untuk meningkatkan performa pemuatan halaman bagi pengguna yang menjelajahi situs adalah dengan memulai pemuatan halaman berikutnya yang akan mereka kunjungi sebelum mereka mengunjunginya. Hal ini dapat dilakukan melalui teknik yang disebut pemuatan spekulatif menggunakan Speculation Rules API.

Cara kerjanya

Pemuatan spekulatif berfungsi dengan menggunakan aturan spekulasi berbasis JSON untuk memberi tahu browser tentang link yang dapat diambil atau dipra-render, sehingga meningkatkan performa pemuatan halaman saat pengguna mengkliknya.

Aturan dapat berupa daftar URL hardcode dengan kunci urls (disebut sebagai aturan daftar), atau dengan kunci where yang berisi kumpulan pemilih href dan pemilih CSS yang digunakan untuk menemukan link di halaman (disebut sebagai aturan document).

Aturan juga dapat menyertakan properti eagerness opsional yang menentukan kapan halaman harus dipramuat atau dipra-render. Properti eagerness dapat ditetapkan ke immediate, eager, moderate, atau conservative. immediate berspekulasi sesegera mungkin, sementara yang lain menunggu sinyal pengguna seperti mengarahkan kursor selama periode singkat, periode yang lebih lama, atau mulai mengklik halaman.

Aturan dapat digabungkan dengan berbagai setelan eagerness untuk melakukan pengambilan data secara eager, lalu melakukan pra-rendering saat pengguna berinteraksi lebih lanjut.

Kapan menggunakannya

Pemuatan spekulatif sangat berguna untuk halaman statis, yang kontennya cenderung tidak sering berubah, dan halaman yang lebih murah untuk diproduksi—terutama jika di-cache di edge. Fitur ini juga dapat digunakan untuk halaman dinamis, tetapi penting untuk berhati-hati terhadap potensi konten usang.

Pemuatan spekulatif biasanya digunakan untuk link origin yang sama, meskipun opsi yang lebih lanjutan memungkinkan beberapa spekulasi lintas origin. Panduan ini berfokus pada kasus penggunaan origin yang sama yang lebih umum.

Pemuatan spekulatif yang lebih agresif adalah pilihan yang baik untuk halaman yang kemungkinan akan dikunjungi berikutnya, seperti artikel headline atau halaman berikutnya dalam proses bertahap seperti mempelajari kursus.

Pemuatan spekulatif yang kurang agresif adalah pilihan yang baik jika tindakan pengguna selanjutnya kurang jelas, atau jika ada banyak link di halaman, yang masing-masing memiliki kemungkinan yang sama untuk dikunjungi. Dengan menunggu sinyal lainnya, seperti mengarahkan kursor, atau mulai mengklik halaman, Anda dapat memulai lebih awal di halaman berikutnya dan meningkatkan pengalaman pengguna, meskipun halaman tersebut tidak diambil atau dirender sepenuhnya.

Demikian pula, pengambilan data di awal adalah pilihan yang lebih konservatif daripada pra-rendering, yang menggunakan lebih sedikit resource (baik di sisi klien maupun server), tetapi memberikan lebih sedikit manfaat kepada pengguna. Ini adalah pilihan yang baik untuk penerapan awal, yang nantinya akan diperluas ke pra-rendering saat developer memintanya secara eksplisit.

Cara menggunakannya

Aturan spekulasi memiliki format berbasis JSON dan dapat disertakan dalam tag <script type="speculationrules">. Aturan dapat disertakan dalam <head> atau <body> dokumen, atau dapat ditambahkan secara dinamis menggunakan JavaScript.

tag juga dapat digunakan, baik di tingkat global maupun per aturan. Jika ditetapkan, tag ini akan disertakan dalam header Sec-Speculation-Tags, dan memungkinkan Anda mengidentifikasi spekulasi yang dibuat di sisi server.

Contoh aturan daftar URL sederhana untuk mengambil URL yang telah ditentukan sebelumnya

<script type="speculationrules">
  {
    "tag": "product-page-speculations",
    "prefetch": [
      {
        "urls": ["/product/1", "/product/2", "/product/3"]
      }
    ]
  }
</script>

Contoh aturan dokumen sederhana untuk melakukan pra-rendering semua link origin yang sama di halaman

<script type="speculationrules">
  {
    "tag": "all-links-speculations",
    "prerender": [{
      "where": { "href_matches": "/*" }
    }]
  }
</script>

<script type="speculationrules">
  {
    "tag": "speculations-with-exclusions",
    "prerender": [{
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": {"href_matches": "/wp-admin"}},
          { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
          { "not": {"selector_matches": ".do-not-prerender"}},
          { "not": {"selector_matches": "[rel~=nofollow]"}}
        ]
      }
    }]
  }
</script>

Contoh set aturan campuran

Contoh ini menunjukkan set aturan yang melakukan pengambilan data semua link secara eager, lalu melangkah lebih jauh untuk melakukan pra-rendering link yang sama saat mendapatkan lebih banyak sinyal dengan eagerness moderate.

<script type="speculationrules">
  {
    "prefetch": [{
      "tag": "prefetch-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "eager"
    }],
    "prerender": [{
      "tag": "prerender-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

Praktik Terbaik

  • LAKUKAN penggunaan aturan spekulasi untuk melakukan pengambilan data di awal dan pra-render halaman yang kemungkinan akan dikunjungi pengguna berikutnya.
  • GUNAKAN aturan spekulasi untuk situs statis, yang kontennya tidak mungkin sering berubah, dan halaman lebih murah untuk dibuat—terutama jika di-cache di edge.
  • LAKUKAN lebih banyak perhatian saat menggunakan aturan spekulasi untuk halaman dinamis, yang kontennya lebih cenderung sering berubah, mungkin menjadi usang, dan halaman lebih mahal untuk diproduksi.
  • LAKUKAN pemilihan aturan dokumen daripada aturan daftar, karena aturan dokumen lebih fleksibel, memungkinkan aturan yang sama dibagikan di beberapa halaman, dan dapat digunakan untuk pengambilan data di awal dan pra-rendering halaman yang tidak diketahui sebelumnya.
  • LAKUKAN pertimbangkan kompromi antara pengambilan data di awal dan pra-rendering, lalu pilih yang sesuai untuk kasus penggunaan Anda. Pra-rendering lebih mahal daripada pengambilan data di awal dan dapat menyebabkan lebih banyak efek samping yang tidak diinginkan dalam aplikasi kompleks yang menampilkan status dinamis, tetapi memberikan pengalaman pengguna yang lebih baik. Tanyakan kepada developer tentang preferensinya jika tidak yakin.
  • LAKUKAN pertimbangan konsekuensi antara berbagai tingkat eagerness, dan pilih yang sesuai untuk kasus penggunaan Anda. Spekulasi yang lebih agresif memberikan pengalaman pengguna yang lebih baik, tetapi menggunakan lebih banyak resource dan dapat menyebabkan lebih banyak efek samping yang tidak diinginkan dalam aplikasi kompleks yang menampilkan status dinamis. Tanyakan kepada developer tentang preferensinya jika tidak yakin.
  • JANGAN menggunakan aturan spekulasi secara berlebihan, misalnya, untuk berspekulasi pada setiap link di halaman. Browser memiliki batasan (2 spekulasi untuk spekulasi non-eager). immediate hanya boleh digunakan untuk sejumlah kecil link.
  • JANGAN berspekulasi URL yang kemungkinan memicu perubahan status, seperti /logout atau /add-to-cart, dan kecualikan secara eksplisit dari aturan spekulasi Anda jika URL tersebut kemungkinan akan disertakan dalam aturan dokumen.
  • JANGAN gunakan aturan spekulasi di Aplikasi Web Satu Halaman (SPA). Aturan spekulasi dirancang untuk aplikasi multi-halaman (MPA) tempat browser membuka dokumen baru di setiap navigasi. Di SPA, browser tidak membuka dokumen baru di setiap navigasi, sehingga aturan spekulasi tidak akan berfungsi seperti yang diharapkan.

Dukungan browser dan strategi penggantian

Namun, pemuatan spekulatif adalah progressive enhancement. Fitur ini sangat aman digunakan sebagai peningkatan, dan sangat direkomendasikan mengingat potensi manfaat performanya. Jika browser tidak mendukung aturan spekulasi, browser akan mengabaikannya.