Mide el tiempo de carga y la renderización de la pantalla con Firebase Performance Monitoring

1. Introducción

Última actualización: 11/03/2021

¿Por qué debemos medir el rendimiento de las vistas?

Las vistas son una parte clave de las aplicaciones para Android que influyen directamente en la experiencia del usuario. Por ejemplo, tu actividad o fragmento contiene la IU que contiene los componentes de View con los que interactúan los usuarios. Los usuarios no pueden ver todo el contenido de la IU hasta que se dibuje por completo en la pantalla. Las pantallas lentas y congeladas afectarán directamente la interacción del usuario con tu app y crearán una mala experiencia del 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 tu app (solo el tiempo de carga de tu primera actividad) y el rendimiento de la renderización de la pantalla (es decir, fotogramas lentos y congelados de las actividades, pero no de los fragmentos). Sin embargo, las apps de la industria generalmente no tienen muchas actividades, sino que tienen una sola actividad y varios fragmentos. Además, muchas apps generalmente implementan 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 la renderización de pantalla de las actividades y los fragmentos mediante la instrumentación de seguimientos de código personalizados en tu app. Puedes extender fácilmente este codelab para medir el rendimiento de los componentes de vista personalizada.

Qué aprenderás

• Cómo agregar Firebase Performance Monitoring a una app para Android
• Cómo 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 un fragmento
• Explicación de la renderización de pantalla y qué es un fotograma lento o congelado
• Cómo instrumentar seguimientos de código personalizado con métricas para registrar pantallas lentas o congeladas
• Cómo ver las métricas recopiladas en Firebase console

Requisitos

• Android Studio 4.0 o una versión posterior
• Un emulador o dispositivo Android
• Java 8 o versiones posteriores

2. Preparación

Obtén el código

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

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

Si no tienes Git en tu máquina, también puedes descargar el código directamente desde GitHub.

Importa el proyecto measure-view-performance-start a Android Studio. Es probable que veas algunos errores de compilación o tal vez una advertencia sobre el archivo google-services.json que falta. Corregiremos esto en la siguiente sección de este paso.

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

Conecta la app a Firebase

1. Ve a Android Studio/Ayuda > Check for updates para asegurarte de estar usando las versiones más recientes de Android Studio y Firebase Assistant.
2. Selecciona Herramientas > Firebase para abrir el panel Asistente.

3. Elige Performance Monitoring para agregarlo a tu app y, luego, haz clic en Comenzar a usar Performance Monitoring.
4. Haz clic en Conectar a Firebase para conectar tu proyecto de Android con Firebase (se abrirá Firebase console en tu navegador).
5. En Firebase console, haz clic en Agregar proyecto y, luego, ingresa un nombre para el proyecto de Firebase (si ya tienes uno, puedes seleccionarlo). Haz clic en Continuar y acepta las condiciones para crear el proyecto y una app de Firebase nueva.
6. A continuación, deberías ver un diálogo para conectar la app de Firebase nueva al proyecto de Android Studio.

7. En Android Studio, en el panel Assistant, deberías ver la confirmación de que tu app está conectada a Firebase.

Agrega Performance Monitoring a la app

En el panel Assistant de Android Studio, haz clic en Add Performance Monitoring to your app.

Deberías ver un diálogo para Aceptar cambios después del cual Android Studio deberá sincronizar tu app para asegurarse de que se hayan agregado todas las dependencias necesarias.

Por último, en el panel Assistant de Android Studio, deberías ver un mensaje de éxito que indica que todas las dependencias están configuradas correctamente.

Como paso adicional, sigue las instrucciones que se indican en el paso "Habilita el registro de depuración (opcional)" para habilitar el registro de depuración. Las mismas instrucciones también están disponibles en la documentación pública.

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

3. Ejecuta la app

Si integraste correctamente la app con el SDK de Performance Monitoring, ahora debería compilarse el proyecto. En Android Studio, haz clic en Run > Run 'app' para compilar y ejecutar la app en tu emulador o dispositivo Android conectado.

