Mida el tiempo de carga y la representación de la pantalla con Firebase Performance Monitoring

1. Introducción

Última actualización: 2021-03-11

¿Por qué necesitamos medir el rendimiento de las Vistas?

Las vistas son una parte clave de las aplicaciones de Android que afectan directamente la experiencia del usuario. Por ejemplo, su Actividad o Fragmento contiene la interfaz de usuario que contiene los componentes de Vista con los que interactúan los usuarios. Los usuarios no pueden ver todo el contenido de la interfaz de usuario hasta que esté completamente dibujado en la pantalla. Las pantallas lentas y congeladas afectarán directamente la interacción del usuario con su aplicación y crearán una mala experiencia de usuario.

¿Firebase Performance Monitoring no proporciona estas métricas de rendimiento listas para usar?

Firebase Performance Monitoring captura automáticamente algunos datos de rendimiento listos para usar, como la hora de inicio de su aplicación (es decir, el tiempo de carga solo para su primera actividad) y el rendimiento de representación de la pantalla (es decir, fotogramas lentos y congelados para las actividades, pero no para las actividades). Fragmentos). Sin embargo, las aplicaciones industriales normalmente no tienen muchas actividades, sino una actividad y varios fragmentos. Además, muchas aplicaciones suelen implementar sus propias vistas personalizadas para casos de uso más complejos. Por lo tanto, suele ser útil comprender cómo medir el tiempo de carga y el rendimiento de representación de la pantalla tanto de actividades como de fragmentos mediante la instrumentación de seguimientos de código personalizados en su aplicación. Puede ampliar fácilmente este codelab para medir el rendimiento de los componentes de la Vista personalizada.

lo que aprenderás

• Cómo agregar Firebase Performance Monitoring a una aplicación de Android
• Comprender la carga de una actividad o un fragmento
• Cómo instrumentar seguimientos de código personalizado para medir el tiempo de carga de una actividad o fragmento
• Comprender la representación de pantalla y qué es un fotograma lento/congelado
• Cómo instrumentar seguimientos de código personalizados con métricas para registrar pantallas lentas/congeladas
• Cómo ver las métricas recopiladas en Firebase console

Lo que necesitarás

• Android Estudio 4.0 o superior
• Un dispositivo/emulador de Android
• Java versión 8 o superior

2. Preparación

Obtener el código

Ejecute los siguientes comandos para clonar el código de muestra de este codelab. Esto creará una carpeta llamada codelab-measure-android-view-performance en su máquina:

$ git clone https://github.com/FirebaseExtended/codelab-measure-android-view-performance.git
$ cd codelab-measure-android-view-performance

Si no tiene git en su máquina, también puede descargar el código directamente desde GitHub.

Importe el proyecto measure-view-performance-start a Android Studio. Probablemente verá algunos errores de compilación o tal vez una advertencia sobre la falta de un archivo google-services.json . Corregiremos esto en la siguiente sección de este paso.

En este codelab, usaremos el complemento Firebase Assistant para registrar nuestra aplicación de Android con un proyecto de Firebase y agregar los archivos de configuración, complementos y dependencias de Firebase necesarios a nuestro proyecto de Android, ¡ todo desde Android Studio !

Conecte su aplicación a Firebase

1. Vaya a Android Studio / Ayuda > Buscar actualizaciones para asegurarse de que está utilizando las últimas versiones de Android Studio y Firebase Assistant.
2. Seleccione Herramientas > Firebase para abrir el panel Asistente .

3. Elija Monitoreo de rendimiento para agregarlo a su aplicación y luego haga clic en Comenzar con Monitoreo de rendimiento .
4. Haga clic en Conectar a Firebase para conectar su proyecto de Android con Firebase (esto abrirá la consola de Firebase en su navegador) .
5. En Firebase console, haz clic en Agregar proyecto y luego ingresa el nombre de un proyecto de Firebase (si ya tienes un proyecto de Firebase, puedes seleccionar ese proyecto existente) . Haga clic en Continuar y acepte los términos para crear el proyecto de Firebase y una nueva aplicación de Firebase.
6. A continuación, debería ver un cuadro de diálogo para conectar su nueva aplicación Firebase a su proyecto de Android Studio.

