Performance Scoring Frontend 101! มาวัดคะแนนให้กับหน้าเว็บของเรากันเถอะ
ให้ทั้ง User และ Google love love เว็บไซต์ของคุณกันเถอะ
วัดไปทำไม
ภาพต้องใหญ่! ความละเอียดต้องชัด! ข้อมูลต้องครบ! นี่อาจเป็น Requirment จากลูกค้าที่ทำให้ Dev ต้องพยายามยัดมันทุกอย่างลงในหน้าเว็บ จนสุดท้าย..หน้าเว็บอืดดด ครับ ใช่ครับ มันอืดเพราะคุณพยายามยัดมันทุกอย่างลงไปนั่นแหละ ยิ่งบาง User มีข้อจำกัดด้านทรัพยากรเครื่อง จะยิ่งอืดกว่าเราแค่นี้ ทีนี้เราต้องมีเครื่องมือแล้วละ ที่จะเอาไว้ใช้วัดประสิทธิภาพของเว็บไซต์เรา
มี Performance ที่ดีไปทำไม?
Google ให้ความสำคัญกับหน้าเว็บที่มี Performance ที่ดี หน้าเว็บที่ Load ช้าจะเพิ่มภาระให้กับ User ฉะนั้นอย่ามัวแต่ไปปั่น SEO อยู่เลย ทำหน้าเว็บไซต์ของตัวเองให้มีประสิทธิภาพดีก่อน จะช่วยส่งผลให้ Index มันดีขึ้น และที่สำคัญ User ของเราก็จะแฮปปี้กับหน้าเว็บของเรา
Tool ที่ใช้วัด
Tool : Google insight
มาลองกันเลย ~ เว็บไซต์ที่ลองก็ หน้าเว็บที่ผมทำให้กับกิจการที่บ้านนั่นเอง www.kthlabel.com ซึ่งเว็บไซต์นี้ Develop จากภาษา PHP + Html บ้านๆ มี js นิดหน่อยและอัดรูปไปเยอะๆ กะให้ลูกค้ามีตัวเลือกหลายๆ ภาพ
วิธีการวัด
เข้าลิงค์นี้ -> https://developers.google.com/speed/pagespeed/insights/
กรอก Domain และ Path ที่เราต้องการวัดประสิทธิภาพลงไปกดปุ่ม รอให้มันทำงานซักครู่…. ผลก็จะปรากฎออกมา โดยจะมี tab ขึ้นมาสอง tab นั่นคือ Mobile และ Desktop
และนี่คือคะแนน Mobile ของเว็บ kthlabel.com
~ผ่าม! 36 คะแนน T^T
เรามาดูที่ Tab ของ Desktop บ้าง
สีและคะแนนมีความหมายอะไรบ้าง
- 0–49 สีแดง : ช้า
- 50–89 สีส้ม : ปานกลาง
- 90–100 เขียว : ระเร็ว
จะปรับปรุงมันได้อย่างไร
ในส่วนของ Page Speed Insights จะไม่ได้แค่วัดประสิทธิภาพแต่ยังมีจุดบ่งชี้ว่าเราควรต้องระมัดระวังส่วนใดบ้าง ใน section ด้านล่างของ Page
ใน Section นี้ก็จะจำแนกออกเป็น 6 Bullets ใหญ่ๆ ตามภาพด้านบนเลย
ใน Section ถัดมาจะเป็น Opportunity และ Diagnose ซึ่งในส่วนนี้แหละ ที่จะมีข้อแนะนำ พร้อมตัวชี้วัดที่จะช่วยให้เราสามารถนำไปปรับปรุงได้อย่างถูกจุด
จากตัวอย่าง จะเห็นว่าทาง page insight ได้ให้คำแนะนำหลายๆ อย่างเช่นการทำ Cache ให้เหมาะสม การลดโหลดของ Resource เช่น ภาพไหนบ้างที่มีขนาดที่ใหญ่เกินไป
นอกจากนี้ยังมี Tool อีกตัวที่น่าสนใจนั่นคือ Lighthouse เดี๋ยวจะเล่าให้ฟังในครั้งหน้า :)) บะบาย
References
