เรียนรู้วิธีใช้ Resource Hints เช่น preload, prefetch และ preconnect เพื่อเพิ่มประสิทธิภาพเวลาในการโหลดเว็บไซต์และปรับปรุงประสบการณ์ผู้ใช้ทั่วโลก
เพิ่มความเร็วเว็บไซต์ด้วย Resource Hints: Preload, Prefetch และ Preconnect
ในโลกดิจิทัลที่เปลี่ยนแปลงอย่างรวดเร็วในปัจจุบัน ความเร็วของเว็บไซต์เป็นสิ่งสำคัญอย่างยิ่ง ผู้ใช้คาดหวังให้เว็บไซต์โหลดเร็วและตอบสนองทันที เวลาในการโหลดที่ช้าอาจนำไปสู่ประสบการณ์ผู้ใช้ที่ไม่ดี อัตราตีกลับที่สูงขึ้น และท้ายที่สุดคือการสูญเสียโอกาสทางธุรกิจ Resource hints เป็นเครื่องมือที่มีประสิทธิภาพที่ช่วยให้นักพัฒนาสามารถปรับปรุงเวลาในการโหลดเว็บไซต์โดยการบอกเบราว์เซอร์ว่าทรัพยากรใดมีความสำคัญและควรจัดลำดับความสำคัญอย่างไร บทความนี้จะสำรวจ resource hints ที่สำคัญสามอย่าง ได้แก่ preload, prefetch และ preconnect พร้อมทั้งให้ตัวอย่างการใช้งานจริง
ทำความเข้าใจเกี่ยวกับ Resource Hints
Resource hints คือคำสั่งที่บอกเบราว์เซอร์เกี่ยวกับทรัพยากรที่หน้าเว็บจะต้องใช้ในอนาคต ช่วยให้นักพัฒนาสามารถแจ้งเบราว์เซอร์ล่วงหน้าเกี่ยวกับทรัพยากรที่สำคัญ ทำให้เบราว์เซอร์สามารถดึงข้อมูลหรือเชื่อมต่อกับทรัพยากรเหล่านั้นได้เร็วกว่าปกติ ซึ่งสามารถลดเวลาในการโหลดได้อย่างมากและปรับปรุงประสิทธิภาพที่ผู้ใช้รับรู้ได้
Resource hints หลักสามอย่างคือ:
- Preload: ดึงทรัพยากรที่สำคัญที่จำเป็นสำหรับการโหลดหน้าเว็บครั้งแรก
- Prefetch: ดึงทรัพยากรที่น่าจะจำเป็นสำหรับการนำทางหรือการโต้ตอบในอนาคต
- Preconnect: สร้างการเชื่อมต่อล่วงหน้าไปยังเซิร์ฟเวอร์ของบุคคลที่สามที่สำคัญ
Preload: การจัดลำดับความสำคัญของทรัพยากรที่สำคัญ
Preload คืออะไร?
Preload เป็นการดึงข้อมูลแบบประกาศ (declarative fetch) ที่ช่วยให้คุณสามารถบอกเบราว์เซอร์ให้ดึงทรัพยากรที่จำเป็นสำหรับการนำทางปัจจุบันให้เร็วที่สุดเท่าที่จะเป็นไปได้ สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับทรัพยากรที่เบราว์เซอร์ค้นพบช้า เช่น รูปภาพ, ฟอนต์, สคริปต์ หรือสไตล์ชีตที่โหลดผ่าน CSS หรือ JavaScript การโหลดทรัพยากรเหล่านี้ล่วงหน้าจะช่วยป้องกันไม่ให้มันกลายเป็นตัวบล็อกการเรนเดอร์ (render-blocking) และปรับปรุงความเร็วในการโหลดที่ผู้ใช้รับรู้ได้
เมื่อใดที่ควรใช้ Preload
ใช้ preload สำหรับ:
- ฟอนต์ (Fonts): การโหลดฟอนต์ที่กำหนดเองล่วงหน้าสามารถป้องกันการเกิด flash of unstyled text (FOUT) หรือ flash of invisible text (FOIT) ได้
- รูปภาพ (Images): การจัดลำดับความสำคัญของรูปภาพที่อยู่ส่วนบนของหน้า (above-the-fold) ช่วยให้มั่นใจว่ารูปภาพจะโหลดอย่างรวดเร็ว ซึ่งช่วยเพิ่มประสบการณ์ผู้ใช้ในช่วงแรก
- สคริปต์และสไตล์ชีต (Scripts and Stylesheets): การโหลดไฟล์ CSS หรือ JavaScript ที่สำคัญล่วงหน้าจะช่วยป้องกันการบล็อกการเรนเดอร์
- โมดูลและ Web Workers (Modules and Web Workers): การโหลดโมดูลหรือ web workers ล่วงหน้าสามารถปรับปรุงการตอบสนองของแอปพลิเคชันของคุณได้
วิธีใช้งาน Preload
คุณสามารถใช้งาน preload โดยใช้แท็ก <link> ในส่วน <head> ของเอกสาร HTML ของคุณ:
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/styles/critical.css" as="style">
<link rel="preload" href="/scripts/app.js" as="script">
<link rel="preload" href="/images/hero.jpg" as="image">
คำอธิบาย:
rel="preload": ระบุว่าเบราว์เซอร์ควรโหลดทรัพยากรล่วงหน้าhref="/path/to/resource": URL ของทรัพยากรที่จะโหลดล่วงหน้าas="type": ระบุประเภทของทรัพยากรที่กำลังโหลดล่วงหน้า (เช่น font, style, script, image) คุณสมบัติ `as` เป็นสิ่งจำเป็นและสำคัญอย่างยิ่งเพื่อให้เบราว์เซอร์จัดลำดับความสำคัญและจัดการทรัพยากรได้อย่างถูกต้อง การใช้ค่า `as` ที่ถูกต้องจะช่วยให้เบราว์เซอร์ใช้ Content Security Policy (CSP) ที่ถูกต้องและส่งส่วนหัวAcceptที่ถูกต้องtype="mime/type": (ไม่บังคับแต่แนะนำ) ระบุ MIME type ของทรัพยากร ซึ่งช่วยให้เบราว์เซอร์เลือกรูปแบบทรัพยากรที่ถูกต้อง โดยเฉพาะสำหรับฟอนต์crossorigin="anonymous": (จำเป็นสำหรับฟอนต์ที่โหลดจาก origin อื่น) ระบุโหมด CORS สำหรับการร้องขอ หากคุณกำลังโหลดฟอนต์จาก CDN คุณอาจจะต้องใช้คุณสมบัตินี้
ตัวอย่าง: การโหลดฟอนต์ล่วงหน้า
สมมติว่าคุณมีฟอนต์ที่กำหนดเองชื่อ 'OpenSans' ที่ใช้ในเว็บไซต์ของคุณ หากไม่มี preload เบราว์เซอร์จะค้นพบฟอนต์นี้หลังจากที่แยกวิเคราะห์ไฟล์ CSS แล้วเท่านั้น ซึ่งอาจทำให้การแสดงผลข้อความด้วยฟอนต์ที่ถูกต้องล่าช้า การโหลดฟอนต์ล่วงหน้าจะช่วยขจัดความล่าช้านี้ได้
<link rel="preload" href="/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
ตัวอย่าง: การโหลดไฟล์ CSS ที่สำคัญล่วงหน้า
หากเว็บไซต์ของคุณมีไฟล์ CSS ที่สำคัญซึ่งจำเป็นต่อการแสดงผลในมุมมองเริ่มต้น การโหลดไฟล์นี้ล่วงหน้าสามารถปรับปรุงประสิทธิภาพที่รับรู้ได้อย่างมาก
<link rel="preload" href="/styles/critical.css" as="style">
แนวทางปฏิบัติที่ดีที่สุดสำหรับ Preload
- จัดลำดับความสำคัญของทรัพยากรที่สำคัญ: โหลดล่วงหน้าเฉพาะทรัพยากรที่จำเป็นสำหรับการโหลดหน้าเว็บครั้งแรกเท่านั้น การใช้ preload มากเกินไปอาจส่งผลเสียต่อประสิทธิภาพ
- ใช้คุณสมบัติ
asที่ถูกต้อง: ระบุคุณสมบัติasที่ถูกต้องเสมอเพื่อให้แน่ใจว่าเบราว์เซอร์จัดการทรัพยากรอย่างถูกต้อง - ใส่คุณสมบัติ
type: ใส่คุณสมบัติtypeเพื่อช่วยให้เบราว์เซอร์เลือกรูปแบบทรัพยากรที่ถูกต้อง - ใช้
crossoriginสำหรับฟอนต์ข้าม Origin: เมื่อโหลดฟอนต์จาก origin อื่น ต้องแน่ใจว่าได้ใส่คุณสมบัติcrossorigin - ทดสอบประสิทธิภาพ: ทดสอบผลกระทบด้านประสิทธิภาพของ preload เสมอเพื่อให้แน่ใจว่ามันช่วยปรับปรุงเวลาในการโหลดได้จริง ใช้เครื่องมืออย่าง Google PageSpeed Insights หรือ WebPageTest เพื่อวัดผลกระทบ
Prefetch: การคาดการณ์ความต้องการในอนาคต
Prefetch คืออะไร?
Prefetch เป็น resource hint ที่บอกให้เบราว์เซอร์ดึงทรัพยากรที่น่าจะจำเป็นสำหรับการนำทางหรือการโต้ตอบในอนาคต ซึ่งแตกต่างจาก preload ที่มุ่งเน้นทรัพยากรที่จำเป็นสำหรับหน้าปัจจุบัน prefetch จะคาดการณ์การกระทำต่อไปของผู้ใช้ สิ่งนี้มีประโยชน์อย่างยิ่งในการปรับปรุงความเร็วในการโหลดของหน้าเว็บหรือส่วนประกอบที่จะตามมา
เมื่อใดที่ควรใช้ Prefetch
ใช้ prefetch สำหรับ:
- ทรัพยากรของหน้าถัดไป: หากคุณรู้ว่าผู้ใช้น่าจะไปที่หน้าใดหน้าหนึ่งถัดไป ให้ prefetch ทรัพยากรของหน้านั้น
- ทรัพยากรสำหรับการโต้ตอบของผู้ใช้: หากการโต้ตอบของผู้ใช้ทำให้ต้องโหลดทรัพยากรบางอย่าง (เช่น หน้าต่าง modal, ฟอร์ม) ให้ prefetch ทรัพยากรเหล่านั้น
- รูปภาพและเนื้อหาในหน้าอื่น ๆ: โหลดรูปภาพหรือเนื้อหาที่ใช้ในหน้าอื่น ๆ ที่ผู้ใช้น่าจะเข้าชมล่วงหน้า
วิธีใช้งาน Prefetch
คุณสามารถใช้งาน prefetch โดยใช้แท็ก <link> ในส่วน <head> ของเอกสาร HTML ของคุณ:
<link rel="prefetch" href="/page2.html">
<link rel="prefetch" href="/images/product.jpg">
<link rel="prefetch" href="/scripts/modal.js">
คำอธิบาย:
rel="prefetch": ระบุว่าเบราว์เซอร์ควรดึงทรัพยากรล่วงหน้า (prefetch)href="/path/to/resource": URL ของทรัพยากรที่จะดึงล่วงหน้า
ตัวอย่าง: การดึงทรัพยากรของหน้าถัดไปล่วงหน้า
หากเว็บไซต์ของคุณมีขั้นตอนการใช้งานที่ชัดเจน เช่น ฟอร์มหลายขั้นตอน คุณสามารถดึงทรัพยากรสำหรับขั้นตอนถัดไปล่วงหน้าในขณะที่ผู้ใช้อยู่ในขั้นตอนปัจจุบันได้
<link rel="prefetch" href="/form/step2.html">
ตัวอย่าง: การดึงทรัพยากรสำหรับหน้าต่าง modal ล่วงหน้า
หากเว็บไซต์ของคุณใช้หน้าต่าง modal ที่ต้องโหลดทรัพยากรเพิ่มเติมเมื่อเปิด คุณสามารถดึงทรัพยากรเหล่านั้นล่วงหน้าเพื่อให้แน่ใจว่าผู้ใช้จะได้รับประสบการณ์ที่ราบรื่น
<link rel="prefetch" href="/scripts/modal.js">
<link rel="prefetch" href="/styles/modal.css">
แนวทางปฏิบัติที่ดีที่สุดสำหรับ Prefetch
- ใช้อย่างจำกัด: ควรใช้ Prefetch อย่างประหยัด เนื่องจากอาจใช้แบนด์วิดท์และทรัพยากรแม้ว่าผู้ใช้จะไม่ต้องการทรัพยากรที่ดึงมาล่วงหน้า
- จัดลำดับความสำคัญของการนำทางที่เป็นไปได้: ดึงทรัพยากรล่วงหน้าสำหรับหน้าเว็บหรือการโต้ตอบที่มีแนวโน้มว่าจะเกิดขึ้นมากที่สุด
- พิจารณาสภาพเครือข่าย: Prefetch เหมาะที่สุดสำหรับผู้ใช้ที่มีการเชื่อมต่ออินเทอร์เน็ตที่เสถียรและรวดเร็ว หลีกเลี่ยงการดึงทรัพยากรขนาดใหญ่ล่วงหน้าสำหรับผู้ใช้ที่ใช้การเชื่อมต่อที่ช้าหรือมีการคิดค่าบริการตามปริมาณข้อมูล คุณสามารถใช้ Network Information API เพื่อตรวจจับประเภทการเชื่อมต่อของผู้ใช้และปรับการ prefetch ให้เหมาะสม
- ตรวจสอบประสิทธิภาพ: ตรวจสอบผลกระทบของ prefetch ต่อประสิทธิภาพของเว็บไซต์ของคุณเพื่อให้แน่ใจว่าให้ประโยชน์สุทธิ
- ใช้การ Prefetch แบบไดนามิก: ใช้การ prefetch แบบไดนามิกตามพฤติกรรมของผู้ใช้และข้อมูลการวิเคราะห์ ตัวอย่างเช่น ดึงทรัพยากรล่วงหน้าสำหรับหน้าที่ผู้ใช้ที่อยู่ในหน้าปัจจุบันมักจะเข้าชมบ่อย
Preconnect: การสร้างการเชื่อมต่อล่วงหน้า
Preconnect คืออะไร?
Preconnect เป็น resource hint ที่ช่วยให้คุณสามารถสร้างการเชื่อมต่อล่วงหน้าไปยังเซิร์ฟเวอร์ของบุคคลที่สามที่สำคัญได้ การสร้างการเชื่อมต่อประกอบด้วยหลายขั้นตอน รวมถึงการค้นหา DNS (DNS lookup), การจับมือ TCP (TCP handshake) และการเจรจา TLS (TLS negotiation) ขั้นตอนเหล่านี้สามารถเพิ่มความหน่วงแฝง (latency) อย่างมากในการโหลดทรัพยากรจากเซิร์ฟเวอร์เหล่านั้น Preconnect ช่วยให้คุณสามารถเริ่มต้นขั้นตอนเหล่านี้ในเบื้องหลัง เพื่อที่ว่าเมื่อเบราว์เซอร์ต้องการดึงทรัพยากรจากเซิร์ฟเวอร์ การเชื่อมต่อจะถูกสร้างไว้แล้ว
เมื่อใดที่ควรใช้ Preconnect
ใช้ preconnect สำหรับ:
- เซิร์ฟเวอร์ของบุคคลที่สาม: เซิร์ฟเวอร์ที่โฮสต์ฟอนต์, CDNs, APIs หรือทรัพยากรอื่น ๆ ที่เว็บไซต์ของคุณต้องพึ่งพา
- เซิร์ฟเวอร์ที่ใช้บ่อย: เซิร์ฟเวอร์ที่เว็บไซต์ของคุณเข้าถึงบ่อยครั้ง
วิธีใช้งาน Preconnect
คุณสามารถใช้งาน preconnect โดยใช้แท็ก <link> ในส่วน <head> ของเอกสาร HTML ของคุณ:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">
คำอธิบาย:
rel="preconnect": ระบุว่าเบราว์เซอร์ควรเชื่อมต่อล่วงหน้าไปยังเซิร์ฟเวอร์href="https://example.com": URL ของเซิร์ฟเวอร์ที่จะเชื่อมต่อล่วงหน้าcrossorigin: (ไม่บังคับ แต่จำเป็นสำหรับทรัพยากรที่โหลดด้วย CORS) ระบุว่าการเชื่อมต่อต้องการ CORS
ตัวอย่าง: การเชื่อมต่อล่วงหน้าไปยัง Google Fonts
หากเว็บไซต์ของคุณใช้ Google Fonts การเชื่อมต่อล่วงหน้าไปยัง https://fonts.gstatic.com สามารถลดความหน่วงแฝงของการโหลดฟอนต์ได้อย่างมาก
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
คุณสมบัติ `crossorigin` มีความสำคัญอย่างยิ่งในที่นี้ เนื่องจาก Google Fonts ใช้ CORS ในการให้บริการฟอนต์
ตัวอย่าง: การเชื่อมต่อล่วงหน้าไปยัง CDN
หากเว็บไซต์ของคุณใช้ CDN เพื่อให้บริการเนื้อหาคงที่ (static assets) การเชื่อมต่อล่วงหน้าไปยังชื่อโฮสต์ของ CDN สามารถลดความหน่วงแฝงในการโหลดเนื้อหาเหล่านั้นได้
<link rel="preconnect" href="https://cdn.example.com">
แนวทางปฏิบัติที่ดีที่สุดสำหรับ Preconnect
- ใช้อย่างรอบคอบ: การเชื่อมต่อล่วงหน้าไปยังเซิร์ฟเวอร์มากเกินไปอาจทำให้ประสิทธิภาพลดลงได้ เนื่องจากเบราว์เซอร์มีทรัพยากรจำกัดในการสร้างการเชื่อมต่อ
- จัดลำดับความสำคัญของเซิร์ฟเวอร์ที่สำคัญ: เชื่อมต่อล่วงหน้าไปยังเซิร์ฟเวอร์ที่มีความสำคัญต่อประสิทธิภาพของเว็บไซต์ของคุณมากที่สุด
- พิจารณา DNS-Prefetch: สำหรับเซิร์ฟเวอร์ที่คุณไม่จำเป็นต้องทำการ preconnect แบบเต็มรูปแบบ แต่ยังต้องการแก้ไข DNS ล่วงหน้า ให้พิจารณาใช้
<link rel="dns-prefetch" href="https://example.com">การทำ DNS-prefetch จะทำการค้นหา DNS เท่านั้น ซึ่งใช้ทรัพยากรน้อยกว่าการทำ preconnect แบบเต็มรูปแบบ - ทดสอบประสิทธิภาพ: ทดสอบผลกระทบด้านประสิทธิภาพของ preconnect เสมอเพื่อให้แน่ใจว่าให้ประโยชน์สุทธิ
- ใช้ร่วมกับ Resource Hints อื่น ๆ: ใช้ preconnect ร่วมกับ preload และ prefetch เพื่อให้ได้ประสิทธิภาพสูงสุด ตัวอย่างเช่น เชื่อมต่อล่วงหน้าไปยังเซิร์ฟเวอร์ที่โฮสต์ฟอนต์ของคุณ แล้วจึงโหลดไฟล์ฟอนต์ล่วงหน้า (preload)
การใช้ Resource Hints ร่วมกันเพื่อประสิทธิภาพสูงสุด
พลังที่แท้จริงของ resource hints อยู่ที่การนำมาใช้ร่วมกันอย่างมีกลยุทธ์ นี่คือตัวอย่างการใช้งานจริง:
สมมติว่าเว็บไซต์หนึ่งใช้ฟอนต์ที่กำหนดเองซึ่งโฮสต์อยู่บน CDN และโหลดไฟล์ JavaScript ที่สำคัญ
- เชื่อมต่อล่วงหน้าไปยัง CDN: สร้างการเชื่อมต่อล่วงหน้าไปยัง CDN ที่โฮสต์ฟอนต์และไฟล์ JavaScript.
<link rel="preconnect" href="https://cdn.example.com" crossorigin> - โหลดฟอนต์ล่วงหน้า: จัดลำดับความสำคัญในการโหลดฟอนต์เพื่อป้องกัน FOUT.
<link rel="preload" href="https://cdn.example.com/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> - โหลดไฟล์ JavaScript ล่วงหน้า: จัดลำดับความสำคัญในการโหลดไฟล์ JavaScript เพื่อให้แน่ใจว่าพร้อมใช้งานเมื่อต้องการ.
<link rel="preload" href="https://cdn.example.com/scripts/app.js" as="script">
เครื่องมือสำหรับวิเคราะห์ Resource Hints
มีเครื่องมือหลายอย่างที่สามารถช่วยคุณวิเคราะห์ประสิทธิภาพของ resource hints ของคุณได้:
- Google PageSpeed Insights: ให้คำแนะนำในการปรับปรุงประสิทธิภาพเว็บไซต์ของคุณ รวมถึงการใช้ resource hints
- WebPageTest: ช่วยให้คุณทดสอบประสิทธิภาพเว็บไซต์ของคุณจากสถานที่และสภาพเครือข่ายที่แตกต่างกัน
- Chrome DevTools: แผง Network ใน Chrome DevTools จะแสดงเวลาในการโหลดทรัพยากรและสามารถช่วยคุณระบุโอกาสในการปรับปรุงประสิทธิภาพได้
- Lighthouse: เครื่องมืออัตโนมัติสำหรับปรับปรุงคุณภาพของหน้าเว็บ มีการตรวจสอบประสิทธิภาพ การเข้าถึง Progressive Web Apps, SEO และอื่น ๆ
ข้อผิดพลาดที่พบบ่อยและวิธีหลีกเลี่ยง
- การใช้ Resource Hints มากเกินไป: การใช้ resource hints มากเกินไปอาจส่งผลเสียต่อประสิทธิภาพ ควรเน้นที่ทรัพยากรที่สำคัญที่สุด
- คุณสมบัติ
asไม่ถูกต้อง: การใช้คุณสมบัติasที่ไม่ถูกต้องสำหรับ preload อาจทำให้ทรัพยากรไม่สามารถโหลดได้อย่างถูกต้อง - การละเลย CORS: การไม่ใส่คุณสมบัติ
crossoriginเมื่อโหลดทรัพยากรจาก origin อื่นอาจทำให้เกิดข้อผิดพลาดในการโหลด - ไม่ทดสอบประสิทธิภาพ: ทดสอบผลกระทบด้านประสิทธิภาพของ resource hints เสมอเพื่อให้แน่ใจว่าให้ประโยชน์สุทธิ
- เส้นทางไม่ถูกต้อง: ตรวจสอบและให้แน่ใจว่าเส้นทางไฟล์และ URL ทั้งหมดที่ระบุสำหรับ resource hints นั้นถูกต้อง มิฉะนั้นจะส่งผลให้เกิดข้อผิดพลาด
อนาคตของ Resource Hints
Resource hints มีการพัฒนาอย่างต่อเนื่อง โดยมีการเพิ่มคุณสมบัติและการปรับปรุงใหม่ ๆ เข้าไปในข้อกำหนดของเบราว์เซอร์ การติดตามการพัฒนาล่าสุดใน resource hints จะช่วยให้คุณสามารถปรับปรุงประสิทธิภาพเว็บไซต์ของคุณได้ดียิ่งขึ้น ตัวอย่างเช่น modulepreload เป็น resource hint ที่ใหม่กว่าซึ่งออกแบบมาโดยเฉพาะสำหรับการโหลดโมดูล JavaScript ล่วงหน้า นอกจากนี้ คุณสมบัติ `priority` สำหรับ resource hints ยังช่วยให้คุณสามารถระบุลำดับความสำคัญของทรัพยากรเมื่อเทียบกับทรัพยากรอื่น ๆ ได้ การรองรับคุณสมบัติเหล่านี้ของเบราว์เซอร์ยังคงมีการพัฒนาอยู่ ดังนั้นควรตรวจสอบความเข้ากันได้ก่อนนำไปใช้งาน
สรุป
Resource hints เป็นเครื่องมือที่มีประสิทธิภาพในการปรับปรุงเวลาในการโหลดเว็บไซต์และปรับปรุงประสบการณ์ผู้ใช้ ด้วยการใช้ preload, prefetch และ preconnect อย่างมีกลยุทธ์ คุณสามารถแจ้งเบราว์เซอร์ล่วงหน้าเกี่ยวกับทรัพยากรที่สำคัญ ลดความหน่วงแฝง และเพิ่มประสิทธิภาพที่รับรู้ได้ของเว็บไซต์ของคุณ อย่าลืมจัดลำดับความสำคัญของทรัพยากรที่สำคัญ ใช้ resource hints อย่างรอบคอบ และทดสอบผลกระทบด้านประสิทธิภาพของการเปลี่ยนแปลงของคุณเสมอ โดยการปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดที่ระบุไว้ในบทความนี้ คุณจะสามารถปรับปรุงประสิทธิภาพของเว็บไซต์ของคุณได้อย่างมากและมอบประสบการณ์ที่ดีขึ้นให้กับผู้ใช้ทั่วโลก