7. De vuelta en Android Studio, en el panel Asistente , debería ver la confirmación de que su aplicación está conectada a Firebase.

Agregue monitoreo de rendimiento a su aplicación

En el panel Asistente de Android Studio, haga clic en Agregar monitoreo de rendimiento a su aplicación .

Debería ver un cuadro de diálogo para Aceptar cambios, después del cual Android Studio debería sincronizar su aplicación para asegurarse de que se hayan agregado todas las dependencias necesarias.

Finalmente, debería ver el mensaje de éxito en el panel Asistente de Android Studio indicando que todas las dependencias están configuradas correctamente.

Como paso adicional, habilite el registro de depuración siguiendo las instrucciones del paso "(Opcional) Habilitar el registro de depuración". Las mismas instrucciones también están disponibles en la documentación pública .

Puede encontrar otra forma de integración manual con Firebase Performance Monitoring aquí .

3. Ejecute la aplicación

Si ha integrado correctamente su aplicación con el SDK de Performance Monitoring, el proyecto ahora debería compilarse. En Android Studio, haga clic en Ejecutar > Ejecutar 'aplicación' para crear y ejecutar la aplicación en su dispositivo/emulador Android conectado.

La aplicación tiene dos botones que te llevan a la Actividad y Fragmento correspondiente, como este:

En los siguientes pasos de este codelab, aprenderá cómo medir el tiempo de carga y el rendimiento de representación de pantalla de su Actividad o Fragmento.

4. Comprender la carga de una Actividad o Fragmento

En este paso, aprenderemos qué hace el sistema durante la carga de una Actividad o Fragmento.

Comprender la carga de una actividad

Para una actividad, el tiempo de carga se define como el tiempo que comienza desde que se crea el objeto Actividad hasta que el primer fotograma se dibuja completamente en la pantalla ( aquí es cuando el usuario verá la interfaz de usuario completa de la actividad por primera vez). tiempo ). Para medir si su aplicación está completamente dibujada, puede usar el método reportFullyDrawn() para medir el tiempo transcurrido entre el inicio de la aplicación y la visualización completa de todos los recursos y ver las jerarquías.

En un nivel alto, cuando su aplicación llama startActivity(Intent) , el sistema realiza automáticamente los siguientes procesos. Cada proceso requiere tiempo para completarse, lo que aumenta el tiempo transcurrido entre la creación de la actividad y el momento en que el usuario ve la interfaz de usuario de la actividad en su pantalla.

Comprender la carga de un fragmento

De manera similar a la Actividad, el tiempo de carga de un Fragmento se define como el tiempo que comienza desde que el Fragmento se adjunta a su Actividad host hasta que el Primer Cuadro de la Vista del Fragmento se dibuja completamente en la pantalla.

Nota: Casi todo el trabajo anterior, tanto para la Actividad como para el Fragmento, ocurre en el hilo Principal/UI y si está trabajando demasiado durante la inicialización y/o su jerarquía de Vista es demasiado compleja, puede mantener a sus usuarios varados en una pantalla en blanco. por un tiempo, lo que puede provocar una mala experiencia de usuario.

A continuación se muestran algunos recursos para ayudar a comprender y solucionar problemas comunes de rendimiento de carga:

• Rendimiento de renderizado de la aplicación
• Rendimiento de renderizado
• Hora de inicio de la aplicación
• Hora de inicio de la aplicación y creación de actividad
• Invalidaciones, diseños y rendimiento

5. Mide el tiempo de carga de una Actividad

Los retrasos en el primer fotograma pueden provocar una mala experiencia de usuario, por lo que es importante comprender cuánto retraso en la carga inicial están experimentando sus usuarios. Puede instrumentar un seguimiento de código personalizado para medir este tiempo de carga:

1. Inicie el seguimiento del código personalizado (llamado TestActivity-LoadTime ) en la clase Actividad tan pronto como se cree el objeto Actividad.

PruebaActividad.java

public class TestActivity extends AppCompatActivity {   
    // TODO (1): Start trace recording as soon as the Activity object is created.
    private final Trace viewLoadTrace = FirebasePerformance.startTrace("TestActivity-LoadTime");

    // ...

}

2. Anule la devolución de llamada onCreate() y obtenga la Vista agregada mediante el método setContentView() .

@Override     
public void onCreate(Bundle savedInstanceState) {    
    super.onCreate(savedInstanceState);          

    // Current Activity's main View (as defined in the layout xml file) is inflated after this            
    setContentView(R.layout.activity_test);          

    // ...

    // TODO (2): Get the View added by Activity's setContentView() method.         
    View mainView = findViewById(android.R.id.content);     

    // ...
}

3. Hemos incluido una implementación de FistDrawListener , que tiene dos devoluciones de llamada: onDrawingStart() y onDrawingFinish() (consulte la siguiente sección a continuación para obtener más detalles sobre FirstDrawListener y lo que puede afectar su rendimiento) . Registre FirstDrawListener al final de la devolución de llamada onCreate() de la actividad. Debes detener viewLoadTrace en la devolución de llamada onDrawingFinish() .

PruebaActividad.java

    // TODO (3): Register the callback to listen for first frame rendering (see
    //  "OnFirstDrawCallback" in FirstDrawListener) and stop the trace when View drawing is
    //  finished.
    FirstDrawListener.registerFirstDrawListener(mainView, new FirstDrawListener.OnFirstDrawCallback() {              
        @Override             
        public void onDrawingStart() {       
          // In practice you can also record this event separately
        }

        @Override             
        public void onDrawingFinish() {
            // This is when the Activity UI is completely drawn on the screen
            viewLoadTrace.stop();             
        }         
    });

4. Vuelva a ejecutar la aplicación. Luego, filtre el logcat con " Métrica de seguimiento de registro ". Toque el botón LOAD ACTIVITY y busque registros como los siguientes:

I/FirebasePerformance: Logging trace metric: TestActivity-LoadTime (duration: XXXms)

🎉 ¡Felicidades! Mediste con éxito el tiempo de carga de una actividad y reportaste esos datos a Firebase Performance Monitoring. Veremos la métrica registrada en Firebase console más adelante en este codelab.

Propósito de FirstDrawListener

En la sección anterior, registramos un FirstDrawListener . El propósito de FirstDrawListener es medir cuándo el primer cuadro ha comenzado y terminado de dibujar.

Implementa ViewTreeObserver.OnDrawListener y anula la devolución de llamada onDraw() que se invoca cuando el árbol de Vista está a punto de dibujarse. Luego envuelve el resultado para proporcionar dos devoluciones de llamada de utilidad onDrawingStart() y onDrawingFinish() .

El código completo de FirstDrawListener se puede encontrar en el código fuente de este codelab .

Créditos: utilizamos las siguientes dos publicaciones de blog (escrito por Pierre-Yves Ricau ) para escribir esta sección del codelab:

• Android Vitals: primer sorteo 👩‍🎨
• Android Vitals: llegando a la primera superficie dibujada 🤽‍♂️

6. Mida el tiempo de carga de un Fragmento

Medir el tiempo de carga de un Fragmento es similar a cómo lo medimos para una Actividad, pero con algunas diferencias menores. Nuevamente, instrumentaremos un seguimiento de código personalizado :

1. Anule la devolución de llamada onAttach() y comience a grabar su fragmentLoadTrace . Llamaremos a este seguimiento Test-Fragment-LoadTime .

Como se explicó en un paso anterior, el objeto Fragmento se puede crear en cualquier momento, pero se activa solo cuando está adjunto a su Actividad host.

