Progressive web applications provide a better customer experience. That’s the main reason entrepreneurs integrate them; therefore, providing a timely audit is important. Everyone who supplements their main website with an alternative PWA should check how it meets the basic requirements:
- accessibility;
- fast processing;
- installability;
- readiness for app stores’ uploading;
- cross-browser support.
PWA auditing will ensure it works correctly and satisfies customers' needs. In addition, you’ll get detailed metrics for improvement efforts if a program finds any measurements. So let’s figure out which tools you may use for testing.
Auditing software
We’ll talk about Lighthouse, PWABuilder, and Webhint as reliable programs to objectively review what features work well or where the application should be upgraded. These most popular tools for auditing PWA determine your site functioning and highlight possible ways for quick optimizations. So let’s start learning how to test your app health.
PWABuilder
Here, the Service Worker, Web Manifest, and Security sets go through progressive web application testing. These blocks are necessary parts for building PWA. And they should meet special requirements corresponding to high-quality standards and pass the app store moderation while uploading. PWABuilder shows obligatory and additional audits for every part. The recommended testing checklist is in the table below.
|
Service Worker |
Web Manifest |
Security |
|---|---|---|
| Links and registration |
-//- |
HTTPS base |
| Fields, required for the releasing |
Offline work |
no HTTP on the page |
| App icons |
Items for experience improvement (optional) |
Correct HTTPS setup |
| New fields for PWA optimization (optional) |
So, without necessary audits, an online store won’t download your app. In contrast, optional suggestions are the ones for developing the best application version, which is quite possible.
If the PWA is already added to a browser, you can start an audit using pwabuilder.com. Just copy your app URL, paste it into the appropriate field on the Builder homepage, and press the “Start” button. You’ll get the full report in a second. You’ll see the total app score and separate numbers for each section. Clicking on one of them, users will get detailed information about their PWA performance. The product owner should see the green indicator to go to the next stage and pack the PWA for markets. Whether some section is highlighted in yellow, that is a signal to correct obligatory app fields, like background color or name property. Again, PWABuilder will write hints on what and how it should be changed. If the total score is red, a web application still isn’t ready for release and requires deep processing.
When developing a web app, you may also simultaneously test it on PWA Studio. As in the previous Builder, this PWA checker will show a green mark if the app performs well and a caution triangle opposite sections that might be improved.
Remember, the more items you audit in the progressive application, the better it operates and can engage more customers.
Webhint
This tool provides a quick progressive web app audit, displaying the total number of approved and rejected items. Also, you may find detailed information on every issue and eliminate problems. Moreover, the software shows HTML elements that negatively impact the app’s performance and gives advice for its fixing.
To start your Webhint check-up, open the application in Edge, follow the DevTools → Issues → refresh the page to update the PWA checklist, and then learn how to improve your site.
Lighthouse
With this software, also located in Edge DevTools, you can quickly update a progressive web application, ensure its best functioning and introduce renewals to customers without delays. Lighthouse determines the PWA loading and runtime performances and suggests tips to speed up the app work on development machines and users' gadgets. To start your PWA audit, open an application in Edge → find a Lighthouse tab → click the “Generate report” button.
Now let’s dive deeper into testing results and applying changes for a better experience of your progressive web application.
How to analyze runtime performance
While using DevTools, you will learn to test such aspects of your PWA lifecycle as a Response, Animation, and Idle. Since there are many ways to improve runtime performance, we’ll consider the tool's work on a particular animation bottleneck example.
So let’s start with opening the following path: the Edge → Settings → InPrivate Mode → Sluggish Animation. It is an important option to reduce the influence of the installed extensions on the performance results. Additional programming files can cause noise while testing PWA and bring disinformation into the report. But Private Mode solves this issue.
Start mobile CPU simulations and demo
As PWA should perfectly run on customers’ gadgets, you should make the testing environment relative to the power of the mobile devices.
To simulate a smartphone CPU, open the DevTools → Performance. Place a checkmark in front of Screenshots and press Capture Settings. Throttle a CPU 4 times slower and set up a demonstration:
- Add blue icons, pressing Add 10 several times until their speed becomes slower.
- Click Optimize and watch the icons running faster.
- Return to the previous result by clicking Subtract 10.
- Press Un-Optimize to see the initial version results.
Start recording and provide analysis
DevTools allows PWA timesheet audit checks to find narrow places in the page performance. While testing an unoptimized version, press Record and let the software capture the metrics for a few seconds. Click the Stop button, and you will face the process result. It contains a large amount of data, which can be taken apart to find the bottlenecks.
You should focus on the frames-per-second metrics (FPS). It’s a vital measurement for PWA performance. Customers perceive such animation as smooth enough if around 60 new frames are rendered every second. The higher the green line on the PWA timesheet audit template, the better the FPS.
You can find the CPU chart below the framerate one. The more colors this section will contain, the slower your processing is. That means you should find ways to offload some work from the CPU.
The report also includes screenshots of the page at every moment of its running. That helps the auditor to analyze animation progress manually.
Finding bottlenecks
By analyzing the report on testing the app runtime performance, you’ll find information about all the activities provided on the main thread, their child events, and the call stack. When some of the processes have issues with improving, an Animation Frame Fired appears to show the possible place for optimization.
Devtools suggest hints for bottlenecks, which slow down the PWA runtime performance and lead you to the initial code, which can be rewritten.
By recording an optimized demo version and comparing it with the first option, you’ll probably find the answers on what issues max out your CPU and how your PWA can perform better with some improvements. In the next chapter, we’ll figure out how to optimize the performance of Ionic 4 PWA, its mother framework Angular, React, and others. Stay in touch for more practical knowledge!
