PWA Checklist: How to Ensure High Performance for Your Progressive Web App

In this article, we’ll share the structured checklist that we use to measure and optimize ilert's PWA performance.

‍

At ilert, we build our Progressive Web App (PWA) using Capacitor, Ionic, React, and MUI to deliver a robust and responsive incident management platform. Progressive Web Apps are revolutionizing web experiences by combining the best of web and mobile applications. They offer fast native-like experiences, offline capabilities, and many more. 

‍

However, ensuring high performance is crucial for providing users with a smooth and engaging experience.

Understanding progressive web apps

Feel free to skip this chapter if you already have experience with progressive web apps.

‍

Progressive web apps (PWAs) are a type of web application that provides a native app-like experience to users. Built using web technologies such as HTML, CSS, and JavaScript, PWAs are designed to work seamlessly across multiple platforms and devices. One of the standout features of progressive web apps is their ability to deliver a smooth and engaging user experience, even in areas with poor internet connectivity.

‍

Unlike traditional websites, PWAs are designed to be installed on a user’s device, allowing for offline access and push notifications. This means users can continue to interact with the app even when they are not connected to the internet. 

‍

Additionally, unlike native apps, PWAs are not platform-specific and do not require a separate codebase for each platform, making them a versatile and cost-effective solution for developers.

‍

You might also be interested in how to migrate desktop components to a Progressive Web App.

Core Features of Progressive Web Apps

PWAs come with several core features that set them apart from traditional web applications and native apps. These features include:

‍

• Offline functionality: Thanks to caching and service workers, PWAs can function even when the user is offline or has a poor internet connection. This ensures that users can access essential features and content without interruption.
• Installability: PWAs can be installed on a user’s device, providing the convenience of offline access and the ability to send push notifications.
• Custom offline page: When users are offline, PWAs can display a custom offline page, enhancing the user experience by providing useful information or alternative actions.
• Push notifications: PWAs can send push notifications to users, keeping them engaged and informed even when the app is not open.
• App window: PWAs can be displayed in a custom app window, offering a native app-like experience that feels integrated with the device’s operating system.

Why progressive web apps performance matters

Performance is a critical factor for PWAs as it directly impacts user experience. Users perceive the performance of a PWA as critical to their overall experience, influencing their engagement and satisfaction. A fast-loading and responsive PWA encourages users to stay, interact, and utilize its features effectively.

‍

One of the key metrics in performance evaluation is Time to Interactive (TTI). This is the time it takes for a PWA to become fully interactive. 

‍

Ideally, your TTI should be below 3.8 seconds, which is considered fast and ensures a smooth user experience. A TTI between 3.9 and 7.3 seconds indicates moderate performance that needs improvement, while anything above 7.3 seconds is considered slow and likely to increase frustration and bounce rates.

‍

Measuring PWA performance

Before optimizing your PWA, it’s essential to establish a baseline by measuring current performance. Here are some effective ways to evaluate your PWA’s speed and responsiveness:

‍

• Browser developer tools: Inspect loading times and resource usage in Chrome DevTools.
• Manual testing: Just clicking through the app can actually reveal a lot of performance issues and bad UX. Doing this after developing a new feature can bring significant insights for optimization. 

‍

At ilert, manual testing is an important part of our performance evaluation. Whenever we develop a new feature, we actively test it by navigating through the app, identifying potential performance issues, and ensuring a smooth user experience. Manual testing also helps to identify performance issues that automated tools might miss. 

‍

Following our performance checklist, we can proactively address issues before they impact our users.

Checklist: Improving PWA performance

1. Optimize bundle sizes

• Reduce bundle sizes: Remove unused code and load images from a CDN to minimize bundle sizes.
• Implement code splitting: Only load the necessary scripts and components that are required for the current page.

2. Implement Lazy Loading

• Don't load images and content until they are needed.
• Use skeletons wisely: Avoid excessive placeholders that may cause unnecessary lag.

3. Minimize artificial loading times

• Eliminate unnecessary delays: Review intentional load times to ensure they are essential for UX.

4. Optimize app size

• Trim audio files: Reduce unnecessary sound assets or cut them shorter.

5. Optimize network requests

• Implement caching strategies: Enable offline functionality and reduce repeated network requests.
• Ensure a fast backend: Reduce API response times through efficient backend design and optimized queries.

‍

We are actively making incremental improvements with our PWA. Small changes such as optimizing skeleton loaders, reducing JavaScript bundle sizes, and ensuring a fast backend have significantly reduced load times and improved our time to interactive (TTI). Feel free to copy the checklist from the article and use it when reviewing your PWA next time.

‍