ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

Google PageSpeed คืออะไร

สำหรับใครที่ยังไม่รู้จัก หรือจะทบทวนความรู้เก่า ลองอ่านบทความนี้ก่อน Google Page Speed คืออะไร (บทความเมื่อปี 55) ในบทความนั้นจะแนะนำวิธี ทดสอบ Page Speed ของเว็บเราด้วย

ผลการทดสอบ Pagespeed ของหน้าเว็บ apache -ab test

Google Page Speed  จะแบ่งคะแนนออกเป็นสองส่วน คือ Web บน Desktop และ Web บน Mobile

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

 

การใช้คะแนนน้ำหนักต่างๆ เป็น % ตามรายละเอียดองประกอบของเว็บไซต์เราตามนี้ (อ้างอิง Lighthose V6)

Lighthouse เวอร์ชั่น 6 สำหรับ Mobile,DesKtop

องค์ประกอบที่ตรวจสอบ การให้น้ำหนัก เวลาหน่วย (ms)
Desktop
เวลาหน่วย (ms)
Mobile

FCP (First Contentful Paint)

15%  740 1,840
SI (Speed Index) 15% 1,010 2,710
LCP (Largest Contentful Paint) 25% 810  1,870
TTI (Time to Interactive) 15% 1,850 2,830
TBT (Total Blocking Time) 25% 90 180
CLS (Cumulative Layout Shift) 5% 0.1 0.1

กราฟแสดงการแบ่งส่วนของคะแนน

 *** เวลาหน่วย (ms) คือ เวลาในหน่วยวินาที่ที่เราจะเสียไปได้เพื่อให้ได้ % เป็น 100% - โดยประมาณเมื่อให้เวลาส่วนอื่นๆน้อยที่จนเข้าใกล้ 0 หรือ 1วินาทีตามกำหนด โดยที่ 1000 ms เท่ากับ 1s (วินาที) *** 

 

ทำความเข้าใจ 6 องประกอบของหน้าเว็บที่มีผลต่อ Pagespeed ส่วนของ Core Web Vitals (องค์ประกอบที่ Google จะเอามาเป็นคะแนนในการจัดเรียงผลการค้นหาใน Google Search)

  • FCP (First Contentful Paint)
    --- Google Pagespeed ให้ความสำคัญกับเรื่องนี้ 15% FCP คือเวลาที่ต้องรอทั้งหมดก่อนจะมีการแสดงผลหน้าเพจส่วนแรกขึ้นมา ให้คนที่เปิดดูได้เห็นหน้าเว็บ โดยจะรวมทุกอย่างไม่ว่าจะเป็น รูปภาพ, ภาพในรูปแบบSVG,Canvas, ข้อความที่ไม่ใช่สีขาว แต่ไม่รวม iFrame
  • SI (Speed Index)
    --- Google Pagespeed ให้ความสำคัญกับเรื่องนี้ 15% SI คือ ดัชนีความเร็วจะวัดความเร็วในการแสดงเนื้อหาระหว่างการโหลดหน้าเว็บ โดยหลักการคิดคะแนน จะจับมีการบันทึกภาพวิดีโอของการโหลดหน้าเว็บในเบราว์เซอร์ แล้วเอาคำนวณความคืบหน้าของภาพระหว่างเฟรม เราสามารถ ดูรายละเอียดได้เองด้วยใช้ เครื่องเมื่อใน Ref[3] ได้ความเร็วที่อยู่ในช่วงที่ถือว่า เร็วคือ 0-4.3 วินาที (คะแนน SI 100-75)
  • LCP (Largest Contentful Paint)
    --- Google Pagespeed ให้ความสำคัญกับเรื่องนี้ ถึง 25% LCP คือ เวลาที่ใช้ในการโหลดข้อความ Text หรือ ไฟล์ภาพขนาดใหญ่ที่สุดของหน้าเว็บเรา รวมถึงโฆษณา หรือลิงค์ข้อมูลจากที่อื่นด้วยนะครับ ยิ่งใหญ่ยิ่งโหลดช้า คะแนนก็จะต่ำไปด้วย
  • TTI (Time to Interactive)
    --- Google Pagespeed ให้ความสำคัญกับเรื่องนี้ 15% TTF คือ ระยะเวลาที่หน้าเว็บจะแสดงได้อย่างสมบูรณ์ เว็บเพจจะถือว่ามีการโต้ตอบอย่างสมบูรณ์เมื่อเราเห็นช่องกรอกข้อความ กดปุ่ม หรือคลิกส่วนต่างๆ ได้ แน่นอนมันต้องผ่าน FCP มาก่อน  ความเร็วที่อยู่ในช่วงที่ถือว่าดี คือ 0-3.8 วินาที ข้อนี้ถ้ามีการใช้ JavaScript ช่วยในการแสดงผลเวลาของการประมวลของ Javascript จะถุกรวมเข้าไปด้วย เพราะฉนั้นต้องการการ Optimize โค้ด Javascript ด้วย รวมถึง css นะครับ 
  • TBT (Total Blocking Time)
    --- Google Pagespeed ให้ความสำคัญกับเรื่องนี้ ถึง 25% TBT คือ ระยะเวลาที่ต้องรอปลดล็อค ให้การคลิกหรือกรอกข้อมูลลงในหน้าเพจ ถ้าพูดง่ายคือการนับเวลาโดยรวมของ สองส่วนคือ FCP และ TTI ระยะเวลาที่รอที่ดี ไม่ควรเกิน 50 มิลลิวินาที
  • CLS (Cumulative Layout Shift)
    --- Google Pagespeed ให้ความสำคัญกับเรื่องนี้ค่อนข้างน้อยคือแค่ 5% CLS คือ การตรวจสอบ Layout ทั้งหมดของหน้าเพจ ที่อาจจะเกิดการขยับ การกระตุก ทำให้ผู้ใช้ไม่สามารถใช้งานได้ตามความต้องการ ส่วนใหญ่ที่ทำให้เจอปัญหาคือมาจาก css และ javascript

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

 

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

