บทความสอน PageSpeed แบบเจาะลึก ที่จะสอนให้คุณทำ Webpage Speed Test อย่างเข้าใจจริงด้วย GTMetrix และ Google PageSpeed Insights

คุณจะรู้ว่า PageSpeed และ YSlow คืออะไร และทำไมถึงสำคัญกับ SEO (โดยเฉพาะ Mobile SEO)

เรียนรู้วิธีอ่าน PageSpeed Waterfall Chart ด้วย GTMetrix ทดสอบคะแนนความเร็วในการโหลดหน้าเว็บ พร้อมทั้งหาสาเหตุที่ทำให้หน้าเว็บของคุณโหลดช้า

ต่อด้วยวิธีการใช้ Google PageSpeed Insights หาโอกาสทำให้เว็บคุณโหลดเร็วขึ้นพร้อมวิธีทำ On-Page SEO Audit เบื้องต้นด้วยตนเองด้วย Google Lighthouse Webpage Audit

01

รู้จักกับ PageSpeed

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

PageSpeed สำคัญอย่างไรกับ SEO ?

Google ได้ประกาศชัดเจนว่า PageSpeed เป็นหนึ่งในปัจจัยที่ใช้จัดอันดับเว็บ โดยเฉพาะ Mobile SEO Ranking

จากข้อมูลของ Google Mobile Page Speed พบว่า หากหน้าเว็บเพจใช้เวลาโหลดเกิน 5 วินาที โดยเฉลี่ยคนกว่า 90% จะเปลี่ยนไปเข้าหน้าเว็บเพจอื่นแทน

Bounce Rate เพิ่มขึ้น เมื่อเว็บเพจโหลดนานขึ้น

Google ใช้ Machine Learning ในการคาดการณ์โอกาสที่ผู้ใช้งานจะเปลี่ยนไปเข้าเว็บอื่นแทน (Bounce Rate) เมื่อหน้าเว็บเพจโหลดนานเกินไป

จาก 1 วินาที เป็น 3 วินาที Bounce Rate เพิ่มขึ้น 32%
32%
จาก 1 วินาที เป็น 5 วินาที Bounce Rate เพิ่มขึ้น 90%
90%
จาก 1 วินาที เป็น 6 วินาที Bounce Rate เพิ่มขึ้น 106%
90%
จาก 1 วินาที เป็น 10 วินาที Bounce Rate เพิ่มขึ้น 123%
123%

นั่นหมายถึงคุณกำลังเสียลูกค้า จากหน้าเว็บเพจที่โหลดช้า

อีกทั้งเมื่อคน ‘คลิก’ เข้าหน้าเว็บเพจของคุณจากผลการค้นหาใน Google แล้วเปลี่ยนไปเข้าหน้าเว็บเพจอื่นแทนทันที Google จะเข้าใจว่าเว็บเพจหน้านั้น ไม่น่าสนใจ

ซึ่งจะส่งผลให้เว็บเพจมี Bounce Rate สูง และจะส่งผลเสียต่ออันดับเว็บเพจของคุณใน Google แน่นอน

เห็นความสำคัญของ PageSpeed กับ SEO กันแล้ว มาเข้าใจ PageSpeed กันดีกว่า

PageSpeed คืออะไร ?

PageSpeed คือการวัด ‘คะแนน’ ที่ส่งผลต่อความเร็วในการโหลดเว็บเพจหน้าหนึ่งๆ

PageSpeed จะมีช่วงคะแนนตั้งแต่ 0-100 ยิ่งมีคะแนนมาก หมายถึงเว็บเพจหน้านั้นทำตามรายการ PageSpeed Best Practice ได้ครบถ้วนมากกว่า ซึ่งจะส่งผลให้สามารถโหลดหน้าเว็บเพจได้เร็วกว่าหน้าที่ได้คะแนนน้อยๆ

ดังนั้น PageSpeed จึงไม่ใช่คะแนนของทั้งเว็บไซต์ และไม่ใช่คะแนนที่วัด ‘ความเร็ว’ ในการโหลดหน้าเว็บโดยตรง อย่างที่หลายคนเข้าใจ

เปรียบเทียบง่ายๆ

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

คุณอาจจะเดาได้แล้ว่าอะไรสำคัญกว่าคะแนน PageSpeed

ความเร็ว PageSpeed สำคัญกว่าคะแนน PageSpeed

คุณควรให้ความสำคัญกับ ‘ความเร็ว’ หรือก็คือระยะเวลาที่ใช้ในการโหลดหน้าเว็บ (Page Load Time) มากกว่าคะแนน PageSpeed

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

คุณไม่จำเป็นต้องทำ PageSpeed 100 คะแนนก็ได้ ตราบเท่าที่หน้าเว็บเพจของคุณไม่ทำให้ผู้เข้าชมรู้สึกว่า ‘โหลดช้า’ จนเกินรอ

แล้วแค่ไหนเรียกว่าช้า ?

โดยเฉลี่ยหน้าเว็บเพจของคุณควรใช้เวลาโหลด และสามารถแสดงผลได้ภายใน 1-3 วินาที

Google เก็บ สถิติ Mobile Boune Rate จากผู้ใช้งาน Google Chrome ทั่วโลก พบว่าอัตรา Mobile Bounce Rate นั้นลดลงเมื่อหน้าเว็บใช้เวลาในการโหลดน้อยลง และยังพบอีกว่าหน้าเว็บที่โหลดได้เร็วยังส่งผลทำให้ Conversion Rate เพิ่มมากขึ้นอีกด้วย

กราฟแสดงเว็บเพจที่โหลดเร็วขึ้น ยิ่งมีผลดีต่อ Bounce Rate
กราฟแสดงเว็บเพจที่โหลดเร็วขึ้น ยิ่งมีผลดีต่อ Bounce Rate

แล้วจะรู้ได้ยังไงว่าหน้าเว็บของคุณโหลดได้เร็วขนาดไหน?

คุณสามารถทดสอบความเร็วในการโหลดหน้าเว็บได้เองแบบง่ายๆ (ฟรีด้วย) ด้วยเครื่องมือจากเว็บทำ PageSpeed Test ต่างๆ

