Ionic & Capacitor: The Best Path For Performance
As a web developer in a previous life, one question that inevitably came up during our discussions on new projects and technologies was, “Are the web technologies we’re choosing performant?” This usually led to anecdotal debates between developers about what they considered to be the best tools in the industry, who developed what technology to be the best, and the comparison of countless articles claiming to have found THE most performant web technology.
The problem with these types of conversations (at least in my experience) is that they often don’t contain any real-world metrics and, if they do, those metrics are comparing complex web applications without considering the development team and technical architectures behind them.
As a new Developer Advocate for Ionic, I have consistently seen these types of questions/conversations from our developer communities around performance and how the Ionic Framework and Capacitor perform among other web frameworks or technologies. In an effort to address some of these conversations, I wanted to try and answer the questions:
- Is the Ionic Framework and Capacitor performant for web development?
- Is there a way to measure the performance of an application without having to deal with complex architectures?
I sought to answer these questions by developing a simple application that utilizes the Ionic Framework and Capacitor and measures a few key metrics.
Before we dive into the application and the metrics I tested, let’s talk about the Ionic Framework and Capacitor.
A common misconception (and one that I was guilty of before starting at Ionic) was combining the Ionic Framework WITH Capacitor. However, it’s important to understand that Ionic as a framework and Capacitor are two different things.
Measuring Web Application Performance
There are a few ways to measure web application performance via startup and runtime performance metrics.
Key startup performance metrics can include:
- Time for resources to download
- Time for the app to show content
- Time for the app to become interactive
Key runtime performance metrics can include
- Code execution time
- Complex layouts/layout thrashing
- Animation of non-performant properties
Metrics, especially in web development, can vary and can be fairly subjective depending upon the project, but this is a good starting point to demonstrate if a web application is performing well.
To test the metrics above, we’ll be using Lighthouse, which is a Chromium-based browser that will assess the above metrics and offer other metrics as well as suggestions for improvement.
Diving Into The Web Application: Ionic Video Streaming App
The web application that I’ve created to test the performance of the Ionic Framework and Capacitor is a basic Ionic video streaming application that I developed using Angular. It’s similar to many video streaming applications where you can pick a video and watch it, but it contains Ionic-specific videos. I chose to create this type of application because it reflected a real-world use case and it can help put some stress on our application during our tests.
The web application is hosted on Amazon Web Services utilizing a serverless approach and is deployed via Cloudfront to maximize availability. I chose this method because it is an accessible way to launch an application, especially for developers who may not be familiar with more traditional application deployments.
It’s important to note that this application does not store the videos locally and utilizes libraries like hls.js to make it function. The code for the demo project can be found here.
Let’s dive into Lighthouse and see how the app performs on the first pass with the overall scores:
Here are the more detailed performance metrics:
Based on the overall performance and the detailed metrics, it looks like this demo video streaming application performed extremely well, especially for a first pass! However, there are some moderate scores, so let’s analyze the data to see if the scores are related to Ionic Framework and Capacitor or other factors.
The three areas that showed moderate performance were SEO, First Contentful Paint, and Largest Contentful Paint. While moderate performance scores for SEO would make sense for a demo application, First Contentful Paint and Largest Contentful Paint are Key Startup Performance Metrics, so let’s look at the speeds and the recommendations from Lighthouse.
Based on the numbers for First Contentful Paint and Largest Contentful Paint (1.0 and 1.7 seconds, respectively) it looks like for pure speed, our application exceeded Lighthouse’s benchmarks (1.8 and 2.5 seconds, respectively). This begs the question: If the application exceeded the timing benchmarks, then why is it considered moderate for both areas? The Opportunities section paints a clearer picture:
After removing the ngx-videogular library, disabling Chrome extensions, and using unified image sizes, I saw a drastic improvement in the overall metrics:
As well as the detailed performance metrics:
The takeaway from these opportunities is that my system and my choices played a significant role in Lighthouse testing. By removing the unused video library, disabling Chrome extensions, and taking the time to get uniform images, my application had a much higher score. The other key takeaway is that none of the opportunities referenced Ionic Framework or Capacitor. If anything, they performed better than expected given some of my development choices.
Based on the testing, the answer is clear: Ionic Framework and Capacitor are highly performant technologies- even when utilizing video streaming libraries and running a video streaming application. However, even the most performant technologies require developers to make calculated choices during development to keep those tools running the way they are supposed to. In my case, Ionic Framework and Capacitor helped mitigate some of my less calculated choices and kept my app running as smoothly as possible!