ใช้เครื่องมือเพื่อวัดประสิทธิภาพ

Sam Dutton

วัตถุประสงค์หลักในการสร้างเว็บไซต์ที่มีประสิทธิภาพและยืดหยุ่นโดยมีต้นทุนการถ่ายโอนข้อมูลต่ำมีอยู่หลายประการ

คุณต้องมีการตรวจสอบสำหรับวัตถุประสงค์แต่ละรายการ

เครื่องมือและเทคนิคในการตรวจสอบเว็บไซต์มีมากมาย ดังนี้

• เครื่องมือของระบบ
• เครื่องมือในตัวของเบราว์เซอร์
• ส่วนขยายของเบราว์เซอร์
• แอปพลิเคชันทดสอบออนไลน์
• เครื่องมือการจําลอง
• Analytics
• เมตริกที่ได้จากเซิร์ฟเวอร์และระบบธุรกิจ
• การบันทึกหน้าจอและวิดีโอ
• การทดสอบด้วยตนเอง

ด้านล่างนี้คุณจะได้ดูว่าแนวทางใดเกี่ยวข้องกับการตรวจสอบแต่ละประเภท

บันทึกคําขอทรัพยากร: จํานวน ขนาด ประเภท และเวลา

การตรวจสอบเว็บไซต์ควรเริ่มต้นด้วยการตรวจสอบหน้าเว็บด้วยเครื่องมือเครือข่ายของเบราว์เซอร์ หากไม่แน่ใจว่าจะทําอย่างไร ให้ดูคู่มือเริ่มต้นใช้งานในแผงเครือข่ายของเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome เครื่องมือที่คล้ายกันมีให้บริการสำหรับ Firefox, Safari, Internet Explorer และ Edge

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

ก่อนเริ่มตรวจสอบการใช้เครือข่าย โปรดปิดใช้แคชของเบราว์เซอร์เพื่อให้แน่ใจว่าคุณได้รับสถิติที่ถูกต้องสําหรับประสิทธิภาพในการโหลดครั้งแรก หากคุณแคชผ่าน Service Worker อยู่แล้ว ให้ล้างพื้นที่เก็บข้อมูล Cache API คุณอาจต้องการใช้หน้าต่างที่ไม่ระบุตัวตน (ส่วนตัว) เพื่อไม่ต้องกังวลเกี่ยวกับการปิดใช้แคชของเบราว์เซอร์หรือการนำรายการที่แคชไว้ก่อนหน้านี้ออก

ฟีเจอร์และเมตริกหลักที่ควรตรวจสอบด้วยเครื่องมือเบราว์เซอร์มีดังนี้

• ประสิทธิภาพการโหลด: Lighthouse ให้ข้อมูลสรุปของเมตริกการโหลด Addy Osmani ได้เขียนสรุปที่ยอดเยี่ยมเกี่ยวกับช่วงสําคัญของผู้ใช้สําหรับการโหลดหน้าเว็บ
• เหตุการณ์ไทม์ไลน์สำหรับโหลดและแยกวิเคราะห์ทรัพยากร รวมถึงการใช้หน่วยความจํา หากต้องการเจาะลึก ให้เรียกใช้การโปรไฟล์หน่วยความจําและ JavaScript
• น้ำหนักหน้าเว็บทั้งหมดและจำนวนไฟล์
• จํานวนและความหนักของไฟล์ JavaScript
• ไฟล์ JavaScript แต่ละไฟล์ที่มีขนาดใหญ่มาก (มากกว่า 100 KB)
• JavaScript ที่ไม่ได้ใช้ คุณสามารถตรวจสอบโดยใช้เครื่องมือความครอบคลุมของ Chrome
• จํานวนไฟล์ภาพทั้งหมดและขนาดไฟล์
• ไฟล์ภาพเดี่ยวขนาดใหญ่เป็นพิเศษ
• รูปแบบรูปภาพ: มีไฟล์ PNG ที่อาจเป็น JPEG หรือ SVG ไหม มีการใช้ WebP ร่วมกับไฟล์สำรองไหม
• การใช้เทคนิครูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ (เช่น srcset)
• ขนาดไฟล์ HTML
• จํานวนไฟล์ CSS ทั้งหมดและขนาดไฟล์
• CSS ที่ไม่ได้ใช้ (ใน Chrome ให้ใช้แผงความครอบคลุม)
• ตรวจสอบการใช้งานชิ้นงานอื่นๆ ที่มีปัญหา เช่น เว็บแบบอักษร (รวมถึงแบบอักษรไอคอน)
• ตรวจสอบไทม์ไลน์ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อหาสิ่งที่บล็อกการโหลดหน้าเว็บ

