Why You Should Finally Audit Your PWA

Sergii Ukolov, Software Developer in Multi-Programming Solutions

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.

Table of Contents

Auditing software

How to analyze runtime performance

The best way to optimize your PWA

Conclusion

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.

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!

The best way to optimize your PWA

Let’s consider a progressive app improvement with the Lighthouse, an open-source tool, allowing to measure performance in two ways:

• with a Lighthouse PWA score counting from 0 to 100;
• or a report containing performance optimization tips.

You should match audit configuration, including Mobile (in the Devices sector), Performance (in Audits), Simulated Slow 4G, 4x CPU Slowdown, and Clear Storage to begin with. Then start scanning PWA with Lighthouse before making any changes to your app.

You’ll get a report about your site performance, including metrics like Speed Index, CPU idle, Time to Interactive, and others. By pressing the toggle button, you’ll find a detailed description for any section with valuable tips to improve your PWA score in the Opportunity part.

So, meet the five steps you can do to reach higher scores for the web app.

Use Production Mode

It is one of the Webpack 4 parts (along with the development mode) containing a compression plugin. It can reduce your bundle.js size, speeding the loading time for PWA. Open webpack.config.js in the editor tab. Change the development mode to the production one, and you’ll find the Speed Index reducing and the Google Lighthouse PWA score increasing.

Obtain Gzip or Brotli

Using unique algorithms, these web tools will compress your bundle.js even more. Thus, the overall app performance will increase again. You should consider, though, that Brotli is suitable for any text files but doesn’t work with HTTP due to its insecurity.

Separate files

Use code-splitting for bundle.js to separate the main part, displayed for customers when they open the site, and the additional one, performed under special conditions (for example, when a user presses some button). Scan PWA with a Lighthouse to ensure your changes improve the application loading.

Use Webpack Bundle Analyzer

This tool will visualize your page’s content scaling its sizes relative to each other. The wider an image in a treemap is, the more space it consumes in bundle.js, slowing down the PWA runtime. Observe which content can be deleted or reduced to grow a performance score.

Optimize images

Large pictures can significantly slow down the app loading. So it is better to resize them to the view customers see on a page. They can be cropped with a standard app called “Paint.” The other option is to compress your existing .jpg or .png image or use a new webp low-sized format.

Providing the described optimization, you can probably reach 100% performance for the web app. Lighthouse PWA gives limitless possibilities to experiment with the improvement methods and analyze their effectiveness. Having doubts about personal technical skills, you may always rely on a software development team, which will handle all the issues with PWA building, its support, and audit.

Conclusion

PWA auditing is the most common way to check the application activity, runtime, and loading speed. With the help of powerful software, like Lighthouse or a PWABuilder, you can figure out the bottlenecks in page performance and provide improvements following all the optimization nuances. 

Make one change at a time and repeat the test to determine how the isolated impact affects an overall PWA functioning. Then with a fully audited and optimized web application, you’ll be ready to pack it for an app store and ensure the best customer experience.