Google Pagespeed Insights: คู่มือเริ่มต้นเพื่อความสมดุลคะแนนด้วยฟังก์ชั่นเว็บไซต์

เผยแพร่แล้ว: 2025-05-23

ทุกวินาทีจะนับออนไลน์และความเร็วของหน้าเว็บของคุณจะส่งผลโดยตรงต่อประสิทธิภาพการรับส่งข้อมูลการจราจรและการแปลงโดยตรง วิธีที่ง่ายที่สุดในการรับภาพที่ชัดเจนเกี่ยวกับประสิทธิภาพของเว็บไซต์ของคุณคือการทดสอบบน Google Pagespeed Insights (Google PSI)

เป็นเครื่องมือวิเคราะห์ประสิทธิภาพเว็บฟรีที่ให้คะแนนโดยรวม (จาก 100) และเคล็ดลับที่สามารถดำเนินการได้เพื่อเพิ่มประสิทธิภาพของคุณ และไอซิ่งบนเค้กก็คือคุณจะได้ผลลัพธ์ในไม่กี่วินาที!

ตำนานทั่วไป: “ ฉันต้องทำคะแนน 100/100 บน PSI เพื่อให้มีเว็บไซต์ที่รวดเร็ว”

นั่นเป็นความเข้าใจผิดทั่วไป ในขณะที่คะแนนสูงเป็นสิ่งที่ดีสิ่งที่สำคัญที่สุดคือการผ่านการประเมิน Core Web Vitals (CWV) ใน Google PSI

แต่ทำไม?

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

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

TL; DR - คู่มือเริ่มต้น Google PSI ของเรา

Google PageSpeed ​​Insights (PSI) เป็นหนึ่งในเครื่องมือฟรีที่ดีที่สุดสำหรับการทดสอบประสิทธิภาพเว็บและการวัดหลักเว็บหลักช่วยให้คุณเข้าใจว่าเว็บไซต์ของคุณทำงานอย่างไรในแง่ของความเร็วหน้าเว็บประสบการณ์ผู้ใช้และตัวชี้วัดประสิทธิภาพเว็บ รายงาน PSI Flags ปัญหาทั่วไปเช่น CSS และ JavaScript ที่ไม่ได้รับการปรับสภาพการขาดการแคชหรือการบีบอัดและสคริปต์ของบุคคลที่สามมากเกินไปซึ่งทั้งหมดนี้สามารถแก้ไขได้ด้วยเครื่องมือเช่น WP Rocket หากเว็บไซต์ของคุณทนทุกข์ทรมานจากภาพหรือวิดีโอขนาดใหญ่ Imagify สามารถบีบอัดและแปลงเป็นรูปแบบรุ่นถัดไป (เช่น WebP หรือ AVIF) เพื่อปรับปรุงเวลาในการโหลด เครื่องมือเหล่านี้ช่วยให้คุณดำเนินการในการวินิจฉัยประสิทธิภาพเว็บของ PSI โดยไม่จำเป็นต้องแตะรหัสบรรทัดเดียว

ประเด็นสำคัญ

มุ่งเน้นไปที่การเพิ่มประสิทธิภาพมือถือก่อน ประสิทธิภาพของเดสก์ท็อปมักจะตามมา

ตำนาน: การให้คะแนน 100/100 บน PSI เป็นเป้าหมายสูงสุด

ความเป็นจริง: Core Web Vitals มีความสำคัญมากกว่าเนื่องจากเป็นส่วนหนึ่งของอัลกอริทึมการจัดอันดับ

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

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

ใช้ WP Rocket สำหรับปัญหาที่เกี่ยวข้องกับรหัสที่ไม่ได้ปรับการขาดการแคชและการบีบอัด

ใช้ Imagify เพื่อแก้ไขปัญหาที่เกี่ยวข้องกับภาพที่ถูกตั้งค่าสถานะโดย PSI ผ่านการบีบอัดอัจฉริยะและรูปแบบรุ่นต่อไป

