msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'softchris-patch-32'
${ noResults }
Web-Dev-For-Beginners/translations/ja/5-browser-extension/3-background-tasks-and-perf.../assignment.md

7.7 KiB
Raw Permalink Blame History Escape

パフォーマンス分析を行う

課題概要

パフォーマンス分析は、現代のウェブ開発者にとって重要なスキルです。この課題では、実際のウェブサイトを対象に包括的なパフォーマンス監査を行い、ブラウザベースのツールやサードパーティサービスを使用してボトルネックを特定し、最適化戦略を提案します。

あなたのタスクは、ウェブパフォーマンスの原則を理解し、プロフェッショナルな分析ツールを効果的に使用する能力を示す詳細なパフォーマンスレポートを作成することです。

課題指示

分析するウェブサイトを選択 - 以下のオプションから1つを選んでください：

  • よく利用する人気のあるウェブサイト（ニュースサイト、ソーシャルメディア、eコマースなど）
  • オープンソースプロジェクトのウェブサイト（GitHubページ、ドキュメントサイトなど）
  • 地元のビジネスウェブサイトやポートフォリオサイト
  • 自分のプロジェクトや過去の課題

複数のツールを使用して分析を実施 - 少なくとも3つの異なるアプローチを使用してください：

  • ブラウザのDevTools - Chrome/Edgeのパフォーマンスタブを使用して詳細なプロファイリングを行う
  • オンライン監査ツール - Lighthouse、GTmetrix、WebPageTestを試す
  • ネットワーク分析 - リソースの読み込み、ファイルサイズ、リクエストパターンを調査する

結果を文書化し、以下を含む包括的なレポートを作成してください：

パフォーマンス指標分析

  • ロード時間の測定 - 複数のツールと視点からの測定結果
  • Core Web Vitalsスコア（LCP、FID、CLS）とその影響
  • リソースの内訳 - ロード時間に最も影響を与える資産の特定
  • ネットワークウォーターフォール分析 - ブロッキングリソースの特定

問題の特定

  • 具体的なパフォーマンスボトルネック - データを裏付ける詳細な分析
  • 根本原因の分析 - 各問題が発生する理由の説明
  • ユーザーへの影響評価 - 問題が実際のユーザーに与える影響の記述
  • 問題の優先順位付け - 深刻度と修正の難易度に基づくランキング

最適化の提案

  • 具体的で実行可能な改善案 - 期待される影響を含む
  • 各提案の実施戦略
  • 適用可能な最新のベストプラクティス（遅延読み込み、圧縮など）
  • 継続的なパフォーマンス監視のためのツールと技術

調査要件

ブラウザツールだけに頼らない - 以下を使用して分析を拡張してください：

サードパーティ監査サービス:

専門的な分析ツール:

提出物の形式

プロフェッショナルなレポート（2～3ページ）を作成し、以下を含めてください：

  1. エグゼクティブサマリー - 主な発見と提案の概要
  2. 方法論 - 使用したツールとテストアプローチ
  3. 現在のパフォーマンス評価 - ベースライン指標と測定結果
  4. 特定された問題 - データを裏付ける詳細な問題分析
  5. 提案 - 優先順位付けされた改善戦略
  6. 実施ロードマップ - 最適化計画のステップバイステップ

視覚的な証拠を含める:

  • パフォーマンスツールと指標のスクリーンショット
  • パフォーマンスデータを示すチャートやグラフ
  • 可能であれば、改善前後の比較
  • ネットワークウォーターフォールチャートとリソースの内訳

評価基準

基準 優秀 (90-100%) 適切 (70-89%) 改善が必要 (50-69%)
分析の深さ 4つ以上のツールを使用した包括的な分析、詳細な指標、根本原因分析、ユーザー影響評価 3つのツールを使用した良好な分析、明確な指標、基本的な問題特定 2つのツールを使用した基本的な分析、深さが限られた問題特定
ツールの多様性 ブラウザツール + 3つ以上のサードパーティサービスを使用し、比較分析と各ツールからの洞察 ブラウザツール + 2つのサードパーティサービスを使用し、ある程度の比較分析 ブラウザツール + 1つのサードパーティサービスを使用し、比較が限られる
問題の特定 5つ以上の具体的なパフォーマンス問題を特定し、詳細な根本原因分析と影響の定量化 3～4つのパフォーマンス問題を特定し、良好な分析と影響測定 1～2つのパフォーマンス問題を特定し、基本的な分析
提案 具体的で実行可能な提案を提供し、実施の詳細、期待される影響、最新のベストプラクティスを含む 良好な提案を提供し、ある程度の実施ガイダンスと期待される結果を含む 基本的な提案を提供し、実施の詳細が限られる
プロフェッショナルなプレゼンテーション 明確な構造、視覚的証拠、エグゼクティブサマリー、プロフェッショナルなフォーマットを備えたレポート 良好な構造、ある程度の視覚的証拠、明確な構造 基本的な構造、視覚的証拠が最小限

学習成果

この課題を完了することで、以下を実証できます：

  • プロフェッショナルなパフォーマンス分析ツールと方法論を適用する能力
  • データ駆動型分析を使用してパフォーマンスボトルネックを特定する能力
  • コード品質とユーザー体験の関係を分析する能力
  • 具体的で実行可能な最適化戦略を提案する能力
  • 技術的な発見をプロフェッショナルな形式で伝える能力

この課題は、レッスンで学んだパフォーマンスの概念を強化し、ウェブ開発のキャリアを通じて使用する実践的なスキルを構築します。

免責事項:
この文書はAI翻訳サービスCo-op Translatorを使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてお考えください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解について、当社は責任を負いません。