PWAパフォーマンスを向上させるためのCSS最適化ツール

PWAパフォーマンスの改善：CSS最適化ガイド

この記事では、CSSの最適化を通じてプログレッシブWebアプリケーション（PWA）のパフォーマンスを大幅に改善する方法について説明します。未使用のCSSを削除し、インラインのクリティカルパスCSSを削除し、最終コードを圧縮する方法を学びます。これらのテクノロジーは、通常のウェブサイトやアプリケーションにも適しています。

キーポイント：

• CSS最適化は、未使用のCSS、インライン臨界パスCSS、およびコード圧縮を除去することにより、PWAパフォーマンスを大幅に改善できます。
• Google Open Source Audit Tool Lighthouseは、CSSの最適化の機会を特定するのに役立ちます。
PurifyCSなどのツールは、未使用のCSSスタイルを削除し、CSSファイルのサイズを削減できます。重要なCSS抽出器などのツールは、主要なCSSルールを抽出およびインラインで、HTTP要求の数とブラウザ解析コードの量を減らすことができます。
CSSファイルは、DOMの準備ができた後にJavaScriptを使用してページの最後にCSSファイルをロードすることにより、レンダリングをブロックすることを防ぐことができます。

の例pwaおよび監査

デモンストレーションには、単純なPWAの例を使用します（コードはGitHubリポジトリで使用できます。または、オンラインバージョンに直接アクセスします）。このPWAは、CSSスタイルに非圧縮ブートストラップV4を使用し、静的に生成されたJSON APIから取得された一連の投稿を表示します。

PWAには、次の重要な要素が含まれています

パフォーマンスファイル（manifest.json）：名前、説明、アイコン、起動URLなどのWebアプリケーションに関するブラウザ情報を提供します。

• サービスワーカー：アプリケーションシェル（ユーザーインターフェイスの最小HTML、CSS、およびJavaScriptを表示）およびすべてのネットワークリクエストをプロキシにキャッシュします。
• HTTPS：PWAは安全なソースを通じてサービスを提供する必要があります。

レビューにGoogle Lighthouseを使用してくださいLighthouseは、Googleが開発したオープンソース監査ツールで、WebサイトとPWASのパフォーマンス、アクセシビリティ、SEOを改善するために使用できます。 Chrome Developer Toolsの「監査」タブで、灯台にアクセスし、PWAアドレスを入力し（）、監査を実行してレポートを表示します。

https://www.techiediaries.com/unoptimizedpwa/

Lighthouse Reportには、CSSのレンダリングの削減、未使用のCSSルールの排除、CSSの圧縮など、最適化の提案が灯台レポートに記載されています。

CSS最適化：未使用のCSSルールを削除

灯台は、サンプルPWAのCSSの96％が使用されていないことを指摘しています。 PurifyCSSを使用して、これらの未使用のCSSを除去できます。

purifycssのインストール：

npm install -g purify-css

run purifycss：

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

ブロッキングを下げて、CSS 重要なCSS抽出器（Chrome Extension）を使用して批判的なCSSを抽出し、Index.htmlファイルにインライン化できます。

CSSを圧縮

CSSファイルは、CSSNANOやCSSOなどのツールを使用して圧縮できます。

postcss.config.jsファイルを作成し、cssnanoを構成します。 npm install cssnano npm install postcss-cli --global圧縮コマンドを実行します：

JavaScriptを使用したブートストラップの遅いロード

postcss styles/bootstrap.css > styles/bootstrap.min.css最適化された結果およびその他のツール

灯台監査を再度実行して、パフォーマンスの改善を確認します。

その他の利用可能なツールには、CSSO、クリティカル、UNCSS、Purgecssなどが含まれます。

概要

PWAパフォーマンスは、冗長コードを削除し、重要なリソースをインラインにし、CSSを圧縮することにより、大幅に改善できます。

faq

この記事には、CSSの最適化とPWAパフォーマンスに関するよくある質問も含まれています。CSS最適化戦略、パフォーマンス測定方法、サービスワーカーの役割、画像最適化、一般的なエラー回避、PWAアクセシビリティ、検索エンジン最適化、PWAとPWAの比較も含まれています。従来のWebアプリケーション。

（注：画像を直接処理できないため、画像のパスは変わらないままです。画像パスが正常に表示されるように正しいことを確認してください。

以上がPWAパフォーマンスを向上させるためのCSS最適化ツールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。