Pagespeed Insights คืออะไร ดูวิธีแก้ Page Speed และการอ่านค่าต่างๆ

สำหรับใครที่กำลังทำเว็บไซต์อยู่ และอยากที่จะทำให้เว็บไซต์ติดหน้าแรกบน Search Engine อย่าง Google นอกจากจะขยันทำคอนเทนต์คุณภาพ, ปรับ On-Page ของเว็บไซต์ให้ดีขึ้น หรือทำ Link Building รวมถึง Backlink ที่มีประสิทธิภาพแล้ว อีกสิ่งหนึ่งที่สำคัญเลยก็คือ การปรับเว็บไซต์ให้ตรงตามเกณฑ์ Core Web vitals ซึ่งค่าต่างๆ ที่ต้องปรับนั้น สามารถดูได้จากเครื่องมือที่ชื่อว่า “Pagespeed Insights” 

โดยเจ้าตัว Pagespeed Insights นั้นไม่ได้ทำหน้าที่แค่ตรวจสอบว่า เว็บไซต์ของคุณนั้นตรงตามหลักเกณฑ์ Core Web Vitals หรือไม่เท่านั้น แต่ยังช่วยรายงานผลค่าอื่นๆ ที่ทำให้เว็บไซต์โหลดช้าได้ด้วย ว่าแต่…Pagespeed Insights คืออะไร ใช้อย่างไร และจะอ่านค่าต่างๆ เพื่อแก้ไขเว็บไซต์ให้โหลดเร็วขึ้นได้อย่างไรบ้างนั้น วันนี้ Content Cube มีคำตอบมาฝากทุกคนแล้วค่ะ

Pagespeed Insight คืออะไร 

ที่มาภาพ: engageinteractive.co.uk

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

เกณฑ์คะแนน Performance Score บน Pagespeed Insights

• คะแนน 0-49 ถือว่าแย่ 
• คะแนน 50-89 ต้องปรับปรุง 
• คะแนน 90-100 ดีเยี่ยม

Note: แต่โดยปกติค่าเฉลี่ยอยู่ที่ 70 ขึ้นไปก็ถือว่าโอเคแล้วค่ะ 

วิธีตรวจสอบความเร็วเว็บไซต์ด้วย Pagespeed Insights 

1. ให้เข้าไปที่ Google Pagespeed Insights ที่เป็นเครื่องมือตรวจสอบความเร็วของเว็บไซต์ฟรีจากทาง Google
2. หลังจากนั้นให้ใส่ URL ของเว็บไซต์ที่ต้องการจะตรวจสอบลงไปแล้วกด Analyze

1. ผลลัพธ์ที่ขึ้นมาจะมีทั้งผลลัพธ์ของเวอร์ชัน Mobile และ Desktop โดยด้านบนจะมีการสรุปคะแนนรวมที่ทำได้เอาไว้ให้ด้วย

ผลลัพธ์เวอร์ชัน Mobile

ผลลัพธ์เวอร์ชัน Desktop

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

ค่าต่างๆ บน Pagespeed Insights หมายถึงอะไร แก้อย่างไร

สำหรับหัวข้อนี้จะเป็นตัวอย่างการอ่านค่าต่างๆ ที่อยู่บน Google Pagespeed Insights ที่มักจะเจอกันบ่อยๆ ว่าหมายถึงอะไร พร้อมทั้งบอกวิธีการแก้ไขให้ด้วย ดังนี้

รวม 6 Metrics สำคัญของ Pagespeed Insights

มาเริ่มต้นกันที่ 6 องค์ประกอบของหน้าเว็บที่มีผลต่อ Page Speed กันดีกว่า โดยเมตริกเหล่านี้หมายถึง

