ウェブサイトのパフォーマンス最適化手法

ウェブサイトのパフォーマンス最適化テクニック：パフォーマンスを向上させる9つのヒント

ウェブサイトのパフォーマンス最適化とは、訪問者にとってウェブサイトの表示速度が速く見えるようにするための変更を行うプロセスです。JavaScriptの最適化から応答速度の向上まで、ウェブサイトのレスポンス性を向上させるあらゆる要素が含まれます。表示速度が遅いと訪問者の離脱率が高くなり、検索エンジンのランキングにも悪影響を及ぼします。

Googleによると、モバイルサイトの読み込みに3秒以上かかると、訪問者の53%が離脱する。 Google PageSpeed Insights（PSI） モバイル端末とデスクトップ端末におけるページのユーザーエクスペリエンスに関するレポートを作成し、改善のための提案を提供します。 90点以上のスコア 検索エンジンのランキングを最適化する上で良いと考えられています。 

ウェブサイトのパフォーマンス最適化は、決して難解なものではありません。それは、具体的で十分に理解されている一連の手法であり、努力を惜しまないチームであれば、そのほとんどは容易に習得可能です。このガイドでは、CDNの設定からデータベースのチューニング、トラフィックが通過するインターネット経路全体の監視まで、最も効果的な9つのアプローチを解説します。

ウェブサイトのパフォーマンスに影響を与える要因

ウェブサイトの読み込み速度は、いくつかの要因によって左右されます。これらの要因を理解することで、適切な最適化手法を選択しやすくなります。

因子	影響
画像とファイルサイズ	ファイルサイズが大きいほど、またページに読み込む画像が多いほど、ブラウザでの読み込みに時間がかかります。
ファイル数	ページに多数のファイルが含まれている場合、ブラウザが転送するデータ総量が増加し、結果として読み込み速度が低下します。
ファイルの種類	ファイルの種類によっては、開くのにサードパーティ製のソフトウェアが必要となる場合があり、パフォーマンスに影響を与える可能性があります。
ホスティングサービス	質の低いホスティングサービスや共有ホスティングサービスを利用すると、サーバーの初期応答時間が長くなり、結果としてウェブサイトの読み込み時間も長くなります。
ソフトウェアコード	構造が不十分なコードや未使用のコードは、パフォーマンスに大きな影響を与える可能性があります。圧縮されていないJavaScriptファイルやCSSファイルは、よくある問題です。
プラグイン	多くのプラグインはウェブサイトに機能を追加するのに役立ちますが、プラグインを過剰に使用するとウェブサイトの読み込み時間が長くなります。
交通量	ウェブサイトへのアクセスが急増した場合、ホスティングプロバイダーが提供する帯域幅が不足していると、サイトの速度が低下する可能性があります。
ブラウザの互換性	ブラウザによってウェブサイトのコードの解釈や表示方法が異なるため、パフォーマンスや機能にばらつきが生じる。
ネットワーク待ち時間	ユーザーとウェブサイト間の通信経路は、複数のインターネットホスティングプロバイダーを経由します。経路上のどこかで速度が低下すると、ユーザーエクスペリエンスが低下する可能性があります。

ウェブサイトに影響を与える要因は他にもいくつかありますが、ここでは挙げていません。これらの要因とウェブサイトの速度への影響を特定する最善の方法は、次のようなツールを使用してサイトテストを実施することです。 WebPageTest .

この記事では、Largest Contentful Paint (LCP) や First Contentful Paint (FCP) といった Core Web Vital シグナルについて言及します。これらの概念に馴染みがない場合は、以下の記事を読んで学習してください。 この無料ガイド. 

ウェブサイトのパフォーマンス最適化における主要な手法の概要

ウェブサイトの速度テストが完了したら、次は最適化に取り掛かりましょう。以下に、主要な最適化手法をまとめました。

