โหลดเนื้อหาที่สำคัญไว้ล่วงหน้าเพื่อปรับปรุงความเร็วในการโหลด

Houssein Djirdeh
Jeremy Wagner
Milica Mihajlija

เมื่อคุณเปิดหน้าเว็บ เบราว์เซอร์จะขอเอกสาร HTML จากเซิร์ฟเวอร์ แยกวิเคราะห์เนื้อหา และส่งคำขอแยกต่างหากสำหรับทรัพยากรที่อ้างอิง ในฐานะนักพัฒนาซอฟต์แวร์ คุณทราบทรัพยากรทั้งหมดที่หน้าเว็บต้องการและทรัพยากรเหล่านี้สำคัญที่สุดแล้ว คุณสามารถใช้ความรู้นี้เพื่อขอทรัพยากรที่สำคัญล่วงหน้าและเร่งกระบวนการโหลดได้ โพสต์นี้อธิบายวิธีบรรลุเป้าหมายดังกล่าวด้วย <link rel="preload">

วิธีการทำงานของการโหลดล่วงหน้า

การโหลดล่วงหน้าเหมาะสมที่สุดสำหรับแหล่งข้อมูลที่เบราว์เซอร์มักค้นพบในภายหลัง

ภาพหน้าจอของแผง Chrome DevTools Network
ในตัวอย่างนี้ แบบอักษร Pacifico ได้รับการกำหนดในสไตล์ชีตด้วยกฎ @font-face เบราว์เซอร์จะโหลดไฟล์แบบอักษรหลังจากดาวน์โหลดและแยกวิเคราะห์สไตล์ชีตเสร็จแล้วเท่านั้น

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

ภาพหน้าจอของแผง Chrome DevTools Network หลังจากใช้การโหลดล่วงหน้า
ในตัวอย่างนี้ แบบอักษร Pacifico จะโหลดล่วงหน้า ดังนั้นการดาวน์โหลดจะเกิดขึ้นพร้อมกับสไตล์ชีต

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

การตรวจสอบคำขอคีย์การโหลดล่วงหน้าของ Lighthouse

คุณโหลดทรัพยากรล่วงหน้าได้โดยเพิ่มแท็ก <link> ที่มี rel="preload" ลงในส่วนหัวของเอกสาร HTML ดังนี้

<link rel="preload" as="script" href="critical.js">

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

คำแนะนำเกี่ยวกับทรัพยากร เช่น preconnect และ prefetch จะทำงานตามเบราว์เซอร์ที่เห็นว่าเหมาะสม ในทางกลับกัน preload เป็นสิ่งจำเป็นสำหรับเบราว์เซอร์ เบราว์เซอร์ที่ทันสมัยจัดลำดับความสำคัญของทรัพยากรได้เป็นอย่างดี เราจึงควรใช้ preload อย่างจำกัดและโหลดเฉพาะทรัพยากรที่สำคัญที่สุดเท่านั้น

การโหลดล่วงหน้าที่ไม่ได้ใช้จะทริกเกอร์คำเตือน Console ใน Chrome ประมาณ 3 วินาทีหลังจากเหตุการณ์ load

คำเตือนในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เกี่ยวกับทรัพยากรที่โหลดล่วงหน้าซึ่งไม่มีการใช้งาน

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 เพื่อจัดการวิธีโหลดแบบอักษร ลองพิจารณากลยุทธ์ต่อไปนี้เพื่อลดการเปลี่ยนแปลงของเลย์เอาต์ที่เกี่ยวข้องกับแบบอักษรของเว็บ

  1. โหลดแบบอักษรล่วงหน้าขณะใช้ค่า block ตามค่าเริ่มต้นสำหรับ font-display ยอดคงเหลือเป็นเรื่องละเอียดอ่อน การบล็อกการแสดงแบบอักษรโดยไม่มีการตั้งค่าสำรองอาจถือเป็นปัญหาด้านประสบการณ์ของผู้ใช้ ในแง่หนึ่ง การโหลดแบบอักษรด้วย font-display: block; จะช่วยลดการเปลี่ยนเลย์เอาต์ที่เกี่ยวข้องกับแบบอักษรสำหรับเว็บ ในทางกลับกัน คุณยังคงต้องการให้แบบอักษรเว็บเหล่านั้นโหลดโดยเร็วที่สุดหากแบบอักษรนั้นสำคัญต่อประสบการณ์ของผู้ใช้ การรวมการโหลดล่วงหน้ากับ font-display: block; อาจยอมรับได้
  2. โหลดแบบอักษรล่วงหน้าขณะใช้ค่า fallback สำหรับ font-display fallback อยู่ระหว่าง swap ถึง block โดยมีระยะเวลาการบล็อกที่สั้นมาก
  3. ใช้ค่า optional สำหรับ font-display โดยไม่ต้องโหลดล่วงหน้า หากแบบอักษรเว็บไม่สำคัญต่อประสบการณ์ของผู้ใช้ แต่ยังคงใช้เพื่อแสดงข้อความในหน้าเว็บจำนวนมาก ให้พิจารณาใช้ค่า optional ในสถานการณ์ที่ไม่เอื้ออำนวย optional จะแสดงข้อความในหน้าเว็บเป็นแบบอักษรสำรองขณะที่โหลดแบบอักษรในพื้นหลังสำหรับการนำทางถัดไป ผลลัพธ์สุทธิในเงื่อนไขเหล่านี้จะมีการปรับปรุง CLS เนื่องจากแบบอักษรของระบบจะแสดงผลทันที ขณะที่การโหลดหน้าเว็บที่ตามมาจะโหลดแบบอักษรทันทีโดยไม่มีการเปลี่ยนเลย์เอาต์

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

การโต้ตอบกับ Next Paint (INP)

การโต้ตอบกับ Next Paint เป็นเมตริกที่วัดการตอบสนองต่อข้อมูลจากผู้ใช้ เนื่องจากส่วนแบ่งการโต้ตอบของสิงโตบนเว็บนั้นขับเคลื่อนด้วย JavaScript การโหลด JavaScript ล่วงหน้าที่ขับเคลื่อนการโต้ตอบที่สำคัญอาจช่วยรักษา INP ของหน้าเว็บให้ต่ำลง อย่างไรก็ตาม โปรดทราบว่าการโหลด JavaScript ล่วงหน้ามากเกินไปในช่วงเริ่มต้นอาจส่งผลกระทบเชิงลบโดยไม่เจตนาหากมีทรัพยากรมากเกินไปในการแย่งแบนด์วิดท์

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

บทสรุป

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