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

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

คำแนะนำเกี่ยวกับแหล่งข้อมูลจะช่วยให้นักพัฒนาแอปเพิ่มประสิทธิภาพเวลาในการโหลดหน้าเว็บได้มากขึ้นอีกด้วย วิธีโหลดและจัดลำดับความสำคัญของทรัพยากร ชุดทรัพยากรเริ่มต้น คำใบ้ เช่น preconnect และ dns-prefetch เป็นคำแรกที่แนะนำ แต่เมื่อเวลาผ่านไป preload และ Fetch Priority API ได้ดำเนินการตาม จะให้ความสามารถเพิ่มเติม

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

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

preconnect

คำแนะนำ preconnect ใช้สำหรับสร้างการเชื่อมต่อกับต้นทางอื่นจาก ที่คุณกำลังดึงข้อมูล ทรัพยากรที่สำคัญ ตัวอย่างเช่น คุณอาจโฮสต์ รูปภาพหรือเนื้อหาใน CDN หรือแบบข้ามต้นทางอื่นๆ

<link rel="preconnect" href="https://example.com">

การใช้ preconnect คุณคาดว่าเบราว์เซอร์มีแผนที่จะเชื่อมต่อกับ เซิร์ฟเวอร์แบบข้ามต้นทางที่เฉพาะเจาะจงในอนาคตอันใกล้นี้ และเบราว์เซอร์ ควรเปิดการเชื่อมต่อดังกล่าวโดยเร็วที่สุด ก่อนจะรอ โปรแกรมแยกวิเคราะห์ HTML หรือตัวสแกนการโหลดล่วงหน้าเพื่อดำเนินการดังกล่าว

หากคุณมีทรัพยากรแบบข้ามต้นทางจำนวนมากในหน้าเว็บ ให้ใช้ preconnect สำหรับทรัพยากรที่มีความสำคัญต่อหน้าปัจจุบันมากที่สุด

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

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

ระบุลำดับความสำคัญสัมพัทธ์สำหรับ <link> <img> และ <script>
ระบุลำดับความสำคัญของการดาวน์โหลด HTML ของหน้าปัจจุบัน

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

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

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

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