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

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

キーポイント：

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

の例pwaおよび監(jiān)査

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

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

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

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

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

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

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

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

燈臺(tái)は、サンプル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を構(gòu)成します。 npm install cssnano npm install postcss-cli --global圧縮コマンドを?qū)g行します：

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

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

燈臺(tái)監(jiān)査を再度実行して、パフォーマンスの改善を確認(rèn)します。

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

概要

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

faq

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

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

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