Improving PWA Performance: CSS Optimization Guide

This article will explore how to significantly improve the performance of progressive web applications (PWA) through CSS optimization. We will learn how to remove unused CSS, inline critical path CSS, and compress the final code. These technologies are also suitable for ordinary websites and applications.

Key points:

• CSS optimization can significantly improve PWA performance by removing unused CSS, inline critical path CSS, and code compression.
• Google open source audit tool Lighthouse can help identify opportunities for CSS optimization.
• Tools such as PurifyCSS can remove unused CSS styles and reduce the size of CSS files. Tools such as Critical CSS Extractor can extract and inline key CSS rules, reducing the number of HTTP requests and the amount of browser parsing code.
• CSS files can be prevented from blocking rendering by loading CSS files at the end of the page using JavaScript after DOM is ready.

Example PWA and Audit

For demonstration, we will use a simple PWA example (the code is available in the GitHub repository, or directly access the online version). This PWA uses uncompressed Bootstrap v4 for CSS style and displays a set of posts fetched from the statically generated JSON API.

PWA contains the following key elements:

• Performance file (manifest.json): Provides browser information about web applications, such as name, description, icon, startup URL, etc.
• Service worker: caches the application shell (displays the minimum HTML, CSS, and JavaScript of the user interface) and proxys all network requests.
• HTTPS: PWA must provide services through secure sources.

Use Google Lighthouse for review

Lighthouse is an open source auditing tool developed by Google that can be used to improve the performance, accessibility and SEO of websites and PWAs.

In the "Audit" tab of Chrome Developer Tools, access Lighthouse, enter the PWA address (for example: https://www.techiediaries.com/unoptimizedpwa/), run the audit and view the report.

Optimization suggestions are provided in the Lighthouse report, such as reducing blocking rendering CSS, eliminating unused CSS rules, and compressing CSS.

CSS Optimization: Remove unused CSS Rules

Lighthouse points out that 96% of CSS in the sample PWA are unused. We can use PurifyCSS to remove these unused CSS.

Installing PurifyCSS: npm install -g purify-css

Run PurifyCSS: purifycss styles/bootstrap.css index.html -o styles/purified.css -i

Reduce blocking rendering CSS

We can extract the critical CSS using Critical CSS Extractor (Chrome Extension) and inline it into the index.html file.

Compress CSS

CSS files can be compressed using tools such as cssnano or csso.

Installing cssnano and PostCSS CLI: npm install cssnano npm install postcss-cli --global

Create postcss.config.js file and configure cssnano.

Run the compression command: postcss styles/bootstrap.css > styles/bootstrap.min.css

Late loading of Bootstrap using JavaScript

Load CSS files using JavaScript at the end of the page to avoid blocking rendering.

Optimized results and other tools

Run the Lighthouse audit again to see the performance improvements.

Other available tools include: csso, critical, uncss, purgecss, etc.

Summary

PWA performance can be significantly improved by removing redundant code, inline critical resources and compressing CSS.

FAQ

The article also includes frequently asked questions about CSS optimization and PWA performance, covering CSS optimization strategies, performance measurement methods, the role of service workers, image optimization, common error avoidance, PWA accessibility, search engine Optimization and comparison between PWA and traditional web applications.

(Note: Since the picture cannot be processed directly, the picture path remains unchanged. Please make sure the picture path is correct to display normally.)

The above is the detailed content of CSS Optimization Tools for Boosting PWA Performance. For more information, please follow other related articles on the PHP Chinese website!