วิธีโหลดคำขอคีย์ล่วงหน้าสำหรับ Core Web Vitals ที่ดีกว่า

เผยแพร่แล้ว: 2023-07-06

ไม่ใช่ทรัพยากรทั้งหมดของไซต์ของคุณที่มีความสำคัญเท่าเทียมกัน

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

มิฉะนั้น คุณเสี่ยงที่หน้าเว็บจะโหลดช้าและรายการคำเตือนยาวเหยียดในรายงาน PageSpeed ​​Insights (PSI) ของคุณ

หนึ่งในนั้นคือ –คำขอคีย์โหลดล่วงหน้า

โหลดคำเตือนคำขอคีย์ล่วงหน้าใน Google PageSpeed ​​Insights Diagnostics

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

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

อ่านต่อ.

คำขอคีย์โหลดล่วงหน้าหมายความว่าอย่างไร

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

แต่สิ่งนี้ทำให้เกิดคำถาม:

อะไรทำให้คำขอมีความสำคัญ

คำขอที่สำคัญเป็นทรัพยากรที่แสดงในวิวพอร์ตเริ่มต้นของหน้า (หรือครึ่งหน้าบนตามที่ตลาดต้องการเรียก)

ตัวอย่างเช่น นี่คือสิ่งที่ฉันเห็นเมื่อฉันโหลดหน้าแรกของ NitroPack บนแล็ปท็อปของฉัน:

หน้าแรกของ NitroPack

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

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

  • สูงสุด
  • สูง
  • ปานกลาง
  • ต่ำ
  • ต่ำสุด

ลำดับความสำคัญของทรัพยากรที่กำหนดโดยเบราว์เซอร์ระหว่างกระบวนการดาวน์โหลด

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

นี่คือวิธี...

การใช้การแก้ไขคำขอคีย์โหลดล่วงหน้าจะช่วยปรับปรุงประสิทธิภาพของคุณได้อย่างไร

ความจริงคือ:

การแก้ไขคำเตือน "คำขอคีย์โหลดล่วงหน้า" เพียงเพื่อย้ายคำเตือนอื่นไปยังหมวดหมู่ "ผ่าน" นั้นไม่คุ้มค่า

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

  • Core Web Vitals
  • คะแนนประสิทธิภาพ
  • ประสิทธิภาพการรับรู้

มาดูกันว่ามันเป็นไปได้อย่างไร

การโหลดล่วงหน้าและระบายสีเนื้อหาที่ใหญ่ที่สุด (LCP)

Largest Contentful Paint วัดระยะเวลาที่องค์ประกอบครึ่งหน้าบนที่ใหญ่ที่สุดจะโหลดบนหน้าเว็บ

ประเภทของทรัพยากรที่มักถูกพิจารณาว่าเป็นองค์ประกอบ LCP ได้แก่:

  • ภาพ;
  • แท็กรูปภาพ;
  • ภาพขนาดย่อของวิดีโอ
  • ภาพพื้นหลังด้วย CSS;
  • องค์ประกอบข้อความ

ทั้งหมดนี้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการโหลดล่วงหน้า

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

นอกจากนี้ LCP ยังคิดเป็น 25% ของคะแนนประสิทธิภาพโดยรวมของคุณ ดังนั้นการเพิ่มคะแนนจะนำไปสู่การย้ายคะแนนของคุณจากสีแดงเป็นสีเขียวอย่างหลีกเลี่ยงไม่ได้

น้ำหนักของเมตริก Core Web Vital ในคะแนนประสิทธิภาพ

รับคะแนน LCP ของคุณจากสีแดงเป็นสีเขียวด้วยการคลิกเพียงปุ่มเดียว ติดตั้ง NitroPack วันนี้ →

การโหลดล่วงหน้าและสีเนื้อหาแรก (FCP)

First Contentful Paint (FCP) วัดเวลาที่เบราว์เซอร์ใช้ในการแสดงภาพเนื้อหา DOM ชิ้นแรก (เช่น รูปภาพ, SVG, องค์ประกอบผ้าใบที่ไม่เว้นว่าง) บนหน้า

