การตรวจสอบประสิทธิภาพของการเปิดตัวคุณลักษณะ

1. ภาพรวม

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

สิ่งที่คุณจะได้เรียนรู้

  • วิธีเพิ่มการตรวจสอบประสิทธิภาพ Firebase ให้กับแอปบนอุปกรณ์เคลื่อนที่ของคุณเพื่อรับเมตริกที่พร้อมใช้งานทันที (เช่น เวลาเริ่มต้นแอปและเฟรมที่ช้าหรือหยุดนิ่ง)
  • วิธีเพิ่มการติดตามที่กำหนดเองเพื่อทำความเข้าใจเส้นทางรหัสที่สำคัญของเส้นทางผู้ใช้ของคุณ
  • วิธีใช้แดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อทำความเข้าใจเมตริกและติดตามการเปลี่ยนแปลงที่สำคัญ เช่น การเปิดตัวคุณลักษณะ
  • วิธีตั้งค่าการแจ้งเตือนประสิทธิภาพเพื่อตรวจสอบเมตริกหลักของคุณ
  • วิธีเปิดตัวการเปลี่ยนแปลงการกำหนดค่าระยะไกลของ Firebase

ข้อกำหนดเบื้องต้น

  • Android Studio 4.0 หรือสูงกว่า
  • โปรแกรมจำลอง Android ที่มี API ระดับ 16 ขึ้นไป
  • Java เวอร์ชัน 8 ขึ้นไป
  • ความเข้าใจพื้นฐานของ Firebase Remote Config

2. ตั้งค่าตัวอย่างโครงการ

ดาวน์โหลดรหัส

เรียกใช้คำสั่งต่อไปนี้เพื่อโคลนโค้ดตัวอย่างสำหรับ codelab นี้ สิ่งนี้จะสร้างโฟลเดอร์ชื่อ codelab-perf-rc-android บนเครื่องของคุณ:

$ git clone https://github.com/FirebaseExtended/codelab-feature-rollout-performance.git

หากคุณไม่มี Git ในเครื่อง คุณสามารถดาวน์โหลดโค้ดได้โดยตรงจาก GitHub

นำเข้าโครงการภายใต้โฟลเดอร์ firebase-perf-rc-android-start ลงใน Android Studio คุณอาจเห็นข้อยกเว้นรันไทม์หรืออาจมีคำเตือนเกี่ยวกับไฟล์ google-services.json ที่หายไป เราจะแก้ไขในส่วนถัดไป

ใน Codelab นี้ คุณจะใช้ปลั๊กอิน Firebase Assistant เพื่อลงทะเบียนแอป Android กับโปรเจ็กต์ Firebase และเพิ่มไฟล์การกำหนดค่า Firebase ปลั๊กอิน และการพึ่งพาที่จำเป็นให้กับโปรเจ็กต์ Android ของคุณ ทั้งหมดนี้ทำได้จากภายใน Android Studio !

เชื่อมต่อแอปของคุณกับ Firebase

  1. ไปที่ Android Studio / Help > Check for updates เพื่อให้แน่ใจว่าคุณกำลังใช้ Android Studio เวอร์ชันล่าสุดและ Firebase Assistant
  2. เลือก เครื่องมือ > Firebase เพื่อเปิดบานหน้าต่าง ผู้ช่วย

c0e42ef063d21eab.png

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

ถัดไป คุณควรเห็นกล่องโต้ตอบ เชื่อมต่อ แอป Firebase ใหม่กับโปรเจ็กต์ Android Studio

51a549ebde2fe57a.png

  1. คลิก เชื่อมต่อ
  2. เปิด Android Studio ในบานหน้าต่าง ผู้ช่วย คุณจะเห็นการยืนยันว่าแอปของคุณเชื่อมต่อกับ Firebase

40c24c4a56a45990.png

เพิ่มการตรวจสอบประสิทธิภาพให้กับแอปของคุณ

