โหลดหน้าเว็บได้เร็วขึ้นโดยใช้เวลาคิดของเซิร์ฟเวอร์ด้วยคำแนะนำในช่วงแรก

ดูวิธีที่เซิร์ฟเวอร์ส่งคำแนะนำเกี่ยวกับทรัพยากรย่อยที่สำคัญไปยังเบราว์เซอร์ได้

Kenji Baheux

Barry Pollard

เผยแพร่เมื่อ: 23 มิถุนายน 2022, อัปเดตล่าสุด: 10 กรกฎาคม 2026

คำแนะนำเบื้องต้นคืออะไร

เว็บไซต์มีความซับซ้อนมากขึ้นเมื่อเวลาผ่านไป ดังนั้นจึงไม่ใช่เรื่องแปลกที่เซิร์ฟเวอร์จะต้องทำงานที่ซับซ้อน (เช่น การเข้าถึงฐานข้อมูล หรือ CDN เข้าถึงเซิร์ฟเวอร์ต้นทาง) เพื่อสร้าง HTML สำหรับหน้าที่ขอ น่าเสียดายที่ "เวลาที่เซิร์ฟเวอร์ใช้ประมวลผล" นี้ทำให้เกิดความหน่วงแฝงเพิ่มเติมก่อนที่เบราว์เซอร์จะเริ่มแสดงหน้าเว็บได้ กล่าวคือ การเชื่อมต่อจะหยุดทำงานอย่างมีประสิทธิภาพตราบใดที่เซิร์ฟเวอร์ใช้เวลาเตรียมการตอบกลับ

คำแนะนำเบื้องต้นคือรหัสสถานะ HTTP (103 Early Hints) ที่ใช้ส่งการตอบกลับ HTTP เบื้องต้นก่อนการตอบกลับสุดท้าย ซึ่งช่วยให้เซิร์ฟเวอร์ส่งคำแนะนำเกี่ยวกับทรัพยากรย่อยที่สำคัญ (เช่น ชีตสไตล์สำหรับหน้าเว็บ, JavaScript ที่สำคัญ) หรือต้นทางที่หน้าเว็บน่าจะใช้ไปยังเบราว์เซอร์ได้ ขณะที่เซิร์ฟเวอร์กำลังสร้างทรัพยากรหลัก เบราว์เซอร์สามารถใช้คำแนะนำเหล่านั้นเพื่อเตรียมการเชื่อมต่อและขอทรัพยากรย่อยขณะรอทรัพยากรหลัก กล่าวอีกนัยหนึ่งคือ คำแนะนำเบื้องต้นช่วยให้เบราว์เซอร์ใช้ประโยชน์จาก "เวลาที่เซิร์ฟเวอร์ใช้ประมวลผล" ดังกล่าวได้โดยการทำงานบางอย่างล่วงหน้า ซึ่งจะช่วยเร่งการโหลดหน้าเว็บ

ในบางกรณี การปรับปรุงประสิทธิภาพของ Largest Contentful Paint อาจเพิ่มขึ้นจากหลายร้อยมิลลิวินาที ดังที่ Shopify และ by Cloudflare สังเกตได้ และเร็วขึ้นสูงสุด 1 วินาที ดังที่เห็นในการเปรียบเทียบก่อนและหลังนี้

วิธีใช้คำแนะนำเบื้องต้น

ขั้นตอนแรกในการใช้ประโยชน์จากคำแนะนำเบื้องต้นคือการระบุหน้า Landing Page ยอดนิยม ซึ่งก็คือหน้าที่ผู้ใช้มักจะเริ่มต้นเมื่อเข้าชมเว็บไซต์ของคุณ ซึ่งอาจเป็นหน้าแรกหรือหน้าข้อมูลสินค้าที่แสดงยอดนิยมหากมีผู้ใช้จำนวนมากมาจากเว็บไซต์อื่นๆ เหตุผลที่จุดเริ่มต้นเหล่านี้มีความสำคัญมากกว่าหน้าอื่นๆ ก็คือ ประโยชน์ของคำแนะนำเบื้องต้นจะลดลงเมื่อผู้ใช้ไปยังส่วนต่างๆ ของเว็บไซต์ (กล่าวคือ เบราว์เซอร์มีแนวโน้มที่จะมีทรัพยากรย่อยทั้งหมดที่ต้องการในการไปยังส่วนต่างๆ ครั้งที่ 2 หรือ 3) นอกจากนี้ การสร้างความประทับใจแรกที่ดีก็เป็นเรื่องสำคัญเสมอ

