理由と対象
プログレッシブ ウェブアプリの手法がサイトにもたらすメリットは、すでにご存じでしょうか。すぐに PWA の機能を追加したくなるかもしれません。そのも可能ですが、まず「PWA 対応」にした方がはるかに安全です。
JavaScript のブロックや画像の肥大化などの問題を解決できるわけではありません。PWA には強固な基盤が必要です
では、ウェブサイトの状態を確認するにはどうすればよいでしょうか。最初のステップはサイト監査です。適切に機能している箇所と、改善の余地がある箇所(および方法)を客観的に審査します。
サイトやアプリを監査することで、復元性とパフォーマンスに優れたエクスペリエンスを構築し、最小限のサインオフで迅速に実装できる成果を強調できます。監査は、データドリブン開発のベースラインとしても役立ちます。何かを変えたことで状況は良くなりましたか?競合他社のサイトと 比べてみてください作業を優先するための指標や、改善を行った後に自慢すべき具体的な証拠が得られます。
5 分でわかる場合は...
ホームページで Lighthouse を実行し、レポートデータを保存します。パフォーマンス、アクセシビリティ、セキュリティ、SEO を改善するための定量化されたベースラインと ToDo リストが得られます。
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 として保存された写真など)。
対象者、関係者、コンテキスト
リファクタリングの優先順位は、対象ユーザー、コンテンツ、機能によって異なります。 サイトを訪れるユーザーなぜ、どのように使用するのか?パフォーマンス バジェットはどのくらいか。これらの質問の答えがわからない場合は、Google の PWA トレーニング リソースにある要件収集の演習(オーディエンス、コンテンツ、すべてのユーザーを考慮した設計)をお試しください。
ステークホルダーは誰で、その優先事項は何ですか?これは、監査データを構造化、提示、共有する方法に影響します。
サイト全体を監査できない場合は、ページ アナリティクスを確認して注力すべき領域を判断します。直帰率が高い、ページ滞在時間が短い、予期せぬ離脱につながるページは、何から始めるべきかを判断するための良い指標となります。ホスティング費用、広告クリック数、コンバージョン数などのビジネス指標も同様です。ステークホルダーから、自分にとって重要なデータの概要を把握します。
テスト、記録、修正、繰り返し
変更を加える前のサイトの状態を記録して問題を明らかにし、改善または回帰の出発点を設定します。これにより 開発作業を正当化し 報酬を得るためのデータが得られます
ホームページだけでなく、サイト内で複数の種類のページをテストするようにしてください。シングルページ アプリでは、初回読み込みだけでなく、さまざまなコンポーネント、ルート、UX フローもテストします。