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