02

แนะนำเว็บทำ PageSpeed Test ฟรี

เครื่องมือทดสอบความเร็วในการโหลดหน้าเว็บเพจที่คุณสามารถใช้ได้ฟรี

GTMetrix

GTMetrix เว็บทำ PageSpeed ฟรี

GTMetrix คือเว็บทำ PageSpeed Test ฟรี ที่แอดแนะนำ เนื่องจากให้ข้อมูล PageSpeed อย่างละเอียด มีเครื่องมือเยอะที่สุด ใช้งานง่าย เก็บประวัติย้อนหลังได้ด้วย

GTMetrix แบบฟรี มีอะไรน่าสนใจบ้าง

  • แสดงเวลา (Page Load Time) ที่ใช้ในการโหลดหน้าเว็บ
  • แสดงคะแนน PageSpeed และ YSlow พร้อมอธิบายสาเหตุ และแนะนำวิธีแก้ไข
  • มี Waterfall Chart และ Page Load Timing แสดงลำดับการโหลดไฟล์ และเวลาที่ใช้อย่างละเอียด
  • List Itemเลือก Test Location ได้
  • เลือก Test Device สำหรับ Mobile ได้
  • สามารถนำผลการทดสอบแต่ละครั้งมาเปรียบเทียบกันได้ด้วย
  • มี Page Load Video บันทึกการแสดงผลหน้าเว็บขณะโหลด
  • มี Page Monitor ทำ PageSpeed Test ให้อัตโนมัติทุกวัน (ได้สูงสุด 3 เว็บเพจ)
  • สามารถส่งสรุปรายงาน PageSpeed Test ไปที่อีเมล์ได้
  • มีปลั๊กอินสำหรับ WordPress โดยเฉพาะ

คุณสามารถเก็บประวัติ Speed Test ได้ถึง 100 เว็บเพจ URL เป็นเวลา 30 วัน (20 เว็บเพจ สำหรับเก็บประวัติ Speed Test แบบไม่จำกัดเวลา)

นอกจากนั้น GTMetrix ยังทำ Speed Test ให้โดยอัตโนมัติ วันละ 1 ครั้ง สูงสุดถึง 3 เว็บเพจ URL

หากคุณต้องการจำนวน URL ที่มากกว่า GTMetrix แบบฟรี คุณสามารถใช้ GTMetrix Pro ที่มีจำนวนหน้าในการทดสอบให้คุณใช้ได้มากขึ้น รวมทั้งทำการทดสอบ Page Speed อัตโนมัติได้ทุกชั่วโมงอีกด้วย

หน้าคะแนน PageSpeed และเวลาที่ใช้ (Page Load Time)
หน้าคะแนน PageSpeed และเวลาที่ใช้ (Page Load Time) ที่มีให้ครบถ้วน
GTMetrix เก็บประวัติการทำ PageSpeed Test
GTMetrix เก็บประวัติการทำ PageSpeed Test ให้ดูย้อนหลัง และเปรียบเทียบผลแต่ละครั้งได้ด้วย

WebPageTest

WebpageTest เว็บทำ PageSpeed ฟรี

WebPageTest เป็นเว็บทำ PageSpeed Test ฟรี ที่ใช้ได้ดีอีกที่หนึ่ง ให้คะแนนเป็นเกรด A-E เน้นรายงานผลการทดสอบเชิงเทคนิค เหมาะสำหรับผู้ที่เป็น Web Developer หรือ Advance User

จุดเด่นของ WebPageTest

  • Advance Setting ที่ปรับแต่ง-ตั้งค่าผลการทดสอบได้ละเอียดกว่า GTMetrix เช่น ทดสอบแบบปิดการใช้งานโค้ด JS หรือ Pop-Up Banner ต่างๆ
  • สามารถทำ PageSpeed Test ซ้ำกันได้หลายๆครั้งใน (Multiple Run) แล้วนำผลที่ได้มาเฉลี่ย เพื่อลดความคลาดเคลื่อนในการคิดคะแนน
  • มี Browser, Test Location, Connection และ Test Device ให้เลือกเยอะที่สุด
  • รายงานผลการทดสอบเชิงเทคนิคที่ละเอียดกว่า GTMetrix

อย่างไรก็ตามเว็บ WebPageTest นั้นมีการใช้งานที่ยุ่งยากกว่า GTMetrix รวมทั้งไม่มี Auto PageSpeed Test ที่เก็บความเร็ว PageSpeed ให้คุณอัตโนมัติทุกวัน

หน้าคะแนนทดสอบ PageSpeed ด้วย WebpageTest
หน้าคะแนนทดสอบ PageSpeed ด้วย WebpageTest

Pingdom

Pingdom เว็บทำ PageSpeed ฟรี

Pingdom เป็นเว็บทำ PageSpeed Test ที่มีหน้าตาใช้งานง่ายอีกเว็บหนึ่ง แต่เครื่องมือไม่เยอะเท่า GTMetrix จุดเด่นคือสรุปผลการทดสอบด้านต่างๆให้คุณดูได้ง่ายๆ เช่น Response Code หรือ Content Size ต่างๆ

หน้า PageSpeed Test ใน Pingdom
หน้า PageSpeed Test ใน Pingdom

Google PageSpeed Insights

Google PageSpeed Insights เว็บทำ PageSpeed ฟรี

มาถึงเว็บ PageSpeed Insights เครื่องมือ PageSpeed Test ยอดนิยมจาก Google ใช้เทคโนโลยี Lighthouse ในการให้คะแนนทดสอบความเร็วในการโหลดหน้าเว็บ

Field Data เป็นจุดเด่นของ Google PageSpeed Insights ซึ่งเป็นเวลาที่ Google เก็บจากผู้ใช้งานจริงๆ (Real User) ที่เข้าไปโหลดหน้าเว็บเพจนั้นๆ แตกต่างจากการทำ PageSpeed ทั่วๆไป ซึ่งเป็นความเร็วที่วัดจากโปรแกรมจำลอง หรือ บอท ที่ไปทดสอบโหลดหน้าเว็บ