ウェブサイトのパフォーマンス最適化技術	詳細説明
コンテンツ配信ネットワークを使用する	CDNは、エンドユーザーの所在地に地理的に近いキャッシュノードのグローバルネットワークからコンテンツを配信することで、ページの読み込み時間を短縮します。
ウェブサイトの画像を最適化	画質を損なわずに画像のサイズを小さくするには、画像を圧縮してください。また、大きな画像を遅延読み込みすることもできます（後述）。
ウェブサイトのコードを最適化する	リソース消費量を削減し、実行時間を短縮する。
モバイルユーザーを一流市民として扱う	モバイルファーストのウェブサイトを設計するか、モバイルユーザー向けにモバイル最適化版を別途用意することを検討してください。AMPを使用すれば、ページの表示速度を向上させることもできます。
最大コンテンツペイント（LCP）スコアを向上させる	ウェブサイト訪問者が目にする最大の画像またはテキストブロックであるLCPを最適化しましょう。
ウェブサイトのホスティングを最適化する	ウェブサイトのホスティングの質は重要です。予算に余裕があれば、共有ホスティングではなく専用ホスティングサービスを利用することをお勧めします。
CMSデータベースを最適化する	サーバー応答時間を改善するために、CMS（WordPressなどのコンテンツ管理システム）のデータベースクエリを調整してください。
プリローダーやアニメーションは避けてください。	ウェブサイトにプリローダーを使用しないでください。プリローダーはファーストコンテンツペイント（FCP）をブロックし、検索エンジンがページをレンダリングできなくなるため、ユーザーエクスペリエンスが低下します。
ウェブサイトへのトランザクションの全経路に注意してください	フロントエンドおよびバックエンドサービス以外の要素、例えばドメインネームサービス（DNS）やインターネットパフォーマンスなども、ユーザーエクスペリエンスに影響を与える。

記事の残りの部分では、上記で述べた手法について詳しく解説します。

#1 コンテンツ配信ネットワークを利用する

コンテンツ配信ネットワーク（CDN）とは、ウェブサーバーとエンドユーザーの間に地理的に分散配置されたサーバー群のことです。これらのサーバーは、コンテンツのコピーを複数の場所に保存します。ユーザーがサイトにアクセスすると、CDNはユーザーの物理的な場所に最も近いキャッシュを選択してコンテンツを配信します。

例えば、ウェブサイトが北米のサーバーでホストされていて、インドのユーザーがアクセスしようとすると、オリジンサーバーがユーザーの物理的な場所から遠いため、読み込み時間が長くなります。一方、インドにCDNを設置すれば、コンテンツをはるかに高速に配信できます。 

ページ表示速度以外にも、CDNを利用するメリットは他にもいくつかあります。

• セキュリティ： CDNは、機密データや情報を悪意のあるボットやユーザーから保護するために、安全なシステムを経由してトラフィックをルーティングすることができます。
• 帯域幅を削減する： CDNはキャッシュされたコンテンツを配信するため、オリジンサーバーは同じコンテンツを繰り返し配信する必要がなく、ホスティングコストを削減できます。
• グローバルリーチ： CDNを利用することで、ホスティングプロバイダーのサーバーから地理的に離れた場所にいる海外ユーザーにも、コンテンツをより迅速に配信できます。 
• DDoS保護： CDNは、ウェブサイトを一時的に利用不能にするのではなく、トラフィックを他のサーバーにリダイレクトすることで、DDoS攻撃を軽減することができる。
• コスト削減： CDNは伝送コストを大幅に削減し、グローバルなコンテンツ配信をより手頃な価格で実現します。
• トラフィック管理： CDNは（ユーザーとウェブサイトのホスティングサーバーの間に位置することで）トラフィックの急増を処理し、オリジンサーバーへのピーク時の負荷を軽減します。

例えば、ウェブサイトにCloudflareがインストールされている場合、高度な機能を利用してキャッシュを最大限に活用できます。JavaScriptとCSSの圧縮、Cloudflareフォントの使用などは、Cloudflareが提供する優れた機能の一部です。 

それを行う方法は次のとおりです：

Cloudflareメニューの「速度」＞「最適化」をクリックしてください。

