理由と内容
プログレッシブ ウェブアプリの手法がサイトにもたらすメリットについては、すでにご存じかもしれません。すぐに PWA 機能を追加したくなるかもしれませんが、これも可能ですが、まず「PWA 対応」に取り掛かっておくことをおすすめします。
JavaScript のブロックや画像の肥大化などの問題を解決できません。PWA には強固な基盤が必要です。
では、ウェブサイトの健全性はどのように確認するのでしょうか。最初のステップはサイトの監査です。何がうまく機能していて、どこで改善の余地があるかを客観的に確認します。
サイトやアプリを監査すると、復元性とパフォーマンスに優れたエクスペリエンスを構築し、最小限の承認で実装できる成果をすぐに明らかにすることができます。また、監査によりデータドリブンな開発のベースラインも得られます。変更によって状況は改善されましたか？自社のサイトと競合他社のサイトの比較作業の優先順位付けの指標と、改善を行ったら自慢する具体的な証拠が得られます。
5 分しかない場合...
ホームページで Lighthouse を実行し、レポートデータを保存します。定量化されたベースラインと ToDo リストを使用して、パフォーマンス、アクセシビリティ、セキュリティ、SEO を改善できます。
30 分しかない場合...
おそらく Lighthouse がおそらく最適な出発点ですが、少し時間を置いてから、他のツールからの結果を記録することもできます。
- Chrome DevTools の [Security] パネル: HTTPS の使用。
- Chrome DevTools の [Network] パネル: 読み込みのタイミング。HTML、CSS、JavaScript、画像、フォントなどのファイルに対するリソースサイズとリクエスト数。
- Chrome タスク マネージャー: サイトが他のアプリよりも大量の CPU やメモリを頻繁に使用している場合は、メモリリーク、タスクの実行、リソースの読み込みに関する問題を解決する必要があります。ユーザーを代表するデバイスでサイトをテストしてください。
- WebPagetest: さまざまなロケーションと接続タイプのパフォーマンス、キャッシュ、最初のバイトまでの時間、CDN 使用状況。
- Pagespeed Insights: 読み込みパフォーマンス、データコスト、リソース使用量（実際のパフォーマンス統計を示す Chrome ユーザー エクスペリエンス レポートデータを含む）。
- 速度スコアカードと影響計算ツール: サイトの速度を同業他社と比較し、サイトの速度を改善することで収益の可能性を見積もります。
ウェブサイトは、初めて目にするユーザーに対して必ずテストしてください。サイトをシークレット（プライベート）ウィンドウで開くか、ブラウザツールを使用してキャッシュを無効にしてストレージを消去します。これにより、すべてのアセットがローカル キャッシュではなくネットワークから取得されるため、初回読み込みのパフォーマンスを正確に把握できます。
現実世界でのテストに勝るものはありません。ユーザーと同じデバイスと接続でサイトを試し、主観的なエクスペリエンスを記録します。
困惑するようなツールを見つけたら...
速度ツールの考え方に関するガイドをご覧ください。
他に何もない場合は、Lighthouse を使用して以下を確認します。
- HTTPS: すべてのサイトですべてのアセットを HTTPS で配信する必要があります。
- サーバーの設定: ウェブサーバーまたは CDN で圧縮を正しく使用し、HTTP/2 を使用して、適切なヘッダーを含める必要があります。これにより、ブラウザがリソースをキャッシュできるようになります。
- ページの下部に移動できるスクリプト要素や、async または defer 属性を指定することができるスクリプト要素です。
- 削除できる JavaScript とライブラリ。
- 使用されていない CSS と未使用の JavaScript。
- 高い圧縮率または小さいピクセル寸法で保存できる画像。
- 別の形式を使用して保存された小さな画像ファイル（PNG として保存された写真など）。
対象者、関係者、コンテキスト
リファクタリングの優先順位は、対象ユーザー、コンテンツ、機能によって異なります。サイトの訪問者は誰か？この機能を使用する理由と方法は？パフォーマンス バジェットはどれくらいか。これらの質問に対する答えがよくわからない場合は、PWA トレーニング リソース（対象読者、コンテンツ、すべてのユーザーに向けた設計）で要件収集演習を試してみてください。
利害関係者は誰で、その優先事項は何ですか？これは、監査データを構造化、表示、共有する方法に影響します。
サイト全体を監査できない場合は、ページ分析を確認して、どこに重点を置くべきかを把握します。直帰率が高い、ページ滞在時間が短い、想定外の離脱ページがある場合は、何から始めるべきか判断できます。同様に、ホスティング費用、広告クリック数、コンバージョン数などのビジネス指標。関係者から、どのようなデータが重要かについて概要を把握できます。
テスト、記録、修正、反復
変更を加える前のサイトの状態を記録して、問題を発見し、改善や回帰の出発点を設定します。これにより 開発作業を正当化し 報酬を得るためのデータが得られます
ホームページだけでなく、サイト内で複数のページタイプをテストしましょう。シングルページ アプリの場合は、最初の読み込みだけではなく、さまざまなコンポーネント、ルート、UX フローをテストします。