Deep Web App Analysis with Firebase

App bootstrapping, first contentful paint, page load, browser analysis, connection efficiency, service worker status, visibility state and even more other performance analysis around the world for free with easy setup!

I think most of us want to know how the application really works for our users because they use different devices and browsers that provide different application usage experience for them. Not so long time ago when I was making an analysis of my Firebase web application I found Performance tab, that previously was in beta:

It’s opened for me a new opportunity for high-quality app performance analysis usage around the world! Let take a look at what Firebase Performance provides for us and then configure it for your project.

App Performance Dashboard

What Firebase Performance gives us out of the box

First paint

After navigation, the timestamp when the browser renders any visual change, including changes to the background color, we can see first paint time of our application. This is one of the most important characteristics for modern web apps because you can see how fast you provide the first screen of your app for user.

First paint analysis in my Firebase App

First contentful paint

So our first screen is ready, what about content? (After navigation, the timestamp when the browser renders any content from the DOM, including any text, image (including background images), non-white canvas, or SVG).

First contentful paint analysis in my Firebase App

Basic and custom events

By default, Firebase Performance will provide analysis of domContentLoadedEventEnd (After navigation, the timestamp immediately after the initial HTML document is completely loaded and parsed (DOMContentLoaded), but this does not mean that stylesheets, images, and subframes are finished loading), domInteractive (After navigation, the timestamp immediately before the user agent sets the current document’s readiness to “interactive”) and loadEventEnd (After navigation, the timestamp when the current document’s load event completes).

And this is not the end, you can customize events and add up to 32 custom metrics! That is amazing if you are interested to check out more here:

Get started with Performance Monitoring for web | Firebase

How to setup

Go to firebase console for your application and switch to tab Performance on the left side and select Web SDK.

Then add Firebase to your application, just simply write down app nickname and register it.

After app registration, you will get a firebase config information, save it somewhere. Don’t worry if you don’t save it, you can found it in app settings.

Now we have 2 options, the first option, is install standalone script, second one is to use SDK for customized performance analysis.

Standalone script to your app:

Now wait one day and you will see your awesome performance analysis.

Small Conclusion

Thanks for reading and I hope you enjoyed this small tutorial article and will try Firebase Performance tools for your web applications!

Other Articles

Want full stack with Angular? Easy!

Increasing rendering performance in Angular with Lazy Render *ngFor

Web Performance Checklist