コンテンツ最適化をクリックすると、JavaScriptの圧縮、Cloudflareフォント、Rocket Loader、圧縮などのオプションが表示されます。これらの設定を調整することで、ウェブサイトの速度を向上させることができます。ただし、機能を有効にするたびに、必ずサイトの動作テストを行ってください。

#2 画像の最適化

画像はウェブサイトをより魅力的で目を引くものにする一方で、特に高解像度の画像は読み込み速度を低下させる可能性があります。ウェブサイトの読み込み速度を改善するには、より小さなサイズのレスポンシブ画像を使用することを検討してください。

サードパーティのツール

画像をブラウザで読みやすいファイル形式に変換することで、画質を最適化できます。WEBPは最も広くサポートされているフォーマットの一つで、画質を損なうことなく最高の圧縮率を実現します。以下に、画像の最適化と圧縮に役立つおすすめウェブサイトをいくつかご紹介します。

• tinypng.com
• compress-or-die.com
• webpconverter.com
• cloudconvert.com

レイジーローディング

遅延読み込みとは、他のページ要素が読み込まれた後、または訪問者がスクロールしてブラウザのビューポートで該当画像を表示する必要のあるセクションに到達した後にのみ画像を読み込む手法です。「即時読み込み」とは異なり、遅延読み込みでは、ブラウザのビューポートでアクティブな画面を描画するために大きな画像が必要ない場合、ページの読み込み速度が向上します。

どの CMS でも、画像を遅延ロードするオプションがあります。また、次の値を持つ loading 属性を追加することもできます。 「怠惰」 ブラウザは遅延モードで読み込む画像を認識します。 W3Schoolsのガイド 遅延読み込みについてもっと詳しく知りたい場合は、こちらをご覧ください。 

#3 ウェブサイトのコードを最適化する

ウェブサイトのコードを最適化することで、パフォーマンスを向上させることができます。JavaScriptとCSSは、ウェブサイトの速度低下の主な原因の一つです。ウェブサイトの読み込み時間を改善するために、JSファイルとCSSファイルを圧縮・結合することを検討してください。

のようなプラグイン WPロケット (NAIST) と 10ウェブ JavaScriptファイルとCSSファイルを結合して、コードを簡単に圧縮できます。インストールするだけで、数回クリックするだけでウェブサイトの容量を削減できます。 

非同期および遅延実行のJavaScript

asyncとdeferはどちらも、ページのレンダリングを妨げることなくJavaScriptの読み込みを最適化するHTML属性です。ただし、実行戦略は異なります。

非同期属性:

• スクリプトを低リソース優先度で並列に取得します
• ダウンロード完了後すぐにスクリプトを実行します。
• スクリプト実行のため、一時的にDOM構築を中断する場合があります。
• スクリプトは「最初にダウンロードされ、最初に実行される」方式で実行されます。

属性の遅延:

• また、低リソース優先度でスクリプトを並列取得します。
• DOM解析がほぼ完了するまでスクリプトの実行を延期します。
• 実行中は元のスクリプト順序を維持します
• ブラウザがDOMContentLoadedイベントをトリガーする直前に発生します。

要するに、asyncは速度と独立した実行を優先するのに対し、deferはDOMの準備状況に合わせてスクリプトが順序よく実行されることを保証する。

可能な場合はプラグインを組み合わせましょう

プラグインは、ウェブサイトに独自の機能を追加するための近道のようなものです。テーマとの互換性、品質、使用状況によっては、プラグインはウェブサイトにプラスにもマイナスにもなり得ます。ウェブサイトの速度に影響を与えず、テーマと調和する、軽量で適切にコーディングされたプラグインを使用する必要があります。

最も重要なのは、プラグインを組み合わせることで、ほとんどのプラグインがJavaScriptベースであるため、HTTPリクエストが削減されることです。たとえば、画像を圧縮する手順とWEBPに変換する手順を別々に行うために、2つの異なるプラグインを使用する必要はありません。代わりに、次のような単一のプラグインを使用できます。 ライトスピードキャッシュ 画像を圧縮・変換するプラグインを使用してください。プラグインは常に最新の状態に保ち、使用していないものは削除してください。