ในบานหน้าต่าง ผู้ช่วย ใน Android Studio ให้คลิก เพิ่มการตรวจสอบประสิทธิภาพในแอปของคุณ

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

3046f3e1f5fea06f.png

สุดท้าย คุณควรเห็นข้อความแสดงความสำเร็จในบานหน้าต่าง ผู้ช่วย ใน Android Studio ว่าการขึ้นต่อกันทั้งหมดได้รับการตั้งค่าอย่างถูกต้อง

62e79fd18780e320.png

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

3. เปิดแอพ

ตอนนี้คุณควรเห็นไฟล์ google-services.json ในไดเรกทอรีโมดูล (ระดับแอป) ของแอป และตอนนี้แอปของคุณควรรวบรวม ใน Android Studio คลิก เรียกใช้ > เรียกใช้ "แอป" เพื่อสร้างและเรียกใช้แอปบนโปรแกรมจำลอง Android

เมื่อแอปทำงาน คุณควรเห็นหน้าจอเริ่มต้นดังนี้:

ffbd413a6983b205.png

หลังจากนั้นไม่กี่วินาที หน้าหลักที่มีรูปภาพเริ่มต้นจะปรากฏขึ้น:

d946cab0df319e50.png

เกิดอะไรขึ้นภายใต้ประทุน?

หน้าจอเริ่มต้นถูกนำมาใช้ใน SplashScreenActivity และดำเนินการดังต่อไปนี้:

  1. ใน onCreate() เราเริ่มต้นการตั้งค่า Firebase Remote Config และดึงค่า config ที่คุณจะตั้งค่าในแดชบอร์ด Remote Config ในภายหลังใน Codelab นี้
  2. ใน executeTasksBasedOnRC() เราอ่านค่า config ของแฟล็ก seasonal_image_url หาก URL มาจากค่า config เราจะดาวน์โหลดภาพพร้อมกัน
  3. เมื่อการดาวน์โหลดเสร็จสิ้น แอพจะนำทางไปยัง MainActivity และเรียก finish() เพื่อสิ้นสุด SplashScreenActivity

ใน MainActivity หาก seasonal_image_url การกำหนด season_image_url ผ่าน Remote Config คุณลักษณะนี้จะเปิดใช้งานและภาพที่ดาวน์โหลดจะแสดงเป็นพื้นหลังของหน้าหลัก มิฉะนั้น รูปภาพเริ่มต้น (ที่แสดงด้านบน) จะแสดงขึ้น

4. ตั้งค่า Remote Config

ขณะนี้แอปของคุณกำลังทำงานอยู่ คุณสามารถตั้งค่าสถานะคุณลักษณะใหม่ได้

  1. ในแผงด้านซ้ายของ คอนโซล Firebase ให้ค้นหา ส่วน Engage จากนั้นคลิก Remote Config
  2. คลิกปุ่ม สร้างการกำหนดค่า เพื่อเปิดแบบฟอร์มการกำหนดค่าและเพิ่ม seasonal_image_url เป็นคีย์พารามิเตอร์
  3. คลิก เพิ่มคำอธิบาย จากนั้นป้อนคำอธิบายนี้: Shows a seasonal image (replaces default) in the main page when the restaurant list is empty.
  4. คลิก เพิ่มใหม่ -> ค่าตามเงื่อนไข -> สร้างเงื่อนไขใหม่
  5. สำหรับชื่อเงื่อนไข ให้ป้อน Seasonal image rollout
  6. สำหรับส่วน Applies if... เลือก User in random percentile <= 0% (คุณต้องการปิดคุณลักษณะนี้ไว้จนกว่าคุณจะพร้อมเปิดตัวในขั้นตอนต่อไป)
  7. คลิก สร้างเงื่อนไข คุณจะใช้เงื่อนไขนี้ในภายหลังเพื่อเปิดตัวคุณลักษณะใหม่ให้กับผู้ใช้ของคุณ

