Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

เริ่มต้นใช้งานการตรวจสอบประสิทธิภาพสำหรับเว็บ

ก่อนจะเริ่ม

หากคุณยังไม่ได้ดำเนินการ โปรดไปที่ เพิ่ม Firebase ในโครงการ JavaScript เพื่อเรียนรู้วิธี:

  • สร้างโปรเจ็กต์ Firebase

  • ลงทะเบียนเว็บแอปของคุณด้วย Firebase

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

ขั้นตอนที่ 1 : เพิ่มการตรวจสอบประสิทธิภาพและเริ่มต้น Firebase

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

  • จาก CDN (SDK แบบสแตนด์อโลน) — หากการตรวจสอบประสิทธิภาพเป็นผลิตภัณฑ์ Firebase เพียงผลิตภัณฑ์เดียวในแอปของคุณ ตัวเลือกนี้จะโหลด SDK น้ำหนักเบาเพียงรายการเดียวจาก CDN

  • จาก CDN (SDK มาตรฐาน) — หากคุณใช้ผลิตภัณฑ์ Firebase อื่นๆ ในแอป ตัวเลือกนี้จะโหลด SDK การตรวจสอบประสิทธิภาพพร้อมกับไลบรารี Firebase อื่นๆ จาก CDN

  • จาก URL ของโฮสติ้ง — หากคุณใช้โฮสติ้งของ Firebase ตัวเลือกนี้จะอำนวยความสะดวกในการจัดการการกำหนดค่า Firebase เมื่อเริ่มต้น Firebase

  • การใช้ชุดรวมโมดูล — หากคุณใช้ชุดรวม (เช่น Browserify หรือ webpack) ให้ใช้ตัวเลือกนี้เพื่อนำเข้าแต่ละโมดูลเมื่อคุณต้องการ

หลังจากที่คุณได้เพิ่ม SDK การตรวจสอบประสิทธิภาพแล้ว Firebase จะเริ่มรวบรวมข้อมูลสำหรับการ โหลดหน้า ของแอปและ คำขอเครือข่าย HTTP/S โดยอัตโนมัติ

จาก CDN

คุณกำหนดค่าการนำเข้าบางส่วนของ Firebase JavaScript SDK และโหลดเฉพาะไลบรารี Firebase ที่คุณต้องการได้ Firebase จัดเก็บแต่ละไลบรารีของ Firebase JavaScript SDK บน CDN ทั่วโลกของเรา (เครือข่ายการส่งเนื้อหา)

ในการรวม Performance Monitoring SDK จาก CDN คุณมีสองตัวเลือก:

  • SDK แบบสแตนด์อโลน — การตรวจสอบประสิทธิภาพเป็นผลิตภัณฑ์ Firebase เดียวที่คุณใช้ในแอปของคุณ
  • SDK มาตรฐาน — คุณกำลังใช้การตรวจสอบประสิทธิภาพร่วมกับผลิตภัณฑ์ Firebase อื่นๆ ในแอปของคุณ

SDK แบบสแตนด์อโลน

หากการตรวจสอบประสิทธิภาพเป็นผลิตภัณฑ์ Firebase เพียงผลิตภัณฑ์เดียวในแอปของคุณ ให้ใช้ SDK การตรวจสอบประสิทธิภาพแบบสแตนด์อโลน (และสคริปต์ส่วนหัวที่แนะนำด้านล่าง) หากคุณสนใจ:

  • ลดขนาดแพ็คเกจ SDK ของคุณ
  • ชะลอการเริ่มต้นของ SDK จนกว่าจะโหลดหน้าเว็บของคุณ

ในการรวม SDK การตรวจสอบประสิทธิภาพแบบสแตนด์อโลนในแอปของคุณและชะลอการเริ่มต้นไปหลังจากโหลดหน้าเว็บของคุณ:

  1. เพิ่มสคริปต์ต่อไปนี้ในส่วนหัวของไฟล์ดัชนีของคุณ
  2. อย่าลืมเพิ่ม ออบเจ็กต์การกำหนดค่าโปรเจ็กต์ Firebase ของแอป
(function(sa,fbc){function load(f,c){var a=document.createElement('script');
a.async=1;a.src=f;var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(a,s);}load(sa);
window.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})(performance_standalone, firebaseConfig);