軽量テーマを使用する

最新のテーマの多くは軽量で、完全なカスタマイズ機能を提供しています。しかし、競争の激化に伴い、一部のテーマには不要な機能を追加するためにカスタムコードが大量に詰め込まれています。コードが増えるとウェブページの全体サイズが大きくなり、スクリプト、スタイルシート、画像などのアセットも増えるため、HTTPリクエスト数が増加します。これらの要因はウェブサイトのパフォーマンスを低下させる可能性があります。そのため、軽量なテーマを頻繁に更新して、できるだけ高速な状態を維持することをお勧めします。

#4 モバイルユーザーを一流市民として扱う

ある研究によると、 世界のモバイルインターネットユーザー数は5.4億人ユーザーの80%はモバイル端末でウェブサイトにアクセスしている。 

多くの開発者はデスクトップ端末向けにテーマを作成し、後からモバイル向けに改良するという手法をとっています。しかし、ウェブサイトのデザインはモバイルファーストで設計することを検討しましょう。モバイル版を別途作成することも可能です。Googleはこの問題の重要性を認識し、2016年には検索エンジンでモバイルファーストインデックスを開始しました。

もう一つの解決策は、高速読み込みのモバイルウェブページを作成するためのオープンソースフレームワークであるAMP（Accelerated Mobile Pages）です。Googleは2016年にApple NewsやFacebook Instant Articlesに対抗するためにAMPを初めて採用しました。 

以下に、AMPを使用する際のメリットとデメリットを示します。

メリット	デメリット
ページの読み込みはほぼ瞬時です。	開発者はAMPに精通する必要がある。
モバイル端末でのユーザーエクスペリエンスを向上させます。	ページをデザインする際の選択肢はあまり多くありません。
GoogleやBingなど、ほぼすべての主要プラットフォームでサポートされています。	AMPでは、1ページにつき1つの広告しか掲載できません。

ウェブサイトがWordPressでホストされている場合は、テーマがAMPをサポートしているかどうかを確認する必要があります。すべてのテーマがAMPをサポートしているわけではないためです。

#5 ページのLCPを解く

最大のContentful Paint（LCP） ページ上で最大の要素であり、3 つの重要な要素の 1 つです。 コアWebバイタルGoogleは、LCPスコアが0～2.5秒以内であれば良好だと考えている。

LCPスコアに悪影響を与える主な要因は3つあります。

• レンダリングをブロックするJavaScriptとCSS。ブラウザがレンダリング前にダウンロード、解析、実行する必要がある。
• オリジンサーバーの応答時間が遅い
• 高解像度画像やカスタムGoogleフォントなど、リソースの読み込み時間が長い。

解決するには、サイトを監査して LCP を特定する必要があります。 WebPageTest これを実行するためのツール。 

以下に、典型的な解決策をいくつか示します。 

LCP	解決策
画像	画像のサイズを変更してレスポンシブにします。サードパーティツールを使用して画像を圧縮します。PNG および JPEG 画像を WebP などのブラウザフレンドリーな拡張子に変換します。
テキスト	テキストのサイズを小さくする。サンセリフ体やArialなどのフォントの使用を検討する。フォントの入れ替えプロパティを使用する。

#6 ウェブサイトのホスティングを最適化する

ホスティングには3つの種類があります

• 共有ホスティング
• 専用サーバー
• 仮想プライベートサーバ（VPS）

共有ホスティングは、ウェブサイトをオンラインにする最も手頃な方法です。しかし、複数のドメインが1台のサーバー上に存在するため、他のドメインでトラフィックが急増すると、共有ホスティングではサイトの速度が低下する可能性があります。これは「ノイジーネイバー症候群」と呼ばれる現象です。また、容量に制限があり、トラフィックが増加するにつれてパフォーマンスが低下します。 