7a07526eb9e81623.png

  1. เปิด แบบฟอร์มสร้างพารามิเตอร์แรกของคุณ และค้นหาฟิลด์ Value for Seasonal image rollout ป้อน URL ที่จะดาวน์โหลดภาพตามฤดูกาล: https://images.unsplash.com/photo-1552691021-7043334e0b51
  2. ปล่อยให้ค่าดีฟอลต์เป็นสตริงว่าง ซึ่งหมายความว่ารูปภาพเริ่มต้นใน codebase จะแสดงแทนรูปภาพที่ดาวน์โหลดจาก URL
  3. คลิก บันทึก

99e6cd2ebcdced.png

คุณจะเห็นว่าการกำหนดค่าใหม่ถูกสร้างขึ้นเป็นแบบร่าง

  1. คลิก เผยแพร่การเปลี่ยนแปลง และยืนยันการเปลี่ยนแปลงที่ด้านบนเพื่ออัปเดตแอปของคุณ

39cd3e96d370c7ce.png

5. เพิ่มการตรวจสอบเวลาในการโหลดข้อมูล

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

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

ในการติดตามระยะเวลาที่แสดงหน้าจอเริ่มต้น คุณจะต้องเพิ่มการติดตามโค้ดที่กำหนดเองใน SplashScreenActivity ซึ่งเป็น Activity ที่ใช้หน้าจอเริ่มต้น

  1. เริ่มต้น สร้าง และเริ่มการติดตามโค้ดแบบกำหนดเองที่ชื่อ splash_screen_trace :

SplashScreenActivity.java

// ...
import com.google.firebase.perf.FirebasePerformance;
import com.google.firebase.perf.metrics.Trace;
// ...

public class SplashScreenActivity extends AppCompatActivity {

    private static final String TAG = "SplashScreenActivity";
    private static final String SEASONAL_IMAGE_URL_RC_FLAG = "seasonal_image_url";

    // TODO: Initialize splash_screen_trace
    private final Trace splashScreenTrace = FirebasePerformance.startTrace("splash_screen_trace");
    
    // ...
}
  1. สิ้นสุดการติดตามใน onDestroy() ของ SplashScreenActivity :

SplashScreenActivity.java

@Override
protected void onDestroy() {
    super.onDestroy();

    // TODO: Stop the splash_screen_trace here
    splashScreenTrace.stop();
}

เนื่องจากคุณลักษณะใหม่ของคุณดาวน์โหลดและประมวลผลภาพ คุณจะเพิ่มการติดตามโค้ดที่กำหนดเองครั้งที่สอง ซึ่งจะติดตามเวลาเพิ่มเติมที่คุณลักษณะของคุณเพิ่มลงใน SplashScreenActivity

  1. เริ่มต้น สร้าง และเริ่มการติดตามโค้ดแบบกำหนดเองที่ชื่อ splash_seasonal_image_processing :

SplashScreenActivity.java

private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
    String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
    Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);

    if (!seasonalImageUrl.isEmpty()) {
        // TODO: Start the splash_seasonal_image_processing here
        final Trace seasonalImageProcessingTrace = FirebasePerformance
            .startTrace("splash_seasonal_image_processing");

        // ...
    }
}
  1. สิ้นสุดการติดตามในเมธอดทั้ง onLoadFailed() และ onResourceReady() ของ RequestListener :

SplashScreenActivity.java

Glide.with(SplashScreenActivity.this.getApplicationContext())
    .asBitmap()
    .load(seasonalImageUrl)
    .signature(new ObjectKey(Utils.getCacheUUID()))
    .listener(new RequestListener<Bitmap>() {
        @Override
        public boolean onLoadFailed(
            @Nullable GlideException e,
            Object model, Target<Bitmap> target,
            boolean isFirstResource) {

            // TODO: Stop the splash_seasonal_image_processing here
            seasonalImageProcessingTrace.stop();

            launchMainActivity();
            return true;
        }

        @Override
        public boolean onResourceReady(Bitmap resource, Object model,
            Target<Bitmap> target, DataSource dataSource,
            boolean isFirstResource) {

            // TODO: Stop the splash_seasonal_image_processing here
            seasonalImageProcessingTrace.stop();

            launchMainActivity();
            return true;
        }
     })
     .preload();