สำหรับเงื่อนไขการทดสอบเพิ่มเติมและ KPI ขั้นสูงเช่นความเร็วหน้าและน้ำหนักหน้าลองใช้ GTMetrix หรือ WebPagetest

Google Pagespeed Insights คืออะไร?

PageSpeed ​​Insights (PSI) เป็นเครื่องมือฟรีที่สร้างโดย Google ที่วิเคราะห์ประสิทธิภาพของหน้าเว็บและให้คำแนะนำที่เป็นรูปธรรมสำหรับการปรับปรุง มันให้คะแนนประสิทธิภาพพร้อมกับข้อเสนอแนะโดยละเอียดตามตัวชี้วัดของประภาคาร Lighthouse เป็นเครื่องมือโอเพนซอร์ซ (พัฒนาโดย Google) ที่ออกแบบมาเพื่อปรับปรุงคุณภาพและประสบการณ์การใช้งานของหน้าเว็บ

นี่คือตัวอย่างของคะแนนทั่วโลกและตัวชี้วัดที่สำคัญบางอย่างที่คุณสามารถหาได้ใน Google PSI:

รายงานข้อมูลเชิงลึกของ Google Pagespeed - ที่มา: Pagespeed Insights
รายงานข้อมูลเชิงลึกของ Google Pagespeed - ที่มา: Pagespeed Insights

คำแนะนำ: คะแนนประสิทธิภาพทั่วโลกและรายงาน PSI สามารถเข้าถึงได้จากรายงานประสบการณ์ผู้ใช้ Chrome จาก เครื่องมือนักพัฒนา Chrome > ประสิทธิภาพ

ตัวชี้วัด Key Lighthouse ที่ใช้ใน Google Pagespeed Insights

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

สำหรับแต่ละ KPI นี่คือสีคะแนนที่จะติดตาม:

  • 0 ถึง 49 (สีแดง): แย่
  • 50 ถึง 89 (สีส้ม): ต้องการการปรับปรุง
  • 90 ถึง 100 (สีเขียว): ดี

และนี่คือตัวชี้วัด

  1. สีที่มีความสุขมากที่สุด (LCP) จะบอกคุณว่าเนื้อหาหลักโหลดเร็วแค่ไหน

ตัวอย่าง: เมื่อภาพและชื่อเรื่องฮีโร่ของโพสต์บล็อกปรากฏบนหน้าจออย่างชัดเจน

  1. การโต้ตอบกับ Paint Next (INP) ระบุว่าเว็บไซต์ของคุณตอบสนองเร็วแค่ไหนเมื่อมีคนคลิกหรือแตะ

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

  1. การเปลี่ยนรูปแบบแบบสะสม (CLS) วัดความเสถียรของหน้าเว็บขณะโหลด

ตัวอย่าง: คุณกำลังจะคลิกลิงก์เมื่อเลย์เอาต์เลื่อน (เช่นโฆษณา) และคุณก็แตะอย่างอื่นโดยไม่ตั้งใจ

  1. First Contentful Paint (FCP) คำนวณเวลาจนกว่าเนื้อหาบิตแรกจะปรากฏขึ้น

ตัวอย่าง: โลโก้จะปรากฏขึ้นไม่นานหลังจากที่คุณลงจอดบนหน้า

  1. เวลาที่จะเป็นไบต์แรก (TTFB) ระบุระยะเวลาที่เซิร์ฟเวอร์ตอบกลับ

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

  1. เวลาปิดกั้นทั้งหมด (TBT) วิเคราะห์ระยะเวลาที่เบราว์เซอร์ใช้ในการตอบสนองต่อการป้อนข้อมูล

ตัวอย่าง: หน้าดูโหลด แต่ไม่ตอบสนองต่อการเลื่อนหรือคลิกทันที

  1. ดัชนี Speed ​​(SI) จะบอกคุณว่าทุกอย่างบนหน้าเว็บนั้นดูสมบูรณ์ได้เร็วแค่ไหน

ตัวอย่าง: เนื้อหาเติมเต็มอย่างราบรื่นแทนที่จะโหลดเป็นชิ้น

