ในโมดูลสุดท้ายเกี่ยวกับการเพิ่มประสิทธิภาพการโหลดทรัพยากร คุณได้เรียนรู้ว่าทรัพยากรต่างๆ ของหน้าเว็บ เช่น CSS และ JavaScript ส่งผลต่อความเร็วในการโหลดหน้าเว็บอย่างไร รวมถึงวิธีการเพิ่มประสิทธิภาพของทรัพยากรและการนำส่งเพื่อเพิ่มความเร็วในการแสดงผลหน้าเว็บ นี่เป็นเวลาที่เหมาะที่สุดในการโหลดทรัพยากรขั้นสูง และเกี่ยวข้องกับการช่วยให้เบราว์เซอร์โหลดได้เร็วขึ้นโดยใช้คำแนะนำด้านทรัพยากร
คำแนะนำด้านแหล่งข้อมูลสามารถช่วยให้นักพัฒนาซอฟต์แวร์เพิ่มประสิทธิภาพเวลาในการโหลดหน้าเว็บได้มากขึ้น โดยการแจ้งวิธีโหลดและจัดลำดับความสำคัญของทรัพยากรแก่เบราว์เซอร์ การแนะนำทรัพยากรชุดแรกอย่าง preconnect
และ dns-prefetch
เป็นข้อมูลกลุ่มแรกที่ได้รับการแนะนำ
อย่างไรก็ตาม เมื่อเวลาผ่านไป preload
และ API ลำดับความสำคัญของการดึงข้อมูลได้ติดตามเพื่อมอบความสามารถเพิ่มเติม
คำแนะนำด้านทรัพยากรจะสั่งให้เบราว์เซอร์ดำเนินการบางอย่างล่วงหน้าซึ่งจะช่วยปรับปรุงประสิทธิภาพการโหลดได้ คำแนะนำทรัพยากรสามารถดำเนินการต่างๆ เช่น การค้นหา DNS ในช่วงแรก การเชื่อมต่อเซิร์ฟเวอร์ล่วงหน้า และแม้กระทั่งการดึงทรัพยากรก่อนที่เบราว์เซอร์จะค้นพบตามปกติ
คำแนะนำด้านทรัพยากรอาจระบุในรูปแบบ HTML ซึ่งส่วนใหญ่แล้วจะเกิดขึ้นในช่วงต้นขององค์ประกอบ <head>
หรือตั้งเป็นส่วนหัว HTTP สำหรับขอบเขตของโมดูลนี้ เราจะครอบคลุม preconnect
, dns-prefetch
และ preload
รวมถึงลักษณะการดึงข้อมูลแบบคาดเดาที่ prefetch
มีให้
preconnect
คำแนะนำ preconnect
ใช้เพื่อสร้างการเชื่อมต่อกับต้นทางอื่นจากจุดที่คุณดึงข้อมูลทรัพยากรที่สำคัญ เช่น คุณอาจโฮสต์รูปภาพหรือเนื้อหาบน CDN หรือแบบข้ามต้นทางอื่นๆ
<link rel="preconnect" href="https://example.com">
เมื่อใช้ preconnect
คุณคาดว่าเบราว์เซอร์วางแผนที่จะเชื่อมต่อกับเซิร์ฟเวอร์แบบข้ามต้นทางที่เฉพาะเจาะจงในอีกไม่ช้า และเบราว์เซอร์ควรเปิดการเชื่อมต่อดังกล่าวโดยเร็วที่สุดก่อนรอให้โปรแกรมแยกวิเคราะห์ HTML หรือตัวสแกนโหลดล่วงหน้าดำเนินการดังกล่าว
หากคุณมีทรัพยากรแบบข้ามต้นทางจำนวนมากในหน้าเว็บ ให้ใช้ preconnect
สำหรับทรัพยากรเหล่านั้นซึ่งสำคัญที่สุดสำหรับหน้าปัจจุบัน
![ภาพหน้าจอของเวลาการเชื่อมต่อสำหรับทรัพยากรในแผงเครือข่ายของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome การตั้งค่าการเชื่อมต่อประกอบไปด้วยช่วงพัก, การเจรจาพร็อกซี, การค้นหา DNS, การตั้งค่าการเชื่อมต่อ และการเจรจา TLS](https://web.dev/static/learn/performance/resource-hints/image/fig-1.png?authuser=6&hl=th)
preconnect
สามารถแบ่งเบาลงได้ด้วยการสร้างการเชื่อมต่อให้เร็วขึ้น ไม่ใช่ในช่วงเวลาที่ค้นพบทรัพยากรแบบข้ามต้นทาง
กรณีการใช้งานทั่วไปสำหรับ preconnect
คือ Google Fonts Google Fonts ขอแนะนำให้คุณ preconnect
ไปยังโดเมน https://fonts.googleapis.com
ที่แสดงผลการประกาศ @font-face
และไปยังโดเมน https://fonts.gstatic.com
ที่ให้บริการไฟล์แบบอักษร
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
แอตทริบิวต์ crossorigin
ใช้เพื่อบ่งชี้ว่าต้องดึงข้อมูลทรัพยากรหรือไม่โดยใช้การแชร์ทรัพยากรข้ามต้นทาง (CORS) เมื่อใช้คำแนะนำ preconnect
หากทรัพยากรที่ดาวน์โหลดจากต้นทางใช้ CORS เช่น ไฟล์แบบอักษร คุณจะต้องเพิ่มแอตทริบิวต์ crossorigin
ลงในคำแนะนำ preconnect
dns-prefetch
แม้ว่าการเปิดการเชื่อมต่อกับเซิร์ฟเวอร์แบบข้ามต้นทางแต่เนิ่นๆ จะช่วยปรับปรุงเวลาในการโหลดหน้าเว็บเริ่มต้นได้อย่างมาก แต่การสร้างการเชื่อมต่อกับเซิร์ฟเวอร์แบบข้ามต้นทางจำนวนมากพร้อมกันอาจทำได้ไม่สมเหตุสมผล หากกังวลว่าคุณอาจใช้ preconnect
มากเกินไป คำแนะนำเกี่ยวกับทรัพยากรที่มีต้นทุนต่ำกว่ามากคือคำแนะนำของ dns-prefetch
dns-prefetch
จะไม่สร้างการเชื่อมต่อกับเซิร์ฟเวอร์ข้ามต้นทาง แต่จะใช้ค้นหา DNS ล่วงหน้าก่อน การค้นหา DNS เกิดขึ้นเมื่อระบบแปลงชื่อโดเมนเป็นที่อยู่ IP ที่สำคัญ
แม้ว่าแคช DNS เลเยอร์ต่างๆ ในระดับอุปกรณ์และเครือข่ายจะช่วยให้ขั้นตอนนี้เป็นกระบวนการที่รวดเร็วโดยทั่วไป แต่ก็ยังต้องใช้เวลาพอสมควร
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
การค้นหา DNS มีราคาไม่แพงและเนื่องจากค่าใช้จ่ายค่อนข้างน้อย การค้นหา DNS จึงอาจเป็นเครื่องมือที่เหมาะสมมากกว่าในบางกรณี preconnect
กล่าวอย่างเจาะจงคือ ข้อมูลนี้อาจเป็นคำแนะนำด้านแหล่งข้อมูลที่ควรใช้ในกรณีของลิงก์ที่นำไปยังเว็บไซต์อื่นๆ ที่คุณคิดว่าผู้ใช้น่าจะติดตาม dnstradamus เป็นเครื่องมือที่ทำงานนี้โดยอัตโนมัติด้วย JavaScript และใช้ Intersection Observer API เพื่อใส่คำแนะนำ dns-prefetch
ลงใน HTML ของหน้าเว็บปัจจุบันเมื่อลิงก์ไปยังเว็บไซต์อื่นๆ มีการเลื่อนเข้าไปยังมุมมองของผู้ใช้
preload
คำสั่ง preload
ใช้เพื่อเริ่มคำขอล่วงหน้าสำหรับทรัพยากรที่จำเป็นต่อการแสดงผลหน้าเว็บ
<link rel="preload" href="/lcp-image.jpg" as="image">
คำสั่ง preload
ควรจำกัดไว้สำหรับทรัพยากรสำคัญที่ค้นพบล่าช้าเท่านั้น
กรณีการใช้งานที่พบบ่อยที่สุดคือไฟล์แบบอักษร ไฟล์ CSS ที่ดึงข้อมูลผ่านการประกาศ @import
หรือทรัพยากร CSS background-image
ที่มีแนวโน้มว่าจะเป็น Largest Contentful Paint (LCP) ในกรณีดังกล่าว เครื่องสแกนการโหลดล่วงหน้าจะไม่พบไฟล์เหล่านี้ เนื่องจากมีการอ้างอิงทรัพยากรในทรัพยากรภายนอก
เช่นเดียวกับ preconnect
คำสั่ง preload
ต้องใช้แอตทริบิวต์ crossorigin
หากคุณโหลดทรัพยากร CORS ล่วงหน้า เช่น แบบอักษร หากคุณไม่เพิ่มแอตทริบิวต์ crossorigin
หรือเพิ่มสำหรับคำขอที่ไม่ใช่ CORS เบราว์เซอร์จะดาวน์โหลดทรัพยากร 2 เท่า ทำให้สิ้นเปลืองแบนด์วิดท์ที่ควรจะนำไปใช้กับทรัพยากรอื่นๆ ได้ดีกว่า
<link rel="preload" href="/font.woff2" as="font" crossorigin>
ในข้อมูลโค้ด HTML ก่อนหน้านี้ เบราว์เซอร์จะได้รับคำแนะนำให้โหลด /font.woff2
ล่วงหน้าโดยใช้คำขอ CORS แม้ว่า /font.woff2
จะอยู่ในโดเมนเดียวกันก็ตาม
prefetch
คำสั่ง prefetch
ใช้เพื่อเริ่มต้นคำขอที่มีลำดับความสำคัญต่ำสำหรับทรัพยากรที่มีแนวโน้มว่าจะใช้สำหรับการนำทางในอนาคต ดังนี้
<link rel="prefetch" href="/next-page.css" as="style">
คำสั่งนี้ส่วนใหญ่ใช้รูปแบบเดียวกับคำสั่ง preload
แต่เฉพาะแอตทริบิวต์ rel
ขององค์ประกอบ <link>
ใช้ค่า "prefetch"
แทน
แต่ prefetch
ต่างจากคำสั่ง preload
ตรงที่โดยส่วนใหญ่แล้วคุณกำลังเริ่มการดึงข้อมูลสำหรับทรัพยากรสำหรับการไปยังส่วนต่างๆ ในอนาคตที่อาจเกิดขึ้นหรือไม่เกิดขึ้น
อาจมีบางครั้งที่ prefetch
มีประโยชน์ เช่น หากคุณระบุโฟลว์ผู้ใช้ในเว็บไซต์ซึ่งผู้ใช้ส่วนใหญ่ดำเนินการจนเสร็จสิ้น การใช้ prefetch
สำหรับทรัพยากรที่สำคัญในการแสดงผลสำหรับหน้าเว็บในอนาคตจะช่วยลดเวลาที่ใช้ในการโหลดให้ผู้ใช้ได้
ดึงข้อมูล API ลำดับความสำคัญ
คุณใช้ Fetch Priority API
ผ่านแอตทริบิวต์ fetchpriority
เพื่อเพิ่มลำดับความสำคัญของทรัพยากรได้ คุณใช้แอตทริบิวต์ร่วมกับองค์ประกอบ <link>
, <img>
และ <script>
ได้
<div class="gallery">
<div class="poster">
<img src="img/poster-1.jpg" fetchpriority="high">
</div>
<div class="thumbnails">
<img src="img/thumbnail-2.jpg" fetchpriority="low">
<img src="img/thumbnail-3.jpg" fetchpriority="low">
<img src="img/thumbnail-4.jpg" fetchpriority="low">
</div>
</div>
โดยค่าเริ่มต้น ระบบจะดึงข้อมูลรูปภาพที่มีลำดับความสำคัญต่ำกว่า หลังจากเลย์เอาต์ หากพบว่ารูปภาพอยู่ในวิวพอร์ตเริ่มต้น ลำดับความสำคัญจะเพิ่มเป็นลำดับความสำคัญสูง ในข้อมูลโค้ด HTML ก่อนหน้านี้ fetchpriority
จะบอกให้เบราว์เซอร์ดาวน์โหลดภาพ LCP ขนาดใหญ่ในลำดับความสำคัญสูง ส่วนภาพขนาดย่อที่สำคัญน้อยกว่าจะดาวน์โหลดโดยที่มีลำดับความสำคัญต่ำกว่า
เบราว์เซอร์ที่ทันสมัยโหลดทรัพยากรโดยแบ่งเป็น 2 ระยะ เฟสแรกจะสงวนไว้สำหรับทรัพยากรที่สำคัญและสิ้นสุดเมื่อดาวน์โหลดและเรียกใช้สคริปต์การบล็อกทั้งหมดแล้ว ในระยะนี้ การดาวน์โหลดทรัพยากรที่มีลำดับความสำคัญต่ำอาจล่าช้า การใช้ fetchpriority="high"
จะช่วยเพิ่มลำดับความสำคัญของทรัพยากร โดยเปิดให้เบราว์เซอร์ดาวน์โหลดในช่วงแรกได้
การสาธิตคำแนะนำแหล่งข้อมูล
ทดสอบความรู้ของคุณ
คำแนะนำเกี่ยวกับทรัพยากร preconnect
มีไว้เพื่ออะไร
API ลำดับความสำคัญในการดึงข้อมูลช่วยให้คุณทำอะไรได้บ้าง
<link>
, <img>
และ <script>
คุณควรใช้คำแนะนำ prefetch
เมื่อใด
ถัดไป: ประสิทธิภาพของรูปภาพ
ตอนนี้คุณน่าจะเริ่มมั่นใจเกี่ยวกับความรู้เรื่องการพิจารณาประสิทธิภาพโดยทั่วไปเกี่ยวกับ HTML ของหน้าเว็บ องค์ประกอบ <head>
และคำแนะนำแหล่งข้อมูลแล้ว อย่างไรก็ตาม มีการเพิ่มประสิทธิภาพเพิ่มเติมสำหรับทรัพยากรประเภทต่างๆ ที่หน้าเว็บมักจะโหลดอยู่เป็นประจำ ถัดไป เราจะกล่าวถึงประสิทธิภาพของรูปภาพในโมดูลถัดไป ซึ่งจะช่วยให้คุณโหลดรูปภาพของเว็บไซต์ได้เร็วที่สุดเท่าที่จะเป็นไปได้ ไม่ว่าผู้ใช้จะใช้อุปกรณ์ใด