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