Skip to Content
DocsAdd WebF To FlutterAdvanced TopicsPerformance Monitoring

Performance Monitoring

WebF provides comprehensive performance monitoring through loading state events to help you track and optimize your app’s loading performance.

Monitoring Key Metrics

Track critical web performance metrics including First Paint (FP), First Contentful Paint (FCP), and Largest Contentful Paint (LCP):

WebFController(
  onControllerInit: (controller) {
    // First Paint (FP)
    controller.loadingState.onFirstPaint((event) {
      print('FP: ${event.elapsed.inMilliseconds}ms');
    });
 
    // First Contentful Paint (FCP)
    controller.loadingState.onFirstContentfulPaint((event) {
      print('FCP: ${event.elapsed.inMilliseconds}ms');
    });
 
    // Largest Contentful Paint (LCP) - Most important
    controller.loadingState.onLargestContentfulPaint((event) {
      final isCandidate = event.parameters['isCandidate'] ?? false;
      final isFinal = event.parameters['isFinal'] ?? false;
 
      if (isFinal) {
        print('LCP (Final): ${event.elapsed.inMilliseconds}ms');
        // Log to analytics
      }
    });
 
    // DOM Content Loaded
    controller.loadingState.onDOMContentLoaded((event) {
      print('DOMContentLoaded: ${event.elapsed.inMilliseconds}ms');
    });
 
    // Window Load (all resources)
    controller.loadingState.onWindowLoad((event) {
      print('Window Load: ${event.elapsed.inMilliseconds}ms');
    });
  },
)

Detailed Performance Dump

Get detailed information about HTML parsing, script execution, API calls, and network requests:

controller.loadingState.onFinalLargestContentfulPaint((event) {
  final dump = controller.dumpLoadingState(
    options: LoadingStateDumpOptions.html |
              LoadingStateDumpOptions.api |
              LoadingStateDumpOptions.scripts |
              LoadingStateDumpOptions.networkDetailed,
  );
 
  print(dump.toStringFiltered());
  // Outputs: HTML parsing time, script execution, API calls, network requests
});

LCP Content Verification

Verify that the Largest Contentful Paint element is meaningful content and not a loading spinner:

WebFController(
  onLCPContentVerification: (contentInfo, routePath) {
    print('LCP element: ${contentInfo.tagName}');
    print('LCP area: ${contentInfo.width}x${contentInfo.height}');
    print('Route: $routePath');
 
    // Verify LCP is meaningful content, not loading spinner
    if (contentInfo.tagName == 'IMG' && contentInfo.width < 100) {
      print('Warning: LCP may be incorrect (small image)');
    }
  },
)

Performance Metrics Reference

First Paint (FP)

The time when the browser first renders anything to the screen, indicating the page has started loading.

First Contentful Paint (FCP)

The time when the browser renders the first piece of DOM content (text, image, SVG, or canvas).

Largest Contentful Paint (LCP)

The time when the largest content element becomes visible. This is the most important metric for perceived loading performance.

Good LCP scores:

  • Good: < 2.5 seconds
  • Needs improvement: 2.5-4 seconds
  • Poor: > 4 seconds

DOM Content Loaded

The time when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes.

Window Load

The time when all resources (images, stylesheets, scripts) have been loaded.

Best Practices

  1. Monitor LCP in Production: Track LCP metrics in your analytics to understand real-world performance.

  2. Use Prerendering: Enable prerendering to reduce perceived loading time:

    WebFControllerManager.instance.addWithPrerendering(
  name: 'home',
  createController: () => WebFController(),
  bundle: WebFBundle.fromUrl('https://myapp.com/'),
);

  3. Optimize Critical Content: Ensure the LCP element loads quickly by:

    • Optimizing image sizes
    • Using lazy loading for below-the-fold content
    • Prioritizing critical CSS

  4. Verify LCP Elements: Use onLCPContentVerification to ensure loading spinners aren’t being counted as LCP.

Next Steps

  • Theming - Control color themes
  • Caching - Optimize network performance
  • Examples - See performance optimization in action
OverviewTheming