กำลังโหลดแอนิเมชั่นบนมือถือ

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

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

โลโก้โหลดบนเดสก์ท็อปทริกเกอร์ FCP

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

เด้ง!

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

นอกจากนี้ FCP ยังคิดเป็น 10% ของคะแนนประสิทธิภาพของคุณ คุณจึงได้รับการส่งเสริมในด้านนั้นด้วย

การโหลดล่วงหน้าและการรับรู้ประสิทธิภาพ

เราได้กล่าวถึงการรับรู้ประสิทธิภาพหลายครั้ง หากคุณสงสัยว่ามันหมายถึงอะไร นี่คือคำจำกัดความ:

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

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

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

ประสิทธิภาพการรับรู้ที่ดีขึ้นนี้สามารถนำไปสู่

  • การมีส่วนร่วมของผู้ใช้ที่สูงขึ้น
  • อัตราตีกลับลดลง
  • ความพึงพอใจโดยรวมต่อเว็บไซต์

วิธีระบุคำขอที่สำคัญที่สุดที่คุณควรโหลดไว้ล่วงหน้า

PageSpeed ​​Insights ของ Google เป็นวิธีที่ง่ายและมีประสิทธิภาพที่สุดในการระบุคำขอหลักที่จะโหลดล่วงหน้า

เมื่อคุณทดสอบประสิทธิภาพของ URL อย่าลืมตรวจสอบส่วนโอกาสสำหรับคำแนะนำ มองหาคำแนะนำที่มีข้อความว่า "คำขอคีย์โหลดล่วงหน้า" โดยเฉพาะ ซึ่งคล้ายกับตัวอย่างที่แสดง:

คำเตือนคำขอโหลดคีย์ล่วงหน้าในส่วนโอกาสในรายงาน Google PSI

หรือคุณสามารถเรียกใช้การทดสอบโดยใช้ Chrome DevTools ในการเริ่มต้นกระบวนการ ให้โหลดหน้าที่คุณต้องการทดสอบแล้วคลิก ตรวจสอบ > Lighthouse

จากนั้น เลือกว่าคุณต้องการทดสอบหน้าเว็บเวอร์ชันมือถือหรือเดสก์ท็อป แล้วคลิก "วิเคราะห์" การโหลดหน้าเว็บ:

ตรวจสอบหน้าแรกของ NitroPack

หลังจากการทดสอบเสร็จสิ้น ให้เลื่อนลงและมองหาคำเตือน "คำขอคีย์โหลดล่วงหน้า"

หมายเหตุ: เนื่องจาก Google PageSpeed ​​Insights ใช้ Lighthouse การทดสอบหน้าเว็บของคุณผ่าน PSI หรือ Chrome DevTools จะให้ผลลัพธ์เดียวกัน ขึ้นอยู่กับคุณว่าชอบแบบไหน

เพื่อทำความเข้าใจว่า Lighthouse ตัดสินว่าทรัพยากรใดเหมาะสมสำหรับการโหลดล่วงหน้าอย่างไร เรามาดูตัวอย่างต่อไปนี้

ห่วงโซ่คำขอที่สำคัญของเพจของคุณมีลักษณะดังนี้:

> index.html

>> app.js

>>>styles_custom.css

>>>> ui_custom.js

ในไฟล์ index.html คุณรวมแท็ก สคริปต์ src="app.js" เมื่อไฟล์ app.js ถูกเรียกใช้ มันจะทริกเกอร์การเรียก fetch() เพื่อดาวน์โหลด styles_custom.css และ ui_custom.js หน้านี้จะไม่แสดงอย่างสมบูรณ์จนกว่าจะดาวน์โหลด แยกวิเคราะห์ และดำเนินการทรัพยากรทั้งสองนี้ ไฟล์ดังกล่าวถือเป็นทรัพยากรที่ปิดกั้นการเรนเดอร์