ที่ไหน

  • performance_standalone คือ 'https://www.gstatic.com/firebasejs/8.6.7/firebase-performance-standalone.js'
  • firebaseConfig คือ ออบเจ็กต์ Firebase config ของแอปของคุณ

สคริปต์ด้านบนโหลด SDK แบบสแตนด์อโลนแบบอะซิงโครนัส จากนั้นจะเริ่มต้น Firebase หลังจาก ที่เหตุการณ์ onload ของหน้าต่างเริ่มทำงาน ชั้นเชิงนี้ลดผลกระทบที่ SDK อาจมีต่อ เมตริกการโหลดหน้าเว็บ เนื่องจากเบราว์เซอร์ได้รายงานเมตริกการโหลดแล้วเมื่อคุณเริ่มต้น SDK

SDK มาตรฐาน

หากคุณกำลังใช้ผลิตภัณฑ์ Firebase อื่นๆ (เช่น การตรวจสอบสิทธิ์หรือ Cloud Firestore ในแอปของคุณ ให้รวม SDK การตรวจสอบประสิทธิภาพมาตรฐานไว้ด้วย

โปรดทราบว่า SDK นี้กำหนดให้คุณรวม Firebase core SDK มาตรฐานแยกต่างหาก และเริ่มต้น Firebase และการตรวจสอบประสิทธิภาพในสคริปต์แยกต่างหาก

  1. หากต้องการรวม SDK การตรวจสอบประสิทธิภาพมาตรฐาน ให้เพิ่มสคริปต์ต่อไปนี้ที่ด้านล่างของแท็ก <body> แต่ก่อนที่คุณจะใช้บริการ Firebase

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-performance.js"></script>
    <body>
    
  2. เริ่มต้น Firebase และการตรวจสอบประสิทธิภาพในแอปของคุณ:

    <body>
    <!-- Previously loaded Firebase SDKs -->
    
    <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };
    
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    
      // Initialize Performance Monitoring and get a reference to the service
      var perf = firebase.performance();
    </script>
    </body>
    

จาก URL โฮสติ้ง

เมื่อคุณใช้โฮสติ้งของ Firebase คุณจะกำหนดค่าแอปให้โหลดไลบรารี Firebase JavaScript SDK แบบไดนามิกจาก URL ที่สงวนไว้ได้ เรียนรู้เพิ่มเติมเกี่ยวกับ การเพิ่ม SDK ผ่าน Hosting URLs ที่สงวนไว้

ด้วยตัวเลือกการตั้งค่านี้ หลังจากที่คุณ ปรับใช้กับ Firebase แอปของคุณจะดึงออบเจ็กต์การกำหนดค่า Firebase จากโปรเจ็กต์ Firebase ที่คุณได้ปรับใช้โดยอัตโนมัติ คุณสามารถปรับใช้ codebase เดียวกันกับโครงการ Firebase หลายโครงการ แต่คุณไม่จำเป็นต้องติดตามการกำหนดค่า Firebase ที่คุณใช้สำหรับ firebase.initializeApp()

  1. หากต้องการรวม SDK การตรวจสอบประสิทธิภาพ ให้เพิ่มสคริปต์ต่อไปนี้ที่ด้านล่างของแท็ก <body> แต่ก่อนที่คุณจะใช้บริการ Firebase

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/8.6.7/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/8.6.7/firebase-performance.js"></script>
    </body>
    
  2. เริ่มต้น Firebase และการตรวจสอบประสิทธิภาพในแอปของคุณ (ไม่จำเป็นต้องรวมออบเจ็กต์การกำหนดค่า Firebase ของคุณเมื่อใช้ URL โฮสติ้งที่สงวนไว้):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    
      <!-- Initialize Performance Monitoring and get a reference to the service -->
      <script>
        var perf = firebase.performance();
        // ...
      </script>
    </body>
    

การใช้ตัวรวมโมดูล