1. First Contentful Paint (FCP) คือ ระยะเวลาของการรอก่อนที่จะได้เห็นผลลัพธ์แรกบนหน้าเว็บไซต์ ซึ่งรวมทั้งหมดไม่ว่าจะเป็นรูปภาพ, ข้อความที่ไม่ใช่สีขาว แต่ไม่รวม Iframe (โดย Google จะให้ความสำคัญกับเรื่องนี้ 15%)
2. Speed Index (SI) คือ ความเร็วในการแสดงเนื้อหาระหว่างการโหลดหน้าเว็บไซต์ ถ้าตัวเลขยิ่งน้อยยิ่งดี เพราะแสดงให้เห็นว่าเว็บไซต์นั้นโหลดได้เร็ว (โดย Google จะให้ความสำคัญกับเรื่องนี้ 15%)
3. Largest Contentful Paint (LCP) คือ ความเร็วในการโหลดคอนเทนต์ที่ใหญ่ที่สุด หากโหลดช้าก็จะยิ่งได้คะแนนในส่วนนี้น้อย ทางที่ดีควรใช้เวลาโหลดไม่เกิน 2.5 วินาที (โดย Google จะให้ความสำคัญกับเรื่องนี้ 25%)
4. Time to Interactive (TTI) คือ ระยะเวลาที่หน้าเว็บจะแสดงได้อย่างสมบูรณ์ ซึ่งความเร็วที่ดีควรจะอยู่ที่ประมาณ 0-3.8 วินาที (โดย Google จะให้ความสำคัญกับเรื่องนี้ 15%)
5. Total Blocking Time (TBT) คือ เมตริกที่ใช้วัดเวลาการรอ First Contentful Paint (FCP) และ Time to Interactive (TTI) ทำงาน (โดย Google จะให้ความสำคัญกับเรื่องนี้ 25%)
6. Cumulative Layout Shift CLS (คือ) ค่าที่ใช้วัดความเสถียรของ Layout ทั้งหมดของหน้าเพจ ส่วนใหญ่มักเกิดจากปัญหาจาก css และ javascript สำหรับค่ามาตรฐานก็ควรที่จะได้ไม่เกิน 0.1 (โดย Google จะให้ความสำคัญกับเรื่องนี้ 5%)

แก้ 4 ปัญหาเรื่องรูปภาพบนเว็บไซต์ 

สำหรับเรื่องปัญหารูปภาพบนเว็บไซต์ เรามักจะโดนแจ้งเตือนอยู่บ่อยๆ ประมาณ 4 เรื่องด้วยกัน คือ

1. Serve images in next-gen formats

Serve images in next-gen formats คือ คำแนะนำให้เปลี่ยนสกุลรูปภาพเดิม เช่น JPEG, PNG ไปเป็นสกุลใหม่ เช่น Webp, AVIF ซึ่งขนาดไฟล์เล็กกว่า ส่งผลให้การแสดงเนื้อหาบนหน้าจอไวขึ้น

ที่มาภาพ: gtmetrix.com

วิธีแก้ Serve images in next-gen formats

การปรับรูปให้เป็นสกุล Webp, AVIF

• ใช้ Plug-in บน WordPress เช่น WP Rocket, ShortPixel Adaptive Images, Imagify เป็นต้น
• เปลี่ยนทีละรูปด้วยการใช้เครื่องมือแปลงไฟล์รูปภาพ เช่น Squoosh, XnConvert เป็นต้น

2. Properly Size

Properly Size คือ การใช้ขนาดรูปภาพที่พอดีกับขนาดของหน้าจอ ไม่เช่นนั้นจะแสดงผลช้า โดยขนาดที่พอดีกับการแสดงผลบนอุปกรณ์ต่างๆ จะมีรายละเอียด ดังนี้

1. 320px — 480px: ขนาดที่พอดีกับ Mobile
2. 481px — 768px: ขนาดที่พอดีกับ iPads, Tablets 
3. 769px — 1024px: ขนาดที่พอดีกับ Small screens, laptops 
4. 1025px — 1200px: ขนาดที่พอดีกับ Desktops, large screens 
5. 1201px and more : ขนาดที่พอดีกับ Extra large screens, TV

วิธีแก้ Properly Size

ปรับขนาดภาพให้เหมาะกับหน้าจอ

• ใช้ Plugin บน WordPress เช่น WP Rocket, ShortPixel Adaptive Images, Imagify, Optimus เป็นต้น
• เปลี่ยนทีละรูปโดยการใช้โปรแกรม Re-Size ภาพ เช่น Photoscape X,  Photoshop เป็นต้น