หน้า PageSpeed Test ใน Google PageSpeed Insights
หน้า PageSpeed Test ใน Google PageSpeed Insights
03

วิธีใช้ GTMetrix ทำ PageSpeed Test

รู้จักวิธีการอ่านคะแนน PageSpeed และ YSlow เข้าใจคำแนะนำประเภทต่างๆใน GTMetrix รวมถึงวิธีการอ่าน Waterfall Chart เพื่อหาต้นเหตุของปัญหาที่ทำให้เว็บคุณโหลดช้า

ขั้นตอนทำ PageSpeed Test ด้วย GTMetrix

1 เข้าไปที่เว็บ GTMetrix จากนั้นคลิกที่ Sign Up ด้านขวาบน เพื่อทำการสมัครสมาชิกกันก่อน (คุณจะได้เซฟ URL และเก็บผลการทำ PageSpeed Test ได้ง่ายๆ)

ปุ่ม Sign Up สมัคร GTMetrix ฟรี

2 ใส่รายละเอียดบัญชี GTMetrix ของคุณให้ครบ จากนั้นคลิก Create Account

ฟอร์มสทัครบัญชี GTMetrix ฟรี

3 ใส่ URL ของหน้าเว็บที่คุณต้องการทดสอบ

4 คลิกที่ Analysis Options จะมีตัวเลือกให้คุณตั้งค่าการทดสอบต่างๆแบบละเอียด แนะนำให้คุณตั้งค่าในส่วนของ Test Format ให้ครบ

4.1 เลือก Test Location ให้ใกล้ประเทศที่ตั้งเซิร์ฟเวอร์ หรือผู้ใช้งานหลักของคุณมากที่สุด

4.2 เลือก Browser ที่ใช้ในการทดสอบ Page Speed สามารถเลือก Chemo (Desktop) สำหรับ ทดสอบการโหลดเว็บจาก PC หรือ Chrome (Android) สำหรับทดสอบ Mobile PageSpeed

4.3 เลือกความเร็วอินเตอร์เน็ตที่ใช้ในการทดสอบ สามารถใช้ Broadband Fast สำหรับเน็ตบ้าน และ LTE Mobile (4G) สำหรับเน็ตมือถือ

5 เมื่อตั้งค่าต่างๆเสร็จ คลิกที่ Analyze เพื่อเริ่มทำ PageSpeed Test

ตั้งค่าก่อนทำ PageSpeed Test ใน GTMetrix

อธิบายการตั้งค่าตัวเลือกอื่นๆ (ปล่อยโล่งไว้ก็ได้)

  • Create Video: บันทึกไฟล์วิดิโอแสดงผลขณะทำการทดสอบ
  • AdBlock Plus: เปิดตัวบล๊อกโฆษณาเพื่อทดสอบลดเวลาการโหลดจากการปิด pop-up โฆษณา
  • Stop test onload: หยุกการทดสอบเมื่อหน้าเพจเสร็จ onload ทำให้เวลาที่แสดงผลการทดสอบใน dashboard เป็นเวลา onload แทน fully loaded
  • HTTP Authentication: ใช้ในการทดสอบหน้าที่ผู้ใช้งานต้องทำการ login

เมื่อ GTMetrix ทำการทดสอบ PageSpeed เสร็จ คุณจะเห็นหน้าผลการทดสอบ PageSpeed แบบนี้

หน้าสรุปผลการทดสอบ PageSpeed ใน GTMetrix
หน้าสรุปผลการทดสอบ PageSpeed ใน GTMetrix

มาดูคะแนน PageSpeed แบบต่างๆใน GTMetrix กันต่อ

อะไรคือคะแนน PageSpeed และ YSlow

คะแนน PageSpeed และ YSlow ใน GTMetrix

ในช่อง Performance Scores จะเป็นการให้คะแนนารโหลดหน้าเว็บของคุณด้วย PageSpeed และ YSlow

เคยสงสัยมั้ยว่า…

ได้คะแนน PageSpeed สูงแต่ทำไมหน้าเว็บโหลดช้า?

นั่นเพราะคะแนน PageSpeed มีผลแค่ครึ่งเดียวต่อความเร็วในการโหลดหน้าเว็บ สาเหตุที่ทำให้หน้าเว็บเพจโหลดเร็วหรือช้านั้น แบ่งเป็น 2 กลุ่มใหญ่ๆ คือ Front-end และ Back-end:

Front-end Optimization

Front-end จะเกี่ยวกับโค้ด และไฟล์ต่างๆที่ใช้เพื่อแสดงผลหน้าเว็บเพจ ไม่ว่าจะเป็นโค้ด HTML, CSS, JS, ไฟล์รูปภาพ, ไฟล์วิดิโอ เป็นต้น

PageSpeed และ YSlow เป็นคะแนนจากการทดสอบ Front-End Optimization เท่านั้น

คะแนน PageSpeed และ YSlow จะบอกว่า Front-end เว็บเพจของคุณทำตาม PageSpeed Best Practice ต่างๆได้ครบถ้วนแค่ไหน (ซึ่งจะส่งผลต่อความเร็วในการโหลดหน้าเว็บเพจอีกทีหนึ่ง)

PageSpeed เป็นคะแนน Best Practice จาก Google และ YSlow เป็นคะแนน Best Practice จาก Yahoo

ยิ่งทำตาม Best Practice ได้เยอะ ยิ่งได้คะแนน PageSpeed และ YSlow เยอะ (สูงสุดคือ 100%)

หากคลิกที่แท็บ PageSpeed หรือ YSlow จะมีรายการคำแนะนำ Recommendation ต่างๆที่ GTMetrix ทำการทดสอบให้

มี Grade ที่บอกว่าคุณทำตามคำแนะนำครบถ้วนขนาดไหน พร้อมทั้งวิธีแก้ไข (แบบกว้างๆ) และรายการไฟล์ที่ยังไม่ผ่านการทดสอบของแต่ละหัวข้อด้วย

PageSpeed และ YSlow แบ่งประเภทของคำแนะนำออกเป็นหมวด คือ

