ดูวิธีที่เซิร์ฟเวอร์ของคุณสามารถส่งคำแนะนำให้เบราว์เซอร์เกี่ยวกับทรัพยากรย่อยที่สำคัญ
เคล็ดลับในช่วงแรกคืออะไร
เว็บไซต์มีความซับซ้อนมากขึ้นเรื่อยๆ ดังนั้น จึงไม่ผิดปกติที่เซิร์ฟเวอร์จะต้องทำงานที่ไม่สำคัญ (เช่น การเข้าถึงฐานข้อมูล หรือ CDN ที่เข้าถึงเซิร์ฟเวอร์ต้นทาง) เพื่อสร้าง HTML สำหรับหน้าที่ร้องขอ น่าเสียดายที่ "เวลาคิดของเซิร์ฟเวอร์" นี้ทำให้ต้องใช้เวลาในการตอบสนองเพิ่มขึ้นก่อนที่เบราว์เซอร์จะสามารถเริ่มแสดงผลหน้าเว็บได้ อันที่จริง การเชื่อมต่อจะไม่มีการใช้งานตราบเท่าที่เซิร์ฟเวอร์ในการเตรียมการตอบสนอง
Early Hints คือรหัสสถานะ HTTP (103 Early Hints
) ที่ใช้เพื่อส่งการตอบกลับ HTTP เบื้องต้นก่อนการตอบกลับสุดท้าย วิธีนี้ช่วยให้เซิร์ฟเวอร์ส่งคำแนะนำถึงเบราว์เซอร์เกี่ยวกับทรัพยากรย่อยที่สำคัญ (เช่น สไตล์ชีตสำหรับหน้าเว็บ, JavaScript ที่สำคัญ) หรือต้นทางที่หน้าเว็บมีแนวโน้มที่จะใช้ ขณะที่เซิร์ฟเวอร์กำลังยุ่งอยู่กับการสร้างทรัพยากรหลัก เบราว์เซอร์สามารถใช้คําแนะนําเหล่านี้เพื่อเตรียมความพร้อมในการเชื่อมต่อ และขอทรัพยากรย่อยในระหว่างที่รอทรัพยากรหลักได้ กล่าวอีกนัยหนึ่งก็คือ เคล็ดลับตั้งแต่ต้นช่วยให้เบราว์เซอร์ใช้ประโยชน์จาก "เวลาคิดของเซิร์ฟเวอร์" เหล่านั้นโดยทำงานล่วงหน้าจำนวนหนึ่ง ซึ่งทำให้การโหลดหน้าเว็บเร็วขึ้น
ในบางกรณี การปรับปรุงประสิทธิภาพเป็น Largest Contentful Paint อาจเพิ่มขึ้นจากหลายร้อยมิลลิวินาที ตามที่ Shopify และ โดย Cloudflare พิจารณา และเพิ่มเร็วขึ้นอีก 1 ดังที่เห็นในการเปรียบเทียบก่อน/หลังดังนี้
การใช้คำแนะนำในช่วงแรก
ก่อนที่จะเจาะลึกลงในหัวข้อ โปรดทราบว่าคำแนะนำในช่วงแรกไม่มีประโยชน์หากเซิร์ฟเวอร์ของคุณสามารถส่ง 200 รายการ (หรือการตอบกลับสุดท้ายอื่นๆ) ได้ทันที พิจารณาใช้ link rel=preload
หรือ link rel=preconnect
แบบปกติในการตอบกลับหลัก (ส่วนหัว rel HTTP ของลิงก์) หรือในการตอบสนองหลัก (องค์ประกอบ <link>
) ในสถานการณ์เช่นนี้ สำหรับกรณีที่เซิร์ฟเวอร์ของคุณต้องการเวลาเล็กน้อยเพื่อสร้างการตอบสนองหลัก อ่านต่อไป
ขั้นตอนแรกในการใช้ประโยชน์จากคำแนะนำในช่วงแรกประกอบด้วยการระบุหน้า Landing Page ยอดนิยม ซึ่งก็คือหน้าเว็บที่ผู้ใช้มักจะเริ่มเมื่อเข้าชมเว็บไซต์ของคุณ ซึ่งอาจเป็นหน้าแรกหรือหน้ารายการผลิตภัณฑ์ยอดนิยมหากคุณมีผู้ใช้จำนวนมากที่มาจากเว็บไซต์อื่น สาเหตุที่จุดแรกเข้าเหล่านี้มีความสำคัญมากกว่าหน้าอื่นๆ เนื่องจากประโยชน์ของเคล็ดลับในช่วงเริ่มต้นลดลงเมื่อผู้ใช้ไปยังส่วนต่างๆ ในเว็บไซต์ (กล่าวคือ เบราว์เซอร์มีแนวโน้มมากขึ้นที่จะมีทรัพยากรย่อยทั้งหมดที่ต้องการในการนำทางลำดับที่ 2 หรือ 3 ที่ตามมา) นอกจากนี้ การสร้างความประทับใจแรกที่ยอดเยี่ยมก็เป็นความคิดที่ดีเสมอ
เมื่อคุณมีรายการหน้า Landing Page ที่จัดลำดับความสำคัญนี้แล้ว ขั้นตอนต่อไปประกอบด้วยการระบุต้นทางหรือทรัพยากรย่อยที่เป็นตัวเลือกที่ดีสำหรับเชื่อมต่อล่วงหน้าหรือโหลดล่วงหน้า ซึ่งเป็นการประมาณค่าแรก โดยปกติแล้วจะเป็นต้นทางและทรัพยากรย่อยที่ส่งผลต่อเมตริกผู้ใช้ที่สำคัญมากที่สุด เช่น Largest Contentful Paint หรือ First Contentful Paint มองหาทรัพยากรย่อยที่บล็อกการแสดงผล เช่น JavaScript แบบซิงโครนัส สไตล์ชีต หรือแม้แต่แบบอักษรของเว็บ ในทำนองเดียวกัน ให้มองหาต้นทางที่โฮสต์ทรัพยากรย่อยที่ส่งผลต่อเมตริกผู้ใช้ที่สำคัญอย่างมาก หมายเหตุ: หากทรัพยากรหลักใช้ <link rel=preconnect>
หรือ <link rel=preload>
อยู่แล้ว คุณอาจพิจารณาต้นทางหรือทรัพยากรเหล่านี้ท่ามกลางตัวเลือกสําหรับคำแนะนำล่วงหน้า ดูรายละเอียดเพิ่มเติมได้ในบทความนี้
ขั้นตอนที่ 2 ประกอบด้วยการลดความเสี่ยงในการใช้คำแนะนำเบื้องต้นกับทรัพยากรหรือต้นทางที่อาจล้าสมัยหรือไม่มีการใช้งานโดยทรัพยากรหลักอีกต่อไป ตัวอย่างเช่น ทรัพยากรที่มีการอัปเดตบ่อยและมีเวอร์ชัน (เช่น example.com/css/main.fa231e9c.css
) อาจไม่ใช่ตัวเลือกที่ดีที่สุด โปรดทราบว่าข้อกังวลนี้ไม่ได้ขึ้นอยู่กับคำแนะนำในช่วงแรกเท่านั้น แต่จะมีผลกับลิงก์ rel=preload
หรือ rel=preconnect
ทุกที่ที่อาจมี นี่เป็นรายละเอียดที่ตรงกับการทำงานอัตโนมัติหรือการกำหนดเทมเพลตได้ดีที่สุด (เช่น กระบวนการที่ดำเนินการด้วยตนเองมักจะทำให้ได้แฮชหรือ URL เวอร์ชันที่ไม่ตรงกันระหว่าง link rel=preload
กับแท็ก HTML จริงเมื่อใช้แหล่งข้อมูล)
เพื่อเป็นตัวอย่าง โปรดพิจารณาขั้นตอนดังต่อไปนี้
GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
เซิร์ฟเวอร์คาดการณ์ว่าจะต้องใช้ main.abcd100.css
และแนะนำให้โหลดล่วงหน้าผ่านคำแนะนำในช่วงแรก
103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]
หลังจากนั้นไม่นาน หน้าเว็บ รวมถึง CSS ที่ลิงก์จะแสดงขึ้น ขออภัย ทรัพยากร CSS นี้มีการอัปเดตบ่อยครั้ง และทรัพยากรหลักนั้นมีอยู่แล้ว 5 เวอร์ชัน (abcd105
) ของทรัพยากร CSS ที่คาดการณ์ไว้ (abcd100
)
200 OK
[...]
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.abcd105.css">
โดยทั่วไป ให้มุ่งหาทรัพยากรและต้นทางที่ค่อนข้างเสถียร และส่วนใหญ่ไม่ขึ้นอยู่กับผลลัพธ์ของทรัพยากรหลัก หากจำเป็น คุณอาจพิจารณาแยกทรัพยากรหลักออกเป็น 2 ส่วน ได้แก่ ส่วนที่เสถียรซึ่งออกแบบมาให้ใช้กับ Early Hints และส่วนที่มีการเปลี่ยนแปลงแบบไดนามิกมากขึ้นสำหรับการดึงข้อมูลหลังจากที่เบราว์เซอร์ได้รับทรัพยากรหลักแล้ว
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="/experimental.3eab3290.css">
สุดท้าย ในฝั่งเซิร์ฟเวอร์ ให้มองหาคำขอทรัพยากรหลักที่ส่งโดยเบราว์เซอร์ที่ทราบว่ารองรับ Early Hints และตอบกลับทันทีด้วยคำแนะนำเบื้องต้น 103 รายการ ในการตอบกลับ 103 ให้ใส่คําแนะนําการเชื่อมต่อล่วงหน้าที่เกี่ยวข้องและการโหลดล่วงหน้าที่เกี่ยวข้อง เมื่อทรัพยากรหลักพร้อมแล้ว ให้ใช้การตอบกลับตามปกติ (เช่น 200 OK หากสำเร็จ) สำหรับความเข้ากันได้แบบย้อนหลัง สิ่งที่ควรทำคือใส่ส่วนหัว HTTP ของ Link
ในการตอบสนองสุดท้ายด้วย โดยอาจเพิ่มแหล่งข้อมูลสำคัญที่เห็นได้ชัดว่าเป็นส่วนหนึ่งของการสร้างทรัพยากรหลัก (เช่น ส่วนแบบไดนามิกของทรัพยากรหลักหากคุณทำตามคำแนะนำ "แยกเป็น 2") ซึ่งจะมีลักษณะดังนี้
GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
103 Early Hints
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
หลังจากนั้นสักครู่
200 OK
Content-Length: 7531
Content-Type: text/html; charset=UTF-8
Content-encoding: br
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Link: </experimental.3eab3290.css>; rel=preload; as=style
<HTML>
<head>
<title>Example</title>
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="/experimental.3eab3290.css">
<script src="/common.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
การสนับสนุนเบราว์เซอร์
แม้ว่าเบราว์เซอร์หลักทั้งหมดจะรองรับคำแนะนำ 103 อย่าง แต่คำสั่งที่สามารถส่งให้กับคำแนะนำในช่วงแรกจะแตกต่างไปในแต่ละเบราว์เซอร์ ดังนี้
เชื่อมต่อการสนับสนุนล่วงหน้า:
การสนับสนุนเบราว์เซอร์
- 103
- 103
- 120
- 17
โหลดการสนับสนุนล่วงหน้า:
การสนับสนุนเบราว์เซอร์
- 103
- 103
- x
การสนับสนุนเซิร์ฟเวอร์
ต่อไปนี้เป็นข้อมูลสรุปคร่าวๆ เกี่ยวกับระดับการสนับสนุนสำหรับเคล็ดลับล่วงหน้าสำหรับซอฟต์แวร์เซิร์ฟเวอร์ HTTP ของ OSS ที่ได้รับความนิยม:
- Apache: รองรับผ่าน mod_http2
- H2O: รองรับ
- NGINX: โมดูลทดสอบ
- โหนด: รองรับตั้งแต่ 18.11.0 สำหรับ http และ http2
เปิดใช้เคล็ดลับเบื้องต้นด้วยวิธีง่ายๆ
หากคุณใช้ CDN หรือแพลตฟอร์มแบบใดแบบหนึ่งต่อไปนี้ คุณอาจไม่จําเป็นต้องติดตั้งใช้งานเคล็ดลับในช่วงแรกด้วยตนเอง โปรดดูเอกสารออนไลน์ของผู้ให้บริการโซลูชันเพื่อดูว่ารองรับคำแนะนำในช่วงแรกหรือไม่ หรือดูรายการโดยสังเขปที่นี่
การหลีกเลี่ยงปัญหาสำหรับลูกค้าที่ไม่รองรับคำแนะนำในช่วงแรก
การตอบกลับ HTTP ที่ให้ข้อมูลในช่วง 100 ช่วงเป็นส่วนหนึ่งของมาตรฐาน HTTP แต่ไคลเอ็นต์หรือบ็อตรุ่นเก่าๆ อาจพบปัญหาเหล่านี้เนื่องจากก่อนที่จะมีการเปิดตัว 103 เคล็ดลับช่วงแรกๆ นั้น แทบจะไม่ได้ใช้สำหรับการท่องเว็บทั่วไป
การส่งเพียงคำแนะนำในช่วงแรก 103 รายการเพื่อตอบสนองต่อไคลเอ็นต์ที่ส่งส่วนหัวของคำขอ HTTP sec-fetch-mode: navigate
ควรตรวจสอบให้แน่ใจว่ามีการส่งคำแนะนำดังกล่าวไปยังไคลเอ็นต์ที่ใหม่กว่าที่เข้าใจว่าจะต้องรอการตอบกลับที่ตามมาเท่านั้น นอกจากนี้ เนื่องจากเคล็ดลับล่วงหน้ารองรับเฉพาะคำขอการนำทางเท่านั้น (ดูข้อจำกัดปัจจุบัน) ฟีเจอร์นี้จึงมีประโยชน์เพิ่มเติมคือเพื่อหลีกเลี่ยงการส่งคำเหล่านี้ในคำขออื่นๆ โดยไม่จำเป็น
นอกจากนี้ ขอแนะนำให้ส่งคำแนะนำในช่วงแรกผ่านการเชื่อมต่อ HTTP/2 หรือ HTTP/3 เท่านั้น
รูปแบบขั้นสูง
ถ้าคุณได้ใช้คำแนะนำในช่วงแรกกับหน้า Landing Page ที่สำคัญอย่างสมบูรณ์แล้ว และพบว่าคุณกำลังมองหาโอกาสเพิ่มเติม คุณอาจสนใจรูปแบบขั้นสูงต่อไปนี้
สำหรับผู้เข้าชมในคำขอหน้าที่ n ซึ่งเป็นส่วนหนึ่งของเส้นทางผู้ใช้ทั่วไป คุณอาจต้องปรับการตอบสนองคำแนะนำในช่วงแรกสำหรับเนื้อหาที่ต่ำกว่าและอยู่ลึกลงไปในหน้า หรืออีกนัยหนึ่งคือการใช้คำแนะนำในช่วงแรกสำหรับทรัพยากรที่มีความสำคัญต่ำกว่า ซึ่งอาจฟังดูขัดกับความรู้สึกหากเราแนะนำให้โฟกัสที่ทรัพยากรย่อยหรือต้นทางที่มีลำดับความสำคัญสูงที่บล็อกการแสดงผล อย่างไรก็ตาม เมื่อผู้เข้าชมสำรวจไปสักพักแล้ว เป็นไปได้มากว่าเบราว์เซอร์ของพวกเขามีทรัพยากรที่สำคัญทั้งหมดแล้ว จากนั้น คุณควรเปลี่ยนความสนใจของคุณไปยังทรัพยากรที่มีลำดับความสำคัญต่ำกว่าแทน เช่น อาจหมายถึงการใช้คำแนะนำในช่วงแรกเพื่อโหลดรูปภาพผลิตภัณฑ์หรือ JS/CSS เพิ่มเติมที่จำเป็นสำหรับการโต้ตอบของผู้ใช้ที่พบไม่บ่อยเท่านั้น
ข้อจำกัดปัจจุบัน
ข้อจำกัดของคำแนะนำในช่วงแรกที่นำไปใช้ใน Chrome มีดังนี้
- ใช้ได้เฉพาะกับคำขอการนำทาง (ซึ่งเป็นทรัพยากรหลักสำหรับเอกสารระดับบนสุด)
- รองรับ
preconnect
และpreload
เท่านั้น (ไม่รองรับprefetch
) - Early Hint ตามด้วยการเปลี่ยนเส้นทางแบบข้ามต้นทางในการตอบสนองขั้นสุดท้ายจะส่งผลให้ Chrome ทิ้งทรัพยากรและการเชื่อมต่อที่ได้รับจากคำแนะนำในช่วงแรก
เบราว์เซอร์อื่นๆ ก็มีข้อจำกัดที่คล้ายกัน และจะจำกัดคำแนะนำเบื้องต้น 103 รายการไว้เฉพาะสำหรับ preconnect
เท่านั้น
ขั้นตอนถัดไปคือ
เราอาจเสริมการใช้งานคำแนะนำในช่วงแรกด้วยความสามารถต่อไปนี้ ทั้งนี้ขึ้นอยู่กับความสนใจจากชุมชน
- ส่งคำแนะนำล่วงหน้าในคำขอทรัพยากรย่อยแล้ว
- มีการส่งคำแนะนำล่วงหน้าในคำขอทรัพยากรหลักของ iframe
- รองรับการดึงข้อมูลล่วงหน้าในคำแนะนำในช่วงแรก
เรายินดีรับฟังข้อมูลจากคุณเกี่ยวกับแง่มุมที่ควรให้ความสำคัญและวิธีปรับปรุงคำแนะนำในช่วงแรกเพิ่มเติม
ความสัมพันธ์กับ H2/Push
หากคุณคุ้นเคยกับฟีเจอร์ HTTP2/Push ที่เลิกใช้งานแล้ว คุณอาจสงสัยว่าเคล็ดลับในช่วงแรกแตกต่างไปอย่างไร แม้ว่า Early Hints จะต้องใช้การส่งข้อมูลไป-กลับเพื่อให้เบราว์เซอร์เริ่มดึงทรัพยากรย่อยที่สำคัญ แต่ด้วย HTTP2/Push เซิร์ฟเวอร์จะเริ่มพุชทรัพยากรย่อยไปพร้อมกับการตอบสนองได้ แม้จะฟังดูน่าทึ่ง แต่ก็ส่งผลให้เกิดข้อเสียด้านโครงสร้างที่สำคัญ ด้วย HTTP2/Push การหลีกเลี่ยงการพุชทรัพยากรย่อยที่เบราว์เซอร์มีอยู่แล้วก็ทำได้ยากมาก ผล "การผลักมากเกินไป" นี้ส่งผลให้การใช้งานแบนด์วิดท์ของเครือข่ายมีประสิทธิภาพลดลง ทำให้ได้รับประโยชน์ด้านประสิทธิภาพอย่างมาก โดยรวมแล้ว ข้อมูลของ Chrome แสดงให้เห็นว่า HTTP2/Push เป็นผลลบโดยรวมต่อประสิทธิภาพทั่วทั้งเว็บ
ส่วน Early Hints นั้นมีประสิทธิภาพมากกว่าในทางปฏิบัติ เพราะรวมความสามารถในการส่งการตอบกลับเบื้องต้นเข้ากับคำแนะนำที่ทำให้เบราว์เซอร์ทำหน้าที่ดึงข้อมูลหรือเชื่อมต่อกับสิ่งที่ต้องการจริงๆ แม้ว่า Early Hints จะไม่ครอบคลุม Use Case ทั้งหมดที่ HTTP2/Push พูดถึงในเชิงทฤษฎีได้ แต่เราเชื่อว่า Early Hints เป็นโซลูชันที่ช่วยให้ใช้งานการนำทางได้รวดเร็วขึ้น
ภาพขนาดย่อโดย Pierre Bamin