Webサイトの速度を向上させるためのヒント | Webサイトの速度を上げる方法

Webパフォーマンスは、特にページのスピードと信頼性に重点を置いた、Webサイトのユーザーエクスペリエンスの測定および認識可能な品質の総称です。

開発者とWebサイトの所有者は、Webサイトのパフォーマンスを向上させるためにさまざまな手段を講じることができます。これには、画像サイズ、コードフォーマット、外部スクリプトの使用方法などのWeb設計要素の最適化や、ホスティング、コンテンツキャッシング、負荷分散のための優良プロバイダーの選択などがあります。

Webページの読み込み速度と信頼性が向上すると、より良いユーザーエクスペリエンスを提供するだけでなく、オーガニック検索結果で上位にランクされる傾向があり、潜在的な訪問者の目に触れる機会が増え、コンバージョン率が上がることも多くあります。

Webサイトのパフォーマンスをテストする方法

Webサイトのパフォーマンスを向上させるための重要な第一歩は、現在のパフォーマンスを測定することです。ユーザー（およびその他の関係者）がWebサイトの速度と信頼性をどのように認識するかは、さまざまな要因によって決まります。これらの要因を測定することが、どの行動が最も改善につながるかを知る唯一の方法です。

パフォーマンス測定用の無料のツールには、Google Lighthouse（Google ChromeウェブブラウザのDevTools suiteで利用可能）や Cloudflare Observatory（Cloudflareのユーザーダッシュボードで利用可能）など、多数く存在します。

これらのツールを使用してWebサイトの所有者が評価すべき事項とは？まず手始めにコアウェブバイタルから始めることが適しているでしょう。これは次の3つのメトリクスのセットからWebパフォーマンスの重要な側面を測定するものです：

• ページで最も大きな要素のロード時間を測定する最大コンテンツの描画
• ページがユーザーの入力にどれだけ速く反応するかを測定する初回入力までの遅延時間
• ページ要素の視覚的安定性を測定する累積レイアウトシフト数

価値あるユーザーエクスペリエンスに対するシグナルを提供するだけでなく、ページのコアウェブバイタルを改善することで、 Googleのオーガニック検索結果で上位にランクインさせることができます。

その他に評価すべき重要な指標として、サーバー初期応答時間（TTFB）（ページの読み込み開始の速さ）、DNSルックアップ速度（ページのドメイン名サービスがドメイン名をIPアドレスに変換する速さ）、操作可能になるまでの時間（TTI）などがあります。

これらの指標を測定することがどのようなアクションにつながるかを知るために、以下の例を考えてみましょう：

• 最大コンテンツの描画（LCP）が遅いWebページは、ユーザーに最大のコンポーネントを表示するのに時間がかかりすぎていると言えます。Webページの所有者は、そのコンポーネントの前に不要なコードが読み込まれていないかどうかを調査し、そのコードの削除の是非を検討すると良いでしょう。
• サーバー初期応答時間（TTFB）が遅いWebページは、
配信元サーバーからWebサイトのリソースを取得するのに時間がかかりすぎていると言えます。Webページの所有者は、DNSプロバイダーとWebホストの応答時間を調査し、必要に応じてどちらか、または両方のサービスの再設定または交換を検討することができます。

Webサイトのパフォーマンスの改善

強力なWebパフォーマンスを実現する確約された設計図はありませんが、Webサイトの所有者は、以下のベストプラクティスを使用してサイトの速度と信頼性を高めることができます：

画像を最適化する

画像はHTMLファイルやCSSファイルよりもサイズが大きくなる傾向があるため、多くの場合において、Webサイトでの読み込みに時間がかかります。幸いなことに、画像の最適化を行い、解像度とサイズを下げて画像ファイル自体を圧縮することで、画像の読み込み時間を短縮することができます。

HTTPリクエスト数を制限する

ほとんどのWebページでは、画像、スクリプト、CSSファイルなど、ページ上のさまざまなアセットに対して複数のHTTP要求をブラウザーで実行する必要があります。実際、多くのWebページで、数十の要求が必要となります。各要求の結果は、リソースをホストしているサーバーとの往復となるため、Webページの全体的な読み込み時間がさらに伸びる可能性があります。

このように、潜在的な問題があるため、各ページの読み込みに必要なアセットの合計数を最小限に抑える必要があります。速度テストは、最も時間がかかるHTTPリクエストを特定するのに役立ちます。

ブラウザーのHTTPキャッシュを使用する

ブラウザーキャッシュは、ブラウザーが静的ファイルのコピーを保存する一時的なストレージ場所です。これにより、最近アクセスしたWebページを何度も何度も要求する必要はないため、はるかに速く読み込むことができます。開発者は、頻繁に更新がないWebページの要素をキャッシュするようにブラウザーに指示することができます。ブラウザーキャッシュの手順は、ホスティングサーバーからのHTTP応答ヘッダーに記載されています。これにより、サーバーがブラウザーに転送する必要があるデータ量が大幅に削減され、特定のページに頻繁にアクセスするユーザーのページ読み込み時間が短縮されます。