Server คะแนนส่วนที่เป็นการตั้งค่าของโฮสติ้งเซิร์ฟเวอร์สำหรับการแสดงผลหน้าเว็บ เช่น การใช้แคช (Leverage browser caching) หรือจำนวน Redirect (Avoid landingPage redirects)

Content คะแนนโครงสรา้งของหน้าเว็บ เช่น ขนาดไฟล์ (Minimize request size) หรือ จำนวนไฟล์เสีย (Avoid bad request)

Images คะแนนของรูปภาพต่างๆ เช่น ใช้ขนาดรูปภาพเหมาะกับขนาดหน้าจอ (Serve scaled images)

CSS, JS คือคะแนนในส่วนของไฟล์โค้ด CSS และ JavaScript เช่น การลดขนาดไฟล์โค้ด (Minify)

Cookie มีเฉพาะใน YSlow เป็นคะแนนการใช้คุกกี้ของ Browser

นอกจากนั้นยังระบุความสำคัญของคำแนะนำ ไล่ตั้งแต่ High (สำคัญมาก), Medium และ Low ดังนั้นคุณควรหาทางเพิ่มคะแนนในส่วนของ High ให้ได้มากที่สุด

คำแนะนำวิธีเพิ่มคะแนน PageSpeed ใน GTMetrix
คำแนะนำวิธีเพิ่มคะแนน PageSpeed ในหัวข้อต่างๆ

Back-end Optimization

Back-end นั้นจะขึ้นอยู่กับคุณภาพของเว็บโฮสติ้งที่คุณใช้เป็นหลัก ไม่ว่าจะเป็นประสิทธิภาพของเครื่องเซิร์ฟเวอร์ ที่ตั้ง ประเภทของโฮสติ้ง (การตั้งค่าฝั่งเซิร์ฟเวอร์บางส่วนถือว่าเป็น Front-end) เป็นต้น

Back-end มีตัวแปรมากมายที่ส่งผลต่อความเร็วในการโหลดหน้าเว็บ และผู้ใช้งานเองก็ไม่ค่อยมีสิทธิ์ในการปรับแต่งการตั้งค่าของโฮสติ้งเซิร์ฟเวอร์อยู่แล้ว (ยกเว้น VPS) จึงค่อนข้างยากที่จะให้คะแนน back-end

อย่างไรก็ตาม ประสิทธิภาพของ Back-end สามารถใช้ Time to First-Byte (TTFB) เป็นตัวบอกได้

แล้ว TTFB คืออะไร ?

คำตอบอยู่ในส่วนต่อไป “Page Load Timings”

เข้าใจลำดับการโหลดด้วย Page Load Timings

หากคุณคลิกที่แท็บ Timings ใน GTMetrix จะเห็น Page Load Timings ซึ่งก็คือ Checkpoint หลักๆที่จะบอกว่า ‘ลำดับการโหลด’ เพื่อแสดงผลหน้าเว็บเพจในแต่ละขั้นตอนใช้เวลาเท่าไหร่ (หน่วยวินาที)

Page Load Timings ใน GTMetrix แสดงลำดับการโหลดหน้าเว็บ
Page Load Timings ใน GTMetrix แสดงลำดับการโหลดหน้าเว็บ

*คุณอาจจะสงสัยว่า ms กับ s คืออะไร: s (Second) คือหน่วยวินาที ส่วน ms (Millisecond) คือหนึ่งในพันของวินาที เช่น 500ms คือครึ่งวินาที แบบนี้เป็นต้น

 

Page Load Timings จะเริ่มตั้งแต่:

Time to First Byte (TTFB)​

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

คุณภาพ และที่ตั้งของโฮสติ้งเซิร์ฟเวอร์ รวมถึง Nameserver ที่ใช้จะเป็นปัจจัยหลักที่ทำให้ TTFB ช้าหรือเร็ว

TTFB นั้นประกอบด้วยเวลา 3 ส่วน คือ Redirect, Connect และ Backend

Redirect คือเวลาที่ใช้ในการเรียกโปรโตคอล HTTP, HTTPS และ WWW เช่น ผู้ใช้งานเรียก URL เว็บคุณผ่าน http แต่เว็บคุณใช้ https://www จะเกิด redirect 2 ครั้งคือ http redirect ไป https และ https redirect ไป https://www.

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

Connect คือเวลาที่ใช้ในการติดต่อกับโฮสติ้งเซิร์ฟเวอร์

Backend คือเวลาที่โฮสติ้งเซิร์ฟเวอร์ใช้ในการตอบกลับ และเริ่มส่งข้อมูลต่างๆกลับมาให้ Browser

First Paint (FP)​

FP คือเวลาที่ Browser เริ่มแสดงผลอะไรก็ได้บนหน้าจอ (อาจจะแค่โหลดสีภาพพื้นหลัง ก็นับ Firts Paint)

First Contentful Paint (FCP)​

FCP คือเวลาที่ Browser เริ่มแสดงผล ‘เนื้อหาจริงๆ’ บนหน้าจอ เช่นรูปภาพ, ข้อความ

DOM Interactive และ DOM Loaded (DOM)

DOM คือเวลาที่ Browser โหลดโค้ด HTML และ CSS ที่เป็นโครงสร้างหลักของหน้าเว็บเสร็จ และพร้อมที่จะเริ่มโหลดโค้ด JS ต่างๆ

Onload​

Onload คือเวลาที่โค้ดทุกอย่างบนหน้าเว็บโหลดเสร็จ

ถึงจุดนี้หน้าเว็บของคุณควรจะใช้เวลา Onload ไม่เกิน 3 วินาที

Fully Loaded​

Fully Loaded คือเวลาที่ใช้โหลดโค้ด JS ที่ตั้งไว้ให้ทำงานหลัง Onload (เช่น โค้ดใน Google Tag Manager)

GTMetrix จะนับ Fully loaded เมื่อไม่มีการโหลดโค้ด หรือไฟล์ใดๆเพิ่มใน 2 วินาทีหลังจากจบ onload

เวลาของ PageSpeed ที่แสดงใน GTMetrix จะเป็นเวลา Fully Loaded ซึ่งบางทีอาจจะดูเยอะกว่าความรู้สึก เพราะหน้าเว็บจริงๆจะโหลดเสร็จตั้งแต่ On-load แล้ว