ตอนนี้คุณได้เพิ่มการติดตามโค้ดที่กำหนดเองเพื่อติดตามระยะเวลาหน้าจอสแปลช ( splash_screen_trace) และเวลาประมวลผลของฟีเจอร์ใหม่ ( splash_seasonal_image_processing ) ให้ เรียกใช้แอป ใน Android Studio อีกครั้ง คุณควรเห็นข้อความการบันทึกที่มี Logging trace metric: splash_screen_trace ตามด้วยระยะเวลาของการติดตาม คุณจะไม่เห็นข้อความบันทึกสำหรับ splash_seasonal_image_processing เนื่องจากคุณยังไม่ได้เปิดใช้งานคุณลักษณะใหม่

6. เพิ่มแอตทริบิวต์ที่กำหนดเองในการติดตาม

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

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

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

  1. เพิ่มแอตทริบิวต์ที่กำหนดเอง ( seasonal_image_url_attribute ) สำหรับ splash_screen_trace ที่จุดเริ่มต้นของเมธอด executeTasksBasedOnRC :

SplashScreenActivity.java

private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
    String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
    Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);

    // TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_screen_trace
    if (seasonalImageUrl.isEmpty()) {
        splashScreenTrace.putAttribute("seasonal_image_url_attribute", "unset");
    } else {
        splashScreenTrace.putAttribute("seasonal_image_url_attribute", seasonalImageUrl);
    }

    // ...
}
  1. เพิ่มแอตทริบิวต์ที่กำหนดเองเดียวกันสำหรับ splash_seasonal_image_processing หลังจากการ startTrace("splash_seasonal_image_processing") :

SplashScreenActivity.java

if (!seasonalImageUrl.isEmpty()) {
    // TODO: Start the splash_seasonal_image_processing here
    final Trace seasonalImageProcessingTrace = FirebasePerformance
        .startTrace("splash_seasonal_image_processing");

    // TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_seasonal_image_processing
    seasonalImageProcessingTrace
        .putAttribute("seasonal_image_url_attribute", seasonalImageUrl);

    // ...
}

เมื่อคุณได้เพิ่มแอตทริบิวต์ที่กำหนดเอง ( seasonal_image_url_attribute ) สำหรับการติดตามที่กำหนดเองทั้งสองของคุณแล้ว ( splash_screen_trace และ splash_seasonal_image_processing ) ให้ เรียกใช้แอป ใน Android Studio อีกครั้ง คุณควรเห็นข้อความการบันทึกที่มี Setting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'. คุณยังไม่ได้เปิดใช้งานพารามิเตอร์ Remote Config seasonImageUrl ซึ่งเป็นสาเหตุที่ค่าแอตทริบิวต์ไม่ถูก unset

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

7. กำหนดค่าแดชบอร์ดการตรวจสอบประสิทธิภาพของคุณ

กำหนดค่าแดชบอร์ดของคุณเพื่อตรวจสอบคุณสมบัติของคุณ

ใน คอนโซล Firebase เลือกโปรเจ็กต์ที่มีแอป Friendly Eats ของคุณ

ในแผงด้านซ้าย ค้นหาส่วน Release & Monitor จากนั้นคลิก Performance

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

f57e5450b70034c9.png

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

  1. คลิกที่ช่อง Select a metric ที่ว่างเปล่า
  2. ในหน้าต่างไดอะล็อก เลือกประเภทการติดตามของ Custom traces และชื่อการติดตาม splash_screen_trace