หลักการให้คะนนคิดจากอะไร บ้าง หลักการคิด คะแนนของ Google Pagespeed คือ % คะแนนจาก Lab Data

อ่านมาถึงตรงนี้แล้ว ถ้าต้องการรู้คะแนนของเว็บตัวเองสามารเช็ค Pagespeed ของ Google สามารถใช้ลิงค์อ้างอิงด้านล่างได้ และ อีกวิธี ที่อยากแนะนำคือดูจากรายผล Core Web Vitals ของ Google Webmaster Tools โดยมีค่าที่แนะนำดังนี้

การวัด 3 ระดับ

ตัวอย่างรายงานผลของ Google Webmaster Tools >> Core Web Vitals

ของของ Core Web Vitals จาก Google Webmaster tools

ผลของ Core Web Vitals

 

องค์ประกอบอีกกลุ่มที่มีผลต่อ Pagespeed (ถึงไม่ได้มีส่วนโดยตรงแต่เป็นส่วนหนุนให้คะแนนออกมาดี) เราควรให้ความสำคัญ

  • Server response time ของ Server ที่เราใช้ปรับจูนให้แรงๆ ไว้ก่อน 1 เพจถ้าเร็วได้ระดับ 0.0x ได้จะดีมากๆ หรือ 0.x โดยที่ x น้อยกว่า 5 ก็ยังพอรับได้
  • JavaScript โปรแกรมมิ่งผั่ง Client : ลบโค้ดที่ไม่ได้ใช้ และ คำสั่งที่ทำให้ทำงานช้า และ ทำให้เล็กที่สุด
  • CSS : ควรบีบอัดและลบโค้ดที่ไม่ได้ใช้
  • ขนาดของไฟล์ภาพที่เราใช้ กำหนดความสูง กว้าง ให้เหมาะกับที่ใช้จริง และควรใช้เป็น  next-gen formats
  • ปีบอัด Output จาก Server ส่วนทีเป็น text
  • ใช้ Preconnect to required origins สำหรับอ้างอิงการดึงข้อมูลครั้งก่อนหน้า
  • อื่นๆ ศึกษา เพิ่มเติมได้ที่นี่ https://web.dev/lighthouse-performance/#opportunities

บทความเพิ่มเติม

วิธีการ Optimize ภาพด้วย Google PageSpeed Insights

 

บทความต่อไปจะมาแชร์ วิธีการปรับ PageSpeed ในแต่จะจุดกัน ไม่ว่าจะเป็นทาง ผั่ง Server , Network และ ส่วนของ Client (Text, Image, CSS, Javascript, VDO) กันครับ รอติดตามอ่านกันได้ ต้องการพูดคุยหรือข้อเสนอแนะ บอกกันได้ที่นี่

 

แนะนำเครื่องมือสำหรับทดสอบการแสดงผลของเว็บ

Google Pagespeed Insight
https://developers.google.com/speed/pagespeed/insights/
Pingdom Website Speed Test
https://tools.pingdom.com/fpt/
Website Performance and Optimization Test
https://www.webpagetest.org/
Apache Benchmark
https://httpd.apache.org/docs/2.4/programs/ab.html

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
แนะนำหนังสือ Pre-Order PHP - high-performance ด้วย Swoole
โดย mindphp อ 24 พ.ย. 2020 4:47 pm บอร์ด Programming - PHP
0
9
อ 24 พ.ย. 2020 4:47 pm โดย mindphp
จ่ายเงินสมทบประกันสังคม มาตรา 33 , 39
โดย milk2533 อ 24 พ.ย. 2020 3:08 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
5
อ 24 พ.ย. 2020 3:08 pm โดย milk2533
ออกหัก ณ ที่จ่าย ค่าขนส่งคน , ค่าขนส่งของ ต่างกันอย่างไร
โดย milk2533 อ 24 พ.ย. 2020 2:51 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
6
อ 24 พ.ย. 2020 2:51 pm โดย milk2533
การเขียนสั่งจ่ายเช็ค อย่างไร
โดย milk2533 อ 24 พ.ย. 2020 1:29 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
4
อ 24 พ.ย. 2020 1:29 pm โดย milk2533
การจัดสินค้าขาย
โดย milk2533 อ 24 พ.ย. 2020 12:49 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
16
อ 24 พ.ย. 2020 12:49 pm โดย milk2533
FIFO สินค้าตามวันหมดอายุ
โดย milk2533 อ 24 พ.ย. 2020 11:17 am บอร์ด Share Knowledge
0
9
อ 24 พ.ย. 2020 11:17 am โดย milk2533
การนับสต๊อคสินค้าเซเว่น
โดย milk2533 อ 24 พ.ย. 2020 11:15 am บอร์ด Share Knowledge
0
8
อ 24 พ.ย. 2020 11:15 am โดย milk2533
ทริป กางเต็นท์ ใกล้กรุงเทพ
โดย milk2533 จ 23 พ.ย. 2020 1:04 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
17
จ 23 พ.ย. 2020 1:04 pm โดย milk2533