Page Details แสดงเวลาที่ใช้ในการโหลดหน้าเว็บ
Page Details จะแสดงเวลาที่ใช้ในการโหลดหน้าเว็บแบบ Fully Loaded

ต่อไปมาดูลำดับการโหลดแบบละเอียด เพื่อหาต้นเหตุของไฟล์ที่ทำให้หน้าเว็บโหลดช้ากัน

วิเคราะห์ลำดับการโหลดแบบละเอียดด้วย Waterfall Chart

Waterfall Chart และ HTTP Header จะเป็นเครื่องมือสทรงพลัง ที่จะบอกถึงปัญหาว่า ไฟล์ไหนกันแน่ที่กำลังกินเวลาในการโหลดหน้าเว็บของคุณ

ทั้ง Waterfall Chart และ HTTP Header จะอยู่ในแท็บ Waterfall ของ GTMetrix

อะไรคือ Waterfall Chart?​

Waterfall Chart คือกราฟที่แสดงลำดับการโหลดโค้ด หรือไฟล์ทั้งหมดที่มีอยู่ในหน้าเว็บเพจนั้นๆโดยละเอียด พร้อมแสดงเวลาที่แต่ละไฟล์ใช้ในการโหลดด้วย

คุณสามารถใช้ WaterfallChart ในการหาโค้ด หรือไฟล์ที่เป็นต้นเหตุทำให้หน้าเว็บนั้นโหลดช้า

Waterfall Chart แสดงลำดับการโหลด และเวลาที่ใช้ของแต่ละไฟล์
Waterfall Chart แสดงลำดับการโหลด และเวลาที่ใช้ของแต่ละไฟล์

วิธีดู Waterfall ใน GTMetrix​

แต่ละบรรทัดใน Waterfall chart จะเรียงลำดับการโหลดไฟล์จากบนลงล่าง

หลักๆคือให้คุณมองหาไฟล์ที่ใช้เวลาในการโหลดนานๆ (แท่งกราฟที่ดูยาวกว่าเพื่อนในช่อง Timeline) รวมทั้งไฟล์ที่เสีย (404) จากนั้นค่อยหาทางแก้ไข

คุณสามารถใช้ช่องค้นหาที่อยู่ด้านบน หาชื่อไฟล์ที่ต้องการ หรือคลิกที่ปุ่ม Filter เพื่อแยกดูเฉพาะไฟล์แต่ละประเภทได้

เส้นๆแนวตั้งสีๆในช่อง Timeline คือเส้น Page Load Timings ตามที่กล่าวไว้ก่อนหน้านี้

อะไรคือ HTTP Headers?

HTTP Headers จะบอกรายละเอียดที่ Browser ใช้ในการเรียกไฟล์ (Request Header) และข้อมูลการตอบกลับ (Response Header) ของแต่ละไฟล์หลังถูกเรียกใช้

Response Header จะมีประโยชน์มากในการช่วยวิเคราะห์สถานะการแคชของไฟล์

ไฟล์ที่ใช้เวลาในการโหลดนาน ส่วนมากมักเป็นเพราะไฟล์ไม่ได้ถูกโหลดจาก ‘แคชไฟล์’ ซึ่งเป็นไฟล์ที่โหลดได้เร็วกว่าการโหลดจากโฮสติ้งเซิร์ฟเวอร์ต้นทางโดยตรง

HTTP Header ใน GTMetrix
HTTP Header ใน GTMetrix

ในช่อง cache-control max-age จะแสดงอายุการแคชของไฟล์นั้นๆ (เป็นวินาที) เช่น max-age=31536000 วินาที หรือเท่ากับ 1 ปี

หากคุณใช้ CDN อย่าง CloudFlare ในการแคชหน้าเพจ คุณสามารถดู CloudFlare Cache Status ใน HTTP Header จากบรรทัด cf-cache-status ว่าเป็น HIT (แคช) หรือ MISS (ไม่แคช)

การใช้งาน Report History ใน GTMetrix

เมื่อคลิกที่แท็บ History คุณสามารถดูประวัติการทำ Speed Test ย้อนหลัง พร้อมเปรียบเทียบผลการทดสอบแต่ละครั้งได้

กราฟใน Report History จะแบ่งเป็น 3 กราฟคือ

  • Page Timings สำหรับดูเวลาการโหลดแต่ละขั้นตอน
  • Page sizes and request counts สำหรับดูขนาดไฟล์ และจำนวน http requests
  • PageSpeed and YSlow Scores ดูคะแนน PageSpeed และ YSlow ในการทดสอบแต่ละครั้ง
GTMetrix เก็บประวัติการทำ PageSpeed Test
GTMetrix เก็บประวัติการทำ PageSpeed Test ให้ดูย้อนหลัง และเปรียบเทียบผลแต่ละครั้งได้ด้วย

การตั้งค่าเพื่อเซฟผลการทดสอบใน Page Settings​

GTMetrix จะเก็บประวัติการทำ Speed Test ไว้ให้คุณเป็นเวลา 30 วัน (สูงสุด 100 URL)

นอกจากนี้ คุณสามารถ ‘เซฟ’ URL เพื่อเก็บประวัติ Speed Test แบบไม่จำกัดเวลา (สูงสุด 20 URL)

การเซฟ URL นั้นเพียงคลิกที่ปุ่ม Page Settings เพื่อเปิดเมนูการตั้งค่า จากนั้นเลือก Save this page เป็น On แล้วคลิก Save Settings

เมนูตั้งค่าใน GTMetrix
คลิกที่เมนู Page Settings เพื่อตั้งค่าให้ ๅGTMetrix เก็บผลการทดสอบย้อนหลัง
Save this page เพื่อให้ GTMetrix เก็บผลการทดสอบ PageSpeed ย้อนหลัง
Save this page เพื่อให้ GTMetrix เก็บผลการทดสอบ PageSpeed ย้อนหลัง

การตั้งค่าให้ GTMetrix เก็บ SpeedTest ให้ทุกวัน

คุณสามารถตั้งค่า Monitor เพื่อให้ GTMetrix ทำ SpeedTest ให้ทุกวันได้จำนวน 3 URL