คำแนะนำ: Google Lighthouse Metrics ช่วยระบุคอขวดที่มีศักยภาพที่เป็นไปได้ที่เว็บไซต์ของคุณกำลังประสบอยู่

เหตุใดการประเมิน Web Vitals หลักจึงมีความสำคัญมากกว่าคะแนนประสิทธิภาพ

Core Web Vitals (CWV) เป็นส่วนหนึ่งของสัญญาณการจัดอันดับของ Google ซึ่งหมายความว่าพวกเขาสามารถมีอิทธิพลต่อ SEO ของคุณและวิธีที่เว็บไซต์ของคุณอยู่ใน Google ความพยายามใด ๆ ในการบรรลุคะแนน“ ดี” ในการประเมิน CWV หมายความว่าเว็บไซต์ของคุณมอบประสบการณ์ที่รวดเร็วมั่นคงและตอบสนองต่อผู้เข้าชมของคุณและเครื่องมือค้นหาจะให้รางวัลแก่คุณ

การเพิ่มประสิทธิภาพเว็บ Core Vitals ยังมีความสำคัญสำหรับหน่วยงาน WordPress; พวกเขาส่วนใหญ่มุ่งมั่นที่จะส่งมอบเว็บไซต์ที่ให้คะแนนในสีเขียว นั่นเป็นกรณีตัวอย่างเช่น Agence KN ในลียง Thomas Baudry ผู้ก่อตั้งอธิบาย:

Web Vitals หลักเป็นหัวใจสำคัญของวิธีการที่มีคุณภาพของเรา: เราทดสอบพวกเขาอย่างสม่ำเสมอในระหว่างการพัฒนาเพื่อให้แน่ใจว่าประสิทธิภาพและประสบการณ์การใช้งานที่ราบรื่น ก่อนที่จะมีชีวิตอยู่เราเปิดใช้งาน WP Rocket เพื่อเพิ่มผลลัพธ์ เรามักจะแบ่งปันคะแนน Insights PageSpeed ​​กับลูกค้าของเราพร้อมกับการรับประกันประสิทธิภาพ: คะแนน 90+ ในประสิทธิภาพและการเข้าถึงและ 100 ในแนวทางปฏิบัติที่ดีที่สุดและ SEO

ส่วนการวินิจฉัย: เคล็ดลับการดำเนินการเพื่อเพิ่มประสิทธิภาพของเว็บไซต์ของคุณ

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

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

ตัวอย่างส่วนการวินิจฉัยจาก Google PSI - ที่มา: Pagespeed Insights
ตัวอย่างส่วนการวินิจฉัยจาก Google PSI - ที่มา: Pagespeed Insights

เมื่อคุณแก้ปัญหามันจะถูกย้ายไปยังส่วนการตรวจสอบที่ผ่านและกลายเป็นสีเขียว

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

การอ่าน Google PSI ผ่านเลนส์ที่สมดุล

Google Pagespeed Insights ช่วยให้คุณระบุว่าองค์ประกอบใดที่มีผลต่อประสิทธิภาพและวิธีการแก้ไขพวกเขาไม่ลบออก

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

ลองนึกภาพว่า PSI ตั้งค่าสถานะตัวเลื่อนหน้าแรกของคุณ

มันอาจเน้นปัญหาเช่น:

  • รูปภาพไม่ได้บีบอัดหรือปรับให้เหมาะสม
  • รูปภาพไม่ได้เสิร์ฟในรูปแบบรุ่นถัดไป (เช่น webp หรือ avif)
  • CSS ที่ไม่ได้ใช้กำลังเพิ่มเวลาโหลด

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

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

line บรรทัดล่าง: คะแนนประสิทธิภาพที่ดีมีประโยชน์ทั้งผู้ใช้และเครื่องมือค้นหา แต่ยอดคงเหลือเป็นกุญแจสำคัญ Core Web Vitals เป็นตัวชี้วัดที่สำคัญยิ่งกว่าที่จะมุ่งเน้น ไม่จำเป็นต้องให้คะแนน 100/100 สำหรับ PSI

