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.
Ionic Framework
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.
The Ionic Framework is an open-source user interface toolkit for building modern, high-performance cross-platform applications from a single codebase. It’s essentially the user interface components that are framework agnostic so you can use it to build user interfaces in Angular, React, Vue, or even plain vanilla JavaScript. You can use the Ionic Framework with or without Capacitor, but we will be utilizing them together in our demo application to see if it performs as intended.
Capacitor
Capacitor is an open-source cross-platform native runtime for web applications that allows you to create iOS, Android, and Progressive Web Applications with JavaScript, HTML, and CSS. Capacitor can be utilized in any existing web application and gives you access to core Native APIs. With Capacitor, you can also extend your own APIs in the native platforms that you want to target. However, we’ll be using Capacitor to deploy a progressive web application to see how it performs.
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.
Metrics
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.
Analysis
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:
Unused JavaScript played a significant role in the moderate metrics score and, upon further investigation, the biggest culprits were the use of hls.js, ngx-videogular (a library I attempted using but didn’t remove), as well as a Chrome extension that I use for screen recording. The next opportunities had to do with image sizes and preloading images which make sense as I was unable to acquire uniform image sizes for the project. Based on this feedback, I decided to see what would happen if I fixed the issues.
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.
Conclusion
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!
The post Ionic & Capacitor: The Best Path For Performance appeared first on Ionic Blog.