การตั้งค่า URL Monitor นั้นให้คลิกที่ Monitor จากนั้นเลือกความถี่ในการทดสอบในช่อง Monitor this page (ถ้าใช้แบบฟรี จะทำ Test ถี่สุดได้วันละครั้ง) จากนั้นคลิก Save Settings เพื่อบันทึกการตั้งค่า

เมนูตั้งค่าใน GTMetrix
คลิกที่เมนู Monitor เพื่อตั้งค่าให้ GTMetrix ทำ PageSpeed ให้อัตโนมัติ
ตั้งค่า Monitor this page เพื่อทำ Speed Test อัตโนมัติ
ตั้งค่า Monitor this page เพื่อทำ Speed Test อัตโนมัติ
04

วิธีใช้ Google PageSpeed Insights (PSI) ทำ PageSpeed Test

รู้จักกับการทำ Speed Test ด้วย Google PageSpeed Insights แบบต่างๆ

มาดูวิธีทดสอบคะแนนการโหลดหน้าเว็บเพจด้วย Google PageSpeed Insights กันต่อ

รู้หรือไม่ว่า…

คุณสามารถใช้ Google PageSpeed ได้ถึง 4 ช่องทางด้วยกัน

4 ช่องทางการใช้งาน Google PageSpeed Insights

1. เว็บ PageSpeed Insights

เข้าไปที่เว็บ PageSpeed Insights ของ Google ใส่ URL หน้าเว็บเพจที่ต้องการทดสอบ จากนั้นคลิก Analyze ก็จะได้คะแนน PageSpeed Insights ของหน้าเว็บนั้นออกมา

ทดสอบคะแนนความเร็วการโหลดหน้าเว็บด้วย Google PageSpeed Insights
ทดสอบคะแนนความเร็วการโหลดหน้าเว็บด้วย Google PageSpeed Insights

2. เว็บ Google Analytics

เข้าไปที่บัญชี Google Analytics ของคุณ PageSpeed จะอยู่ในเมนู Behavior > Site Speed > Speed Suggestions จะมีคะแนน PageSpeed Score ของแต่ละหน้าเว็บเพจที่ Google Analytics เก็บข้อมูลไว้

หากคลิกที่ PageSpeed Suggestions ก็จะเป็นการเรียกหน้าเว็บ PageSpeed Insights เพื่อทดสอบคะแนน PageSpeed ของหน้าเว็บเพจนั้นๆ

คะแนน PageSpeed Scores ใน Google Analytics
คะแนน PageSpeed Scores ใน Google Analytics

3. ปลั๊กอิน Lighthouse Chrome Extension

Lighthouse นั้นเป็นโปรแกรมที่ Google PageSpeed Insights ใช้ในการคำนวนคะแนน PageSpeed Score

Lighthouse Chrome Extension นั้นเป็นปลั๊กอินที่เรียกใช้ผ่าน Chrome ได้เลย จุดเด่นคือนอกจาก PageSpeed แล้วมีคะแนน SEO Audit และ Best Practice ให้ด้วย

คุณสามารถเลือกประเภทการทดสอบคะแนน Lighthouse รวมถึงอุปกรณ์ที่จะทดสอบได้จากเมนู LIghthouse ใน Chrome Extension Bar

ทำ PageSpeed Test ด้วย Lighthouse Chrome Extension
ทำ PageSpeed Test ด้วย Lighthouse Chrome Extension

4. Google Chrome Developer Tools

Chrome Developer Tools เป็น เครื่องมือ PageSpeed Test อีกอันที่คุณสามารถเรียกใช้งานผ่าน Browser Google Chrome ได้โดยตรง

เมื่อคุณเปิดหน้าเว็บเพจที่ต้องการทดสอบใน Google Chrome Browser จากนั้นคลิก Ctrl+Shift+I เพื่อเปิด Developer Tools (หรือเรียกผ่านเมนูด้านขวาบน More Tools > Developer Tools ก็ได้)

เลือกแท็บ Audits จากนั้นเลือกอุปกรณ์, หัวข้อ Audits และความเร็วเน็ต จากนั้นคลิก Audits เพื่อเริ่มทำ PageSpeed Test

 

PageSpeed Test ด้วย Chrome Developer Tools
PageSpeed Test ด้วย Chrome Developer Tools

ทำความเข้าใจ Google PageSpeed Score

Google PageSpeed Insight จะแบ่งการแสดงคะแนน PageSpeed เป็น 3 ส่วน

Field Data คือ เวลาที่ใช้ในการโหลดหน้าเว็บเพจนั้นโดยผู้ใช้งานจริงๆ (Real User) ซึ่ง Google เก็บข้อมูลนี้จากผู้ใช้งาน Google Chrome Experience Report ทั่วโลก

Origin Summary คือ เวลาที่ใช้ในการโหลดหน้าเว็บเพจจากผู้ใช้งานจริง (เหมือน Field Data) แต่เป็นการโหลดจากเซิร์ฟเวอร์ต้นทางโดยตรง (ไม่ผ่านแคช หรือ CDN) จะเห็นว่า Origin Data จะโหลดนานกว่า Field Data เสมอ

Lab Data เป็นข้อมูลจำลองที่ ‘ประมาณ’ ความเร็วในการโหลดหน้าเว็บเพจจากคะแนน PageSpeed โดยใช้โปรแกรม Lighthouse

หน้าผลการทดสอบใน Google PageSpeed Insights
หน้าผลการทดสอบใน Google PageSpeed Insights

ทำความเข้าใจคะแนน Lighthouse Audit Report

หากคุณทดสอบ PageSpeed ด้วย Lighthouse ใน Chrome Extension หรือ Chrome Developer Tools คุณจะเห็นหัวข้อการให้คะแนนที่มากกว่าการทดสอบ PageSpeed ใน Google PageSpeed Insights

ซึ่งนอกจากคะแนน PageSpeed ใหัวข้อ Performance แล้ว Lighthouse จะมีหัวข้อคะแนนในส่วนของ Accessibility, Best Practice, SEO และ Progressive Web App เพิ่มเข้ามาด้วย

