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

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

  1. 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)
    • รายการที่ทางระบบทำการตรวจสอบและผ่านการวิเคราะห์ว่ามีการจัดการที่ดีแล้ว

 

  1. 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 ซึ่งหากไม่เหมาะสม ระบบจะแนะนำการทำ หรือการปรับปรุงให้เหมาะสมให้

 

  1. 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

Facebook Comments
สามารถติดต่อเรา เพื่อปรึกษาเกี่ยวกับ
Marketing, Design, Web และ Application ได้ที่
  Call Us   Messenger

Myanmar Media Landscape in 2019

เด็กจบใหม่เป็น planner ได้ไหม

เด็กจบใหม่เป็น planner ได้ไหม?

สิ่งที่ project manager ใช้วางแผน

สิ่งที่ Project Manager ใช้วางแผนและควบคุม Project

การตลาดแบบโจโจ้ เทคนิคปั้นแบรนด์ดังข้ามศตวรรษ

โทนสีจากหนัง Stranger things

โทนสีจากหนัง Stranger things ซีรี่ส์ไซไฟกลิ่นอายยุค 80s

แม่สอด เมียวดี

มุมมองใหม่ๆ ของ แม่สอด-เมียวดี ผ่านทางด่านพรมแดน