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

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

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

วัตถุประสงค์ เพราะเหตุใด สิ่งที่ควรทดสอบ
รักษาความเป็นส่วนตัว ความปลอดภัย และความสมบูรณ์ของข้อมูล รวมถึงเปิดใช้ API ที่มีประสิทธิภาพ เหตุใด HTTPS จึงสำคัญ ใช้ HTTPS สำหรับหน้าเว็บ/เส้นทางและชิ้นงานทั้งหมดของเว็บไซต์
ปรับปรุงประสิทธิภาพการโหลด 53% ของผู้ใช้ ละทิ้งเว็บไซต์ที่ใช้เวลาโหลดนานกว่า 3 วินาที JavaScript และ CSS ที่โหลดแบบไม่พร้อมกันหรือเลื่อนเวลา กําหนดเป้าหมายสําหรับเวลาในการตอบสนองและขนาดเพย์โหลด เช่น TTI ใน 3G กําหนดงบประมาณด้านประสิทธิภาพ
ลดน้ำหนักหน้าเว็บ • ลดค่าอินเทอร์เน็ตสำหรับผู้ใช้ที่มีแพ็กเกจอินเทอร์เน็ตแบบจำกัดปริมาณอินเทอร์เน็ตที่ใช้ได้ • ลดข้อกำหนดด้านพื้นที่เก็บข้อมูลของเว็บแอป ซึ่งสำคัญอย่างยิ่งสำหรับผู้ใช้ที่ใช้อุปกรณ์ที่มีสเปคต่ำ • ลดค่าโฮสติ้งและค่าการแสดงข้อมูล • ปรับปรุงประสิทธิภาพการแสดงข้อมูล ความน่าเชื่อถือ และความสามารถในการรับมือกับปัญหา กำหนดงบประมาณน้ำหนักหน้าเว็บ เช่น การโหลดครั้งแรกต้องไม่เกิน 400 KB ตรวจสอบ JavaScript จำนวนมาก ตรวจสอบขนาดไฟล์เพื่อค้นหารูปภาพที่ขยายใหญ่, สื่อ, HTML, CSS และ JavaScript ค้นหารูปภาพที่สามารถโหลดแบบ Lazy Loading และตรวจสอบโค้ดที่ไม่ได้ใช้ด้วยเครื่องมือการครอบคลุม
ลดคําขอทรัพยากร • ลดปัญหาเกี่ยวกับเวลาในการตอบสนอง • ลดค่าใช้จ่ายในการแสดงโฆษณา • ปรับปรุงประสิทธิภาพ และความเสถียรของการแสดงโฆษณา มองหาคำขอทรัพยากรทุกประเภทที่มากเกินไปหรือไม่จำเป็น เช่น ไฟล์ที่โหลดซ้ำๆ, JavaScript ที่โหลดหลายเวอร์ชัน, CSS ที่ไม่ได้ใช้, รูปภาพที่ไม่เคยดู (หรืออาจใช้การโหลดแบบเลื่อนเวลา)
เพิ่มประสิทธิภาพการใช้หน่วยความจำ หน่วยความจําอาจกลายเป็นปัญหาคอขวดใหม่ โดยเฉพาะในอุปกรณ์เคลื่อนที่ ใช้ตัวจัดการงาน Chrome เพื่อเปรียบเทียบเว็บไซต์ของคุณกับเว็บไซต์อื่นๆ เพื่อการใช้งานหน่วยความจำเมื่อโหลดหน้าแรกและใช้ฟีเจอร์อื่นๆ ของเว็บไซต์
ลดการใช้งาน CPU อุปกรณ์เคลื่อนที่มี CPU จำกัด โดยเฉพาะอุปกรณ์ที่มีสเปคต่ำ ตรวจสอบ JavaScript จำนวนมาก ค้นหา JavaScript และ CSS ที่ไม่ได้ใช้ด้วยเครื่องมือการครอบคลุม ตรวจสอบขนาด DOM ที่มากเกินไปและสคริปต์ที่ทำงานโดยไม่จำเป็นในการโหลดครั้งแรก มองหา JavaScript ที่โหลดในหลายเวอร์ชัน หรือไลบรารีที่หลีกเลี่ยงได้ด้วยการรีแฟกทอริงเล็กน้อย

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

  • เครื่องมือของระบบ
  • เครื่องมือในตัวของเบราว์เซอร์
  • ส่วนขยายของเบราว์เซอร์
  • แอปพลิเคชันทดสอบออนไลน์
  • เครื่องมือการจําลอง
  • 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 คุณสามารถเข้าถึงตัวจัดการงานได้จากเมนูหน้าต่าง วิธีนี้เป็นวิธีที่ง่ายในการตรวจสอบข้อกําหนดของหน้าเว็บ

เครื่องมือจัดการงานของ Chrome ที่แสดงการใช้หน่วยความจำและ CPU สำหรับแท็บเบราว์เซอร์ที่เปิดอยู่ 4 แท็บ
ตัวจัดการงานของ Chrome - ระวังโปรแกรมที่ใช้หน่วยความจำและ CPU มากเกินไป

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

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

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

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

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

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

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

ภาพหน้าจอแสดงวิธีส่งออกรายงาน Chrome Lighthouse เป็นสรุป
ส่งออกรายงานไปยังสรุปจากส่วนขยาย Lighthouse ของ Chrome โดยคลิกปุ่มแชร์

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

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

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

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

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

ภาพหน้าจอแสดงความเร็วของเว็บไซต์ 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 หลายรายการสําหรับรับการวัดผลจริงแบบเรียลไทม์จากผู้ใช้จริง

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

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

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

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

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

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

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

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

ภาพหน้าจอจาก whatdoesmysitecost.com

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