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

ดูวิธีที่เซิร์ฟเวอร์ของคุณสามารถส่งคำแนะนำให้เบราว์เซอร์เกี่ยวกับทรัพยากรย่อยที่สำคัญ

Kenji Baheux

Barry Pollard

Twitter GitHub Mastodon หน้าแรก

เคล็ดลับในช่วงแรกคืออะไร

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

หากไม่มีคำแนะนำล่วงหน้า: ทุกอย่างถูกบล็อกบนเซิร์ฟเวอร์เพื่อกำหนดวิธีตอบสนองสำหรับทรัพยากรหลัก

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

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

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

การเปรียบเทียบเคล็ดลับในช่วงก่อน/หลังในเว็บไซต์ทดสอบโดยใช้ WebPageTest (Moto G4 - DSL)

การใช้คำแนะนำในช่วงแรก

ก่อนที่จะเจาะลึกลงในหัวข้อ โปรดทราบว่าคำแนะนำในช่วงแรกไม่มีประโยชน์หากเซิร์ฟเวอร์ของคุณสามารถส่ง 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> อยู่แล้ว คุณอาจพิจารณาต้นทางหรือทรัพยากรเหล่านี้ท่ามกลางตัวเลือกสําหรับคำแนะนำล่วงหน้า ดูรายละเอียดเพิ่มเติมได้ในบทความนี้

ประเด็นสำคัญ: สิ่งที่คุณกำหนดให้ preconnect หรือ preload เป็นคำแนะนำในช่วงแรกอาจแตกต่างจากคำสั่งที่เคยใช้ใน HTML เมื่อใช้สิ่งเหล่านี้ใน HTML โดยปกติแล้วคุณจะต้องการ preconnect หรือ preload ทรัพยากรที่ Preload Scanner จะไม่พบใน HTML เช่น แบบอักษรหรือภาพพื้นหลังที่อาจถูกค้นพบล่าช้า สำหรับเคล็ดลับในช่วงแรก คุณจะไม่มี HTML ดังนั้นจึงอาจต้อง preconnect ไปยังโดเมนสำคัญหรือทรัพยากรสำคัญ preload รายการที่อาจถูกค้นพบได้ในช่วงก่อนๆ ของ HTML แทน ตัวอย่างเช่น การโหลด main.css หรือ app.js ล่วงหน้า การคัดลอกคำสั่ง preconnect และ preload จาก HTML ไปยังคำแนะนำในช่วงแรกอย่างละเอียดอาจไม่ใช่วิธีที่เหมาะสม นอกจากนี้ เฉพาะ Chrome เท่านั้นที่รองรับ 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 หรือแพลตฟอร์มแบบใดแบบหนึ่งต่อไปนี้ คุณอาจไม่จําเป็นต้องติดตั้งใช้งานเคล็ดลับในช่วงแรกด้วยตนเอง โปรดดูเอกสารออนไลน์ของผู้ให้บริการโซลูชันเพื่อดูว่ารองรับคำแนะนำในช่วงแรกหรือไม่ หรือดูรายการโดยสังเขปที่นี่

• คำแนะนำเบื้องต้นจาก Cloudflare
• แนะนำแบบรวดเร็วทันใจ
• คำแนะนำในช่วงแรกที่ Akamai

การหลีกเลี่ยงปัญหาสำหรับลูกค้าที่ไม่รองรับคำแนะนำในช่วงแรก

การตอบกลับ 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