ウェブサイトへの訪問者が少ない場合は、共有ホスティングと Cloudflare の統合を組み合わせてサイトを稼働させることができます。Cloudflare のさまざまな機能を使用できます。常時オンライン最大限に活用するために。 

VPSは、中規模ウェブサイトにとって最適なホスティングソリューションです。 アマゾン・ライトセイル これは、中小企業向けの低価格なクラウドホスティングソリューションの一例です。

#7 データベース最適化

データベースの最適化には、クエリの最適化が含まれます。データベースのパフォーマンスを定期的に監視してください。キャッシュは、従来のストレージよりも効率的にデータを一時的に保存します。これにより、応答時間の短縮、レイテンシの低減、コンテンツのパフォーマンス向上に役立ちます。 

WordPress を使用している場合は、次のようなプラグインを使用してください。 LiteSpeedキャッシュ (NAIST) と WP-ロケット 一時ファイル、下書き、および改訂版を削除して、データベースのサイズを削減します。投稿を公開する前に保存するたびに改訂版が作成されます。投稿を執筆中に10回保存すると、10個の不要な改訂版が作成されます。これらの改訂版はデータベースに保存され、データベースのサイズが増加します。 

ほとんどのホスティングプロバイダーは、データベースを自動的に最適化する無料機能を提供しており、これによりコンテンツのパフォーマンスも向上させることができます。 

#8 ローダーとアニメーションはできるだけ避ける