La app tiene dos botones que te llevan a la actividad y al fragmento correspondientes, de la siguiente manera:

En los siguientes pasos de este codelab, aprenderás a medir el tiempo de carga y el rendimiento de la renderización de pantalla de tu actividad o fragmento.

4. Información sobre la carga de una actividad o un fragmento

En este paso, aprenderemos qué hace el sistema durante la carga de una actividad o un fragmento.

Cómo comprender la carga de una actividad

Para una actividad, el tiempo de carga se define como el tiempo que transcurre desde que se crea el objeto de la actividad hasta que se dibuja por completo el primer fotograma en la pantalla (esto es cuando el usuario verá la IU completa de la actividad por primera vez). Para medir si tu app se cargó por completo, puedes usar el método reportFullyDrawn() para medir el tiempo transcurrido entre el inicio de la app y la visualización completa de todos los recursos y las jerarquías de vistas.

En general, cuando tu app llama a startActivity(Intent), el sistema realiza automáticamente los siguientes procesos. Cada proceso lleva tiempo en completarse, lo que se suma al tiempo que transcurre entre la creación de la actividad y el momento en que el usuario ve la IU de la actividad en la pantalla.

Cómo cargar un fragmento

Al igual que la actividad, el tiempo de carga de un fragmento se define como el tiempo que transcurre desde que el fragmento se adjunta a su actividad host hasta que el Primer fotograma de la vista de fragmento se dibuja por completo en la pantalla.

Nota: Casi todo lo anterior funciona tanto para Activity como para Fragment en el subproceso principal/de IU y, si realizas demasiado trabajo durante la inicialización o tu jerarquía de vistas es demasiado compleja, es posible que mantengas a tus usuarios varados en una pantalla en blanco por un tiempo, lo que puede generar una mala experiencia del usuario.

A continuación, se muestran algunos recursos que te ayudarán a comprender y solucionar problemas comunes relacionados con el rendimiento de carga:

• Rendimiento de renderización de la app
• Rendimiento de la renderización
• Tiempo de lanzamiento de la app
• Tiempo de inicio de la app y creación de la actividad
• Invalidaciones, diseños y rendimiento

5. Cómo medir el tiempo de carga de un objeto Activity

Los retrasos en el primer fotograma pueden generar una mala experiencia del usuario, por lo que es importante comprender cuánto retraso de carga inicial experimentan tus usuarios. Puedes instrumentar un seguimiento de código personalizado para medir este tiempo de carga:

1. Inicia el seguimiento de código personalizado (llamado TestActivity-LoadTime) en la clase Activity en cuanto se cree el objeto Activity.

TestActivity.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. Anula la devolución de llamada onCreate() y obtén la vista que agregó 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. Incluimos una implementación de FistDrawListener, que tiene dos devoluciones de llamada: onDrawingStart() y onDrawingFinish() (consulta la siguiente sección para obtener más detalles sobre FirstDrawListener y lo que puede afectar su rendimiento). Registra el objeto FirstDrawListener al final de la devolución de llamada de onCreate() de Activity. Debes detener tu viewLoadTrace en la devolución de llamada onDrawingFinish().

TestActivity.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. Vuelve a ejecutar la app. Luego, filtra el logcat con "Métrica de seguimiento de Logging". Presiona el botón LOAD ACTIVITY y busca registros como los siguientes:

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

🎉 ¡Felicitaciones! Mediste correctamente el tiempo de carga de una actividad y también informaste 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 objetivo de FirstDrawListener es medir cuándo se inició y terminó el primer fotograma.

Implementa el ViewTreeObserver.OnDrawListener y anula la devolución de llamada onDraw() que se invoca cuando se está por dibujar el árbol de vistas. Luego, une 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: Usamos las siguientes dos entradas de blog (escritas por Pierre-Yves Ricau) para escribir esta sección del codelab:

• Android vitals: Hora del primer dibujo 👩 🎨
• Android vitals: Sube a la primera superficie dibujada 🤽 ♀️

6. Cómo medir el tiempo de carga de un fragmento

