เชื่อว่าทุกคนชอบการออกแบบเว็บไซต์ที่ทันสมัย ใช้ง่าย และมีข้อมูลที่ครบถ้วน แต่ในสาย IT แล้ว มันดูแค่นั้นอาจจะไม่เพียงพอ อาจจะต้องมีการดูรายละเอียดความเร็วในการโหลด การวางวางโครงสร้างของเว็บไซต์ การรองรับการแสดงผลที่หน้าจอสำหรับคอมพิวเตอร์ และมือถือ รวมถึงการรองรับเทคนิคต่างๆ เช่น SEO , script และวิธีการเขียน code ของทาง developer เพื่อ ตรวจสอบประสิทธิภาพเว็บไซต์
วันนี้เราเลยจะมาแนะนำ tool สำหรับตรวจสอบประสิทธิภาพของเว็บไซต์เรากัน โดยแน่นอน พวกเราชอบของฟรี
- Google PageSpeed Insights (Link)
เครื่องมือแรก เป็น tool ของทาง google ใช้งานง่าย เพียงแต่ใส่ URL หน้าเว็บที่ต้องการ และทำการ search ระบบก็จะทำการประมวลผล แสดงเป็นคะแนนออกมาให้เราดูข้อมูล โดยมีรายละเอียดดังนี้
- แบ่งการแสดงผลการวิเคราะห์เป็น มือถือ และคอมพิวเตอร์ โดยแต่ส่วนปัจจัยในการให้คะแนนก็จะแตกต่างกันไป
- ด้านล่างระบบแสดงทำการประเมินข้อมูลดังนี้
- ข้อมูลของช่อง (Field Data)
- ส่วนนี้จะทำการตรวจสอบจากข้อมูล 2 ส่วนคือ
- First Contentful Paint (FCP) คือะยะเวลาที่ใช้ตั้งแต่เปิดหน้าเว็บจนมี เนื้อหาแรกแสดงขึ้นมา
- First Input Delay (FID) คือ ระยะเวลาที่จะสามารถพิมพ์ค่าหรือกำหนดค่าต่างๆ ในหน้าจอได้
- ข้อมูลในการทดสอบ (Lab Data) ส่วนนี้จะเป็นการวิเคราะห์การแสดงผลหน้าจอต่างๆ ตามที่กำหนดไว้ โดยมีหน่วยเป็นวินาที ซึ่งจะดีหรือไม่ สังเกตง่ายๆ จากระบบสีที่ระบบวิเคราะห์ ได้แก่
- การแสดงผลเนื้อหาครั้งแรกเช่น ข้อความหรือรูปภาพ
- การแสดงผลหน้าจอพอพร้อมแสดงให้ใช้งาน
- ดัชนีความเร็วการแสดงผลหน้าจอทั้งหมด
- เวลาที่หยุดการใช้งาน CPU
- ระยะเวลาที่หน้าเว็บพร้อมการตอบสนอง
- ความเร็วในการตอบสนองในหน้าจอที่มีการทำงานที่หนักที่สุด (จากในเว็บไซต์)
- โอกาส (Opportunities)
- แสดงรายการที่ระบบบตรวจสอบแล้วแนะนำให้ทางผู้พัฒนาปรับปรุงแก้ไขเพื่อให้เว็บไซต์สามารถทำงานได้ดีขึ้น
- การวินิจฉัย (Diagnostics)
- รายการที่ระบบแสดงข้อมูลรายการที่ระบบแนะนำให้ลองหาวิธีในการปรับปรุงระบบดูเพื่อเพิ่มโอกาสในการเพิ่มประสิทธิภาพของเว็บไซต์ได้
- กระตรวจสอบที่ผ่านแล้ว (Passed audits)
- รายการที่ทางระบบทำการตรวจสอบและผ่านการวิเคราะห์ว่ามีการจัดการที่ดีแล้ว
- Google Chrome Audits
ตัวนี้เป็น tool ที่ติดมากับ browser google chrome Version 60 ขึ้นไป ซึ่งข้อดีคือ สามารถใช้งานได้ทันที ไม่ต้องจำ URL อะไรให้วุ่นวาย แค่เข้าไปหน้าเว็บไซต์ที่ต้องการตรวจสอบ และเรียกใช้ tool ขึ้นมาได้เลย โดยระบบจะแสดงรายละเอียดดังต่อไปนี้
- ขั้นแรกเลย เลือก option ในการประเมินประสิทธิภาพที่หน้าเว็บไซต์ โดยมีรายการให้เลือกดังนี้
- รูปแบบที่ต้องการทดสอบ web และ mobile (เลือกอย่างใดอย่างหนึ่ง)
- การตรวจสอบประสิทธิภาพ โดยสามารถเลือกรายการที่ต้องการให้ระบบตรวจสอบได้
- การเลือกข้อกำหนด CPU ของเครื่องที่จะประมวลผล
- เลือกว่าจะ clear ความจำหรือไม่ (เพื่อให้เหมือนกับการ load ครั้งแรก โดยไม่ได้ใช้ cache )
เมื่อกดประมวลผล ระบบแสดงคะแนนรายละเอียดได้ดังนี้
- Performance
- แสดงข้อมูลในรายละเอียดคะแนนในต่างๆ เหมือนกับ Google PageSpeed Insights โดยแสดงจากรายละเอียดดังนี้
- Metrics
- Opportunities
- Diagnostics
- Passed audits
ข้อมูลเพิ่มเติมที่นอกเหนือ Google PageSpeed Insights มีดังนี้ครับ
- Accessibility เป็นการวิเคราะห์ ความสามารถในการเข้าถึงกรณีที่มีการเรียกใช้งาน หรือการทำงานจากระบบอื่น โดยการตรวจสอบนี้ จะตรวจสอบเท่าที่ระบบสามารถตรวจสอบได้ เท่านั้น
- การตั้งชื่อของ Element , content
- การรองรับหลายภาษาในเว็บไซต์
- การกำหนด structured ของเว็บไซต์
- การตรวจสอบรายละเอียดของการสร้างเว็บไซต์ ตามมาตรฐานที่กำหนด
- SEO
- ระบบทำการตรวจสอบ SEO ของเว็บไซต์ว่ามีหรือไม่
- Progressive web app
- Fast and reliable ตรวจสอบความเร็ว และความสามารถในการใช้งาน offline
- Installable ตรวจสอบความน่าเชื่อถือ และมาตรฐานของการขึ้นระบบ
- PWA Optimized ตรวจสอบทฤษฎีการทำ progress web app ซึ่งหากไม่เหมาะสม ระบบจะแนะนำการทำ หรือการปรับปรุงให้เหมาะสมให้
- GTmetrix(Link)
เว็บไซต์สำหรับการตรวจสอบคุณภาพของเว็บไซต์ โดยเป็นเว็ปเฉพาะในการตรวจสอบ พร้อมทั้งมี package GTmetrixPRO ให้ซื้อฟังก์ชั่นเพิ่มเติมด้วย ซึ่งจะเหมาะสำหรับคนที่ตรวจสอบเว็ปไซต์อย่างจริงจัง หรือต้องการการวิเคราะห์เชิงลึกของเว็บไซต์และรายงานต่างๆ ซึ่งแน่นอน ถ้าเราดูคุณภาพเบื้องต้น ไม่ต้อง register ก็ได้ วิธีการใช้งานก็ง่ายๆ ดังนี้
- เข้าไปที่เว็บไซต์
- กรอกข้อมูล URL ที่ต้องการตวจสอบเว็บไซต์ และกดปุ่ม Analyze
- รอระบบทำการตรวจอสอบและแสดงรายงานของการตรวจสอบ
โดยหลังจากที่ตรวจสอบเสร็จระบบจะแสดงข้อมูลที่หน้าจอดังต่อไปนี้
- Performance Scores โดยการวัดคะแนน ของเว็บจะออกมาเป็นเกรด และใช้ algorithm 2 แบบซึ่งแตกต่างกัน
- Page speed การประมวลผลการแสดงผลรูปหน้าจอของเว็บไซต์ โดยตรวจสอบจากความเร็วในการแสดงผลและการทำงาน
- YSlow การประมวลผลโดยการตรวจสอบจุดที่ทำให้การโหลดหน้าจอช้า โดยจะคำนวนออกมาเป็นคะแนนเพื่อให้ผู้ใช้งานทราบโอกาสที่จุดนั้นๆ ทำให้หน้าจอช้า ซึ่งอาจจะเป็นที่ script ของหน้าจอ หรือ รูปภาพต่างๆ
- Page Detail แสดงข้อมูลรายละเอียดของหน้าเว็บไซต์ ซึ่งจะสรุปข้อมูลเบื้องต้น
- Fully Loaded Time ระยะเวลาในการ load หน้าเว็บโดยเฉลี่ย
- Total Page Size ขนาดของหน้าจอแต่ละหน้าจอโดยเฉลี่ย
- Requests จำนวน request ของเว็บที่มีการดำเนินการ
โดยมีรายละเอียดเพิ่มเติม และคำแนะนำโดยแบ่งเห็นหมวดๆ ตามหัวข้อต่อไปนี้
- Page Speed / YSlow แสดงข้อมูลของแต่ละส่วนที่ระบบวิเคราะห์ โดยมีคะแนนแยกออกมาแต่ละหัวข้อ และมีคำแนะนำกรณีที่คะแนนได้ต่ำกว่าเกณฑ์ เพื่อให้นำไปปรับปรุงเพื่อให้มีประสิทธิภาพมากขึ้น
- Waterfall การประมวลผลโดยใช้การ load request ตามลำดับ เพื่อดูความเร็วของการโหลดไฟล์แต่ละตัว และแต่ละฟังก์ชัน
- ส่วน Timings , Video และ History เป็นเมนูเพิ่มเติม ซึ่งจำเป็นต้องสมัครการใช้งานเพื่อเรียกดู report หรือข้อมูลเชิงลึกได้
ฝากติดตาม blog อื่นๆใน Happioteam ด้วยครับ
blog.happioteam.com
