นับตั้งแต่เปิดตัว Lighthouse ก็มีพารามิเตอร์ใหม่ๆ ที่เกี่ยวข้องกับความเร็วของหน้าปรากฏขึ้น หนึ่งในพารามิเตอร์ที่สำคัญที่สุดคือ First Contentful Paint (FCP) ใน Lighthouse เวอร์ชัน 10 ซึ่งมีผลตั้งแต่เดือนมิถุนายน 2024 ผลกระทบของ FCP ต่อคะแนนโดยรวมคือ 10%.

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

สรุปสั้นๆ: ในช่วงครึ่งแรกของคริสต์ทศวรรษ 1900 การใช้ลิฟต์ในอาคารสูงเพิ่มขึ้นอย่างมาก แต่ระบบลิฟต์ยังดั้งเดิมเมื่อเทียบกับปัจจุบัน ดังนั้นแนวคิดในการติดตั้งกระจกในลิฟต์จึงเกิดขึ้นเพื่อทำให้เวลาที่ใช้ในลิฟต์สั้นลง

 

ภาพ 11.png
ที่มา: https://web.dev/fcp/

 

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

ใน Lighthouse ระดับสีของ FCP ถูกกำหนดดังนี้:

  • 0-2 วินาที: สีเขียว => เร็ว
  • 2-4 วินาที: สีส้ม => จำเป็นต้องปรับปรุง
  • 4+ วินาที: สีแดง => ช้า

ตามข้อมูล HTTP Archive จำนวนไซต์ที่สามารถพิจารณาได้ รวดเร็วคือ 25%และ 50% ของไซต์ที่มีอยู่จัดอยู่ในประเภทช้า

 

ภาพ 10.png
ที่มา: https://web.dev/first-contentful-paint/

 

สิ่งที่สามารถทำได้เพื่อปรับปรุง FCP?

ลดเวลาตอบสนองของเซิร์ฟเวอร์

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

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

 

ภาพ 12.png
ที่มา: https://gtmetrix.com/blog/first-contentful-paint-explained/

 

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

ตัวอย่างเช่น ในอดีตเคยมีการตั้งค่าดังนี้ เมื่อผู้ใช้ต้องการเข้าสู่ไซต์ จะมีการเปลี่ยนเส้นทาง HTTP เป็น HTTPS จากนั้นหากเป็นอุปกรณ์เคลื่อนที่ จะมีการเปลี่ยนเส้นทาง HTTPS ไปยังอุปกรณ์เคลื่อนที่ (เช่น https:// www เป็น https://m) และหากหน้านั้นถูกลบและเปลี่ยนเส้นทางไปที่อื่นด้วย 301 จะรู้สึกเหมือนกับว่าผู้ใช้ถูกส่งจากโต๊ะหนึ่งไปยังอีกโต๊ะหนึ่งในสำนักงานสรรพากร นี่เป็นตัวอย่างที่ชัดเจนเพื่อความเข้าใจที่ดีขึ้น แต่หากคุณเปลี่ยนเส้นทางหน้าไปยัง URL อื่นด้วยการเปลี่ยนเส้นทาง 301 แล้วเปลี่ยนเส้นทางหน้านั้นไปยังอีกหน้าด้วย 301 คุณอาจกำลังทำการตั้งค่าที่ไร้เหตุผลแบบเดียวกัน

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

ลดทรัพยากรการบล็อกการเรนเดอร์

ฉันต้องยอมรับว่าจุดเดียวที่เขียนเป็นรายการโฆษณาอาจใช้เวลาหลายเดือนในการแก้ไข

ภาพ 13.png
ที่มา: https://gtmetrix.com/eliminate-render-blocking-resources.html

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