หากคุณทํางานจาก Wi-Fi ความเร็วสูงหรือการเชื่อมต่อมือถือที่รวดเร็ว ให้ทดสอบด้วยการจําลองแบนด์วิดท์ต่ำและเวลาในการตอบสนองสูง อย่าลืมทดสอบในอุปกรณ์เคลื่อนที่และเดสก์ท็อปด้วย เนื่องจากบางเว็บไซต์ใช้ UA Sniffing เพื่อแสดงชิ้นงานและเลย์เอาต์ที่แตกต่างกันสําหรับอุปกรณ์ต่างๆ คุณอาจต้องทดสอบกับฮาร์ดแวร์จริงโดยใช้การแก้ไขข้อบกพร่องจากระยะไกล ไม่ใช่แค่การจำลองอุปกรณ์

ตรวจสอบหน่วยความจำและภาระงานของ CPU

บันทึกการใช้งานหน่วยความจำและ CPU ก่อนทำการเปลี่ยนแปลง

ใน Chrome คุณสามารถเข้าถึงตัวจัดการงานได้จากเมนูหน้าต่าง วิธีนี้เป็นวิธีที่ง่ายในการตรวจสอบข้อกำหนดของหน้าเว็บ

ทดสอบประสิทธิภาพการโหลดครั้งแรกและครั้งต่อๆ ไป

Lighthouse, WebPagetest และ Pagespeed Insights มีประโยชน์ในการวิเคราะห์ความเร็ว ค่าใช้จ่ายของอินเทอร์เน็ต และการใช้ทรัพยากร WebPagetest จะตรวจสอบการแคชเนื้อหาแบบคงที่ เวลาในการตอบสนองครั้งแรก และดูว่าเว็บไซต์ของคุณใช้ CDN อย่างมีประสิทธิภาพหรือไม่

บันทึกผลลัพธ์

• WebPagetest: ผลการทดสอบแต่ละรายการมี URL ของตนเอง
• PageSpeed Insights: ตอนนี้เครื่องมือ PageSpeed Insights มีข้อมูลรายงานประสบการณ์ของผู้ใช้ Chrome แล้ว ซึ่งจะไฮไลต์สถิติประสิทธิภาพการใช้งานจริง
• Lighthouse: บันทึกรายงานจากแผงการตรวจสอบของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome โดยคลิกปุ่มดาวน์โหลด ดังนี้

  

ทดสอบข้อกําหนดหลักของ Progressive Web App

Lighthouse ช่วยทดสอบความปลอดภัย ฟังก์ชันการทำงาน การช่วยเหลือพิเศษ ประสิทธิภาพ และประสิทธิภาพของเครื่องมือค้นหา โดยเฉพาะอย่างยิ่ง Lighthouse จะตรวจสอบว่าเว็บไซต์ของคุณใช้ฟีเจอร์ PWA เช่น Service Worker และไฟล์ Manifest ของเว็บแอปสําเร็จหรือไม่

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

คุณสามารถดาวน์โหลดรายงาน Lighthouse เป็น JSON หรือหากใช้ส่วนขยาย Lighthouse ของ Chrome ให้แชร์รายงานเป็น GitHub Gist โดยคลิกปุ่มแชร์ เลือก "เปิดในโปรแกรมดู" จากนั้นคลิกปุ่มแชร์อีกครั้งในหน้าต่างใหม่ แล้วเลือก "บันทึกเป็น Gist"

