How to perform a PWA performance auditing
Progressive Web Apps (PWAs) are highly advanced websites that combine web technologies like HTML, CSS, and JavaScript with intelligent features such as:
-
Responsive design: Adapts to all devices and screen sizes for a consistent user experience.
-
Offline access: Uses service workers to work offline or in low network conditions.
-
App-Like feel: Can be installed on home screens, resembling native apps.
-
Manifest files: Includes metadata for app installation and appearance.
-
Push notifications: Sends updates and messages even when not open.
-
Fast loading: Optimized for quick loading, especially on slow connections.
Why PWAs?
Imagine a user browsing an e-commerce website with both a traditional website and a PWA version. The user is looking for a specific product, and they decide to explore it on both the traditional website and the PWA.
-
Traditional website: Slow, frustrating load times on mobile. Laggy interactions and complex layout hinder product search. User considers leaving due to poor experience.
-
PWA experience: User tries PWA. Easy installation, instant loading, responsive design. Smooth product browsing, quick checkout. Offline capability adds convenience.
PWA’s speed and usability enhance shopping. Users are more likely to engage and buy compared to frustrating traditional sites.
Understand the importance of performance
Before diving into the auditing process, it’s essential to understand why PWA performance matters. A slow PWA can lead to several problems, such as:
- User frustration
- Increased bounce rates
- Negative impact on conversion rates
- Engagement and return visitors
- Mobile users and connectivity
- Search Engine Optimization (SEO)
- Competitive advantage
Whereas fast-loading PWAs are more likely to engage users and encourage them to return.
Choose the right tools
There are several tools available for PWA performance auditing. Some of the popular choices are:
-
Lighthouse: Lighthouse is a versatile tool developed by Google that provides comprehensive performance testing for PWAs. It offers a variety of metrics and insights, making it a great starting point for evaluating your PWA’s performance. Lighthouse is available as a Chrome DevTools extension, a command-line tool, and a Node module.
-
WebPageTest: WebPageTest is a powerful tool that offers detailed performance testing from various locations using different browsers and connection speeds. It provides a wealth of data, including waterfall charts and filmstrip views, enabling you to analyze your PWA’s performance in depth.
-
Google PageSpeed Insights: PageSpeed Insights is a user-friendly tool from Google that evaluates your PWA’s performance on desktop and mobile devices. It offers suggestions for improving performance and provides a score that gives you an overall idea of your PWA’s performance.
Code example
Let’s test a PWA application that renders a simple message. Click the “Run” button and then open the output in a new tab through the “Open output in the new tab” button adjacent to the “Full-screen” button. For this example, we will use the Lighthouse tool, which is the most used audit tool for performance auditing. Follow these steps to run a performance audit:
Right-click anywhere on the PWA’s page and select “Inspect” from the context menu or press
Ctrl + Shift + I(Windows/Linux) or⌘ + ⌥ + I(Mac) to open Chrome DevTools.In the DevTools panel, look for a tab labeled “Lighthouse” and click on it.
At the top of the Lighthouse tab, you’ll find options to choose a device type (mobile or desktop). For this example, we will select the “Desktop” option for the device.
Lighthouse offers different audit categories such as performance, accessibility, best practices, and more. Select the “Performance” option for a performance audit and the “Progressive Web App” option in case of PWAs.
Click the blue “Analyze page” load button to start the performance audit. Lighthouse will analyze your PWA’s performance based on the given criteria.
export function register(config) {
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
return;
}
navigator.serviceWorker.register('service-worker.js')
.then((registration) => {
console.log('Service worker registered:', registration);
})
.catch((error) => {
console.error('Service worker registration failed:', error);
});
});
}
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then((registration) => {
registration.unregister();
});
}
} Analyze the results
After the audit, you’ll see a detailed report displaying different performance metrics, scores, and suggestions for improvement. This report will help you identify areas that need attention. Examine the metrics and scores provided in the news, such as “First Contentful Paint”, “Total Blocking Time”, and more. Let’s discuss what these metrics mean:
First Contentful Paint (FCP): FCP measures the time it takes for the first content, such as text or images, to appear on the screen. It indicates when the user starts seeing meaningful content.
Largest Contentful Paint (LCP): LCP measures the loading performance of the viewport's most prominent content element (such as an image or video). It indicates how quickly the most significant part of the page becomes visible.
Total Blocking Time (TBT): TBT calculates when the main thread is blocked and unresponsive to user input. It’s a crucial metric for evaluating the impact of long tasks on user experience.
Cumulative Layout Shift (CLS): CLS assesses the visual stability of a page by measuring the unexpected layout shifts of content during loading. It helps quantify how much the layout shifts annoy users.
Speed Index (SI): SI quantifies how quickly the content becomes visible to the user. It provides a score that reflects the perceived loading speed based on the progression of visual content.
Performance output
Let's analyze the output of the performance audit by the Lighthouse:
Performance score: Shows the score for the respective metrics. If the score is green, the performance is good to go, but recommendations should be implemented in case of a red score.
PWA recommendations: Show the suggested tips and tricks to make your PWA faster, smoother, and more responsive.
Note: The values of these metrics may vary from system to system as it also depends on the system resources acquired by the website.
Conclusion
Conducting a thorough PWA performance audit is essential for ensuring your Progressive Web App (PWA) delivers an exceptional user experience. By following a systematic approach, you can identify bottlenecks, optimize critical aspects, and enhance overall performance. This process evaluates page load times, resource utilization, responsiveness, and user interactions. Leveraging tools like Lighthouse, PageSpeed Insights, and Chrome DevTools provides valuable insights into areas that require improvement. Addressing performance issues mitigates user frustration and bounce rates, bolsters conversion rates, and encourages user engagement. A well-optimized PWA can gain a competitive advantage in a digital landscape that values speed, efficiency, and seamless interactions.
Free Resources
