เร่งความเร็วการโหลดทรัพยากรด้วยคำแนะนำลำดับความสำคัญและการดึงข้อมูล

ทรัพยากรที่สำคัญที่สุดของคุณโหลดเร็วแค่ไหน?

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

เมื่อพูดถึงการเพิ่มประสิทธิภาพการโหลดทรัพยากร คุณมีสองตัวเลือก:

1. ใช้กลไกของเบราว์เซอร์ในการดาวน์โหลดและดึงทรัพยากรตามลำดับที่เหมาะสมที่สุด
2. พยายามช่วยพวกเขาด้วยการใช้คำแนะนำทรัพยากร

น่าเสียดาย เช่นเดียวกับเบราว์เซอร์สมัยใหม่ แต่ละไซต์/แอปพลิเคชันต่างกันในการตั้งค่าและบริบท และแม้ว่าการจัดลำดับความสำคัญของทรัพยากรจะค่อนข้างดี แต่ในบางกรณีก็ไม่เพียงพอ

อนิจจา คำแนะนำทรัพยากรมีอิทธิพลจำกัดเหนือการจัดลำดับความสำคัญของทรัพยากร

โชคดีที่มีคำใบ้ใหม่ที่คุณสามารถเพิ่มลงในกล่องเครื่องมือประสิทธิภาพเว็บของคุณ – คำแนะนำลำดับความสำคัญ

และในบทความนี้ คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ:

• คำใบ้ลำดับความสำคัญคืออะไร;
• ควรใช้เมื่อใด
• วิธีใช้งานผ่าน fetchpriority
• วิธีที่คุณสามารถทดสอบได้บนเว็บไซต์ของคุณ

เอาล่ะ!

คำแนะนำลำดับความสำคัญคืออะไร?

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

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

แต่เบราว์เซอร์กำหนดว่าจะโหลดอะไรต่อไปอย่างไร

เบราว์เซอร์มีชุดของลำดับความสำคัญที่กำหนดไว้ล่วงหน้าสำหรับทรัพยากรแต่ละประเภท:

ลำดับความสำคัญเริ่มต้นเหล่านี้มักจะทำงานได้ดี ซึ่งส่งผลให้ประสิทธิภาพของเว็บดี

อย่างไรก็ตาม ตามที่ Addy Osmani กล่าวถึงในบทความของเขาเกี่ยวกับ Priority Hins เบราว์เซอร์สามารถคาดเดาได้ดีทีเดียวว่าควรดึงข้อมูลอะไรต่อไป

แต่พวกเขาไม่รู้จักโครงการของคุณเช่นเดียวกับคุณ

ดังนั้นอาจจำเป็นต้องมีการปรับแต่งเล็กน้อย:

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

ก่อนหน้านี้ สิ่งเดียวที่คุณจะทำได้คือใช้โหลดล่วงหน้าหรือเชื่อมต่อล่วงหน้า

และถึงแม้ว่าการ โหลดล่วงหน้า เป็นคำสั่งบังคับที่เบราว์เซอร์จำเป็นต้องปฏิบัติตาม ในบางกรณี ทรัพยากรที่โหลดล่วงหน้ายังคงได้รับลำดับความสำคัญต่ำ

ตัวอย่างเช่น รูปภาพ Largest Contentful Paint (LCP) ที่โหลดไว้ล่วงหน้าอาจได้รับลำดับความสำคัญต่ำและถูกผลักกลับโดยทรัพยากรที่มีลำดับความสำคัญสูงอื่นๆ ในกรณีดังกล่าว Priority Hints สามารถเสริมการโหลดล่วงหน้าได้อย่างสมบูรณ์แบบและช่วยให้โหลดทรัพยากรได้เร็วเพียงใด

นี่คือการสัมมนาผ่านเว็บเกี่ยวกับ Priority Hints ซึ่ง Pat Meenan พูดถึง Priority Hints ใน Chrome และยังเรียกพวกเขาว่า "รหัสโกง" สำหรับ LCP:

นี่เป็นตัวอย่างสำคัญของพลังของ Priority Hints

ตอนนี้ มาดูกันว่า เมื่อใด ที่คุณควรใช้ Priority Hints ในกลยุทธ์ประสิทธิภาพเว็บของคุณ

เมื่อใดควรใช้คำแนะนำลำดับความสำคัญ

มี 5 สถานการณ์หลักที่ Priority Hints สามารถช่วยได้ตาม Google:

1. คุณมีรูปภาพครึ่งหน้าบนหลายรูป แต่รูปภาพทั้งหมดไม่จำเป็นต้องมีลำดับความสำคัญเท่ากัน ตัวอย่างเช่น ในภาพหมุน เฉพาะภาพที่มองเห็นได้ภาพแรกเท่านั้นที่ต้องการลำดับความสำคัญที่สูงกว่าเมื่อเปรียบเทียบกับภาพอื่นๆ
   
2. รูปภาพฮีโร่ภายในวิวพอร์ตเริ่มต้นที่ลำดับความสำคัญต่ำ หลังจากเลย์เอาต์เสร็จสิ้น Chrome พบว่าพวกเขาอยู่ในวิวพอร์ตและเพิ่มลำดับความสำคัญ (น่าเสียดายที่เครื่องมือ dev แสดงเฉพาะลำดับความสำคัญสุดท้าย - WebPageTest จะแสดงทั้งสองอย่าง) ซึ่งมักจะเพิ่มความล่าช้าอย่างมากในการโหลดภาพ การให้คำแนะนำลำดับความสำคัญในมาร์กอัปช่วยให้รูปภาพเริ่มต้นที่ลำดับความสำคัญสูงและเริ่มโหลดได้เร็วกว่ามาก