3. Defer Offscreen Images

Defer Offscreen Images คือ การกำหนดให้ Download & Display รูปภาพส่วนที่แสดงบนหน้าจอเท่านั้น ส่วนที่ยังเลื่อนไม่ถึงก็ยังไม่ต้องทำการโหลด เพื่อทำให้ผู้ชมเห็นเนื้อหาเว็บเพจเร็วขึ้น ไม่เช่นนั้นจะต้องรอให้ภาพโหลดทั้งหมดก่อนจึงจะเห็นเนื้อหาบนหน้าจอ

ที่มาภาพ: www.tezify.com

วิธีแก้ Defer Offscreen Images

กำหนดให้ Download & Display เฉพาะรูปในส่วนที่แสดงผลบนหน้าจอ หรือการทำ Lazy load

• ใช้ Plugin บน WordPress เช่น WP Rocket, ShortPixel Adaptive Images, Optimus เป็นต้น
• แก้ด้วยการเพิ่ม “loading” attribute  ใน <img> หรือ < iframe> โดยการใส่โค้ด HTML เช่น

<img src=”image.png” loading=”lazy” alt=”…” width=”200″ height=”200″>

4. Efficiently encode images

Efficiently encode images คือ การลดขนาดไฟล์ภาพลงโดยความคมชัดของภาพไม่ลดลงมาก เพื่อให้แสดงผลได้เร็วมากยิ่งขึ้น

วิธีแก้ Efficiently encode images

ลดขนาดไฟล์ภาพโดยภาพยังคมชัดเพียงพอที่ใช้งานบนเว็บไซต์ได้

• ใช้ Plugin บน WordPress เช่น WP Rocket, ShortPixel Adaptive Images, Optimus เป็นต้น
• ใช้ Image Compression Tool เพื่อบีบอัดไฟล์ภาพหลังจากนั้นอัปโหลดรูปใหม่แทนรูปเดิม ยกตัวอย่างเครื่องมือเช่น imagecompressor, tinypng เป็นต้น

ปัญหา Eliminate render-blocking resources

ที่มาภาพ: wpbeginner.com

สำหรับปัญหา Eliminate render-blocking resources จะเกิดจากไฟล์ JavaScript หรือ CSSที่เบราว์เซอร์จะต้องรอให้โหลดเสร็จก่อน ถึงจะเริ่ม Render ได้ แต่เมื่อ HTML หรือ CSS มีความซับซ้อนมากขึ้นก็จะทำให้ Render ช้าลง ทำให้ User Experience เสียไปได้จากการที่ไม่เห็นเนื้อหาบนเว็บไซต์เร็วเท่าที่ควรเป็น

วิธีแก้ Eliminate render-blocking resources

• ใช้ Plug-in บน WordPress เช่น WP Rocket

ที่มาภาพ: wp-rocket.me

ลบ CSS ที่ไม่จำเป็นด้วย WP Rocket

Note: WP Rocket จะพยายามลดขนาดไฟล์ CSS ทั้งหมด และโหลดเฉพาะ CSS ที่จำเป็น ซึ่งอาจจะส่งผลต่อหน้าตาของเว็บไซต์ได้ แนะนำให้ทดสอบเว็บไซต์บนอุปกรณ์ต่างๆ อย่างละเอียดอีกรอบหนึ่งด้วยนะคะ

ที่มาภาพ: wp-rocket.me

ทำการย่อขนาดและรวมไฟล์ JavaScript ได้เหมือนกับที่ทำกับ CSS 

สรุปการใช้งาน Pagespeed Insights 

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

ใครที่ยังไม่ได้ปรับปรุง Page speed ที่ทำให้เว็บเร็วขึ้น ก็อย่าลืมนำวิธีการแก้ไขเหล่านี้ไปใช้งานได้นะคะ 

อ้างอิง 

How to Fix Render-Blocking JavaScript and CSS in WordPress

วิเคราะห์และเพิ่มประสิทธิภาพเว็บไซต์ด้วยเครื่องมือ PageSpeed

How to Score a Perfect 100% on Google PageSpeed Insights