มาดูคะแนนแต่ละส่วนกัน 

คะแนนการทดสอบหัวข้อต่างๆใน Lighthouse Audit Report
คะแนนการทดสอบหัวข้อต่างๆใน Lighthouse Audit Report

Performance

คะแนนความเร็วในการโหลดหน้าเว็บ ซึ่งจะบอกว่าคุณทำตามคำแนะนำ PageSpeed Best Pratice ของ Google ได้ครบถ้วนแค่ไหน

คะแนน Performance ส่วนนี้จะเป็นอันเดียวกันกับ Lab Data ของ Google PageSpeed Insights

คะแนน Performance ใน Lighthouse Audit Report
คะแนน Performance ใน Lighthouse Audit Report

Accessibility

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

ตัวอย่างคะแนน Accessibility เช่น

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

จะเห็นว่าคะแนน Accessibility นั้นจะขึ้นอยู่กับธีมของเว็บเพจเป็นหลัก

คะแนน Accessibility ใน Lighthouse Audit Report
คะแนน Accessibility ใน Lighthouse Audit Report

Best Practices

คะแนนเกี่ยวกับโครงสร้างเว็บเพจของคุณที่ Google แนะนำ ซึ่งส่วนมากจะเป็นคะแนนเกี่ยวกับความปลอดภัยปลอดภัยด้านข้อมูลของผู้ใช้งาน

คะแนน Best Practice เช่น

คะแนน Best Practices ใน Lighthouse Audit Report
คะแนน Best Practices ใน Lighthouse Audit Report

SEO

คะแนนเกี่ยวกับ ‘โครงสร้างโค้ดของเว็บเพจ’ เพื่อให้เสิร์ชเอนจินอย่าง Google สามารถค้นหา และจัดเก็บเนื้อหาในหน้าเว็บได้ง่ายขึ้น (Index) ซึ่งจะส่งผลต่ออันดับของเว็บเพจนั้นๆใน Google Ranking

คะแนน SEO เช่น

  • มีการใช้แท็ก <title>
  • มีไฟล์ robot.txt ที่ถูกต้อง
  • มีการใช้แท็ก <alt> สำหรับรูปภาพ

อย่างไรก็ตาม คะแนน SEO ใน Lighthouse นั้นไม่ได้กล่าวถึงการทำ On-Page SEO ในส่วนอื่นๆที่จำเป็นด้วย เช่น โครงสร้างของเนื้อหา อย่าง XML sitemap หรือ <h1> แท็ก

หากจะทำ On-page SEO แนะนำให้ใช้เว็บทำ SEO ฟรี เช่น Ubersuggest หรือใช้ WordPress SEO ปลั๊กอิน อย่าง Yoast หรือ RankMath จะครบถ้วนกว่า

คะแนน SEO ใน Lighthouse Audit Report
คะแนน SEO ใน Lighthouse Audit Report

Progressive Web App

คะแนนที่บอกว่าเว็บเพจนั้นรองรับการเป็นเว็บแอพ (PWA) ครบถ้วนหรือไม่

แล้วอะไรคือ PWA?

PWA หรือ Progressive Web App คือการทำเว็บไซต์ของคุณให้เป็นเสมือนแอพบนมือถือ ซึ่งผู้ใช้งานสามารถติดตั้ง และเข้าเว็บของคุณได้จากหน้า Home Screen

หากคุณใช้ WordPress คุณสามารถใช้ปลั๊กอินอย่าง SuperPWA ที่จะแปลงเว็บไซต์ของคุณให้รองรับ PWA ได้ภายในไม่กี่คลิกอีกด้วย

คะแนน Progressive Web App (PWA) ใน Lighthouse Audit Report
คะแนน Progressive Web App (PWA) ใน Lighthouse Audit Report
05

วิธีทำ PageSpeed Test อย่างถูกต้อง

เพื่อให้ได้ผลลัพธ์ที่แม่นยำที่สุดจากการทดสอบเวลาในการโหลดหน้าเว็บเพจด้วย PageSpeed Test คุณควรทำตามข้อแนะนำต่อไปนี้

เลือก Test Location ที่อยู่ใกล้โฮสติ้งเซิร์ฟเวอร์ที่สุด

Test Location คือ การจำลองว่าเว็บเพจของคุณถูกโหลดจากผู้ใช้งานในประเทศไหน ซึ่งจะส่งผลต่อการทดสอบ PageSpeed ด้วย

ยิ่ง Test Location อยู่ไกลจากโฮสติ้งเซิร์ฟเวอร์ เวลาโหลดหน้าเว็บยิ่งเพิ่มขึ้น

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

การเลือก Test Location ใน GTMetrix
เลือก Test Location ให้ใกล้โฮสติ้งของคุณมากที่สุด

ทำ Preload ก่อนทดสอบ PageSpeed เสมอ

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

ปลั๊กอินแคชอย่าง WP-Rocket จะช่วยทำ Preload ให้เว็บเพจทุกหน้าในเว็บไซต์ของคุณในคลิกเดียว

แต่หากปลั๊กอินแคชที่ใช้ไม่มี Preload คุณสามารถเรียกหน้าเว็บเพจนั้นจาก Browser ก่อน แล้วค่อยทำ PageSpeed Test ตามก็ได้เหมือนกัน

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

ทำ Preload Cache ใน WP-Rocket
ทำ Preload Cache ใน WP-Rocket ก่อนทดสอบ PageSpeed

ทดสอบหลายๆครั้ง แล้วหาค่าเฉลี่ย

การทำ PageSpeed Test เพียงครั้งเดียว อาจไม่ได้ผลลัพธ์ที่แม่นยำที่สุด เนื่องจากมีหลายปัจจัยที่มีผลต่อการทดสอบแต่ละครั้ง เช่น การเรียกแคชไฟล์ไม่สมบูรณ์ แคชไฟล์หมดอายุพอดี หน้าเพจไม่ได้ทำ Preload

ดังนั้นคุณควรจะทำการทดสอบ PageSpeed ในหน้าหนึ่งๆอย่างน้อย 2-3 ครั้ง แล้วดูค่าเฉลี่ย

