Preload ของที่ต้องใช้ไว้ก่อนด้วย Speculation Rules API

ใครจำได้เนี่ยเมื่อก่อน ถ้าเราจะ reload อะไรซักอย่างบนหน้าเว็บไว้ก่อนเราก็จะใช้ tag prefetch, preload ที่เอาไปใส่ใน Meta แต่ปัญหาใหญ่ๆเลยคือ มัน ทำให้มันทำงาน เป็น programatic ยากมากๆ Chrome ก็เลยออกของใหม่มา นั่นคือ Speculation Rules API จริงๆมันคือ หลักการเดิมเลยคือ การที่เราระบุไว้ก่อนว่าอะไรที่น่าจะใช้แล้วบอก Browser ว่า ให้โหลดหน้านั้นมารอไว้ก่อนเลยนะ

	<script type="speculationrules">
	{
	"prerender": [
	{
	"source": "list",
	"urls": ["next.html", "next2.html"],
	"eagerness": "moderate"
	},
	{
	"where": {
	"and": [
	{ "href_matches": "/*" },
	{ "not": { "href_matches": "/logout" } },
	{ "not": { "href_matches": "/*\\?*(^|&)add-to-cart=*" } },
	{ "not": { "selector_matches": ".no-prerender" } },
	{ "not": { "selector_matches": "[rel~=nofollow]" } }
	]
	}
	}
	],
	"prefetch": [
	{
	"urls": ["next.html", "next2.html"],
	"requires": ["anonymous-client-ip-when-cross-origin"],
	"referrer_policy": "no-referrer"
	}
	]
	}
	</script>

view raw speculation-rules-api.html hosted with ❤ by GitHub

วิธีใช้

วิธีคือ เราก็แค่ประกาศ script หน้าตาประมาณด้านบนเอาไว้เพื่อบอก Browser ว่า Link ไหนในหน้าเว็บนี้ ควร preload เอาไว้ก่อน

1. Prerender – อันนี้คือ condition ของ page ที่อยากให้ prerender background ไว้ก่อนที่ path นั้นจะถูกเปิด โดยเราสามารถระบุเป็น link ที่เป็น list ของ url เลยก็ได้ หรือ จะให้ตัว Browser ไปกวาดดูจาก tag a บนหน้าเว็บก็ได้ ถ้าดูจาก condition ในตัวอย่าง จะเป็นตัวอย่างที่บอกว่า ให้ไปกวาดดูใน tag a แล้วถ้าอันไหน match condition ให้ prerender ได้เลย ถ้าดูใน array แรกของ prerender ในตัวอย่าง จะเห็นว่ามี property ที่เขียนว่า eagerness อยู่ property นี้เอาไว้ระบุว่าเราต้องการให้สิ่งๆนี้ prerender ด่วนขนาดไหน โดย option จะแบ่งเป็น

immediate – คือด่วนสุด เปิดหน้าเว็บมา prerender ได้เลย
eager – ตอนนี้เหมือน immediate แต่ในอนาคต จะทำงานตรงกลางระหว่าง immediate กับ moderate
moderate – ตัว browser จะ prerender เมื่อเราเอาเมาส์ไปวางบน link นั้นๆเกิน 200 milliseconds
conservative – ตัว Browser จะเริ่ม prerender ตอนนี้ user click

2. Prefetch – อันนี้จะเหมาะกับ การที่เราเอาไว้ preload ไฟล์ เช่น html หรือ css หรือ เหมาะกับเว็บที่เป็น SPA ที่ต้องใช้ไฟล์ ซ้ำๆ โดยเราต้องประกาศเป็นชื่อไฟล์ที่เราอยากจะ preload

หรือถ้าใครอยากทำให้เป็น programatics มากขึ้นกว่าเดิมเราก็สามารถจะ inject tag script เข้าไปปกติได้เลย

	if (HTMLScriptElement.supports?.('speculationrules')) {
	const specScript = document.createElement('script');
	specScript.type = 'speculationrules';
	const specRules = {
	prerender: [
	{
	urls: ['/next.html'],
	},
	],
	};
	specScript.textContent = JSON.stringify(specRules);
	document.body.append(specScript);
	}

view raw sra.js hosted with ❤ by GitHub

แล้วพอ set speculationrules แล้ว Browser จะทำยังไงต่อ

พอเราประกาศ condition แบบข้างบนแล้ว เมื่อ Browser เจอ link ที่ match condition ตัว browser ก็จะ แอบ preload หน้านั้นไว้ก่อนที่เราจะเปิด เอาไปเก็บไว้ใน cache ของ browser แต่ไม่ใช่ว่า browser จะ preload ไปเรื่อยๆนะครับ แต่ browser จะมี limit อยู่ว่า eagerness แบบไหนจะ เก็บไว้ไม่เกินกี่หน้า ตามตารางนี้

eagerness	Prefetch	Prerender
immediate / eager	50	10
moderate / conservative	2 (FIFO)	2 (FIFO)

ซึ่งเราสามารถ Debug ดูได้ว่า Browser preload อะไรไว้บ้างหรือ script ของเราทำงานถูกต้องมั้ย ด้วย Chrome Devtools ใน tap Application จะมี เมนูเขียนไว้ว่า speculative loads

อะไรใช้ได้อะไรใช้ไม่ได้บ้าง

อย่างแรกเลย ตอนนี้ feature นี้ใช้ได้แค่ chrome / edge / opera อย่างที่สองคือ ถ้าสมมติเครื่อง หรือมือถือ อยู่ใน mode ประหยัดพลังงาน หรือ ประหยัด data feature นี้จะไม่ทำงาน ตอนนี้ feature นี้ยังอยู่ในการทดสอบระดับนึงอาจจะต้องตาม document นิดหน่อยว่า support อะไรบ้างหรือทำอะไรได้บ้าง

Reference

https://developer.chrome.com/docs/web-platform/prerender-pages

https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API