La medición del tiempo de carga de un Fragment es similar a la manera en que la medimos para una Activity, pero con algunas diferencias menores. Una vez más, instrumentaremos un seguimiento de código personalizado:

1. Anula la devolución de llamada onAttach() y comienza a grabar tu fragmentLoadTrace. Le asignaremos el nombre Test-Fragment-LoadTime a este seguimiento.

Como se explicó en un paso anterior, el objeto Fragment se puede crear en cualquier momento, pero se activa solo cuando se conecta a su actividad de 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. Registra el FirstDrawListener en la devolución de llamada onViewCreated(). Luego, al igual que en el ejemplo de Activity, detén el registro 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. Vuelve a ejecutar la app. Luego, filtra el logcat con "Métrica de seguimiento de Logging". Presiona el botón LOAD FRAGMENT y busca registros como los siguientes:

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

🎉 ¡Felicitaciones! Mediste correctamente el tiempo de carga de un fragmento y, luego, informaste esos datos a Firebase Performance Monitoring. Veremos la métrica registrada en Firebase console más adelante en este codelab.

Nota: En el ejemplo de Activity, la vista que se pasa a FirstDrawListener es a la que se hace referencia en el método setContentView(). Sin embargo, para el ejemplo del fragmento, la vista es a la que se hace referencia en la devolución de llamada de onViewCreated().

Sin embargo, como el objeto de escucha de dibujo adjunto es global a todo el árbol de objetos View, cualquier objeto View adjunto debería funcionar.

7. Explicación de la renderización de pantalla y qué es un fotograma lento o congelado

La renderización de la IU consiste en generar un fotograma desde tu app y mostrarlo en la pantalla. Para garantizar una interacción fluida del usuario con la app, esta debe renderizar los fotogramas en menos de 16 ms para lograr una velocidad de 60 fotogramas por segundo ( ¿Por qué 60 FPS?). Si la renderización de IU de tu app es lenta, el sistema se verá obligado a omitir fotogramas, y el usuario notará un salto en tu app. Esto se denomina bloqueo.

De manera similar, los marcos congelados son fotogramas de la IU que tardan más de 700 ms en renderizarse. Esta demora representa un problema, ya que tu app parece estar bloqueada y no responde a las entradas que realiza el usuario durante casi un segundo completo mientras se renderiza el fotograma.

Sugerencias: Consulta el Rendimiento de la renderización y Cómo corregir los bloqueos para comprender y solucionar algunos problemas comunes de rendimiento de la renderización.

Además, los dispositivos más modernos suelen tener una frecuencia de actualización superior a 60 Hz, por lo que no siempre debemos suponer 16 ms para la renderización de un fotograma. Para obtener más información, consulta el procesamiento con una frecuencia de actualización alta en Android.

8. Cómo medir los fotogramas lentos o congelados de un fragmento

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

Tomando motivación de la clase AppStateMonitor (que forma parte del SDK de Performance Monitoring responsable de registrar seguimientos de pantalla de Activity), implementamos la clase ScreenTrace (que forma parte de este repositorio de código fuente del codelab). La clase ScreenTrace se puede conectar a la devolución de llamada de ciclo de vida de FragmentManager de la actividad para capturar fotogramas lentos o congelados. Esta clase proporciona dos APIs públicas:

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

Si adjuntas estas métricas personalizadas, los seguimientos de pantalla de fragmentos se pueden controlar de la misma manera que los seguimientos de pantalla de una actividad y se pueden mostrar junto con otros seguimientos de renderización de pantalla en el panel Rendimiento de Firebase console.

A continuación, te mostramos cómo registrar seguimientos de pantalla para tu fragmento:

1. Inicializa la clase ScreenTrace en tu actividad que aloja el fragmento.

MainActivity.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 cargues tu Fragment, regístrate en FragmentLifecycleCallbacks y anula las devoluciones de llamada onFragmentAttached() y onFragmentDetached(). Ya lo hicimos por ti. Debes comenzar a registrar seguimientos de pantalla en la devolución de llamada onFragmentAttached() y dejar de grabar en la devolución de llamada onFragmentDetached().