Nicolas Richer ผู้เชี่ยวชาญ WordPress ที่ wpchef.fr กล่าวว่า:

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

อะไรที่มีผลต่อคะแนน Google PSI ของคุณ

ปัญหาทั่วไป 5 ข้อเหล่านี้มักจะทำร้ายคะแนน Google PSI ของคุณและมีผลกระทบมากที่สุดต่อผลลัพธ์ประสิทธิภาพโดยรวมของคุณ:

1. ขาดการแคชและการบีบอัด

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

ตัวอย่าง : ไซต์ที่ไม่มีเบราว์เซอร์แคชทำให้ผู้เข้าชมที่ส่งคืนทุกคนดาวน์โหลดไฟล์ CSS และ JS ทั้งหมดอีกครั้งแม้ว่าพวกเขาจะยังไม่เปลี่ยนแปลงก็ตาม นั่นทำให้เว็บไซต์ของคุณช้าลงและ Google Psi ระบุพื้นที่สำหรับการปรับปรุงเป็นผล

2. รหัสที่ไม่ได้ปรับ (CSS และ JS)

ไฟล์ CSS และ JavaScript ที่ไม่ได้ใช้หรือไม่ได้ใช้สามารถชะลอเนื้อหาหลักของคุณได้เร็วแค่ไหน

ตัวอย่าง : โฮมเพจโหลด JavaScript ที่ไม่ได้ใช้ 600 KB ล่าช้าทำให้เนื้อหาที่มองเห็นได้ภายในหลายวินาทีบนมือถือ Google PSI อาจขอให้คุณเพิ่มประสิทธิภาพ JS ของคุณและจัดลำดับความสำคัญของสคริปต์ที่จำเป็นแทน

3. ภาพและวิดีโอขนาดใหญ่

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

ตัวอย่าง : ภาพฮีโร่ 3 MB ในรูปแบบ JPG ทำให้เนื้อหาที่ใหญ่ที่สุดในการโหลดล่าสุดล้มเหลวในการวัดสีที่มีเนื้อหาที่ดีที่สุด (LCP) Google PSI อาจแนะนำให้คุณบีบอัดภาพนี้และแปลงเป็นรูปแบบที่เบากว่าเช่น WebP หรือ AVIF

4. คำขอ HTTP ภายนอกมากเกินไป (รวมถึงสคริปต์ของบุคคลที่สาม)

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

ตัวอย่าง : สคริปต์ของบุคคลที่สามหลายรายการเช่นโฆษณาวิดเจ็ตแชทและฟีดโซเชียลบล็อกการแสดงผลและลากคะแนน Google PSI ของคุณลง

5. ปลั๊กอินที่มากเกินไปหรือมีการจัดการไม่ดี

ปลั๊กอินจำนวนมากเกินไปโดยเฉพาะอย่างยิ่งที่ล้าสมัยหรือไม่มีประสิทธิภาพสามารถขยายรหัสของคุณและขัดแย้งกันลดประสิทธิภาพ

ตัวอย่าง : ร้านค้า WooCommerce ที่มีปลั๊กอินที่ใช้งานมากกว่า 20 รายการรวมถึงสคริปต์และสไตล์ที่ซ้ำซ้อนที่ช้าลงทุกหน้าโหลด Google PSI อาจขอให้คุณลดรหัสที่ไม่ได้ใช้หรือเพื่อลดการทำงานหลัก

การเพิ่มประสิทธิภาพเชิงปฏิบัติจาก Google PSI เป็นภาษาอังกฤษธรรมดา

Google Pagespeed Insights มักจะส่งคำศัพท์ทางเทคนิคใส่คุณ แต่นี่คือสิ่งที่พวกเขาหมายถึงจริง ๆ และวิธีการแก้ไขได้อย่างง่ายดายด้วยปลั๊กอิน WordPress สองรายการ: WP Rocket และ Imagify เครื่องมือเหล่านี้ทำงานร่วมกันเพื่อแก้ไขปัญหาส่วนใหญ่ที่ถูกตั้งค่าสถานะโดย PSI และช่วยให้คุณได้คะแนนสีเขียวได้ง่ายขึ้น