プリローダーを使用している場合、ページの FCP がブロックされる可能性があります。FCP (最初の満足のいくペイント）は、DOM からの最初のコンテンツが表示される時点を測定するもう 1 つの重要なパフォーマンス メトリックです。FCP は、画像、テキスト、SVG、または要素。良好なユーザーエクスペリエンスを提供するためには、サイトのファーストコンテンツフルペイントは1.8秒以下であるべきです。

GoogleのPageSpeed Insightsなどのツールは、ウェブサイトでプリローダーを使用するとエラーを表示します。これは、ランキングスコアの計算にCore Web Vitalsシグナルが使用されるため、Googleのランキングに影響を与える可能性があります。フェードインやフェードアウトなどのアニメーションを多用することも、ウェブサイトの速度低下につながる可能性があります。 

#9 トランザクションパス全体を監視する

サーバーとコードの最適化は、パフォーマンス問題のほんの一部にしか対処していません。インフラストラクチャとユーザーのブラウザの間には、DNS解決、ISPルーティング、インターネットエクスチェンジポイント、CDNエッジノードなど、ネットワークパス全体が存在します。このパス上のどの段階でも問題が発生すると、オリジンサーバーのパフォーマンスが良好であっても、ユーザーエクスペリエンスが低下する可能性があります。

DNSパフォーマンス

DNS解決は、あらゆるページ読み込みにおける最初のステップです。DNSプロバイダーの応答速度が遅かったり、信頼性が低かったりすると、ブラウザがサーバーへの接続を開始する前に遅延が発生します。DNS応答時間を監視し、グローバルなエニーキャストインフラストラクチャを備えた高性能DNSプロバイダーの利用を検討してください。

インターネットサービスプロバイダのルーティング

サーバーとユーザー間のデータ経路は直線ではありません。ISPはルーティングの決定を行い、トラフィックを最適ではない経路に送ることで遅延が発生する場合があります。これらのルーティングの問題は直接制御できませんが、ネットワーク監視によって確認できます。

インターネットスタック

その インターネットスタック これは、アプリケーションとエンドユーザーの間にあるサービスとインフラストラクチャの全体像を説明するものです。具体的には、DNSプロバイダー、CDNノード、ISP、クラウドプロバイダー、サードパーティサービス（分析、広告、チャットウィジェット）、そしてブラウザ自体が含まれます。

スタック内の各レイヤーは、遅延、エラー、または障害を引き起こす可能性があります。読み込みの遅いサードパーティ製JavaScriptウィジェットは、ページのレンダリングを妨げる可能性があります。キャッシュの設定が誤っているCDNエッジノードは、古いコンテンツを提供する可能性があります。ISPのルーティング変更は、特定の地域のユーザーに200ミリ秒の遅延を追加する可能性があります。

インターネットパフォーマンス監視

インターネット全体の経路を監視するには、専用のツールが必要です。従来のインフラストラクチャ監視では、サーバーが正常かどうかはわかりますが、インフラストラクチャとユーザーの間で何が起こっているかを把握することはできません。

インターネットパフォーマンス監視 (IPM) はトランザクションパス全体に可視性を拡張します。DNS 解決、ネットワークルーティング、サードパーティの依存関係、エッジ配信を追跡し、ファイアウォールの外側に存在する問題を特定して解決するためのデータを提供します。LM Internet Performance Monitoring は、 キャッチポイント、 バックボーン、ブロードバンド、クラウド、ラストマイルネットワーク全体に配置されたグローバルな監視エージェントネットワークを通じて、このような可視性を提供します。このアプローチにより、ルーティング異常、ISPの問題、DNS障害、サードパーティサービスの劣化などがユーザーに大規模に影響を及ぼする前、それらを検知できます。

のようなツール インターネットスタックマップ インフラストラクチャからエンドユーザーまでの経路上のすべてのサービスと依存関係を視覚的に表現することで、パフォーマンスが低下する箇所を特定できます。

ウェブパフォーマンス監視の種類

ウェブパフォーマンス監視には、大きく分けて2つの種類があります。

• 合成モニタリング 
• リアルユーザーモニタリング（RUM）

合成モニタリング スクリプトを使用してエンドユーザーのトランザクションをエミュレートし、さまざまなインターネットおよびワイヤレスサービスプロバイダーのネットワーク上の複数のグローバルテストポイントからパフォーマンスを検証および測定します。これにより、ウェブサイトの可用性と稼働時間、ユーザー向けの問題、およびウェブサイトのパフォーマンスに関する問題を特定して修正することができます。

合成モニタリングは、次のような場合に役立ちます。 

• ウェブサイトのパフォーマンスを毎日監視する
• パフォーマンス関連の問題を特定し、解決する
• エンドユーザーが実際に経験する前に、ユーザーが直面する可能性のある問題を発見する

ラム ウェブサイトやアプリケーションにアクセスする実際のユーザーからのパフォーマンスデータを追跡します。スクリプトを使用してページデータを測定および読み込み、ユーザーのブラウザからパフォーマンス指標を収集します。 

両方のタイプのモニタリングを組み合わせることで、ユーザーエクスペリエンスの全体像を把握することができます。

結論

ウェブサイトのパフォーマンス最適化は、一度きりのプロジェクトではありません。インフラストラクチャ、コード、コンテンツ、そしてサーバーとユーザー間のネットワークパスなど、あらゆる要素に影響を及ぼす継続的な取り組みです。ここで紹介する9つのテクニックは、CDNの設定や画像最適化から、データベースのチューニング、フルパス監視まで、それぞれ特定のパフォーマンス要因を対象としています。これらのテクニックを個別に適用することで、目に見える改善効果が得られます。そして、組み合わせて適用することで、相乗効果を発揮します。

ウェブサイトのパフォーマンスにおいて最も見落とされがちな要素は、ファイアウォールの外側で何が起こっているかということです。サーバーの応答時間を100ミリ秒未満に最適化しても、DNSプロバイダーの遅延、ISPによるトラフィックの混雑経路、またはサードパーティのスクリプトによるレンダリングのブロックなどがあれば、ユーザーエクスペリエンスは依然として遅くなります。インフラストラクチャとユーザー間のインターネット層を含むトランザクションパス全体を監視することで、チームは内部テストでは検出されないパフォーマンスに関する苦情を解決するためのデータを得ることができます。

まずは、最大のボトルネックを解消する手法から始めましょう。Core Web Vitalsのデータを使って、不足している部分を特定します。次に、インフラストラクチャとユーザーが利用するインターネット経路の両方を網羅する監視体制を構築します。