เมื่อได้รายการหน้า Landing Page ที่จัดลำดับความสำคัญแล้ว ขั้นตอนถัดไปคือการระบุต้นทางหรือทรัพยากรย่อยที่ควรใช้คำแนะนำ preconnect หรือ preload โดยปกติแล้ว ต้นทางและทรัพยากรย่อยเหล่านั้นจะเป็นต้นทางและทรัพยากรย่อยที่มีส่วนช่วยมากที่สุดในเมตริกผู้ใช้หลัก เช่น Largest Contentful Paint หรือ First Contentful Paint กล่าวคือ ให้มองหาทรัพยากรย่อยที่บล็อกการแสดงผล เช่น JavaScript แบบซิงโครนัส, ชีตสไตล์ หรือแม้แต่เว็บฟอนต์ เช่นเดียวกัน ให้มองหาต้นทางที่โฮสต์ทรัพยากรย่อยที่มีส่วนช่วยอย่างมากในเมตริกผู้ใช้หลัก

โปรดทราบด้วยว่าหากทรัพยากรหลักใช้ preconnect หรือ preload อยู่แล้ว คุณอาจพิจารณาต้นทางหรือทรัพยากรเหล่านี้ในกลุ่มทรัพยากรที่ควรใช้คำแนะนำเบื้องต้น ดูรายละเอียดเพิ่มเติมได้ที่วิธีเพิ่มประสิทธิภาพ LCP อย่างไรก็ตาม การคัดลอกคำสั่ง preconnect และ preload จาก HTML ไปยังคำแนะนำเบื้องต้น อาจไม่ใช่ตัวเลือกที่ดีที่สุด

เมื่อใช้คำสั่งเหล่านี้ใน HTML โดยปกติแล้วคุณจะต้องการ preconnect หรือ preload ทรัพยากรที่ เครื่องสแกนการโหลดล่วงหน้า ไม่พบใน HTML เช่น ฟอนต์หรือรูปภาพพื้นหลังที่ระบบจะพบในภายหลัง สำหรับคำแนะนำเบื้องต้น คุณจะไม่มี HTML ดังนั้นคุณอาจต้องการ preconnect ไปยังโดเมนที่สำคัญหรือ preload ทรัพยากรที่สำคัญที่ระบบอาจพบได้เร็วใน HTML เช่น การโหลดล่วงหน้า main.css หรือ app.js นอกจากนี้ ไม่ใช่ทุกเบราว์เซอร์ที่รองรับ preload สำหรับคำแนะนำเบื้องต้น โปรดดู การสนับสนุนเบราว์เซอร์