TestFragment.java

public class TestFragment extends Fragment {

   // TODO (1): Declare the Trace variable.
   private Trace fragmentLoadTrace;

   @Override
   public void onAttach(@NonNull Context context) {
       super.onAttach(context);

       // TODO (2): Start trace recording as soon as the Fragment is attached to its host Activity.
       fragmentLoadTrace = FirebasePerformance.startTrace("TestFragment-LoadTime");
   }

2. Registre FirstDrawListener en la devolución de llamada onViewCreated() . Luego, de manera similar al ejemplo de Actividad, detenga el seguimiento en onDrawingFinish() .

TestFragment.java

@Override
public void onViewCreated(@NonNull View mainView, Bundle savedInstanceState) {
   super.onViewCreated(mainView, savedInstanceState);

   // ...

   // TODO (3): Register the callback to listen for first frame rendering (see
   //  "OnFirstDrawCallback" in FirstDrawListener) and stop the trace when view drawing is
   //  finished.
   FirstDrawListener.registerFirstDrawListener(mainView, new FirstDrawListener.OnFirstDrawCallback() {

       @Override
       public void onDrawingStart() {
           // In practice you can also record this event separately
       }

       @Override
       public void onDrawingFinish() {
           // This is when the Fragment UI is completely drawn on the screen
           fragmentLoadTrace.stop();
       }
   });

3. Vuelva a ejecutar la aplicación. Luego, filtre el logcat con " Métrica de seguimiento de registro ". Toque el botón LOAD FRAGMENT y busque registros como los siguientes:

I/FirebasePerformance: Logging trace metric: TestFragment-LoadTime (duration: XXXms)

🎉 ¡Felicidades! Mediste con éxito el tiempo de carga de un Fragmento y reportaste esos datos a Firebase Performance Monitoring. Veremos la métrica registrada en Firebase console más adelante en este codelab.

Nota: Para el ejemplo de Actividad, la Vista pasada a FirstDrawListener es a la que se hace referencia en el método setContentView() . Sin embargo, para el ejemplo de Fragmento, la Vista es a la que se hace referencia en la devolución de llamada onViewCreated() .

Sin embargo, en general, dado que el detector de sorteos adjunto es global para todo el árbol de Vista, cualquier Vista adjunta debería funcionar.

7. Comprender la representación de pantalla y qué es un fotograma lento/congelado

UI Rendering es el acto de generar un marco desde su aplicación y mostrarlo en la pantalla. Para garantizar que la interacción del usuario con su aplicación sea fluida, su aplicación debe representar fotogramas en menos de 16 ms para lograr 60 fotogramas por segundo ( ¿por qué 60 fps? ). Si su aplicación sufre una representación lenta de la interfaz de usuario, entonces el sistema se verá obligado a omitir fotogramas y el usuario percibirá tartamudeo en su aplicación. A esto lo llamamos basura .

De manera similar, los fotogramas congelados son fotogramas de la interfaz de usuario que tardan más de 700 ms en renderizarse. Este retraso es un problema porque su aplicación parece estar bloqueada y no responde a la entrada del usuario durante casi un segundo mientras se procesa el fotograma.

Sugerencias: consulte Rendimiento de renderizado y Reparación de errores para comprender y solucionar algunos problemas comunes de rendimiento de renderizado.

Además, los dispositivos más modernos suelen tener una frecuencia de actualización de >60 Hz, por lo que no siempre debemos suponer 16 ms para renderizar un fotograma. Eche un vistazo a la representación con alta frecuencia de actualización en Android para obtener más detalles.

8. Mida los fotogramas lentos/congelados de un fragmento

Firebase Performance Monitoring captura automáticamente fotogramas lentos o congelados para una actividad ( pero solo si está acelerada por hardware ). Sin embargo, esta función no está disponible actualmente para Fragmentos. Los fotogramas lentos/congelados de un Fragmento se definen como los fotogramas lentos/congelados para toda la Actividad entre las devoluciones de llamada onFragmentAttached() y onFragmentDetached() en el ciclo de vida del Fragmento.

Inspirándonos en la clase AppStateMonitor ( que es parte del SDK de monitoreo de rendimiento responsable de registrar los rastros de pantalla para la actividad ), implementamos la clase ScreenTrace ( que es parte de este repositorio de código fuente de codelab ). La clase ScreenTrace se puede conectar a la devolución de llamada del ciclo de vida FragmentManager de la actividad para capturar fotogramas lentos o congelados. Esta clase proporciona dos API públicas:

• recordScreenTrace() : comienza a grabar un seguimiento de pantalla
• sendScreenTrace() : detiene la grabación de un seguimiento de pantalla y adjunta métricas personalizadas para registrar recuentos de fotogramas totales, lentos y congelados.

Al adjuntar estas métricas personalizadas, los seguimientos de pantalla para Fragmentos se pueden manejar de la misma manera que los seguimientos de pantalla para una Actividad y se pueden mostrar junto con otros seguimientos de representación de pantalla en el panel de Rendimiento de Firebase console.

A continuación se explica cómo registrar seguimientos de pantalla para su Fragmento:

1. Inicialice la clase ScreenTrace en su Actividad que aloja el Fragmento.

Actividad principal.java

// Declare the Fragment tag
private static final String FRAGMENT_TAG = TestFragment.class.getSimpleName();

// TODO (1): Declare the ScreenTrace variable.
private ScreenTrace screenTrace;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // TODO (2): Initialize the ScreenTrace variable.
    screenTrace = new ScreenTrace(this, FRAGMENT_TAG);

    // ...
}

2. Cuando cargue su Fragmento, regístrese en FragmentLifecycleCallbacks y anule las devoluciones de llamada onFragmentAttached() y onFragmentDetached() . Hemos hecho esto por ti. Debe comenzar a grabar rastros de pantalla en la devolución de llamada onFragmentAttached() y detener la grabación en la devolución de llamada onFragmentDetached() .

Actividad principal.java

private final FragmentManager.FragmentLifecycleCallbacks fragmentLifecycleCallbacks =
       new FragmentManager.FragmentLifecycleCallbacks() {

           @Override
           public void onFragmentAttached(@NonNull FragmentManager fm, @NonNull Fragment f, @NonNull Context context) {
               super.onFragmentAttached(fm, f, context);

               // TODO (3): Start recording the screen traces as soon as the Fragment is
               //  attached to its host Activity.
               if (FRAGMENT_TAG.equals(f.getTag()) && screenTrace.isScreenTraceSupported()) {
                   screenTrace.recordScreenTrace();
               }
           }

           @Override
           public void onFragmentDetached(@NonNull FragmentManager fm, @NonNull Fragment f) {
               super.onFragmentDetached(fm, f);

               // TODO (4): Stop recording the screen traces as soon as the Fragment is
               //  detached from its host Activity.
               if (FRAGMENT_TAG.equals(f.getTag()) && screenTrace.isScreenTraceSupported()) {
                   screenTrace.sendScreenTrace();
               }

               // Unregister Fragment lifecycle callbacks after the Fragment is detached
               fm.unregisterFragmentLifecycleCallbacks(fragmentLifecycleCallbacks);
           }
       };

4. Vuelva a ejecutar la aplicación. Luego, toque el botón LOAD FRAGMENT . Espere unos segundos y luego haga clic en el back button en la barra de navegación inferior.

Filtre el logcat con " Métrica de seguimiento de registro ", luego busque registros como los siguientes:

I/FirebasePerformance: Logging trace metric: _st_MainActivity-TestFragment (duration: XXXms)

Filtre el logcat con " FireperfViews ", luego busque registros como los siguientes:

D/FireperfViews: sendScreenTrace MainActivity-TestFragment, name: _st_MainActivity-TestFragment, total_frames: XX, slow_frames: XX, frozen_frames: XX

🎉 ¡Felicidades! Mediste con éxito los fotogramas lentos o congelados de un fragmento y reportaste esos datos a Firebase Performance Monitoring. Veremos las métricas registradas en Firebase console más adelante en este codelab.

9. Verifique las métricas en Firebase console

1. En logcat, haga clic en la URL de la consola de Firebase para visitar la página de detalles y realizar un seguimiento.

Alternativamente, en Firebase console , selecciona el proyecto que tiene tu aplicación. En el panel izquierdo, ubique la sección Lanzamiento y monitoreo , luego haga clic en Rendimiento .

• En la pestaña Panel principal, desplácese hacia abajo hasta la tabla de seguimientos y luego haga clic en la pestaña Seguimientos personalizados . En esta tabla, verá los seguimientos de código personalizado que agregamos anteriormente además de algunos seguimientos listos para usar , como el seguimiento _app_start .
• Encuentre sus dos seguimientos de código personalizados, TestActivity-LoadTime y TestFragment-LoadTime . Haga clic en la Duración de cualquiera de ellos para ver más detalles sobre los datos recopilados.

Nota: Si no ve datos, reinicie la aplicación y déjela funcionando durante al menos 30 segundos.

2. La página de detalles del seguimiento del código personalizado muestra información sobre la duración del seguimiento (es decir, el tiempo de carga medido).

3. También puede ver los datos de rendimiento de su seguimiento de pantalla personalizado.

• Vuelva a la pestaña principal del Panel , desplácese hacia abajo hasta la tabla de seguimientos y luego haga clic en la pestaña Representación de pantalla . En esta tabla, verá los seguimientos de pantalla personalizados que agregamos anteriormente además de cualquier seguimiento de pantalla listo para usar , como el seguimiento de MainActivity .
• Encuentre su seguimiento de pantalla personalizado, MainActivity-TestFragment . Haga clic en el nombre del seguimiento para ver los datos agregados de renderizado lento y fotogramas congelados.

10. Felicitaciones

¡Felicidades! ¡Has medido con éxito el tiempo de carga y el rendimiento de representación de pantalla de una actividad y un fragmento mediante Firebase Performance Monitoring!

lo que has logrado

• Integraste Firebase Performance Monitoring en una aplicación de muestra
• Ahora comprende el ciclo de vida de la carga de vistas.
• Mediste el tiempo de carga tanto de una Actividad como de un Fragmento agregando seguimientos de código personalizados
• Grabaste fotogramas lentos/congelados agregando seguimientos de pantalla personalizados con métricas personalizadas

Que sigue

Firebase Performance proporciona más formas de medir el rendimiento de su aplicación además del seguimiento personalizado. Mide automáticamente el tiempo de inicio de la aplicación y los datos de rendimiento de la aplicación en primer plano y en segundo plano . Es hora de que verifiques estas métricas en Firebase Console .

Además, Firebase Performance ofrece monitoreo automático de solicitudes de red HTTP/S . Con eso, puede instrumentar fácilmente las solicitudes de red sin escribir una sola línea de código. ¿Puedes intentar enviar algunas solicitudes de red desde tu aplicación y encontrar las métricas en Firebase console ?

Prima

Ahora que sabe cómo medir el tiempo de carga y el rendimiento de representación de pantalla de su Actividad/Fragmento mediante el uso de seguimientos de código personalizados, ¿puede explorar nuestra base de código abierto para ver si puede capturar esas métricas listas para usar para cualquier Actividad/Fragmento? ¿Eso es parte de la aplicación? No dudes en enviar el PR si lo deseas :-)

11. Aprendizaje adicional

Comprender lo que sucede durante la carga de una actividad le ayudará a comprender mejor las características de rendimiento de su aplicación. En un paso anterior, describimos en un nivel alto lo que sucede durante la carga de una Actividad, pero el siguiente diagrama describe cada fase con mucho mayor detalle.