การดึงลิงก์ล่วงหน้าทำงานข้ามโดเมนย่อยได้หรือไม่

ฉันพยายามใช้สิ่งนี้เพื่อรับการปรับปรุงประสิทธิภาพเมื่อคลิกจากหน้า Landing Page อย่างง่ายไปยังแอพพลิเคชั่นหน้าเดียวที่มีน้ำหนักมาก:

<link rel="prefetch" href="https://example.com" as="document" />
<link rel="prefetch" href="https://example.com/app.js" as="script" />
<link rel="prefetch" href="https://example.com/app.css" as="style" />

ดูเหมือนว่าจะไม่มีการเพิ่มประสิทธิภาพที่เห็นได้ชัดเจนเมื่อหน้า Landing Page ของฉันอยู่ในโดเมนย่อย https://subdomain.example.comกล่าวว่า

เมื่อฉันคลิกที่ลิงก์เพื่อเยี่ยมชมhttps://example.comฉันยังคงเห็นความล่าช้าเป็นเวลานานในแท็บเครือข่าย Chrome ที่เป็นapp.jsและapp.cssโหลด:

นี่เป็นแหล่งข้อมูลเดียวกันที่ปิดใช้งานการดึงข้อมูลล่วงหน้า:

ใช้เวลารวมทั้งหมดเท่ากัน

ขอส่วนหัวสำหรับหนึ่งในเนื้อหาที่โหลดด้วยแคชการดึงข้อมูลล่วงหน้า:

ทั่วไป:

Request URL: https://example.com/css/app.bffe365a.css
Request Method: GET
Status Code: 200  (from prefetch cache)
Remote Address: 13.226.219.19:443
Referrer Policy: no-referrer-when-downgrade

การตอบสนอง:

accept-ranges: bytes
cache-control: max-age=31536000
content-encoding: gzip
content-length: 39682
content-type: text/css
date: Mon, 06 Jan 2020 21:42:53 GMT
etag: "d6f5135674904979a2dfa9dab1d2c440"
last-modified: Mon, 06 Jan 2020 20:46:46 GMT
server: AmazonS3
status: 200
via: 1.1 example.cloudfront.net (CloudFront)
x-amz-cf-id: dO3yiCoPErExrE2BLYbUJaVye32FIJXXxMdI4neDGzGX9a6gcCDumg==
x-amz-cf-pop: LAX50-C1
x-amz-id-2: 1O0LmihxpHIywEaMQWX7G3FDAzxtH9tZq1T/jeVLMzifFSJSIIJSS6+175H61kKdAq6iEbwfs2I=
x-amz-request-id: AF35C178092B65D4
x-cache: Hit from cloudfront

คำขอ:

DNT: 1
Referer: https://example.com/auth/join
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36

คำถามของฉันคือ: หาก Chrome ระบุว่าใช้แคชการดึงข้อมูลล่วงหน้าแล้วเหตุใดจึงมีเวลาดาวน์โหลดเนื้อหาที่สำคัญ

ดูเหมือนว่า Chrome มีแคชหลายประเภท: แคชดึงข้อมูลล่วงหน้าแคชดิสก์และหน่วยความจำแคช แคชดิสก์และหน่วยความจำแคชเร็วมาก (โหลด 5ms และ 0ms) อย่างไรก็ตามแคช prefetch นั้นไม่มีประโยชน์เลยในบางครั้งการดาวน์โหลด 300 มิลลิวินาที ฉันขอคำอธิบายทางเทคนิคว่าทำไมสิ่งนี้จึงเกิดขึ้นได้ไหม เป็นข้อบกพร่องของ Chrome ใช่ไหม ฉันใช้ Chrome 79.0.3945.117

การเพิ่ม<link rel=prefetch>ในหน้าเว็บจะบอกให้เบราว์เซอร์ดาวน์โหลดทั้งหน้าหรือบางส่วนของทรัพยากร (เช่นสคริปต์หรือไฟล์ CSS) ที่ผู้ใช้อาจต้องการในอนาคต สิ่งนี้สามารถปรับปรุงตัวชี้วัดเช่น First contentful Paint และ Time to Interactive และสามารถทำให้การนำทางที่ตามมาปรากฏขึ้นเพื่อโหลดได้ทันที

คำแนะนำการดึงข้อมูลล่วงหน้าใช้งานไบต์พิเศษสำหรับทรัพยากรที่ไม่จำเป็นต้องใช้ในทันทีดังนั้นเทคนิคนี้จำเป็นต้องใช้อย่างรอบคอบ ดึงทรัพยากรล่วงหน้าเมื่อคุณมั่นใจว่าผู้ใช้จะต้องการ พิจารณาที่จะไม่ดึงข้อมูลล่วงหน้าเมื่อผู้ใช้เชื่อมต่อช้า คุณสามารถตรวจจับได้ด้วย Network Information API