MainActivity.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. Vuelve a ejecutar la app. Luego, presiona el botón LOAD FRAGMENT. Espera unos segundos y, luego, haz clic en back button en la barra de navegación inferior.

Filtra el logcat con "Logging trace metric" (Métricas de seguimiento de Logging) y, luego, busca registros como los siguientes:

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

Filtra el logcat con "FireperfViews" y, luego, busca registros como los siguientes:

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

🎉 ¡Felicitaciones! Mediste correctamente los fotogramas lentos o congelados de un fragmento y, además, informaste esos datos a Firebase Performance Monitoring. Veremos las métricas registradas en Firebase console más adelante en este codelab.

9. Verifica las métricas en Firebase console

1. En el logcat, haz clic en la URL de Firebase console para visitar la página de detalles y hacer un seguimiento.

Como alternativa, en Firebase console, selecciona el proyecto que tiene tu app. En el panel izquierdo, busca la sección Lanzamiento y supervisión y, luego, haz clic en Rendimiento.

• En la pestaña principal Panel, desplázate hacia abajo hasta la tabla de seguimientos y haz clic en la pestaña Seguimientos personalizados. En esta tabla, verás los seguimientos de código personalizado que agregamos antes y algunos seguimientos listos para usar, como el seguimiento _app_start.
• Busca tus dos seguimientos de código personalizado: TestActivity-LoadTime y TestFragment-LoadTime. Haz clic en la Duración de cada uno para ver más detalles sobre los datos recopilados.

Nota: Si no ves datos, reinicia la app y déjala en ejecución durante al menos 30 segundos.

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

3. También puedes ver los datos de rendimiento del seguimiento de pantalla personalizado.

• Regresa a la pestaña principal Panel, desplázate hacia abajo hasta la tabla de seguimientos y haz clic en la pestaña Renderización de pantalla. En esta tabla, verás los seguimientos de pantalla personalizados que agregamos antes y cualquier seguimiento de pantalla listo para usar, como el seguimiento MainActivity.
• Encuentra tu seguimiento de pantalla personalizado, MainActivity-TestFragment. Haz clic en el nombre del seguimiento para ver los datos agregados de los fotogramas congelados y la renderización lenta.

10. ¡Felicitaciones!

¡Felicitaciones! Mediste correctamente el tiempo de carga y el rendimiento de la renderización de pantalla de una actividad y un fragmento con Firebase Performance Monitoring.

Lo que lograste

• Integraste Firebase Performance Monitoring en una app de ejemplo.
• Ahora comprendes el ciclo de vida de la carga de vistas
• Mediste el tiempo de carga de una actividad y un fragmento agregando seguimientos de código personalizados.
• Registraste fotogramas lentos o congelados agregando seguimientos de pantalla personalizados con métricas personalizadas.

Próximos pasos

Firebase Performance ofrece más formas de medir el rendimiento de tu app además del seguimiento personalizado. Mide automáticamente los datos de rendimiento del tiempo de inicio de la app y de la app en primer plano y en segundo plano. Llegó el momento de que revises estas métricas en Firebase console.

Además, Firebase Performance ofrece supervisión automática de solicitudes de red HTTP/S. De este modo, puedes instrumentar fácilmente las solicitudes de red sin escribir ni una sola línea de código. ¿Puedes intentar enviar algunas solicitudes de red desde la app y buscar las métricas en Firebase console?

Contenido adicional

Ahora que sabes cómo medir el tiempo de carga y el rendimiento de la renderización de pantalla de tu actividad o fragmento con seguimientos de código personalizado, ¿puedes explorar nuestra base de código abierto para ver si puedes capturar esas métricas listas para usar de cualquier actividad o fragmento que forme parte de la app? No dudes en enviársela si lo deseas. :-)

11. Aprendizaje adicional

Comprender lo que sucede durante la carga de una actividad te ayudará a comprender mejor las características de rendimiento de tu app. En un paso anterior, describimos a un alto nivel lo que sucede durante la carga de una actividad, pero en el siguiente diagrama se describe cada fase con mayor detalle.