描画を妨げる不要なJavaScriptを削除する

Webページには、ページ内のより重要なコンテンツよりも先に読み込まれる不要なコードが存在し、全体の読み込み時間を遅くしている可能性があります。これは特に、多くの所有者らがそれぞれコードやコンテンツを追加している大規模なWebサイトではよくあることです。Webページの所有者はWebパフォーマンスツールを使用することで、ページのパフォーマンスを悪化させている不要なコードを特定することができます。

外部スクリプトの使用を制限する

外部コメントシステム、CTAボタン、CMSプラグイン、リード生成ポップアップなど、他の場所から読み込まれるスクリプト化されたWebページ要素は、ページの読み込みのたびに読み込む必要があります。

スクリプトのサイズによっては、Webページの速度が遅くなったり、Webページが一度に読み込まれないことがあります（これは「コンテンツジャンプ」または「レイアウトシフト」と呼ばれ、Webページ全体を表示するためにスクロールしなければならないことが多いモバイルユーザーをイライラさせる原因となります）。

リダイレクトの使用を制限する

リダイレクトとは、あるWebページの訪問者が別のページに転送されることを指します。リダイレクトは、ページ読み込み時間に、数分の1秒または、場合によっては秒単位の時間を追加します。リダイレクトは避けられない場合もありますが、使い過ぎると複数の所有者を持つ大規模なWebサイトでは、時間の経過とともに蓄積されていく可能性があります。Webサイトの所有者は、リダイレクトの使用に関する明確なガイドラインを制定し、重要なWebページに不必要なリダイレクトがないかを定期的にスキャンする必要があります。

CSSとJavaScriptファイルを縮小する

コードの縮小とは、コード上のコメント、空白、不要なセミコロンなどのコードを理解し実行するためにコンピューターに必要なもの以外を削除することを指します。これにより、CSSとJavaScriptのファイルが若干小さくなり、ブラウザーでの読み込み速度が高速化し、帯域幅が削減されます。通常、縮小によるパフォーマンス向上の効果はわずかなものですが、それでも重要なベストプラクティスであることに変わりありません。

重要なWebサイト機能に効果的なサードパーティ製のサービスを利用する

• ホスティング：どれほど優れた設計のWebサイトも、配信元サーバーがリクエストに応答するのが遅ければ読み込みは遅くなります。Webサイトの所有者は、平均レスポンスタイムが200ミリ秒以下の、高い信頼性の記録を持つサーバーを選ぶべきです。
• DNS：DNSは、ドメイン（example.comなど）をIPアドレスに変換するシステムで、ページ読み込み工程の重要な部分を担っています。Webサイトの所有者は、 WebホストのDNSを使用するのではなく、迅速かつ確実に結果（「resolve」）を提供するDNSサービスを選ぶべきです。
• キャッシング：Webサイトのコンテンツが要求する人の近くにあればあるほど、より速く受け取ることができます。Webサイトの所有者は、コンテンツ配信ネットワーク（CDN）を利用して、世界中の多くの場所でWebコンテンツをキャッシュする必要があります。こうすることで、ユーザーのリクエストは、Webサイトの配信元サーバーに到達するために、何百マイルも何千マイルも（多くの自律ネットワークを横断して）移動する必要がなくなります。
• サイバーセキュリティ：DDoS攻撃、悪意のあるボット、その他のサイバー攻撃により、Web サイトのパフォーマンスが低下させられる恐れがあります。このトピックはあまりに広範囲にわたるため、ここで詳しく取り上げることはできませんが、Webサイトの所有者は、正当なトラフィックを減速させることなく悪意のあるトラフィックをフィルタリングする、Webアプリケーションセキュリティプロバイダーを選ぶべきです。

CloudflareがWebのパフォーマンスを向上させる方法

Cloudflareは、インターネットセキュリティとパフォーマンスのためのグローバルプラットフォームです。このプラットフォームは、どのような規模や複雑さのWebサイトも、330都市のグローバルネットワークに接続することで、パフォーマンスを向上させることができます。

Cloudflareは、個人のWebサイトや中小企業向けに、数分で有効にできる、重要なWebサイトのパフォーマンス強化が自動的に含まれる無料と低価格プランを提供しています：

• 高性能DNSサービス
• CDN
• イメージの最適化
• モバイルの最適化
• DDoS攻撃や一般的な悪意のあるボットからの保護

また、Cloudflarでは、大企業向けにあらゆる種類Webアプリケーションやインフラで動作するEnterpriseグレードのパフォーマンスサービスも提供しています。