WP Rocket เป็นปลั๊กอินประสิทธิภาพที่ทรงพลัง แต่ง่ายที่สุดสำหรับ WordPress ที่สามารถปรับปรุง Vitals เว็บหลักของคุณได้ทันที มันใช้ 80% ของประสิทธิภาพการปฏิบัติที่ดีที่สุดของเว็บเมื่อเปิดใช้งานเช่นการแคชการบีบอัดการลดขนาดและการโหลดขี้เกียจ คุณไม่จำเป็นต้องแตะรหัสบรรทัดเดียว สำหรับการปรับแต่งขั้นสูงคุณสามารถเปิดใช้งานคุณสมบัติประสิทธิภาพเช่นการโหลด JavaScript รอการตัดบัญชีหรือลบ CSS ที่ไม่ได้ใช้ในคลิกเดียว

Imagify เป็นปลั๊กอินการเพิ่มประสิทธิภาพภาพที่ง่ายที่สุดสำหรับ WordPress มันบีบอัดภาพของคุณโดยไม่สูญเสียคุณภาพและแปลงเป็นรูปแบบรุ่นถัดไปเช่น WebP และ AVIF โดยอัตโนมัติ ผลลัพธ์: ไฟล์ภาพขนาดเล็กเวลาโหลดเร็วขึ้นและประสบการณ์ผู้ใช้ที่ราบรื่นขึ้นโดยไม่ต้องยกนิ้ว

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

1. ใช้การแคช

คำเตือนประสิทธิภาพใน Google PSI: ให้บริการสินทรัพย์คงที่ด้วยนโยบายแคชที่มีประสิทธิภาพ

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

WP Rocket ทำโดยอัตโนมัติ การแคชเปิดใช้งานทั้งบนเดสก์ท็อปและมือถือนอกกรอบเมื่อคุณเปิดใช้งานปลั๊กอิน

2. เปิดใช้งานการบีบอัด

คำเตือนประสิทธิภาพใน Google PSI: เปิดใช้งานการบีบอัดข้อความ

มันหมายถึงอะไร: หดไฟล์เช่น HTML, CSS และ JavaScript ก่อนที่จะส่งไปยังเบราว์เซอร์

WP Rocket เปิดใช้งานการบีบอัด GZIP โดยอัตโนมัติเพื่อลดขนาดไฟล์และเวลาในการโหลด

3. รหัส minification

คำเตือนประสิทธิภาพใน Google PSI: Minify CSS และ JS

มันหมายถึงอะไร: ลบอักขระที่ไม่จำเป็น (เช่นช่องว่างหรือความคิดเห็น) ในรหัสเพื่อให้เบาลง

WP Rocket ลดไฟล์ CSS และ JavaScript โดยอัตโนมัติ

4. กำจัดทรัพยากรที่ปิดกั้นการแสดงผล

คำเตือนประสิทธิภาพใน Google PSI: กำจัดทรัพยากรที่ปิดกั้นการแสดงผล

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

WP Rocket จัดการกับปัญหาการแสดงนี้ด้วย“ โหลด JS รอการตัดบัญชี”,“ Delay JS Execution” และ“ ลบตัวเลือก CSS ที่ไม่ได้ใช้”

5. ใช้การโหลดขี้เกียจ

คำเตือนประสิทธิภาพใน Google PSI: เลื่อนภาพนอกจอ

มันหมายถึงอะไร: โหลดรูปภาพวิดีโอและ iframes เฉพาะเมื่อผู้ใช้เลื่อนไปที่พวกเขา

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

6. เสิร์ฟภาพในรูปแบบรุ่นถัดไป

คำเตือนประสิทธิภาพใน Google PSI: ให้บริการรูปภาพในรูปแบบรุ่นต่อไป

มันหมายถึงอะไร: ใช้รูปแบบที่ทันสมัยเช่น WebP หรือ AVIF แทนรูปแบบที่เก่ากว่าและหนักกว่าเช่น JPG หรือ PNG