มีหลายวิธีในการพิจารณาว่าลิงก์ใดที่จะดึงข้อมูลล่วงหน้า สิ่งที่ง่ายที่สุดคือการดึงลิงค์แรกหรือลิงค์สองสามอันแรกในหน้าปัจจุบัน นอกจากนี้ยังมีห้องสมุดที่ใช้วิธีการที่ซับซ้อนยิ่งขึ้นอธิบายในภายหลังในhttps://web.dev/link-prefetch/บทความนี้

ฉันเดาได้เท่านั้น คุณอาจพบคำตอบที่มั่นใจได้เท่านั้นผ่านการทดสอบ มีตัวแปรมากเกินไปสำหรับการบัญชี แต่นี่คือแนวคิดบางส่วน:

1. prefetchเป็นคำใบ้สำหรับเบราว์เซอร์ เบราว์เซอร์สามารถเพิกเฉยได้ด้วยเหตุผลบางประการ ยิ่งไปกว่านั้นมันมีลำดับความสำคัญต่ำสุด
2. เช่นในกรณีโปรดตรวจสอบการตั้งค่าเบราว์เซอร์ของคุณ:
   Menu/Settings/Advanced/Privacy and security/Preload pages for faster browsing and searching
   (หรืออะไรทำนองนั้น)
3. หากมีโอกาสที่คุณใช้อินเทอร์เน็ตบนมือถือก็อาจเป็นปัญหาได้
   https://www.technipages.com/google-chrome-prefetch
4. วิธีที่รวดเร็วคุณจะนำทางจากหน้า Landing Page ของคุณไปexample.com?
5. ตรวจสอบบันทึกเซิร์ฟเวอร์ของคุณเพื่อดูว่าเคยได้รับprefetchคำขอหรือไม่

6. ตรวจสอบว่าเซิร์ฟเวอร์ของคุณตั้งค่าส่วนหัวแปลก ๆ ให้ตอบprefetchคำขอหรือไม่ Cache-Control: no-cacheเช่น ใช่ฉันเห็นว่าคุณมีcache-control: max-age=31536000ดังนั้นมันจะแปลกจริง ๆ ถ้าเซิร์ฟเวอร์จะส่งส่วนหัวที่แตกต่างกันสำหรับคำขอเดียวกัน (ดี ... เกือบเหมือนกันอย่างน้อยคุณไม่ได้พูดว่าพวกเขาเป็นและอย่างน้อยก็สามารถ เป็นส่วนหัวที่แสดงว่าเป็นprefetchคำขอ) แต่มีสิ่งแปลก ๆ เกิดขึ้น

7. คุณน่าจะลองเพิ่มcrossoriginคุณสมบัติ เช่น

   <link rel="prefetch" href="https://example.com/app.css" as="style" crossorigin />

   ที่นี่https://www.w3.org/TR/resource-hints/คุณสามารถค้นหาตัวอย่างนี้ได้

   <link rel="preconnect" href="//example.com">
   <link rel="preconnect" href="//cdn.example.com" crossorigin>
   

   ค่อนข้างจะเกี่ยวข้องกับกรณีของคุณ แต่น่าเสียดายที่ไม่มีคำอธิบาย

8. ในคำถามต้นฉบับของคุณที่คุณพูดถึงพนักงานบริการ ... หากพวกเขาดาวน์โหลดบางสิ่งหรือแม้แต่ตัวคุณเองดาวน์โหลดอะไรบางอย่างมันอาจเป็นปัญหาได้ เนื่องจากลำดับความสำคัญต่ำสุดของprefetch

   https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ#What_if_I.27m_downloading_something_in_the_background.3F_Will_link_prefetching_compete_for_bandwidth.3F

   หากคุณกำลังดาวน์โหลดบางสิ่งโดยใช้ Mozilla การดึงข้อมูลลิงก์ล่วงหน้าจะล่าช้าจนกว่าการดาวน์โหลดพื้นหลังจะเสร็จสมบูรณ์

   ฉันคิดว่าเหมือนกันสำหรับ Chrome

9. คุณพยายามย้ายหน้าที่เชื่อมโยงไปถึงโดเมนรูทหรือไม่? ถ้าใช่และprefetchทำงานได้ตามที่คาดไว้ใช่ - โดเมนย่อยเป็นสาเหตุของปัญหา และข้อความ GUI Status Code: 200 (from prefetch cache)อาจเป็นเพียงความผิดพลาด เพราะเมื่อเร็ว ๆ นี้มีบางสิ่งเริ่มเปลี่ยนแปลงprefetchพฤติกรรมใน Chrome และฉันยังไม่รู้ถ้าสิ่งตัดสิน โดยทั่วไปใช่มีความน่าจะเป็นบางอย่างที่คุณสามารถprefetchทำได้จากแหล่งกำเนิดเดียวกันเท่านั้น

   https://docs.google.com/document/d/1bKGDIePAuF6YXmmrwM33LeLvtuCsla3vTspsxsNp-f8/edit

คุณควรเพิ่มรหัสด้านล่างในกรณีที่คุณเป็นโดเมนย่อยและคุณต้องการทรัพยากรจากโดเมน

<link rel="preconnect" href="https://example.com">