ช่วยเหลือเบราว์เซอร์ด้วยคำแนะนำด้านแหล่งข้อมูล

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

เปิดการเชื่อมต่อกับเซิร์ฟเวอร์แบบข้ามต้นทาง ซึ่งรวมถึงการค้นหา DNS ตลอดจนการเชื่อมต่อและการเจรจา TLS ล่วงหน้าก่อนที่เบราว์เซอร์จะค้นพบเซิร์ฟเวอร์ดังกล่าว
ถูกต้องแล้ว!
ดำเนินการค้นหา DNS สำหรับเซิร์ฟเวอร์ข้ามต้นทางเท่านั้น
โปรดลองอีกครั้ง

API ลำดับความสำคัญในการดึงข้อมูลช่วยให้คุณทำอะไรได้บ้าง

ระบุลำดับความสำคัญในการดาวน์โหลด HTML ของหน้าเว็บปัจจุบัน
โปรดลองอีกครั้ง
ระบุลำดับความสำคัญแบบสัมพัทธ์สำหรับองค์ประกอบ <link>, <img> และ <script>
ถูกต้องแล้ว!

คุณควรใช้คำแนะนำ prefetch เมื่อใด

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

ถัดไป: ประสิทธิภาพของรูปภาพ

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