Imagify แปลงภาพของคุณเป็น WebP โดยอัตโนมัติและยังให้ตัวเลือกในการแปลงเป็น AVIF ปลั๊กอินใช้โหมดการบีบอัดอัจฉริยะที่บีบอัดภาพในขณะที่รักษาคุณภาพของภาพเหมือนเดิม

วิธีใช้ Google psi สำหรับเว็บไซต์ของคุณ

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

1. เข้าใจความต้องการและประเภทเว็บไซต์ของคุณ

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

2. ไปที่ Google Psi และป้อน URL ของคุณ

ตรงไปที่ข้อมูลเชิงลึก pagespeed และวาง URL ของเว็บไซต์ของคุณเพื่อเริ่มการตรวจสอบ:

เรียกใช้การตรวจสอบด้วย PSI - ที่มา: Pagespeed Insights
เรียกใช้การตรวจสอบด้วย psi - ที่มา: Pagespeed Insights

3. ตีความผลลัพธ์อย่างรอบคอบ

ใช้ PSI เพื่อระบุพื้นที่สำหรับการปรับปรุง แต่อย่าลบคุณสมบัติที่จำเป็นต่อธุรกิจของคุณอย่างสุ่มสี่สุ่มห้า

ตัวอย่าง: หากคุณเรียกใช้เว็บไซต์อสังหาริมทรัพย์และ PSI Flag รวมการรวมแผนที่ของคุณเป็น JavaScript-Heavy นั่นไม่ได้หมายความว่าคุณควรลบออก เช่นเดียวกันสำหรับปลั๊กอินแชทหรือภาพบ้านคุณภาพสูงสำหรับขาย เพิ่มประสิทธิภาพคุณสมบัติเหล่านั้นแทนที่จะลบออก

4. ดำเนินการและเริ่มปรับให้เหมาะสม

ด้วยเครื่องมือและปลั๊กอินที่เหมาะสมการปรับปรุงเว็บหลักและการแก้ไขปัญหา PSI จะง่ายขึ้นมาก

หากรายงานของคุณแสดงปัญหาภาพเช่น“ แสดงภาพในรูปแบบรุ่นถัดไป” หรือ“ เข้ารหัสภาพอย่างมีประสิทธิภาพ” หรือ“ minify JS”,“ ให้บริการสินทรัพย์คงที่ด้วยนโยบายแคชที่มีประสิทธิภาพ” ลองใช้ Imagify และ WP Rocket เพื่อแก้ไข

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

5. ตรวจสอบการเปลี่ยนแปลงของคุณ

หลังจากสองสามวันหรือหลายสัปดาห์ให้ทำการทดสอบ PSI อีกครั้งเพื่อติดตามการปรับปรุง นอกจากนี้คุณยังสามารถตรวจสอบความคืบหน้าของ SEO ของคุณ - ตรวจสอบว่าการจัดอันดับของคุณดีขึ้นหรือไม่เนื่องจากเว็บหลักของคุณเป็นสีเขียว

6. ทดสอบกับผู้ใช้จริง

ไปไกลกว่าตัวเลข ถามผู้เยี่ยมชมหรือลูกค้าเกี่ยวกับประสบการณ์ของพวกเขา:

  • มีป๊อปอัปมากเกินไปหรือไม่?
  • กระบวนการจัดซื้อราบรื่นหรือไม่?
  • เว็บไซต์รู้สึกเร็วหรือไม่?

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

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

รายการตรวจสอบการเพิ่มประสิทธิภาพของ Google PSI - ที่มา: WP Rocket
รายการตรวจสอบการเพิ่มประสิทธิภาพของ Google PSI - ที่มา: WP Rocket

เครื่องมือทางเลือกที่จะไปนอกเหนือจากการทดสอบ Google Psi

