1.1 パフォーマンスが重要な理由
ウェブサイトやアプリのパフォーマンスが重要な理由はいくつかあります。
ユーザーエクスペリエンスの向上:
ユーザーは速いページ読み込みやスムーズな動作を期待します。
遅いページやレスポンスの遅れはユーザーの不満を引き起こし、サイトやアプリの利用を妨げま
す。
検索エンジンランキングの向上:
検索エンジンはパフォーマンスもランキングの重要な要素として考慮します。
高速なサイトは検索結果で優先される傾向があります。
ビジネス成果の向上:
パフォーマンスが向上することで、コンバージョン率や売上などのビジネス成果も向上します。速
いサイトはユーザーにより多くのコンテンツや商品にアクセスさせることができます。

1.2 パフォーマンス指標
ウェブサイトやアプリのパフォーマンスを測定するためには、いくつかの指標があります。
ロード時間:
ページが表示されるまでの時間。特に最初のコンテンツが表示されるまでの時間（First
Contentful Paint）やページ全体が表示されるまでの時間（Load Time）が重要です。
レンダリングのスピード:
ージの要素がブラウザ上で表示されるまでの時間。これは、DOMContentLoadedやLoadイベン
トなどで測定されます。
リソースの最適化度合い: 画像、スタイルシート、JavaScriptなどのリソースが最適化されている
かどうか。不要なリクエストの削減やキャッシュの活用などが含まれます。
これらの指標を理解し、測定することはパフォーマンス改善の第一歩です。

良いパフォーマンスを実現するためには、いくつかのベストプラクティスを遵守する必要がありま
す。
この章では、パフォーマンスを向上させるための具体的な内容を見ていきます。

2.1 画像の最適化
画像はウェブページの読み込み速度に大きく影響を与えます。
以下は画像の最適化に関するヒントです。
フォーマットの選択:
JPEGは写真に適しており、PNGは透明度が必要な場合に適しています。WebPなどの新しい
フォーマットも検討しましょう。
圧縮:
画像を圧縮することでファイルサイズを削減し、読み込み速度を向上させます。ツールやライブラ
リを使用して自動的に圧縮することもできます。
レスポンシブイメージ:
レスポンシブなイメージを使用して、デバイスの解像度や表示サイズに応じて適切な画像を配信
します。

2.2 CSSとJavaScriptの最適化
CSSとJavaScriptはページのレンダリングに大きな影響を与えます。
以下は最適化のヒントです。
ファイルの結合:
複数のCSSファイルやJavaScriptファイルを結合することで、リクエスト数を減らし、読み込み速
度を向上させます。
ファイルの圧縮:
CSSやJavaScriptファイルを圧縮することで、ファイルサイズを削減し、読み込み時間を短縮しま
す。
非同期読み込み:
非同期でCSSやJavaScriptを読み込むことで、ページのレンダリングをブロックせずに読み込み
速度を向上させます。

2.3 キャッシュの活用
ブラウザキャッシュを活用することで、ページの読み込み速度を大幅に向上させることができま
す。
適切なキャッシュ設定:
HTTPヘッダーを使用して、リソースのキャッシュ設定を行います。適切なキャッシュ設定を行うこ
とで、ブラウザがリソースをキャッシュする時間を調整できます。
ETagやLast-Modifiedの活用:
ETagやLast-Modifiedなどのメカニズムを使用して、ブラウザがリソースの更新をチェックし、必要
に応じてキャッシュを更新します。

パフォーマンスを改善するためには、さまざまなツールが役立ちます。
この章では、有用なパフォーマンスツールを紹介します。

3.1 ページスピードインサイト
GoogleのPageSpeed Insightsは、ウェブページのパフォーマンスを測定し、改善するためのヒン
トを提供します。ロード時間やレンダリングの問題を特定し、解決策を提案します。

3.2 Lighthouse
Lighthouseは、Googleが提供するオープンソースのツールで、ウェブアプリケーションのパフォー
マンスと品質を測定します。レンダリングパフォーマンス、アクセシビリティ、SEOなどの側面を評
価し、改善のためのヒントを提供します。

3.3 WebPageTest
WebPageTestは、さまざまな場所からウェブページのロード時間を測定し、パフォーマンスの問
題を特定します。さまざまなブラウザやデバイスでのテストも可能です。

パフォーマンス最適化は一度だけの作業ではなく、継続的な改善が必要です。
この章では、パフォーマンスの持続的改善について考えます。

4.1 モニタリングとテスト
定期的なモニタリングとテストを行うことで、パフォーマンスの問題を早期に発見し、迅速に対処
することができます。
定期的なページスピードの測定やテストスイートの実行などが含まれます。

4.2 コードレビューと最適化
開発チーム全体がパフォーマンスを意識し、最適化のベストプラクティスを遵守することが重要で
す。コードレビューを通じてパフォーマンスの問題を発見し、改善を行います。

4.3 パフォーマンスチームの設立
大規模なプロジェクトでは、専門のパフォーマンスチームを設立することが効果的です。
このチームはパフォーマンス改善のリーダーシップを担い、最適化の取り組みを統括します。

今回はWEBサイトやアプリケーションを運用していくにあたり必要なパフォーマンス最適化につい
て話をさせていただきましたが、以上のようにどれだけ見た目の良い物であったり、複雑な物を
作成してもパフォーマンスが悪ければ、ユーザー満足度が下がってしまったり、検索順位からも
落ちてしまうなど、残念な結果になりかねません。
パフォーマンス最適化はWEB開発やWEBサイトを実際に運用していく中でとても重要な側面で
す。
良好なパフォーマンスはユーザーエクスペリエンスの向上やビジネス成果の向上につながるた
め、今後WEBサイトやアプリケーションを作成しようと練習をしている方や実際に作成をされてい
る方は参考にしてみてください！
ガーディアンではWEBサイトを作成するうえで様々な視点からユーザー満足度を上げるため、勝
てるサイトを作るために日々取り組んでいます！
構築方法だけでなく、勝てるサイトを作るためにはどうすれば良いかを学んでみたい！という方
は、ぜひ一度ガーディアンのサイトを覗いてみてください！

◆採用情報TOPはこちらから！
https://guardian.jpn.com/recruit/