ดังนั้น Style_custom.css และ ui_custom.js จะถูกระบุโดย Lighthouse เป็นทรัพยากรที่เกี่ยวข้อง

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

หากต้องการให้ลำดับความสำคัญสูงขึ้น คุณสามารถใช้ ลิงก์ rel="preload"

วิธีแก้ไขคำเตือน "คำขอคีย์โหลดล่วงหน้า"

หากต้องการแก้ไขคำเตือน ให้ใช้แอตทริบิวต์ลิงก์ rel=preload กับทรัพยากรสำคัญที่ PSI ตั้งค่าสถานะ

พูดง่ายๆ ก็คือ คำสั่ง ลิงก์ rel=preload จะสั่งให้เบราว์เซอร์เรียกทรัพยากรที่สำคัญเร็วกว่าปกติที่พวกเขาจะค้นพบ

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

คุณสามารถโหลดทรัพยากรล่วงหน้าได้โดยเพิ่ม ลิงก์ rel=preload tag ที่ส่วนหัวของเอกสาร HTML ของคุณ

ตัวอย่างเช่น ข้อมูลโค้ดค้นหาโลโก้ที่โหลดไว้ล่วงหน้ามีดังต่อไปนี้:

ข้อมูลโค้ดโลโก้ที่โหลดไว้ล่วงหน้า

คุณอาจสังเกตเห็นว่านอกเหนือจากการโหลดล่วงหน้าและทรัพยากรแล้ว ยังมีแอตทริบิวต์ที่สาม เช่น

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

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

ต่อไปนี้คือรายการ ค่า ทั้งหมดที่คุณสามารถระบุได้:

เป็นค่าประเภท

สำคัญ: เว็บเบราว์เซอร์สมัยใหม่จัดลำดับความสำคัญของทรัพยากรได้ดี ดังนั้นการใช้ลิงก์ rel=preload มากเกินไปอาจนำไปสู่ผลลัพธ์เชิงลบ ตรวจสอบให้แน่ใจว่าใช้เท่าที่จำเป็นและเฉพาะเมื่อจำเป็นเท่านั้น

โหลดคำขอคีย์ล่วงหน้าโดยอัตโนมัติด้วย NitroPack

หากคุณกำลังมองหาวิธีที่ง่ายกว่าและเป็นแบบอัตโนมัติในการโหลดทรัพยากรที่สำคัญล่วงหน้าและปรับปรุง Core Web Vitals ของไซต์ คะแนนประสิทธิภาพ และประสิทธิภาพที่รับรู้ คุณควรลองใช้ NitroPack

หนึ่งในเหตุผลหลักที่ทำให้ NitroPack เป็นผู้นำในผลลัพธ์ของ Core Web Vitals สำหรับเว็บไซต์มากกว่า 180,000 เว็บไซต์คือกลไกการโหลดทรัพยากรที่เป็นกรรมสิทธิ์ของเรา

NitroPack ในฐานะผู้นำ Core Web Vitals เทียบกับ WP Rocket และ Litespeed Cache

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

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

เพิ่มประสิทธิภาพการนำส่ง CSS ด้วย NitroPack

แต่ส่วนที่ดีที่สุดคือ – การใช้ NitroPack นั้นไม่มีความเสี่ยง

ยังไง?

ประการแรก คุณสามารถทดสอบ NitroPack โดยไม่ต้องเสียเงินสักเล็กน้อยเพื่อรับแผนฟรีของเรา

ประการที่สอง NitroPack ทำงานกับสำเนาของไฟล์ในไซต์ของคุณ ทำให้ต้นฉบับปลอดภัย 100%

ใส่เพียงแค่:

คุณสามารถแซงหน้าคู่แข่งทั้งหมดของคุณด้วยการมีไซต์ที่โหลดเร็วที่สุดในอุตสาหกรรมโดยไม่ต้องยกนิ้วและเสี่ยงอะไรเลย

ฟังดูเป็นเรื่องที่ดีสำหรับฉัน!