ใช้ข้อมูลวิเคราะห์ การติดตามเหตุการณ์ และเมตริกธุรกิจเพื่อติดตามประสิทธิภาพในชีวิตจริง

หากเป็นไปได้ ให้บันทึกข้อมูลวิเคราะห์ไว้ก่อนทำการเปลี่ยนแปลง เช่น อัตราตีกลับ เวลาในการเข้าชมหน้าเว็บ หน้าออก ข้อมูลที่เกี่ยวข้องกับข้อกําหนดทางธุรกิจ

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

หากยังไม่ได้ติดตั้งใช้งาน Analytics ตอนนี้ถึงเวลาแล้ว เมตริกและข้อมูลวิเคราะห์ทางธุรกิจเป็นตัวตัดสินขั้นสุดท้ายว่าเว็บไซต์ของคุณทํางานหรือไม่ ใช้การติดตามเหตุการณ์สําหรับการกระทําของผู้ใช้ เช่น การคลิกปุ่มและการเล่นวิดีโอ หากเหมาะสม นอกจากนี้ คุณอาจต้องติดตั้งใช้งานการวิเคราะห์เส้นทางเป้าหมาย ซึ่งเป็นเส้นทางที่ผู้ใช้ไปยัง "Conversion"

คุณสามารถติดตามความเร็วของเว็บไซต์ใน Google Analytics เพื่อดูว่าเมตริกประสิทธิภาพเชื่อมโยงกับเมตริกทางธุรกิจอย่างไร เช่น "หน้าแรกโหลดเร็วแค่ไหน" เทียบกับ "การเข้าชมผ่านหน้าแรกทําให้เกิดการขายไหม"

Google Analytics ใช้ข้อมูลจาก Navigation Timing API

คุณอาจต้องการบันทึกข้อมูลโดยใช้ JavaScript Performance API รายการใดรายการหนึ่งหรือเมตริกของคุณเอง เช่น

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

นอกจากนี้ คุณยังใช้ ReportingObserver เพื่อตรวจสอบการเลิกใช้งานเบราว์เซอร์และคำเตือนการแทรกแซงได้ด้วย ซึ่งเป็นหนึ่งในAPI จํานวนมากสําหรับการวัดผลจริงแบบเรียลไทม์จากผู้ใช้จริง

ประสบการณ์การใช้งานจริง: การบันทึกหน้าจอและวิดีโอ

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

คุณอาจต้องบันทึกภาพหน้าจอด้วย มีแอปบันทึกหน้าจอแคสต์มากมายสำหรับแพลตฟอร์ม Android, iOS และเดสก์ท็อป (และสคริปต์สำหรับดำเนินการแบบเดียวกัน)

การโหลดหน้าเว็บสำหรับการบันทึกวิดีโอทำงานคล้ายกับมุมมองแถบสไลด์ใน WebPagetest หรือจับภาพหน้าจอในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คุณจะได้รับบันทึกความเร็วในการโหลดคอมโพเนนต์หน้าเว็บจริง ซึ่งจะระบุได้ว่ารายการใดเร็วและรายการใดช้า บันทึกวิดีโอที่บันทึกไว้และภาพหน้าจอเพื่อเปรียบเทียบกับวิดีโอที่ปรับปรุงในภายหลัง

การเปรียบเทียบภาพก่อนและหลังแบบแสดงคู่กันอาจเป็นวิธีที่ดีในการแสดงให้เห็นถึงการปรับปรุง

มีอะไรอีกไหม

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

เว็บไซต์ของฉันมีค่าใช้จ่ายเท่าไรที่แสดงอยู่ด้านล่างเป็นแนวทางคร่าวๆ เกี่ยวกับค่าใช้จ่ายทางการเงินในการโหลดเว็บไซต์ในภูมิภาคต่างๆ

มีเครื่องมือแบบสแตนด์อโลนและออนไลน์อื่นๆ อีกมากมาย ดูได้ที่ perf.rocks/tools