ในขณะที่ Google Pagespeed Insights เป็นจุดเริ่มต้นที่ยอดเยี่ยมเครื่องมือประสิทธิภาพเว็บอีกสองตัวโดดเด่นสำหรับการทดสอบประสิทธิภาพที่ลึกกว่า: GTMetrix และ WebPagetest ทั้งสองเสนอข้อมูลที่ละเอียดยิ่งขึ้นและตัวเลือกการปรับแต่งที่เกินกว่าที่ PSI มอบให้ในแง่ของการตรวจสอบประสิทธิภาพเว็บ

ประสิทธิภาพการทดสอบด้วย gtmetrix

GTMetrix เป็นเครื่องมือ Freemium ที่ขับเคลื่อนโดยประภาคาร เหมาะอย่างยิ่งสำหรับการทำความเข้าใจว่าแต่ละทรัพยากรมีผลต่อประสิทธิภาพและวิธีการทำงานของเว็บไซต์ภายใต้เงื่อนไขที่แตกต่างกันอย่างไร เช่นเดียวกับ Google PSI มันแสดงตัวชี้วัดประสิทธิภาพเว็บที่สำคัญทั้งหมดรวมถึง Core Web Vitals - แต่มันไปไกลกว่านั้น

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

ตัวอย่างรายงานประสิทธิภาพใน GTMetrix - ที่มา: GTMetrix
ตัวอย่างรายงานประสิทธิภาพใน GTMetrix - ที่มา: GTMetrix


การทดสอบประสิทธิภาพด้วย webPagetest

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

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

ตัวอย่างการวิเคราะห์ตัวชี้วัดประสิทธิภาพเว็บใน WebPagetest - ที่มา: WebPagetest
ตัวอย่างการวิเคราะห์ตัวชี้วัดประสิทธิภาพเว็บใน WebPagetest - ที่มา: WebPagetest

ข้อ จำกัด ของ Google PSI

เพื่อสรุป Google Psi มีข้อ จำกัด หลักสามประการที่ครอบคลุมโดย GTMetrix และ WebPagetest:

  1. ความจำเพาะของอุปกรณ์: คุณไม่สามารถเลือกอุปกรณ์ที่แน่นอน (เช่น iPhone 12) สำหรับการทดสอบ
  1. การควบคุมตำแหน่ง: คุณไม่สามารถเลือกตำแหน่งเฉพาะเพื่อจำลองประสบการณ์ของผู้ใช้ (เช่นปารีส)
  1. KPIs ที่หายไป: PSI ไม่แสดงเวลาที่เต็มไปด้วยน้ำหนักรวมของหน้าทั้งหมดพร้อมการสลายเนื้อหาหรือจัดทำแผนภูมิน้ำตกที่มองเห็นได้

นี่คือตารางสรุปที่เปรียบเทียบเครื่องมือทั้งสาม:

คุณสมบัติ Google PSI Gtmetrix WebPagetest
การกำหนดราคา ฟรี Freemium (แผนฟรี + แบบจ่ายเงินสำหรับคุณสมบัติขั้นสูง) ฟรี (300 ทดสอบ/เดือน)
ขับเคลื่อนโดยประภาคาร (ใช้เครื่องยนต์ แต่มีตัวเลือกในการรับผลการเรียนประถมศึกษา)
Core Web Vitals
คะแนนประสิทธิภาพและการตรวจสอบ จุดเริ่มต้นที่ดีพร้อมคำแนะนำที่ชัดเจน รวมรายการการตรวจสอบ + รายละเอียด ตัวชี้วัดเชิงลึกและภาพ
เวลาที่โหลดเต็มที่
น้ำหนักหน้าทั้งหมด ด้วยการแยกเนื้อหา (JS, รูปภาพ ฯลฯ )
แผนภูมิน้ำตก ภาพและการโต้ตอบ มีรายละเอียดสูง
เปรียบเทียบ URL หลายตัว
การจำลองอุปกรณ์ที่กำหนดเอง อุปกรณ์ 40+ รวมถึง iPhone, Pixels ฯลฯ เลือกอุปกรณ์เฉพาะ
การเชื่อมต่อการควบคุมปริมาณ 4G, LTE, Custom การเชื่อมต่อที่สำคัญทั้งหมด
ทดสอบจากสถานที่เฉพาะ พร้อมใช้งานกับแผนโปร 30+ สถานที่ทดสอบทั่วโลก
รายงานประสิทธิภาพเว็บที่ส่งออกได้ (PDF & CSV พร้อมแผนชำระเงิน)