เก็บประวัติการทดสอบไว้เสมอ

เว็บไซต์ของคุณมีการเปลี่ยนแปลงอยู่ตลอดเวลา

ไม่ว่าจะเป็นการเปลี่ยนธีม ติดตั้งปลั๊กอินเพิ่ม หรืออัพเดทปลั๊กอินใหม่ รวมถึงความเร็วของเซิร์ฟเวอร์ตามแต่ละช่วงเวลา

ดังนั้นคุณควรเก็บประวัติการทดสอบไว้เสมอ

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

นอกจากนั้นคุณยังสามารถเซฟผลการทดสอบ PageSpeed ไว้ดูย้อนหลังได้แบบไม่มีหมดอายุถึง 20 เว็บเพจด้วยกัน

ส่วนเว็บเพจที่ไม่ได้ตั้งค่าเซฟไว้ GTMetrix จะเก็บผลการทดสอบย้อนหลังไว้ให้ 30 วัน

ประวัติการทำ PageSpeed Test ย้อนหลังใน GTMetrix
ประวัติการทำ PageSpeed Test ย้อนหลังจะช่วยให้คุณติดตามการเปลี่ยนแปลงต่างๆได้

ทดสอบเว็บเพจหลายๆหน้าในเว็บไซต์

แทนที่จะทดสอบเฉพาะหน้า Homepage หรือเฉพาะเว็บเพจหน้าใดหน้าหนึ่ง คุณควรทดสอบเว็บเพจไว้หลายๆหน้า (โดยเฉพาะหน้าที่เป็น Landing Page สำคัญๆ)

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

ทดสอบเว็บเพจของคุณหลายๆหน้า
ทดสอบเว็บเพจของคุณหลายๆหน้า สามารถแบ่งหลาย Test Setup ได้ด้วย

ทดสอบ Mobile Speed Test ด้วย

ผล PageSpeed นั้นจะแตกต่างกันตามอุปกรณ์ที่ใช้ด้วย ดั้งนั้นคุณควรทดสอบ PageSpeed ให้ครบทั้ง Desktop และ Mobile Version

เครื่องมือ PageSpeed หลายๆอันเช่น GTMetrix, WebPageTest และ Google PageSpeed Insights มี Desktop และ Mobile Version ให้คุณเลือกใช้รวมอยู่แล้ว

Mobile PageSpeed Test ใน GTMetrix
Mobile PageSpeed Test ใน GTMetrix

เก็บข้อมูลด้วย Real User Monitoring (RUM)

PageSpeed กับ RUM ต่างกันยังไง?

Real User Monitoring (RUM) คือการบันทึกความเร็วที่ผู้ใช้งานจริงๆใช้ในการโหลดหน้าเว็บเพจของคุณ

ในขณะที่ PageSpeed เป็นข้อมูลที่เก็บจาก ‘บอท’ หรือ ‘ผู้ใช้งานจำลอง’ ที่เข้าไปโหลดหน้าเว็บเพจของคุณ

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

ดังนั้น RUM คือข้อมูล PageSpeed ที่แม่นยำมากที่สุด

ผู้ให้บริการทดสอบ PageSpeed บางที่ เช่น Pingdom จะมีบริการ RUM เพิ่มเติมนอกจากการทดสอบ PageSpeed ด้วย (ไม่ฟรี)

Google PageSpeed Insights ก็มี Field Data ซึ่งเป็นการเก็บเวลาในการโหลดหน้าเว็บจาก Real User เช่นกัน อย่างไรก็ตาม Real User ใน Google PageSpeed นั้นเป็นข้อมูลที่สุ่มเก็บจากผู้ใช้งานจำนวนหนึ่งเท่านั้น

หน้าผลการทดสอบใน Google PageSpeed Insights
Field Data จะเป็นความเร็ว PageSpeed ที่เก็บจากผู้ใช้งานจริงๆ
06

สรุป

สรุปหัวข้อสำคัญสำหรับเนื้อหา PageSpeed Test ในบทนี้ตามนี้เลย

  • พยายามให้ On-load time ของเว็บเพจคุณไม่เกิน 3 วินาที หากโหลดนานกว่านี้คนส่วนใหญ่มักเปลี่ยนไปเข้าเว็บอื่นแทน ซึ่งจะส่งผลเสียต่อ Bounce Rate และ อันดับ Mobile SEO
  • ปัจจัยที่ส่งผลต่อความเร็วในกาณโหลดหน้าเว็บคือ Front-end และ Back-end
  • Front-end จะเกี่ยวกับโค้ด แคช และธีมที่ใช้บนเว็บของคุณ ส่วน Back-end จะมาจากคุณภาพของโฮสติ้งที่ใช้เป็นหลัก
  • คะแนน PageSpeed ไม่ไช่คะแนนความเร็วในการโหลดหน้าเว็บโดยตรง แต่เป็นคะแนนที่จะบอกว่า Front-end ของเว็บเพจนั้นทำตาม PageSpeed Best Practice ได้ครบถ้วนมากน้อยแค่ไหน ซึ่งจะส่งผลต่อความเร็วในการโหลดหน้าเว็บอีกทีหนึ่ง
  • ให้ความสำคัญกับ ‘ความเร็ว’ ในการโหลดหน้าเว็บ มากกว่าการตามล่า PageSpeed 100 คะแนนโดยไม่จำเป็น

อ่านจบแล้ว ไงต่อ...?

บทความนี้มีประโยชน์กับคุณแค่ไหน ?

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

คุณคาดหวังอะไรในบทความนี้ หรือมีอะไรที่อยากให้เราเพิ่มเติม?

แชร์ต่อ…​

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

อ่านต่อ…

35 เทคนิคเพิ่มคะแนน PageSpeed SEO สำหรับ WordPress และ WooCommerce แก้ปัญหาหน้าเว็บโหลดช้า ลด Bounce Rate เพิ่มอันดับ SEO ให้คุณทำตามได้ทันที

สงสัยต่อ…​

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

กล่องคอมเมนต์

Your email address will not be published. Required fields are marked *

Scroll to Top

สารบัญ

Share
Tweet
Share
Pin