เร่งเวลา Largest Contentful Paint (LCP) ด้วยการโหลดล่วงหน้าข้ามเว็บไซต์
ตั้งแต่ Chrome 103 สำหรับ Android เป็นต้นไป Chrome จะทยอยเปิดตัวฟีเจอร์พร็อกซีการเรียกข้อมูลล่วงหน้าแบบส่วนตัวเพื่อเร่งความเร็วในการไปยังส่วนต่างๆ จาก Google Search และเว็บไซต์อื่นๆ ที่เข้าร่วมโดยเฉลี่ย 30% ฟีเจอร์พร็อกซีที่ดึงข้อมูลล่วงหน้าแบบส่วนตัวนี้ทำให้สามารถดึงข้อมูลเนื้อหาแบบข้ามต้นทางล่วงหน้าโดยไม่ต้องเปิดเผยข้อมูลผู้ใช้ไปยังเว็บไซต์ปลายทางจนกว่าผู้ใช้จะไปยังส่วนต่างๆ
อ่านต่อเพื่อดูข้อมูลเกี่ยวกับวิธีการทํางานของฟีเจอร์นี้ วิธีที่ฟีเจอร์นี้ช่วยปรับปรุง Largest Contentful Paint (LCP) ของเว็บไซต์ได้อย่างมาก หรือวิธีที่เว็บไซต์ที่มาช่วยผู้ใช้บรรลุเป้าหมายได้โดยเร่งความเร็วในการไปยังส่วนต่างๆ ของเว็บไซต์
วิธีการทำงานของ Private Prefetch Proxy
ช่องทางการสื่อสารที่ปลอดภัย
ฟีเจอร์นี้ใช้พร็อกซี CONNECT เพื่อสร้างช่องทางการสื่อสารที่ปลอดภัยระหว่าง Chrome กับเซิร์ฟเวอร์ที่โฮสต์เนื้อหาที่จะดึงข้อมูลล่วงหน้า ช่องทางการสื่อสารที่ปลอดภัยนี้ป้องกันไม่ให้พร็อกซีตรวจสอบการโอนข้อมูล โปรดทราบว่าแม้ว่าพร็อกซีการเรียกข้อมูลล่วงหน้าแบบส่วนตัวจะต้องเห็นชื่อโฮสต์เพื่อสร้างช่องทางการสื่อสารที่ปลอดภัย แต่จะไม่ได้เห็น URL แบบเต็มหรือทรัพยากรเอง
CONNECT จะช่วยป้องกันไม่ให้ข้อมูลผู้ใช้รั่วไหลนอกจากนี้ เนื่องจากช่องทางการสื่อสารที่ปลอดภัยได้รับการเข้ารหัสจากต้นทางถึงปลายทาง ผู้กลางจึงไม่สามารถดูชื่อโฮสต์หรือเนื้อหาของเว็บไซต์ที่โหลดล่วงหน้าได้ สุดท้ายคือ พร็อกซีจะป้องกันไม่ให้เซิร์ฟเวอร์ปลายทางเห็นที่อยู่ IP ของผู้ใช้
การป้องกันการระบุตัวตนผู้ใช้
นอกจากแง่มุมของเครือข่ายที่อธิบายไว้ก่อนหน้านี้แล้ว เรายังต้องป้องกันไม่ให้เซิร์ฟเวอร์ระบุตัวตนผู้ใช้ในเวลาที่ทำการโหลดล่วงหน้าผ่านข้อมูลที่จัดเก็บไว้ในอุปกรณ์ของผู้ใช้ก่อนหน้านี้ด้วย ด้วยเหตุนี้ ปัจจุบัน Chrome จึงจำกัดการใช้พร็อกซีการเรียกข้อมูลล่วงหน้าแบบส่วนตัวไว้สำหรับเว็บไซต์ที่ผู้ใช้ไม่มีคุกกี้หรือสถานะในเครื่องอื่นๆ ข้อจำกัดสำหรับคำขอการดึงข้อมูลล่วงหน้าที่ดำเนินการผ่านพร็อกซีการดึงข้อมูลล่วงหน้าส่วนตัวมีดังนี้
- คุกกี้: ไม่อนุญาตให้คําขอการเรียกข้อมูลล่วงหน้ามีคุกกี้
- หากมีคุกกี้สําหรับทรัพยากร Chrome จะดึงข้อมูลโดยไม่ใช้ข้อมูลเข้าสู่ระบบ แต่จะไม่ได้ใช้คําตอบ (ดูส่วนการแคชในภายหลัง)
- แม้ว่าการตอบสนองต่อคำขอการโหลดล่วงหน้าอาจมีคุกกี้ แต่ระบบจะบันทึกคุกกี้เหล่านี้ก็ต่อเมื่อผู้ใช้ไปยังหน้าที่โหลดไว้ล่วงหน้าเท่านั้น
- การจดจำลายนิ้วมือ: ระบบจะปรับพื้นผิวอื่นๆ ที่อาจใช้สำหรับการจดจำลายนิ้วมือด้วย ตัวอย่างเช่น ส่วนหัว
User-Agentที่ส่งโดยพร็อกซีที่ดึงข้อมูลล่วงหน้าจะมีข้อมูลที่จำกัด
ในอนาคต เราหวังว่าจะขยายพร็อกซีการเรียกข้อมูลล่วงหน้าแบบส่วนตัวไปยังลิงก์ที่มีคุกกี้หรือสถานะในเครื่องโดยยังคงลักษณะความเป็นส่วนตัวแบบเดิมไว้ ดูรายละเอียดเพิ่มเติมได้ที่ส่วนขั้นตอนถัดไป
การแคช
Chrome จะโหลดทรัพยากรล่วงหน้าแม้ว่าทรัพยากรเหล่านั้นจะอยู่ในแคชอยู่แล้ว แต่จะไม่ส่งส่วนหัวแบบมีเงื่อนไข เช่น ETag หรือ If-Modified-Since (ส่วนหัวเหล่านี้มีค่าที่เซิร์ฟเวอร์ตั้งไว้ซึ่งอาจใช้ติดตามได้แม้จะไม่มีคุกกี้ก็ตาม) การดึงข้อมูลล่วงหน้านี้ดำเนินการเพื่อป้องกันไม่ให้สถานะแคชของไคลเอ็นต์รั่วไหลไปยังเว็บไซต์ที่ดึงข้อมูลล่วงหน้า นอกจากนี้ Chrome จะคอมมิตทรัพยากรที่ดึงข้อมูลล่วงหน้าไปยังแคชเมื่อผู้ใช้ตัดสินใจไปยังเว็บไซต์ที่ดึงข้อมูลล่วงหน้าเท่านั้น
เริ่มต้นใช้งานพร็อกซีการเรียกข้อมูลล่วงหน้าแบบส่วนตัว
สำหรับเจ้าของเว็บไซต์
เจ้าของเว็บไซต์ไม่ต้องดำเนินการใดๆ เพื่อเริ่มรับประโยชน์จากพร็อกซีการดึงข้อมูลล่วงหน้าแบบส่วนตัวในลิงก์ที่ผู้ใช้ไม่มีคุกกี้หรือสถานะในเครื่อง จากการทดสอบของเรา นี่เป็นโอกาสที่สำคัญสำหรับเว็บไซต์ส่วนใหญ่ นอกจากนี้ การสร้างความประทับใจให้ผู้เข้าชมครั้งแรกหรือผู้เข้าชมที่ไม่บ่อยด้วยประสบการณ์การโหลดที่รวดเร็วทันใจก็เป็นความคิดที่ดีเสมอ จากผลการทดสอบที่ผ่านมา เราพบว่า Largest Contentful Paint ในการนําทางที่โหลดล่วงหน้าเร็วขึ้น 20-30%
ในอนาคต เราหวังว่าจะได้ขยายการให้บริการฟีเจอร์นี้ไปยังลิงก์ที่มีคุกกี้หรือสถานะในเครื่องโดยยังคงลักษณะความเป็นส่วนตัวของฟีเจอร์นี้ไว้ ปัญหาเกี่ยวกับคุกกี้คืออาจมีการนำไปใช้ในการเปลี่ยนแปลงประสบการณ์ของผู้ใช้ในลักษณะที่คาดเดาได้ยาก ดังนั้น เจ้าของเว็บไซต์จึงอาจต้องเลือกใช้หรือปรับเว็บไซต์เพื่อให้ได้รับประโยชน์จากพร็อกซีการเรียกข้อมูลล่วงหน้าแบบส่วนตัวสําหรับลิงก์ที่มีคุกกี้
กล่าวโดยละเอียดคือ แม้ว่าคำขอการเรียกข้อมูลล่วงหน้าจะยังคงไม่มีข้อมูลเข้าสู่ระบบ แต่หน้าเว็บก็จะได้รับสิทธิ์เข้าถึงคุกกี้และสถานะในเครื่องอื่นๆ เมื่อผู้ใช้ไปยังหน้านั้น นักพัฒนาแอปสามารถใช้ข้อกำหนดนี้เพื่อเพิ่มการปรับตามโปรไฟล์ของผู้ใช้และการเปลี่ยนแปลงตามคุกกี้หรือสถานะในเครื่องอีกครั้ง หรือนักพัฒนาแอปอาจต้องการประกาศว่าทรัพยากรบางอย่างสามารถรับการเรียกข้อมูลล่วงหน้าและใช้ได้ตามปกติได้โดยไม่ต้องใช้คุกกี้ (นั่นคือ ทรัพยากรที่ไม่ใช้คุกกี้ใดๆ) โปรดดูข้อมูลเพิ่มเติมและดูแผนของเราได้ที่ส่วนขั้นตอนถัดไป
เนื้อหาหรือบริการที่ขึ้นอยู่กับพื้นที่
หากเว็บไซต์ทำงานแตกต่างกัน (เช่น เนื้อหาที่แตกต่างกันหรือการเข้าถึงแบบเลือก) ในตลาดต่างๆ ตามที่อยู่ IP ของผู้ใช้ คุณอาจสงสัยว่าจะจัดการกับคำขอการเรียกข้อมูลล่วงหน้าของ Private Prefetch Proxy ได้อย่างไร โปรดทราบว่าพร็อกซีการดึงข้อมูลล่วงหน้าส่วนตัวขับเคลื่อนโดยเซิร์ฟเวอร์หลายแห่งที่กระจายอยู่ทั่วโลก และ IP ของพร็อกซีจะระบุตำแหน่งทางภูมิศาสตร์ไปยังประเทศที่ผู้ใช้เริ่มการดึงข้อมูลล่วงหน้า
เมื่อคำนึงถึงสิ่งที่กล่าวมาข้างต้น เราจึงขอแนะนำสิ่งต่อไปนี้
- ระบุคำขอการเรียกข้อมูลล่วงหน้าจากพร็อกซีการเรียกข้อมูลล่วงหน้าส่วนตัวด้วยส่วนหัว HTTP
Sec-Purpose: Prefetch; anonymous-client-ip - ค้นหาตำแหน่งทางภูมิศาสตร์ของพร็อกซีการดึงข้อมูลล่วงหน้าส่วนตัวที่ส่งคำขอผ่านทางที่อยู่ IP โปรดดูแหล่งข้อมูลนี้สำหรับรายชื่อประเทศที่เปิดให้บริการล่าสุดและที่อยู่ IP ที่เกี่ยวข้อง
- แสดงทรัพยากรตามตลาดที่เชื่อมโยงกับสถานที่ตั้งทางภูมิศาสตร์นี้
ควบคุมการจราจร
จากการทดสอบที่ผ่านมา เราพบว่าโดยทั่วไปแล้วฟีเจอร์นี้ส่งผลให้มีคำขอทรัพยากรหลัก (เช่น เอกสาร HTML) เพิ่มขึ้นไม่ถึง 2% แต่ถ้าคุณต้องใช้ความระมัดระวัง คุณสามารถใช้ช่องเศษส่วนของคำแนะนำด้านการรับส่งข้อมูลเพื่อควบคุมปริมาณการรับส่งข้อมูลที่พร็อกซีการดึงข้อมูลล่วงหน้าส่วนตัวควรส่งผ่านได้ คุณอาจเริ่มจากเศษส่วนเล็กๆ เช่น 0.3 (ซึ่งก็คือ 30%) แล้วค่อยๆ เพิ่มเป็น 1.0 (ซึ่งก็คือ 100%) ด้วยการเพิ่ม JSON ต่อไปนี้ไปยังไฟล์ /.well-known/traffic-advice ซึ่งต้องแสดงด้วยประเภท application/trafficadvice+json MIME:
[{
"user_agent": "prefetch-proxy",
"fraction": 0.3
}]
ช่อง fraction เป็นแบบลอยที่อยู่ระหว่าง 0.0 (ไม่มีการดึงข้อมูลล่วงหน้าเลย) ถึง 1.0 (คำขอการดึงข้อมูลล่วงหน้า 100% ผ่านไปได้)
นอกจากนี้ คุณยังปิดใช้การตั้งค่านี้โดยสมบูรณ์ได้ด้วยการกำหนดค่าต่อไปนี้
[{
"user_agent": "prefetch-proxy",
"disallow": true
}]
ไฟล์ /.well-known/traffic-advice จะดึงข้อมูลโดยพร็อกซี ไม่ใช่ไคลเอ็นต์ และแคชไว้ที่พร็อกซีตามความหมายของแคช HTTP ปกติ หากต้องการความยืดหยุ่นมากขึ้น เช่น การเข้าชมที่เพิ่มขึ้นอย่างฉับพลัน คุณอาจต้องปฏิเสธคำขอการดึงข้อมูลล่วงหน้า (Sec-Purpose: prefetch;anonymous-client-ip) ชั่วคราวด้วยรหัสสถานะ 503 และตั้งค่าส่วนหัว Cache-Control: no-store ในการตอบกลับ นอกจากนี้ คุณยังเพิ่มส่วนหัว Retry-After เพื่อบอก Chrome ว่าต้องรอนานเท่าใดก่อนที่จะลองส่งคำขอการอ่านล่วงหน้าอีกครั้ง
สำหรับเจ้าของเว็บไซต์ที่มา
หากคุณดำเนินธุรกิจเว็บไซต์ที่มีลิงก์ไปยังเว็บไซต์อื่นๆ จำนวนมาก คุณอาจสนใจใช้ฟีเจอร์พร็อกซีการเรียกข้อมูลล่วงหน้าแบบส่วนตัวเพื่อเร่งความเร็วในการไปยังส่วนต่างๆ ข้ามแหล่งที่มาเหล่านี้ คุณจะต้องเพิ่มกฎการคาดคะเนลงในหน้าเว็บเพื่อให้ Chrome ทราบว่าหน้าเว็บใดที่คุณเชื่อว่าควรทำการเตรียมข้อมูลล่วงหน้าผ่านพร็อกซีการเตรียมข้อมูลล่วงหน้าแบบส่วนตัว ลองดูตัวอย่างง่ายๆ ดังนี้
<script type="speculationrules">
{
"prefetch": [
"source": "list",
"urls": ["https://example.com/index.html"],
"requires": ["anonymous-client-ip-when-cross-origin"]
]
}
</script>
ขั้นตอนถัดไปคือ
การเปิดตัวครั้งนี้เป็นเพียงก้าวแรกเท่านั้น เราหวังว่าจะได้ขยายและปรับปรุงฟีเจอร์นี้โดยอิงตามความสนใจและความคิดเห็นของชุมชน ตัวอย่างเช่น เราต้องการความคิดเห็นเกี่ยวกับวิธีขยายการให้บริการไปยังลิงก์ที่มีคุกกี้และสถานะในเครื่องในลักษณะที่ลดปัญหาของนักพัฒนาแอป หรือวิธีทําให้ฟีเจอร์นี้มีประโยชน์สําหรับเว็บไซต์ที่มาอ้างอิงมากขึ้น