Google Pagespeed Insights FAQS

Google psi ทำงานอย่างไร

Google Pagespeed Insights เป็นเครื่องมือฟรีที่ประเมินว่าหน้าเว็บของคุณมีความรวดเร็วและเสถียรบนทั้งมือถือและเดสก์ท็อป มันดำเนินการทดสอบประสิทธิภาพโดยใช้เทคโนโลยีประภาคารและให้คะแนนโดยรวมจาก 100 โดยใช้ตัวชี้วัดประสิทธิภาพที่สำคัญเช่นความเร็วในการโหลดและความเสถียรของภาพ นอกจากนี้ยังให้การวินิจฉัยและคำแนะนำโดยละเอียดเพื่อช่วยให้คุณเข้าใจสิ่งที่ทำให้สิ่งต่าง ๆ ช้าลงและวิธีการแก้ไข

ฉันจะใช้ประโยชน์จาก Google PSI เพื่อเพิ่มประสิทธิภาพมือถือได้อย่างไร

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

ฉันจะปรับปรุงคะแนน Google PSI ของฉันได้อย่างไร

มุ่งเน้นไปที่พื้นที่ที่มีผลกระทบขนาดใหญ่: การแคชเบราว์เซอร์ลด JavaScript และ CSS ที่ไม่ได้ใช้งานบีบอัดและปรับขนาดภาพและลดสคริปต์ของบุคคลที่สาม เครื่องมือเช่น WP Rocket และ Imagify ทำให้ง่ายต่อการแก้ไขปัญหาที่พบบ่อยที่สุดโดยไม่ต้องสัมผัสกับรหัส

ฉันจะดาวน์โหลดรายงานข้อมูลเชิงลึก PageSpeed ​​ได้อย่างไร

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

เหตุใด PSI Mobile และ Desktop ของฉันจึงแตกต่างกัน?

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

คะแนนประสิทธิภาพวัดได้อย่างไร?

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

คะแนนประสิทธิภาพของหน้าวัดได้อย่างไร? - ที่มา: เครื่องคิดเลขให้คะแนนประภาคาร
คะแนนประสิทธิภาพของหน้าวัดได้อย่างไร? - ที่มา: เครื่องคิดเลขให้คะแนนประภาคาร

ข้อมูลห้องปฏิบัติการและข้อมูลฟิลด์ใน Google Pagespeed Insights แตกต่างกันอย่างไร

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

ทำไม Google PSI ถึงแสดงคะแนนที่แตกต่างกันในข้อมูลห้องปฏิบัติการและฟิลด์

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

สิ่งที่สำคัญกว่า: ข้อมูลห้องปฏิบัติการหรือข้อมูลภาคสนาม?

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

ห่อหุ้ม

Google PageSpeed ​​Insights (PSI) เป็นหนึ่งในเครื่องมือฟรีที่น่าเชื่อถือที่สุดในการวัดประสิทธิภาพของเว็บไซต์ของคุณและระบุสิ่งที่ส่งผลกระทบต่อความเร็วและประสบการณ์ของผู้ใช้ มันมุ่งเน้นไปที่ตัวชี้วัดประสิทธิภาพของเว็บที่สำคัญและ Web Vitals หลักซึ่งเชื่อมโยงโดยตรงกับ SEO และการจัดอันดับของคุณ

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

ตอนนี้ถึงเวลาดำเนินการแล้ว:
เรียกใช้การตรวจสอบของคุณบน Google Pagespeed Insights และเพิ่มประสิทธิภาพเว็บหลักของคุณด้วย WP Rocket-ไม่มีความเสี่ยงที่จะต้องขอบคุณการรับประกันคืนเงิน 14 วัน!