เมื่อคุณเปิดหน้าเว็บ เบราว์เซอร์จะขอเอกสาร HTML จากเซิร์ฟเวอร์ แยกวิเคราะห์เนื้อหา และส่งคําขอแยกต่างหากสําหรับทรัพยากรที่อ้างอิง ในฐานะนักพัฒนาซอฟต์แวร์ คุณทราบอยู่แล้วว่าหน้าเว็บต้องใช้ทรัพยากรใดบ้างและทรัพยากรใดสำคัญที่สุด คุณสามารถใช้ความรู้ดังกล่าวเพื่อขอทรัพยากรสําคัญล่วงหน้าและเร่งกระบวนการโหลดได้ โพสต์นี้จะอธิบายวิธีดำเนินการดังกล่าวด้วย <link rel="preload">
วิธีการทำงานของการโหลดล่วงหน้า
การโหลดล่วงหน้าเหมาะสําหรับทรัพยากรที่เบราว์เซอร์มักจะค้นพบช้า
การโหลดทรัพยากรบางอย่างล่วงหน้าเป็นการบอกให้เบราว์เซอร์ทราบว่าคุณต้องการดึงข้อมูลทรัพยากรนั้นเร็วกว่าที่เบราว์เซอร์จะค้นพบ เนื่องจากคุณมั่นใจว่าทรัพยากรนั้นสำคัญต่อหน้าปัจจุบัน
ห่วงโซ่คำขอที่สำคัญแสดงลำดับทรัพยากรที่เบราว์เซอร์จัดลําดับความสําคัญและดึงข้อมูล Lighthouse จะระบุว่าชิ้นงานที่อยู่ที่ระดับ 3 ของเชนนี้เป็นการค้นพบล่าช้า คุณสามารถใช้การตรวจสอบการโหลดคําขอคีย์ล่วงหน้าเพื่อระบุทรัพยากรที่จะโหลดล่วงหน้า
คุณสามารถโหลดทรัพยากรล่วงหน้าได้โดยเพิ่มแท็ก <link>
ที่มี rel="preload"
ลงในส่วนหัวของเอกสาร HTML
<link rel="preload" as="script" href="critical.js">
เบราว์เซอร์จะแคชทรัพยากรที่โหลดไว้ล่วงหน้าเพื่อให้พร้อมใช้งานทันทีเมื่อต้องการ (จะไม่เรียกใช้สคริปต์หรือใช้สไตล์ชีต)
คำแนะนำทรัพยากร เช่น preconnect
และ prefetch
จะทำงานตามที่เบราว์เซอร์เห็นสมควร ส่วน preload
นั้นเบราว์เซอร์จำเป็นต้องมี เบราว์เซอร์สมัยใหม่จัดลำดับความสำคัญของทรัพยากรได้ดีอยู่แล้ว คุณจึงควรใช้ preload
อย่างจำกัดและโหลดทรัพยากรที่สำคัญที่สุดล่วงหน้าเท่านั้น
การโหลดล่วงหน้าที่ไม่ได้ใช้จะทริกเกอร์คำเตือนคอนโซลใน Chrome โดยจะเกิดขึ้นประมาณ 3 วินาทีหลังจากเหตุการณ์ load
กรณีการใช้งาน
โหลดทรัพยากรที่กําหนดไว้ใน CSS ล่วงหน้า
ระบบจะไม่ค้นพบแบบอักษรที่กําหนดด้วยกฎ @font-face
หรือรูปภาพพื้นหลังที่กําหนดไว้ในไฟล์ CSS จนกว่าเบราว์เซอร์จะดาวน์โหลดและแยกวิเคราะห์ไฟล์ CSS เหล่านั้น การโหลดทรัพยากรเหล่านี้ล่วงหน้าช่วยให้มั่นใจได้ว่าระบบจะดึงข้อมูลทรัพยากรดังกล่าวก่อนที่จะดาวน์โหลดไฟล์ CSS
โหลดไฟล์ CSS ล่วงหน้า
หากใช้แนวทาง CSS ที่สําคัญ ให้แยก CSS ออกเป็น 2 ส่วน CSS ที่สําคัญที่จําเป็นสําหรับการแสดงผลเนื้อหาครึ่งหน้าบนจะแทรกอยู่ใน <head>
ของเอกสาร และ CSS ที่ไม่สําคัญมักจะโหลดแบบ Lazy ด้วย JavaScript การรอให้ JavaScript ทำงานก่อนที่จะโหลด CSS ที่ไม่สำคัญอาจทําให้การแสดงผลล่าช้าเมื่อผู้ใช้เลื่อน ดังนั้นคุณควรใช้ <link rel="preload">
เพื่อเริ่มการดาวน์โหลดให้เร็วขึ้น
โหลดไฟล์ JavaScript ล่วงหน้า
เนื่องจากเบราว์เซอร์จะไม่เรียกใช้ไฟล์ที่โหลดไว้ล่วงหน้า การโหลดล่วงหน้าจึงมีประโยชน์ในการแยกการดึงข้อมูลออกจากการเรียกใช้ ซึ่งจะช่วยปรับปรุงเมตริกต่างๆ เช่น เวลาในการตอบสนอง การโหลดล่วงหน้าจะมีประสิทธิภาพดีที่สุดหากคุณแยกกลุ่ม JavaScript และโหลดเฉพาะส่วนที่สําคัญไว้ล่วงหน้า
วิธีใช้ rel=preload
วิธีที่ง่ายที่สุดในการใช้ preload
คือการเพิ่มแท็ก <link>
ลงใน <head>
ของเอกสาร ดังนี้
<head>
<link rel="preload" as="script" href="critical.js">
</head>
การให้แอตทริบิวต์ as
จะช่วยให้เบราว์เซอร์กำหนดลำดับความสำคัญของทรัพยากรที่ดึงข้อมูลล่วงหน้าตามประเภท ตั้งค่าส่วนหัวที่เหมาะสม และระบุว่ามีทรัพยากรนั้นอยู่ในแคชอยู่แล้วหรือไม่ ค่าที่ยอมรับสำหรับแอตทริบิวต์นี้ ได้แก่ script
, style
, font
, image
และอื่นๆ
ระบบจะโหลดทรัพยากรบางประเภท เช่น แบบอักษร ในโหมดไม่ระบุตัวตน สำหรับรายการต่อไปนี้ คุณต้องตั้งค่าแอตทริบิวต์ crossorigin
ด้วย preload
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
องค์ประกอบ <link>
ยังยอมรับแอตทริบิวต์ type
ที่มีประเภท MIME ของทรัพยากรที่ลิงก์ด้วย เบราว์เซอร์จะใช้ค่าของแอตทริบิวต์ type
เพื่อให้แน่ใจว่าระบบจะโหลดทรัพยากรล่วงหน้าเฉพาะในกรณีที่รองรับประเภทไฟล์ของทรัพยากรนั้นๆ หากเบราว์เซอร์ไม่รองรับประเภททรัพยากรที่ระบุ เบราว์เซอร์จะไม่สนใจ <link rel="preload">
นอกจากนี้ คุณยังโหลดทรัพยากรประเภทใดก็ได้ล่วงหน้าผ่านLink
ส่วนหัว HTTP ดังนี้
Link: </css/style.css>; rel="preload"; as="style"
ข้อดีของการระบุ preload
ในส่วนหัว HTTP คือเบราว์เซอร์ไม่จําเป็นต้องแยกวิเคราะห์เอกสารเพื่อค้นหา ซึ่งอาจช่วยปรับปรุงได้เล็กน้อยในบางกรณี
โหลดโมดูล JavaScript ล่วงหน้าด้วย webpack
หากคุณใช้เครื่องมือรวมโมดูลที่สร้างไฟล์บิลด์ของแอปพลิเคชัน คุณต้องตรวจสอบว่าเครื่องมือรองรับการแทรกแท็กการโหลดล่วงหน้าหรือไม่ เมื่อใช้ webpack เวอร์ชัน 4.6.0 ขึ้นไป ระบบจะรองรับการโหลดล่วงหน้าผ่านการใช้คอมเมนต์แบบมายากลภายใน import()
ดังนี้
import(_/* webpackPreload: true */_ "CriticalChunk")
หากคุณใช้ Webpack เวอร์ชันเก่า ให้ใช้ปลั๊กอินของบุคคลที่สาม เช่น preload-webpack-plugin
ผลกระทบของการโหลดล่วงหน้าต่อ Core Web Vitals
การโหลดล่วงหน้าเป็นการเพิ่มประสิทธิภาพที่มีประสิทธิภาพซึ่งส่งผลต่อความเร็วในการโหลด การเพิ่มประสิทธิภาพดังกล่าวอาจทําให้เกิดการเปลี่ยนแปลงใน Core Web Vitals ของเว็บไซต์ และคุณควรทราบถึงการเปลี่ยนแปลงเหล่านี้
Largest Contentful Paint (LCP)
การโหลดล่วงหน้าส่งผลอย่างมากต่อ Largest Contentful Paint (LCP) ในส่วนของแบบอักษรและรูปภาพ เนื่องจากทั้งรูปภาพและโหนดข้อความอาจเป็นผู้สมัคร LCP ได้ รูปภาพหลักและข้อความจำนวนมากที่แสดงผลโดยใช้แบบอักษรเว็บจะได้รับประโยชน์อย่างมากจากคำแนะนำการโหลดล่วงหน้าที่วางไว้อย่างเหมาะสม และควรใช้เมื่อมีโอกาสที่จะแสดงเนื้อหาสำคัญเหล่านี้ต่อผู้ใช้ได้เร็วขึ้น
อย่างไรก็ตาม คุณควรระมัดระวังเกี่ยวกับการโหลดล่วงหน้าและการเพิ่มประสิทธิภาพอื่นๆ โดยเฉพาะอย่างยิ่ง ให้หลีกเลี่ยงการโหลดทรัพยากรล่วงหน้ามากเกินไป หากมีการกำหนดลำดับความสำคัญของทรัพยากรมากเกินไป ทรัพยากรเหล่านั้นจะไม่มีลำดับความสำคัญใดๆ ผลกระทบของคำแนะนำการโหลดล่วงหน้ามากเกินไปจะส่งผลเสียต่อผู้ใช้เครือข่ายที่ช้ากว่าโดยเฉพาะอย่างยิ่ง เนื่องจากจะมีการแข่งขันกันใช้แบนด์วิดท์มากขึ้น
แต่ให้เน้นที่เนื้อหาที่มีคุณค่าสูงเพียงไม่กี่รายการที่คุณรู้ว่าจะได้ประโยชน์จากการโหลดล่วงหน้าในตำแหน่งที่เหมาะสม เมื่อโหลดแบบอักษรล่วงหน้า โปรดตรวจสอบว่าคุณแสดงแบบอักษรในรูปแบบ WOFF 2.0 เพื่อลดเวลาในการโหลดทรัพยากรให้มากที่สุด เนื่องจาก WOFF 2.0 มีการรองรับเบราว์เซอร์ที่ยอดเยี่ยม การใช้รูปแบบเก่า เช่น WOFF 1.0 หรือ TrueType (TTF) จะทําให้ LCP ล่าช้าหาก LCP ที่เป็นไปได้คือโหนดข้อความ
สําหรับ LCP และ JavaScript คุณต้องตรวจสอบว่าคุณส่งมาร์กอัปที่สมบูรณ์จากเซิร์ฟเวอร์เพื่อให้เครื่องมือสแกนการโหลดล่วงหน้าของเบราว์เซอร์ทํางานได้อย่างถูกต้อง หากคุณแสดงประสบการณ์การใช้งานที่อาศัย JavaScript ทั้งหมดในการแสดงผลมาร์กอัปและไม่สามารถส่ง HTML ที่แสดงผลจากเซิร์ฟเวอร์ได้ การใช้เครื่องมือนี้จะช่วยได้ในกรณีที่เครื่องมือสแกนที่โหลดล่วงหน้าของเบราว์เซอร์ไม่สามารถดำเนินการได้ และโหลดทรัพยากรล่วงหน้าที่ระบบจะค้นพบได้ก็ต่อเมื่อ JavaScript โหลดและดำเนินการเสร็จแล้ว
Cumulative Layout Shift (CLS)
การจัดวางที่เลื่อนสะสม (CLS) เป็นเมตริกที่สําคัญอย่างยิ่งเมื่อพูดถึงเว็บฟอนต์ และ CLS มีการโต้ตอบที่สําคัญกับเว็บฟอนต์ที่ใช้font-display
พร็อพเพอร์ตี้ CSS เพื่อจัดการวิธีโหลดแบบอักษร ลองใช้กลยุทธ์ต่อไปนี้เพื่อลดการเปลี่ยนแปลงเลย์เอาต์ที่เกี่ยวข้องกับแบบอักษรเว็บ
- โหลดแบบอักษรไว้ล่วงหน้าขณะใช้ค่าเริ่มต้น
block
สำหรับfont-display
การรักษาสมดุลเป็นเรื่องละเอียดอ่อน การบล็อกการแสดงแบบอักษรโดยไม่มีแบบอักษรสำรองอาจถือเป็นปัญหาด้านประสบการณ์ของผู้ใช้ ในทางหนึ่ง การใช้font-display: block;
ในการโหลดแบบอักษรจะช่วยขจัดการเปลี่ยนแปลงเลย์เอาต์ที่เกี่ยวข้องกับแบบอักษรบนเว็บ ในทางกลับกัน คุณยังคงต้องโหลดแบบอักษรเว็บเหล่านั้นโดยเร็วที่สุดหากแบบอักษรเหล่านั้นมีความสำคัญต่อประสบการณ์ของผู้ใช้ การรวมการโหลดล่วงหน้าเข้ากับfont-display: block;
อาจเป็นการประนีประนอมที่เรายอมรับได้ - โหลดแบบอักษรล่วงหน้าขณะใช้ค่า
fallback
สำหรับfont-display
fallback
เป็นค่ากลางระหว่างswap
กับblock
เนื่องจากมีระยะเวลาการบล็อกสั้นมาก - ใช้ค่า
optional
สำหรับfont-display
โดยไม่ต้องมีการโหลดล่วงหน้า หากแบบอักษรเว็บไม่สำคัญต่อประสบการณ์ของผู้ใช้ แต่ยังคงใช้เพื่อแสดงผลข้อความในหน้าเว็บจำนวนมาก ให้พิจารณาใช้ค่าoptional
ในกรณีที่ไม่เหมาะสมoptional
จะแสดงข้อความในหน้าเว็บด้วยแบบอักษรสำรองขณะที่โหลดแบบอักษรในเบื้องหลังสำหรับการนําทางครั้งถัดไป ผลลัพธ์สุทธิในเงื่อนไขเหล่านี้คือ CLS ที่ดีขึ้น เนื่องจากแบบอักษรของระบบจะแสดงผลทันที ขณะที่การโหลดหน้าเว็บครั้งต่อๆ ไปจะโหลดแบบอักษรทันทีโดยไม่มีการเปลี่ยนแปลงเลย์เอาต์
CLS เป็นเมตริกที่เพิ่มประสิทธิภาพได้ยากเมื่อพูดถึงแบบอักษรเว็บ โปรดทดสอบในห้องทดลอง แต่ให้เชื่อถือข้อมูลภาคสนามเพื่อพิจารณาว่ากลยุทธ์การโหลดแบบอักษรช่วยปรับปรุง CLS หรือทําให้แย่ลง
การโต้ตอบกับ Next Paint (INP)
Interaction to Next Paint เป็นเมตริกที่วัดการตอบสนองต่ออินพุตของผู้ใช้ เนื่องจากส่วนสำคัญของการโต้ตอบบนเว็บขับเคลื่อนโดย JavaScript การโหลด JavaScript ที่ขับเคลื่อนการโต้ตอบที่สําคัญไว้ล่วงหน้าจึงอาจช่วยให้ INP ของหน้าเว็บลดลง อย่างไรก็ตาม โปรดทราบว่าการโหลด JavaScript ล่วงหน้ามากเกินไประหว่างการเริ่มต้นอาจทำให้เกิดผลเสียที่ไม่ตั้งใจได้หากมีทรัพยากรจำนวนมากแย่งแบนด์วิดท์กัน
นอกจากนี้ คุณยังต้องระมัดระวังเกี่ยวกับวิธีแยกโค้ดด้วย การแยกโค้ดเป็นการเพิ่มประสิทธิภาพที่ยอดเยี่ยมในการลดจํานวน JavaScript ที่โหลดระหว่างการเริ่มต้น แต่การโต้ตอบอาจล่าช้าหากอาศัย JavaScript ที่โหลดตั้งแต่เริ่มต้นการโต้ตอบ ในการชดเชยปัญหานี้ คุณจะต้องตรวจสอบความตั้งใจของผู้ใช้ และแทรกการโหลดล่วงหน้าสำหรับกลุ่ม JavaScript ที่จําเป็นก่อนที่การโต้ตอบจะเกิดขึ้น ตัวอย่างหนึ่งอาจเป็นการโหลด JavaScript ล่วงหน้าที่จําเป็นสําหรับการตรวจสอบเนื้อหาของแบบฟอร์มเมื่อโฟกัสที่ช่องใดช่องหนึ่งในแบบฟอร์ม
บทสรุป
โหลดทรัพยากรสําคัญที่เบราว์เซอร์ค้นพบช้าไว้ล่วงหน้าเพื่อปรับปรุงความเร็วหน้าเว็บ การโหลดทุกอย่างล่วงหน้าจะทําให้เสียผล ดังนั้นให้ใช้ preload
อย่างประหยัดและวัดผลลัพธ์ในชีวิตจริง