ขั้นตอนที่ 2 คือการลดความเสี่ยงในการใช้คำแนะนำเบื้องต้นกับทรัพยากรหรือต้นทางที่อาจล้าสมัยหรือไม่ถูกใช้โดยทรัพยากรหลักอีกต่อไป เช่น ทรัพยากรที่อัปเดตและกำหนดเวอร์ชันบ่อยๆ (เช่น example.com/css/main.fa231e9c.css) อาจไม่ใช่ตัวเลือกที่ดีที่สุด โปรดทราบว่าข้อกังวลนี้ไม่ได้เจาะจงเฉพาะคำแนะนำเบื้องต้น แต่ใช้ได้กับ preload หรือ preconnect ทุกรายการ รายละเอียดประเภทนี้ควรจัดการด้วยระบบอัตโนมัติหรือการใช้เทมเพลต (เช่น กระบวนการด้วยตนเองมีแนวโน้มที่จะทำให้เกิดแฮชหรือ URL เวอร์ชันที่ไม่ตรงกันระหว่าง 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 นี้ได้รับการอัปเดตบ่อยๆ และทรัพยากรหลักมีเวอร์ชันที่ใหม่กว่า (abcd105) ทรัพยากร CSS ที่คาดการณ์ไว้ (abcd100) ถึง 5 เวอร์ชัน

200 OK
[...]
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.abcd105.css">

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

<html>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">

สุดท้าย ในฝั่งเซิร์ฟเวอร์ ให้มองหาคำขอทรัพยากรหลักที่ส่งโดยเบราว์เซอร์ที่ทราบว่ารองรับคำแนะนำเบื้องต้น และตอบกลับทันทีด้วย 103 Early Hints ในการตอบกลับ 103 ให้ใส่คำแนะนำ preconnect และ preload ที่เกี่ยวข้อง เมื่อทรัพยากรหลักพร้อมแล้ว ให้ตอบกลับตามปกติ (เช่น 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 Early Hints แต่คำสั่งที่ส่งในคำแนะนำเบื้องต้นจะแตกต่างกันไปตามเบราว์เซอร์

การรองรับ preconnect:

การรองรับ preload:

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ยังรองรับ 103 Early Hints และส่วนหัว Link จะปรากฏในทรัพยากรของเอกสาร

หมายเหตุ: หากต้องการใช้ทรัพยากรคำแนะนำเบื้องต้น คุณต้องไม่เลือก Disable cache ในเครื่องมือสำหรับนักพัฒนาเว็บ เนื่องจากคำแนะนำเบื้องต้นใช้แคชของเบราว์เซอร์ สำหรับทรัพยากรที่โหลดล่วงหน้า Initiator จะแสดงเป็น Early-hints และ Size เป็น (Disk cache)

นอกจากนี้ยังต้องมีใบรับรองที่เชื่อถือได้สำหรับการทดสอบ HTTPS

Firefox ไม่มีการรองรับ 103 Early Hints อย่างชัดเจนในฐานะตัวเริ่มต้นในเครื่องมือสำหรับนักพัฒนาเว็บ แต่ทรัพยากรที่โหลดโดยใช้คำแนะนำเบื้องต้นจะแสดงเป็น cached ในคอลัมน์ Transferred และเมื่อคลิกแล้วจะมีส่วนหัวของคำขอ HTTP X-Moz: early hint

การสนับสนุนเซิร์ฟเวอร์

ต่อไปนี้เป็นข้อมูลสรุปโดยย่อเกี่ยวกับระดับการรองรับคำแนะนำเบื้องต้นในซอฟต์แวร์เซิร์ฟเวอร์ HTTP แบบโอเพนซอร์สยอดนิยม

• Apache: รองรับ โดยใช้ mod_http2
• H2O: รองรับ.
• NGINX: รองรับ.
• Node: รองรับ http และ http2

เปิดใช้คำแนะนำเบื้องต้นด้วยวิธีที่ง่ายขึ้น

หากคุณใช้ CDN หรือแพลตฟอร์มต่อไปนี้ คุณอาจไม่จำเป็นต้องใช้คำแนะนำเบื้องต้นด้วยตนเอง โปรดดูเอกสารออนไลน์ของผู้ให้บริการโซลูชันเพื่อดูว่าโซลูชันนั้นรองรับคำแนะนำเบื้องต้นหรือไม่ หรือดูรายการที่ไม่ครอบคลุมทั้งหมดที่นี่

• คำแนะนำเบื้องต้นที่ Cloudflare
• คำแนะนำเบื้องต้นที่ Fastly
• คำแนะนำเบื้องต้นที่ Akamai

วิธีหลีกเลี่ยงปัญหาสำหรับไคลเอ็นต์ที่ไม่รองรับคำแนะนำเบื้องต้น

การตอบกลับ HTTP ที่ให้ข้อมูลในช่วง 100 เป็นส่วนหนึ่งของมาตรฐาน HTTP แต่ไคลเอ็นต์หรือบ็อตบางตัวที่เก่ากว่าอาจมีปัญหาในการจัดการการตอบกลับเหล่านี้ เนื่องจากก่อนที่จะเปิดตัว 103 Early Hints การตอบกลับเหล่านี้ไม่ค่อยได้ใช้สำหรับการท่องเว็บทั่วไป

การส่ง 103 Early Hints เท่านั้นเพื่อตอบกลับไคลเอ็นต์ที่ส่งส่วนหัวคำขอ HTTP sec-fetch-mode: navigate ควรส่งคำแนะนำดังกล่าวสำหรับไคลเอ็นต์ใหม่กว่าที่เข้าใจว่าต้องรอการตอบกลับที่ตามมา นอกจากนี้ เนื่องจากคำแนะนำเบื้องต้นรองรับเฉพาะคำขอการนำทาง (ดูข้อจำกัดปัจจุบัน) จึงมีข้อดีเพิ่มเติมคือหลีกเลี่ยงการส่งคำแนะนำเหล่านี้ในคำขออื่นๆ โดยไม่จำเป็น

นอกจากนี้ เราขอแนะนำให้ส่งคำแนะนำเบื้องต้นผ่านการเชื่อมต่อ HTTP/2 หรือ HTTP/3 เท่านั้น และเบราว์เซอร์ส่วนใหญ่จะยอมรับคำแนะนำเหล่านี้ผ่านโปรโตคอลดังกล่าวเท่านั้น

รูปแบบขั้นสูง

หากคุณใช้คำแนะนำเบื้องต้นกับหน้า Landing Page หลักอย่างเต็มที่แล้วและพบว่ามีโอกาสเพิ่มเติม คุณอาจสนใจรูปแบบขั้นสูงต่อไปนี้

สำหรับผู้เข้าชมที่อยู่ในคำขอหน้าเว็บ n รายการซึ่งเป็นส่วนหนึ่งของการเดินทางของผู้ใช้ทั่วไป คุณอาจต้องการปรับการตอบกลับคำแนะนำเบื้องต้นให้เหมาะกับเนื้อหาที่อยู่ลึกลงไปในหน้าเว็บ กล่าวอีกนัยหนึ่งคือใช้คำแนะนำเบื้องต้นกับทรัพยากรที่มีลำดับความสำคัญต่ำกว่า ซึ่งอาจฟังดูขัดกับคำแนะนำที่ให้เน้นทรัพยากรย่อยหรือต้นทางที่บล็อกการแสดงผลและมีลำดับความสำคัญสูง อย่างไรก็ตาม เมื่อผู้เข้าชมไปยังส่วนต่างๆ ของเว็บไซต์สักพักแล้ว เบราว์เซอร์ของผู้เข้าชมมีแนวโน้มที่จะมีทรัพยากรที่สำคัญทั้งหมดอยู่แล้ว จากนั้น คุณอาจเปลี่ยนความสนใจไปที่ทรัพยากรที่มีลำดับความสำคัญต่ำกว่า เช่น การใช้คำแนะนำเบื้องต้นเพื่อโหลดรูปภาพผลิตภัณฑ์ หรือ JS/CSS เพิ่มเติมที่จำเป็นสำหรับการโต้ตอบของผู้ใช้ที่ไม่ค่อยเกิดขึ้น

ข้อจำกัดปัจจุบัน

ข้อจำกัดของคำแนะนำเบื้องต้นตามที่ใช้ใน Chrome มีดังนี้

• ใช้ได้กับคำขอการนำทางเท่านั้น (กล่าวคือ ทรัพยากรหลักสำหรับเอกสารระดับบนสุด)
• รองรับเฉพาะ preconnect และ preload เท่านั้น (กล่าวคือ ไม่รองรับ prefetch)
• คำแนะนำเบื้องต้นตามด้วยการเปลี่ยนเส้นทางแบบข้ามต้นทางในการตอบกลับสุดท้ายจะส่งผลให้เบราว์เซอร์ทิ้งทรัพยากรและการเชื่อมต่อที่ได้รับโดยใช้คำแนะนำเบื้องต้น
• ระบบจะจัดเก็บทรัพยากรที่โหลดล่วงหน้าโดยใช้คำแนะนำเบื้องต้นไว้ในแคช HTTP และหน้าเว็บจะดึงข้อมูลจากแคชนั้นในภายหลัง ดังนั้นจึงโหลดล่วงหน้าได้เฉพาะทรัพยากรที่แคชได้โดยใช้คำแนะนำเบื้องต้น มิฉะนั้นระบบจะดึงข้อมูลทรัพยากร 2 ครั้ง (ครั้งหนึ่งโดยคำแนะนำเบื้องต้นและอีกครั้งโดยเอกสาร) ใน Chrome ระบบจะปิดใช้แคช HTTP สำหรับใบรับรอง HTTPS ที่ไม่น่าเชื่อถือ (แม้ว่าคุณจะดำเนินการโหลดหน้าเว็บต่อ)
• ระบบอาจไม่รองรับการโหลดล่วงหน้ารูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ (โดยใช้ imagesrcset, imagesizes หรือ media) โดยใช้ส่วนหัว HTTP <link> เนื่องจากระบบจะกำหนดวิวพอร์ตก็ต่อเมื่อสร้างเอกสารแล้ว อย่างดีที่สุดคือระบบจะรอจนกว่าจะได้รับเอกสาร ซึ่งจะทำให้ประโยชน์หลักของ 103 Early Hints หายไป

เบราว์เซอร์อื่นๆ มีข้อจำกัดที่คล้ายกัน และดังที่กล่าวไว้ก่อนหน้านี้ บางเบราว์เซอร์ยังจำกัดคำแนะนำเบื้องต้น 103 ให้ใช้ได้กับ preconnect เท่านั้น

ความสัมพันธ์กับ H2/Push

หากคุณคุ้นเคยกับฟีเจอร์ HTTP2/Push ที่เลิกใช้งานแล้ว คุณอาจสงสัยว่าคำแนะนำเบื้องต้นแตกต่างกันอย่างไร แม้ว่าคำแนะนำเบื้องต้นจะต้องมีการรับส่งข้อมูลไปกลับเพื่อให้เบราว์เซอร์เริ่มดึงข้อมูลทรัพยากรย่อยที่สำคัญ แต่ HTTP2/Push ช่วยให้เซิร์ฟเวอร์เริ่มส่งทรัพยากรย่อยพร้อมกับการตอบกลับได้ แม้ว่าฟีเจอร์นี้จะฟังดูดี แต่ก็มีข้อเสียเชิงโครงสร้างที่สำคัญคือ HTTP2/Push ทำให้หลีกเลี่ยงการส่งทรัพยากรย่อยที่เบราว์เซอร์มีอยู่แล้วได้ยากมาก เอฟเฟกต์ "การส่งมากเกินไป" นี้ทำให้การใช้แบนด์วิดท์ของเครือข่ายมีประสิทธิภาพน้อยลง ซึ่งขัดขวางประโยชน์ด้านประสิทธิภาพอย่างมาก โดยรวมแล้ว ข้อมูลของ Chrome แสดงให้เห็นว่า HTTP2/Push ส่งผลเสียต่อประสิทธิภาพโดยรวมของเว็บ

ในทางตรงกันข้าม คำแนะนำเบื้องต้นทำงานได้ดีกว่าในทางปฏิบัติเนื่องจากรวมความสามารถในการส่งการตอบกลับเบื้องต้นเข้ากับคำแนะนำที่ทำให้เบราว์เซอร์มีหน้าที่รับผิดชอบในการดึงข้อมูลหรือเชื่อมต่อกับสิ่งที่ต้องการจริงๆ แม้ว่าคำแนะนำเบื้องต้นจะไม่ครอบคลุมกรณีการใช้งานทั้งหมดที่ HTTP2/Push สามารถจัดการได้ในทางทฤษฎี แต่เราเชื่อว่าคำแนะนำเบื้องต้นเป็นโซลูชันที่ใช้งานได้จริงมากกว่าในการเร่งการนำทาง

ภาพขนาดย่อโดย Pierre Bamin.