เมื่อคุณเปิดหน้าเว็บ เบราว์เซอร์จะขอเอกสาร HTML จากเซิร์ฟเวอร์ แยกวิเคราะห์เนื้อหา และส่งคำขอแยกต่างหากสำหรับทรัพยากรที่อ้างอิง ในฐานะนักพัฒนาซอฟต์แวร์ คุณทราบทรัพยากรทั้งหมดที่หน้าเว็บต้องการและทรัพยากรเหล่านี้สำคัญที่สุดแล้ว คุณสามารถใช้ความรู้นี้เพื่อขอทรัพยากรที่สำคัญล่วงหน้าและเร่งกระบวนการโหลดได้ โพสต์นี้อธิบายวิธีบรรลุเป้าหมายดังกล่าวด้วย <link rel="preload">
วิธีการทำงานของการโหลดล่วงหน้า
การโหลดล่วงหน้าเหมาะสมที่สุดสำหรับแหล่งข้อมูลที่เบราว์เซอร์มักค้นพบในภายหลัง
การโหลดทรัพยากรบางอย่างล่วงหน้าจะเป็นการบอกเบราว์เซอร์ว่าคุณต้องการดึงข้อมูลดังกล่าวเร็วกว่าเบราว์เซอร์จะค้นพบทรัพยากรนั้นหรือไม่ เนื่องจากคุณมั่นใจว่ามีความสำคัญต่อหน้าปัจจุบัน
ห่วงโซ่คำขอที่สำคัญแสดงลำดับของทรัพยากรที่มีการจัดลำดับความสำคัญและดึงโดยเบราว์เซอร์ Lighthouse ระบุว่าชิ้นงานอยู่ในระดับ 3 ของเชนนี้ว่าค้นพบล่าช้า คุณสามารถใช้การตรวจสอบโหลดคำขอคีย์ล่วงหน้าเพื่อระบุทรัพยากรที่จะโหลดล่วงหน้า
คุณโหลดทรัพยากรล่วงหน้าได้โดยเพิ่มแท็ก <link>
ที่มี rel="preload"
ลงในส่วนหัวของเอกสาร HTML ดังนี้
<link rel="preload" as="script" href="critical.js">
เบราว์เซอร์จะแคชทรัพยากรที่โหลดไว้ล่วงหน้าเพื่อให้พร้อมใช้ทันทีเมื่อจำเป็น (โปรแกรมจะไม่เรียกใช้สคริปต์หรือใช้สไตล์ชีต)
คำแนะนำเกี่ยวกับทรัพยากร เช่น preconnect
และ prefetch
จะทำงานตามเบราว์เซอร์ที่เห็นว่าเหมาะสม ในทางกลับกัน preload
เป็นสิ่งจำเป็นสำหรับเบราว์เซอร์ เบราว์เซอร์ที่ทันสมัยจัดลำดับความสำคัญของทรัพยากรได้เป็นอย่างดี เราจึงควรใช้ preload
อย่างจำกัดและโหลดเฉพาะทรัพยากรที่สำคัญที่สุดเท่านั้น
การโหลดล่วงหน้าที่ไม่ได้ใช้จะทริกเกอร์คำเตือน Console ใน Chrome ประมาณ 3 วินาทีหลังจากเหตุการณ์ load
Use Case
การโหลดทรัพยากรล่วงหน้าที่กำหนดไว้ใน CSS
ระบบจะไม่ค้นพบแบบอักษรที่กำหนดโดยกฎ @font-face
หรือภาพพื้นหลังที่กำหนดไว้ในไฟล์ CSS จนกว่าเบราว์เซอร์จะดาวน์โหลดและแยกวิเคราะห์ไฟล์ CSS เหล่านั้น การโหลดทรัพยากรเหล่านี้ล่วงหน้าจะช่วยให้มั่นใจได้ว่ามีการดึงข้อมูลทรัพยากรก่อนที่จะดาวน์โหลดไฟล์ CSS
กำลังโหลดไฟล์ CSS ล่วงหน้า
หากคุณใช้แนวทาง CSS ที่สำคัญ คุณจะแยก CSS ออกเป็น 2 ส่วน CSS ที่สำคัญซึ่งจำเป็นสำหรับการแสดงผลเนื้อหาครึ่งหน้าบนจะระบุไว้ใน <head>
ของเอกสาร และ CSS ที่ไม่สำคัญมักจะโหลดด้วย 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">
นอกจากนี้คุณยังโหลดทรัพยากรประเภทต่างๆ ล่วงหน้าผ่านส่วนหัว HTTP ของ Link
ได้อีกด้วย ดังนี้
Link: </css/style.css>; rel="preload"; as="style"
ประโยชน์ของการระบุ preload
ในส่วนหัว HTTP คือเบราว์เซอร์ไม่จำเป็นต้องแยกวิเคราะห์เอกสารเพื่อค้นหาเอกสาร ซึ่งอาจปรับปรุงได้เล็กน้อยในบางกรณี
การโหลดโมดูล JavaScript ล่วงหน้าด้วย Webpack
หากใช้ Module Bundler ที่สร้างไฟล์บิลด์ของแอปพลิเคชัน คุณต้องตรวจสอบว่าระบบรองรับการแทรกแท็กโหลดล่วงหน้าหรือไม่ สำหรับ 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 รูปภาพหลักและข้อความขนาดใหญ่ที่แสดงผลโดยใช้แบบอักษรสำหรับเว็บจะได้รับประโยชน์จากการคำแนะนำการโหลดล่วงหน้าที่วางไว้อย่างดี และควรใช้เมื่อมีโอกาสที่จะแสดงเนื้อหาที่สำคัญเหล่านี้แก่ผู้ใช้ได้เร็วขึ้น
อย่างไรก็ตาม คุณต้องระวังเกี่ยวกับการโหลดล่วงหน้าและการเพิ่มประสิทธิภาพอื่นๆ โดยเฉพาะอย่างยิ่ง ให้หลีกเลี่ยงการโหลดทรัพยากรล่วงหน้ามากเกินไป หากจัดลำดับความสำคัญของทรัพยากรมากเกินไป หมายความว่าไม่มีทรัพยากรเลย ผลของคำแนะนำการโหลดล่วงหน้ามากเกินไปจะส่งผลเสียต่อเครือข่ายที่ช้า ซึ่งการช่วงชิงแบนด์วิดท์จะชัดเจนกว่า
แต่ให้เน้นทรัพยากรที่มีมูลค่าสูง 2-3 อย่างที่คุณทราบว่าจะได้ประโยชน์จากการโหลดล่วงหน้าที่กำหนดไว้เป็นอย่างดี เมื่อโหลดแบบอักษรล่วงหน้า ให้ตรวจสอบว่าคุณแสดงแบบอักษรในรูปแบบ WOFF 2.0 เพื่อลดเวลาที่ใช้ในการโหลดทรัพยากรให้ได้มากที่สุด เนื่องจาก WOFF 2.0 มีการสนับสนุนเบราว์เซอร์ที่ยอดเยี่ยม การใช้รูปแบบเก่า เช่น WOFF 1.0 หรือ TrueType (TTF) จะทำให้ LCP ของคุณล่าช้าหากตัวเลือก LCP เป็นโหนดข้อความ
ในกรณีของ LCP และ JavaScript คุณจะต้องตรวจสอบว่าส่งมาร์กอัปที่สมบูรณ์จากเซิร์ฟเวอร์เพื่อให้ตัวสแกนการโหลดล่วงหน้าของเบราว์เซอร์ทำงานได้อย่างถูกต้อง หากคุณกำลังนำเสนอประสบการณ์ที่ต้องใช้ JavaScript โดยสมบูรณ์ในการแสดงผลมาร์กอัปและไม่สามารถส่ง HTML ที่แสดงผลโดยเซิร์ฟเวอร์ได้ จะเป็นการดีหากคุณทำขั้นตอนที่เครื่องมือสแกนการโหลดล่วงหน้าของเบราว์เซอร์ไม่สามารถทำและโหลดทรัพยากรล่วงหน้าที่จะค้นพบได้เฉพาะเมื่อ JavaScript โหลดและดำเนินการเสร็จสิ้นแล้วเท่านั้น
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) เป็นเมตริกที่สำคัญเป็นพิเศษซึ่งเกี่ยวข้องกับแบบอักษรสำหรับเว็บ นอกจากนี้ CLS จะส่งผลกระทบอย่างมากกับแบบอักษรเว็บที่ใช้พร็อพเพอร์ตี้ CSS ของ font-display
เพื่อจัดการวิธีโหลดแบบอักษร ลองพิจารณากลยุทธ์ต่อไปนี้เพื่อลดการเปลี่ยนแปลงของเลย์เอาต์ที่เกี่ยวข้องกับแบบอักษรของเว็บ
- โหลดแบบอักษรล่วงหน้าขณะใช้ค่า
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)
การโต้ตอบกับ Next Paint เป็นเมตริกที่วัดการตอบสนองต่อข้อมูลจากผู้ใช้ เนื่องจากส่วนแบ่งการโต้ตอบของสิงโตบนเว็บนั้นขับเคลื่อนด้วย JavaScript การโหลด JavaScript ล่วงหน้าที่ขับเคลื่อนการโต้ตอบที่สำคัญอาจช่วยรักษา INP ของหน้าเว็บให้ต่ำลง อย่างไรก็ตาม โปรดทราบว่าการโหลด JavaScript ล่วงหน้ามากเกินไปในช่วงเริ่มต้นอาจส่งผลกระทบเชิงลบโดยไม่เจตนาหากมีทรัพยากรมากเกินไปในการแย่งแบนด์วิดท์
นอกจากนี้ คุณควรใช้ความระมัดระวังเกี่ยวกับการแยกโค้ด การแยกโค้ดเป็นการเพิ่มประสิทธิภาพที่ยอดเยี่ยมสำหรับการลดจำนวน JavaScript ที่โหลดในระหว่างการเริ่มต้น แต่การโต้ตอบอาจล่าช้าหากการโต้ตอบดังกล่าวอาศัย JavaScript ที่โหลดไว้ในตอนเริ่มต้นการโต้ตอบ ในการชดเชยนี้ คุณจะต้องตรวจสอบเจตนาของผู้ใช้ และแทรกการโหลดล่วงหน้าสำหรับส่วน JavaScript ที่จำเป็นก่อนที่การโต้ตอบจะเกิดขึ้น เช่น การโหลด JavaScript ล่วงหน้าที่จำเป็นสำหรับการตรวจสอบเนื้อหาของแบบฟอร์มเมื่อมีการโฟกัสช่องใดก็ตามในแบบฟอร์ม
บทสรุป
หากต้องการเพิ่มความเร็วหน้าเว็บ ให้โหลดทรัพยากรสำคัญที่เบราว์เซอร์ค้นพบล่าช้าไว้ล่วงหน้า การโหลดทุกอย่างล่วงหน้าอาจส่งผลดีต่อคุณ ดังนั้นให้ใช้ preload
อย่างจำกัดและวัดผลกระทบจากการใช้งานจริง