คุณกำหนดค่าการนำเข้าบางส่วนของ Firebase JavaScript SDK และโหลดเฉพาะผลิตภัณฑ์ Firebase ที่คุณต้องการได้ หากคุณใช้บันเดิล (เช่น Browserify หรือ webpack) คุณสามารถ import ผลิตภัณฑ์ Firebase แต่ละรายการเมื่อคุณต้องการ

  1. ติดตั้ง firebase แพคเกจ NPM และบันทึกไปยังคุณ package.json ไฟล์โดยการทำงาน:

    npm install --save firebase
  2. หากต้องการรวม SDK การตรวจสอบประสิทธิภาพ ให้ import โมดูล Firebase:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import firebase from "firebase/app";
    
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // import * as firebase from "firebase/app"
    
    // Add the Performance Monitoring library
    import "firebase/performance";
    
  3. เริ่มต้น Firebase และการตรวจสอบประสิทธิภาพในแอปของคุณ:

    // TODO: Replace the following with your app's Firebase project configuration
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    
    // Initialize Performance Monitoring and get a reference to the service
    const perf = firebase.performance();
    

ขั้นตอนที่ 2 : เพิ่มไลบรารี polyfill หน่วงเวลาอินพุตแรก input

ในการวัด เมตริกการหน่วงเวลาอินพุตแรก คุณต้องเพิ่มไลบรารี polyfill สำหรับเมตริกนี้ สำหรับคำแนะนำในการติดตั้ง โปรดดู เอกสารประกอบ ของไลบรารี

การเพิ่มไลบรารี polyfill นี้ไม่จำเป็นสำหรับการตรวจสอบประสิทธิภาพในการรายงานตัววัดเว็บแอปอื่นๆ

ขั้นตอนที่ 3 : สร้างกิจกรรมประสิทธิภาพสำหรับการแสดงข้อมูลเริ่มต้น data

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

  1. ให้บริการและดูเว็บแอปของคุณในสภาพแวดล้อมท้องถิ่น

  2. สร้างกิจกรรมโดยการโหลดหน้าย่อยสำหรับไซต์ของคุณ โต้ตอบกับแอปของคุณ และ/หรือเรียกคำขอของเครือข่าย ตรวจสอบให้แน่ใจว่าได้เปิดแท็บเบราว์เซอร์ไว้อย่างน้อย 10 วินาทีหลังจากโหลดหน้า

  3. ไปที่ แดชบอร์ด ประสิทธิภาพ ของคอนโซล Firebase คุณควรเห็นข้อมูลเริ่มต้นของคุณแสดงขึ้นภายในไม่กี่นาที

    หากคุณไม่เห็นการแสดงข้อมูลเริ่มต้นของคุณ ให้อ่าน คำแนะนำ ในการ แก้ปัญหา

ขั้นตอนที่ 4 : (ไม่บังคับ) ดูข้อความบันทึกสำหรับกิจกรรมด้านประสิทธิภาพ

  1. เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ (เช่น แท็บเครือข่ายสำหรับเครื่องมือ Chrome Dev หรือใน Network Monitor สำหรับ Firefox )

  2. รีเฟรชเว็บแอปของคุณในเบราว์เซอร์

  3. ตรวจสอบข้อความบันทึกเพื่อหาข้อความแสดงข้อผิดพลาด

  4. หลังจากนั้นไม่กี่วินาที ให้มองหาการเรียกเครือข่ายไป firebaselogging.googleapis.com ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ของคุณ การมีอยู่ของการเรียกเครือข่ายนั้นแสดงว่าเบราว์เซอร์กำลังส่งข้อมูลประสิทธิภาพไปยัง Firebase

หากแอปของคุณไม่บันทึกกิจกรรมด้านประสิทธิภาพ ให้อ่าน เคล็ดลับการแก้ปัญหา

ขั้นตอนที่ 5 : (ไม่บังคับ) เพิ่มการตรวจสอบแบบกำหนดเองสำหรับรหัสเฉพาะ

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

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

ในโค้ดของคุณ คุณต้องกำหนดจุดเริ่มต้นและจุดสิ้นสุดของการติดตามโค้ดที่กำหนดเอง (และเพิ่มเมตริกที่กำหนดเองที่ต้องการ) โดยใช้ API ที่จัดเตรียมโดย Performance Monitoring SDK

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

ขั้นตอนที่ 6 : ปรับใช้แอปของคุณแล้วตรวจสอบผลลัพธ์

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

คุณตรวจสอบข้อมูลประสิทธิภาพได้ใน แดชบอร์ด ประสิทธิภาพ ของคอนโซล Firebase

ขั้นตอนถัดไป