หมายเหตุ: การประกาศสคริปต์เป็น async หรือ defer บอกให้เบราว์เซอร์โหลดสคริปต์แบบอะซิงโครนัส อย่างไรก็ตาม ดังที่เห็นในภาพด้านบน สคริปต์เหล่านี้ยังได้รับมอบหมายลำดับความสำคัญ "ต่ำ" ด้วย คุณอาจต้องการเพิ่มลำดับความสำคัญในขณะที่ทำให้แน่ใจว่าการดาวน์โหลดแบบอะซิงโครนัส โดยเฉพาะอย่างยิ่งสำหรับสคริปต์ใดๆ ที่มีความสำคัญต่อประสบการณ์ของผู้ใช้

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

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

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

วิธีการใช้ Priority Hints: The fetchpriority Attribute

คุณสามารถใช้ Priority Hints ได้โดยใช้แอตทริบิวต์ fetchpriority HTML

คุณสามารถใช้แอตทริบิวต์กับ:

• ลิงค์
• img
• สคริปต์
• แท็ก iframe

แอตทริบิวต์ fetchpriority ยอมรับค่าใดค่าหนึ่งจากสามค่า:

• สูง: แสดงว่าคุณพิจารณาว่าทรัพยากรมีความสำคัญและต้องการให้เบราว์เซอร์จัดลำดับความสำคัญ
• ต่ำ: ส่งสัญญาณว่าคุณถือว่าทรัพยากรมีความสำคัญน้อยกว่าและต้องการให้เบราว์เซอร์ลดลำดับความสำคัญของทรัพยากร
• อัตโนมัติ: ค่าเริ่มต้นเมื่อคุณไม่มีการตั้งค่าและให้เบราว์เซอร์เลือกลำดับความสำคัญที่เหมาะสม

หรือคุณสามารถใช้ JavaScript Fetch API:

สิ่งที่ควรคำนึงถึงเมื่อใช้แอตทริบิวต์ fetchpriority :

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

สำคัญ: เช่นเดียวกับคำแนะนำทรัพยากร ควรใช้คำแนะนำลำดับความสำคัญอย่างระมัดระวัง เนื่องจากการใช้มากเกินไปอาจส่งผลให้ช้าลงมากกว่าการปรับปรุงประสิทธิภาพ

วิธีทดสอบไซต์ของคุณด้วยคำแนะนำสำคัญ

ก่อนทำการทดสอบ คุณควรรู้ว่า Priority Hints ใช้ได้เฉพาะใน Chrome 101 (หรือใหม่กว่า) และ Edge 101 (หรือใหม่กว่า):

มาถึงคำถามที่ว่า

วิธีที่ง่ายที่สุดคือการใช้เครื่องมือ ดังนั้นคุณจึงไม่ต้องเปลี่ยนรหัสด้วยตนเอง

โชคดีที่คุณลักษณะการทดสอบของ WebPageTest ช่วยให้คุณสามารถทดสอบคุณลักษณะด้านประสิทธิภาพ เช่น คำแนะนำลำดับความสำคัญโดยไม่ต้องเปลี่ยนโค้ดของคุณ

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

ในทางตรงกันข้าม หากคุณมีทักษะด้านเทคโนโลยี คุณสามารถปรับแต่งโค้ดของไซต์ได้ด้วยตัวเองและทดสอบผลกระทบของ Priority Hints

ตรวจสอบให้แน่ใจว่าได้ทำการทดสอบหลังจากทำการเปลี่ยนแปลงทุกครั้ง

สรุป

เราครอบคลุมพื้นที่มากมาย ดังนั้นนี่คือการสรุปประเด็นที่สำคัญที่สุดโดยย่อ:

• คำแนะนำลำดับความสำคัญช่วยให้คุณสามารถระบุลำดับความสำคัญของทรัพยากรของไซต์ของคุณได้
• คำแนะนำเรื่องลำดับความสำคัญสามารถช่วยให้คุณโหลดรูปภาพครึ่งหน้าบน รูปภาพฮีโร่ (องค์ประกอบ LCP) สคริปต์แบบอะซิงโครนัสและแบบเลื่อนเวลา ไฟล์ CSS และแบบอักษรได้เร็วขึ้น
• คำแนะนำลำดับความสำคัญสามารถนำไปใช้ผ่านแอตทริบิวต์ fetchpriority
• คุณสามารถใช้แอตทริบิวต์ fetchpriority กับแท็ก link, img, script และ iframe
• แอตทริบิวต์ fetchpriority ยอมรับค่าใดค่าหนึ่งจากสามค่า: สูง ต่ำ และอัตโนมัติ
• ข้อควรระวัง: คำแนะนำลำดับความสำคัญควรใช้เท่าที่จำเป็น เนื่องจากการใช้มากเกินไปอาจทำให้ประสิทธิภาพลดลงมากกว่าการปรับปรุงความเร็ว
• fetchpriority ไม่ใช่คำสั่งบังคับ และไม่สามารถบังคับให้เบราว์เซอร์ดึงทรัพยากรหรือป้องกันไม่ให้ดึงข้อมูลได้ ขึ้นอยู่กับเบราว์เซอร์ว่าจะดึงทรัพยากรหรือไม่
• คำแนะนำเรื่องลำดับความสำคัญมีอยู่ใน Chrome 101 หรือใหม่กว่า

หากต้องการวัดผลกระทบของคำแนะนำลำดับความสำคัญต่อไซต์ของคุณ ให้ทำการทดสอบหลังการเปลี่ยนแปลงทุกครั้ง

เครื่องมือทดสอบยอดนิยม:

• PageSpeed ​​Insights
• GTMetrix
• การทดสอบหน้าเว็บ
• ประภาคาร
• พิงดอม