1fb81f4dba3220e0.png

  1. คลิก Select metric และคุณจะเห็นระยะเวลาของ splash_screen_trace ถูกเพิ่มลงในแดชบอร์ดของคุณ!

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

1d465c021e58da3b.png

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

8. เปิดตัวคุณลักษณะของคุณ

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

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

  1. คลิกแท็บ เงื่อนไข ที่ด้านบนของหน้า
  2. คลิกเงื่อนไข Seasonal image rollout ที่คุณเพิ่มไว้ก่อนหน้านี้
  3. เปลี่ยนเปอร์เซ็นไทล์เป็น 100%
  4. คลิก บันทึกเงื่อนไข
  5. คลิก เผยแพร่การเปลี่ยนแปลง และยืนยันการเปลี่ยนแปลง

70f993502b27e7a0.png

กลับไปที่ Android Studio รีสตาร์ทแอปในโปรแกรมจำลองเพื่อดูคุณลักษณะใหม่ หลังจากหน้าจอเริ่มต้น คุณจะเห็นหน้าจอหลักสถานะว่างเปล่าใหม่!

b0cc91b6e48fb842.png

9. ตรวจสอบการเปลี่ยนแปลงประสิทธิภาพ

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

  1. บนแท็บ แดชบอร์ด หลัก ให้เลื่อนลงไปที่ตารางการติดตาม จากนั้นคลิกแท็บ Custom traces ในตารางนี้ คุณจะเห็นโค้ดติดตามที่กำหนดเองที่คุณเพิ่มไว้ก่อนหน้านี้ บวกกับ การติดตามแบบสำเร็จรูป บางส่วน
  2. เมื่อคุณเปิดใช้งานคุณลักษณะใหม่แล้ว ให้มองหาโค้ดที่กำหนดเอง trace splash_seasonal_image_processing ซึ่งวัดเวลาที่ใช้ในการดาวน์โหลดและประมวลผลภาพ จากค่า Duration ของการติดตาม คุณจะเห็นว่าการดาวน์โหลดและการประมวลผลนี้ใช้เวลานานพอสมควร

439adc3ec71805b7.png

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

เช่นเดียวกับเมื่อก่อน ให้คลิกที่ช่อง Select a metric ที่ว่างช่องใดช่องหนึ่ง ในหน้าต่างไดอะล็อก เลือกประเภทการติดตาม Custom traces และชื่อการติดตาม splash_seasonal_image_processing สุดท้าย คลิก เลือกเมตริก เพื่อเพิ่มเมตริกนี้ลงในบอร์ดเมตริก

7fb64d2340410576.png

  1. เพื่อยืนยันความแตกต่างเพิ่มเติม คุณสามารถดูข้อมูลสำหรับ splash_screen_trace อย่างละเอียด คลิกการ์ด splash_screen_trace ในบอร์ดเมตริก จากนั้นคลิก ดูรายละเอียดเมตริก

b1c275c30679062a.png

  1. ในหน้ารายละเอียด คุณจะเห็นรายการแอตทริบิวต์ที่ด้านล่างซ้าย รวมทั้งแอตทริบิวต์ที่กำหนดเองที่คุณสร้างไว้ก่อนหน้านี้ คลิกแอตทริบิวต์ที่กำหนดเอง seasonal_image_url_attribute เพื่อดูระยะเวลาหน้าจอสแปลชสำหรับ URL รูปภาพตามฤดูกาลแต่ละรายการทางด้านขวา:

8fa1a69019bb045e.png

  1. ค่าระยะเวลาหน้าจอเริ่มต้นของคุณอาจจะแตกต่างไปจากในภาพหน้าจอด้านบนเล็กน้อย แต่คุณควรจะมี ระยะเวลานานกว่า เมื่อดาวน์โหลดรูปภาพจาก URL เมื่อเทียบกับการใช้รูปภาพเริ่มต้น (แสดงโดย "unset")

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

  1. คลิก ประสิทธิภาพ ที่ด้านบนของหน้าเพื่อกลับไปที่แท็บหลักของ แดชบอร์ด : 640b696b79d90103.png
  2. ในตารางการติดตามที่ด้านล่างของหน้า คลิกแท็บ คำขอเครือข่าย ในตารางนี้ คุณจะเห็นคำขอเครือข่ายทั้งหมดจากแอปของคุณ รวมกันเป็นรูปแบบ URL รวมถึงรูปแบบ URL images.unsplash.com/** หากคุณเปรียบเทียบค่าของเวลาตอบสนองนี้กับเวลาโดยรวมที่ใช้ในการดาวน์โหลดและประมวลผลรูปภาพ (กล่าวคือ ระยะเวลาของการติดตาม splash_seasonal_image_processing ) คุณจะเห็นว่าใช้เวลาในการ ดาวน์โหลด รูปภาพเป็นจำนวนมาก

6f92ce0f23494507.png

ผลการปฏิบัติงาน

เมื่อใช้ Firebase Performance Monitoring คุณเห็นผลกระทบต่อไปนี้ต่อผู้ใช้ปลายทางที่เปิดใช้งานคุณสมบัติใหม่:

  1. เวลาที่ใช้ใน SplashScreenActivity เพิ่มขึ้น
  2. ระยะเวลาสำหรับ splash_seasonal_image_processing นั้นใหญ่มาก
  3. ความล่าช้าเกิดจากเวลาตอบสนองสำหรับการดาวน์โหลดภาพและเวลาในการประมวลผลที่จำเป็นสำหรับภาพ

ในขั้นตอนต่อไป คุณจะลดผลกระทบต่อประสิทธิภาพโดยย้อนกลับคุณลักษณะและระบุว่าคุณจะปรับปรุงการใช้งานคุณลักษณะได้อย่างไร

10. ย้อนกลับคุณสมบัติ

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

เพื่อบรรเทาผลกระทบอย่างรวดเร็ว คุณจะรีเซ็ตเปอร์เซ็นไทล์การเปิดตัวกลับเป็น 0 เพื่อให้ผู้ใช้ทั้งหมดเห็นรูปภาพเริ่มต้นอีกครั้ง:

  1. กลับไปที่ หน้าการกำหนดค่า ระยะไกล ในคอนโซล Firebase
  2. คลิก เงื่อนไข ที่ด้านบนของหน้า
  3. คลิกเงื่อนไข Seasonal image rollout ที่คุณเพิ่มไว้ก่อนหน้านี้
  4. เปลี่ยนเปอร์เซ็นไท ล์เป็น 0%
  5. คลิก บันทึกเงื่อนไข
  6. คลิก เผยแพร่การเปลี่ยนแปลง และยืนยันการเปลี่ยนแปลง

18c4f1cbac955a04.png

รีสตาร์ทแอปใน Android Studio และคุณจะเห็นหน้าจอหลักของสถานะว่างดั้งเดิม:

d946cab0df319e50.png

11. แก้ไขปัญหาด้านประสิทธิภาพ

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

เปิดตัวค่า Remote Config อีกครั้ง

  1. กลับไปที่ หน้าการกำหนดค่า ระยะไกล ในคอนโซล Firebase
  2. คลิกไอคอน แก้ไข สำหรับพารามิเตอร์ seasonal_image_url
  3. อัปเดต Value for Seasonal image rollout เป็น https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 จากนั้นคลิก Save

828dd1951a2ec4a4.png

  1. คลิกแท็บ เงื่อนไข ที่ด้านบนของหน้า
  2. คลิก การเปิดตัวรูปภาพตามฤดูกาล จากนั้นตั้งค่าเปอร์เซ็นต์ไทล์กลับเป็น 100%
  3. คลิก บันทึกเงื่อนไข

1974fa3bb789f36c.png

  1. คลิกที่ปุ่ม เผยแพร่การเปลี่ยนแปลง

12. ทดสอบการแก้ไขและตั้งค่าการแจ้งเตือน

เรียกใช้แอพในเครื่อง

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

b0cc91b6e48fb842.png

ดูประสิทธิภาพของการเปลี่ยนแปลง

กลับไปที่ แดชบอร์ด ประสิทธิภาพ ในคอนโซล Firebase เพื่อดูว่าเมตริกมีลักษณะอย่างไร

  1. คราวนี้คุณจะใช้ตารางการติดตามเพื่อไปยังหน้ารายละเอียด ในตารางการติดตาม ในแท็บ Custom traces ให้คลิก custom trace splash_seasonal_image_processing เพื่อดูมุมมองรายละเอียดเพิ่มเติมของตัวชี้วัดระยะเวลาอีกครั้ง

2d7aaca03112c062.png

  1. คลิกแอตทริบิวต์ที่กำหนดเอง seasonal_image_url_attribute เพื่อดูรายละเอียดแอตทริบิวต์ที่กำหนดเองอีกครั้ง หากคุณวางเมาส์เหนือ URL คุณจะเห็นค่าที่ตรงกับ URL ใหม่สำหรับรูปภาพที่ลดขนาด: https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 (พร้อมเครื่องหมาย ?w=640 ในตอนท้าย) ค่าระยะเวลาที่เกี่ยวข้องกับรูปภาพนี้สั้นกว่าค่าสำหรับรูปภาพก่อนหน้าอย่างมาก และเป็นที่ยอมรับสำหรับผู้ใช้ของคุณมากขึ้น!

10e30c037a4237a2.png

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

4bd0a2a1faa14479.png

  1. คลิกปุ่มสลับเพื่อเปิดใช้งานการแจ้งเตือน Duration ตั้งค่าขีดจำกัดให้สูงกว่าค่าที่คุณเห็นเล็กน้อย เพื่อที่ว่าถ้า splash_screen_trace ของคุณเกินขีดจำกัด คุณจะได้รับอีเมล
  1. คลิก บันทึก เพื่อสร้างการแจ้งเตือนของคุณ เลื่อนลงไปที่ ตาราง การติดตาม จากนั้นคลิกแท็บ Custom traces เพื่อดูว่าการแจ้งเตือนของคุณเปิดใช้งานอยู่!

2bb93639e2218d1.png

13. ขอแสดงความยินดี!

ยินดีด้วย! คุณเปิดใช้ Firebase Performance Monitoring SDK และรวบรวมการติดตามเพื่อวัดประสิทธิภาพของฟีเจอร์ใหม่ คุณตรวจสอบเมตริกประสิทธิภาพหลักสำหรับการเปิดตัวคุณลักษณะใหม่และตอบสนองอย่างรวดเร็วเมื่อพบปัญหาด้านประสิทธิภาพ ทั้งหมดนี้เป็นไปได้ด้วยความสามารถในการเปลี่ยนแปลงการกำหนดค่าด้วย Remote Config และตรวจสอบปัญหาด้านประสิทธิภาพแบบเรียลไทม์

สิ่งที่เราได้กล่าวถึง

  • การเพิ่ม Firebase Performance Monitoring SDK ให้กับแอปของคุณ
  • การเพิ่มการติดตามโค้ดที่กำหนดเองลงในโค้ดของคุณเพื่อวัดคุณลักษณะเฉพาะ
  • การตั้งค่าพารามิเตอร์การกำหนดค่าระยะไกลและค่าตามเงื่อนไขเพื่อควบคุม/เปิดตัวคุณลักษณะใหม่
  • ทำความเข้าใจวิธีใช้แดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อระบุปัญหาระหว่างการเปิดตัว
  • การตั้งค่าการแจ้งเตือนประสิทธิภาพเพื่อแจ้งให้คุณทราบเมื่อประสิทธิภาพของแอปเกินเกณฑ์ที่คุณกำหนด

เรียนรู้เพิ่มเติม