ウェブサイトのパフォーマンスを最適化する方法

06/12 2019
ウェブサイトのパフォーマンスを最適化する方法

インターネットを見回せば、人々が Web サイトの読み込みを待つのに興味を失うまでにどれだけの時間を費やすことができるかについて引用された統計がたくさん見つかります (その場合、常に Web ホスティング プロバイダーを責める必要はありません)。 

固定ブロードバンド接続を使用しているユーザーは、Web サイトがほぼ瞬時に表示されることを期待しており、モバイル ユーザーであっても無限の忍耐力を持っているわけではありません。 

調査によると、ページの最適な読み込み時間は 3 秒ですが、大部分のサイトはその 2 倍近く、あるいはそれ以上です。また、10 秒を大幅に超えると、大多数の人がそのページを放棄して他の場所に移動する可能性があります。 

Web ページがブラウザに表示されるまでにかかる時間は、サーバーと相手側のクライアント デバイスの両方に分割される要因によって異なります。

Web デザイナーの制御を超えた問題があるため、すべてのユーザーの速度を上げることは不可能ですが、サイトを可能な限り効率的にして、大部分の訪問者のパフォーマンスを向上させるのが現実的です。 

速度の向上はさまざまな方法で実現できますが、サイトのパフォーマンスを向上させるには 3 つの中心的な柱があります。これらは、ホスティングの強化、サイトの最適化、およびプラットフォーム固有の考慮事項です。

ホスティングの重要性

ホスティングの重要性

サイトが Web ホスティングに費やす金額は、通常、その日に予想される訪問者数に比例し、各訪問者の滞在時間と閲覧ページ数が考慮されます。

これが、セキュリティ上の懸念と並んで、サイトを社内でホストする企業が比較的少ない主な理由です。 

通常、Web ホスティングは、特定のハードウェアが Web サイトに割り当てられるのではなく、仮想化を通じて他のサイトと共有されるという点で「仮想」です。 

このソリューションの利点は、ホスティング契約でこの柔軟性が認められていれば、需要が高いときにより多くのリソースをサイトに簡単に割り当てることができることです。 

重要なのは、受信すると予想されるトラフィックを決定し、サービスを適切に向上させることです。

急速に成長しているサイトがあるものの、ホスティング レベルが原因で、訪問者が殺到するとサイトが応答しなくなる場合、プロジェクト全体が損なわれる可能性があります。したがって、小規模から始めて、サイトが成熟したときに規模を拡大することを計画します。 

サイトの最適化

Web サイトのパフォーマンスは、その構築方法と使用するソフトウェア テクノロジに大きく依存します。 

プロトタイプ サイトを作成したら、最初に実行する必要がある手順の 1 つは、各ページの読み込みにかかる時間をスコア化することです。ページのパフォーマンスを測定するために利用できるツールは多数あり、そのうちのいくつかはタイミングを分析して、特定のページで最大の遅延の原因を正確に特定します。 

このテストは、1 台の PC で 1 回だけ実行すればよいというものではありません。訪問者はさまざまなブロードバンド接続を備えたさまざまな場所から来ており、さまざまな種類のデバイスを使用しているからです。

モバイル プラットフォームを Wi-Fi 接続とセルラー接続の両方でテストすることが特に重要です。そして、理想的な世界では、地理的に離れた場所から結果を取得することも貴重な情報となります。 

このパフォーマンス データを照合したら、サイトに戻り、ユーザー エクスペリエンスを向上させるためにどのような変更を加えることができるかを確認します。 

ここでは、簡単に対処できる、サイトの速度を低下させる上位 7 つの問題のリストを示します。

1. マルチソースページ

ページが広告など、他の場所から取得した要素で構成されている場合、速度に大きな影響を与える可能性があります。ページは、サイト外部からの要素がどれだけ速く提供されるかに依存するようになるため、パフォーマンスの問題が複雑になります。

繰り返し読み込みに時間がかかりすぎるページがある場合は、速度を低下させている原因を特定し、それを削除してください。

2. ウィジェットとプラグイン

これらのコンポーネントが多すぎると、マルチソース ページとほぼ同じ問題が発生しますが、特に WordPress サイトに影響を及ぼす問題です。あらゆる種類のカレンダー、アニメーション化されたボタン、時計などをページに事前にロードしたいという誘惑は強いですが、抵抗する必要があります。 

これらの機能を実行するにはサーバー側のコードとクライアント側のコードが必要であり、多くの場合、読み込みが完了する前に他のページ要素の表示が一時停止されます。

グラフィックスのスケーリング

3. グラフィックのスケーリング

ウェブサイトのグラフィックは、フル品質のプレゼンテーションでクリックできるようにしたい写真でない限り、拡大縮小しないでください。 

拡大するとブロック状になったり、圧縮アーティファクトが現れたりするため、拡大することも好ましくありません。 

グラフィックスを表示すべきサイズと同じサイズにすると、サーバーとクライアントのブラウザーの負荷が軽減され、ユーザーが必要以上に大きなグラフィックスをダウンロードすることがなくなります。

4. 互換性のないメディア

かつて PC 上でよく使われていましたが、現在は事実上廃止されているファイル タイプが多数存在します。モバイル ユーザーはアクセスできません。また、古いブラウザ バージョンでプラグインを実行していない限り、ほとんどのデスクトップ ユーザーにも問題が発生します。 

原則として、Google Chrome または Microsoft Edge でデフォルトで機能しないビデオ、画像、または音楽形式をホストしないでください。Web サイトに要素が欠けていたり、奇妙なエラーが発生したりすると、ユーザーはイライラします。

バックエンドコード

5. バックエンドコード

「ほんの短いコード行」で Web サイトに追加できる優れた機能を何度見たことがありますか? これらはたくさんあり、便利です。ただし、コード スニペットに何か役立つことをさせるために、サーバー上で実行されているはるかに大きなコード部分にとって、頭痛の種となることがよくあります。 

これらのコードが多すぎると、すべてのページにそのコードを配置するため、サーバーがサイト ページを提供するのではなく、これらのリクエストを処理しようとして行き詰まってしまいます。 

これらの原因の最も一般的な原因は、皮肉なことに、分析とフォーム処理です。ただし、他のタスクに取り組むコードも、全体的なパフォーマンスに悪影響を与える可能性があります。

6. モバイルでの間違い

モバイル ユーザーに影響を与える典型的な間違いは、デスクトップ向けのホームページのほとんどが携帯電話やタブレットで表示された後にのみ、サイトのモバイル バージョンへのリダイレクトが行われることです。 

その結果、多くの場合、ブラウザーがモバイル サイトに移動するまでに長い待ち時間が発生し、その後、モバイル サイトが表示されるまでにさらに遅延が発生します。 

統計的には、モバイル プラットフォームは Web ブラウジングの点で従来のコンピューターよりもわずかに遅れていますが、モバイル サーフィンは急速に拡大しており、間もなくほとんどのユーザーが大部分のサイトにアクセスする主要な方法になるでしょう。 

したがって、あらゆるサイトのモバイル版に注意を払うことは、デスクトップ版と同等か、それ以上に重要です。 

モバイル ユーザーは、有線ブロードバンド ユーザーが期待するような安定した転送速度が得られずに、3G または 4G データ サービスを使用して接続することが多いため、Web ページの迅速な配信の重要性はさらに大きくなります。

7. 圧縮を使用する

サイトを構成するファイルのサイズを小さくし、訪問者がより早くダウンロードできるようにする方法は数多くあります。 

ファイル サイズを 70% も圧縮できる Gzip のようなグローバルなサーバー側テクノロジがありますが、JPG ファイルに適切なファイル タイプと圧縮レベルを選択するだけでもパフォーマンスの向上をもたらすことができます。 

Gzip にはサーバーのアクティベーションが必要ですが、このサイト(新しいタブで開きます)を使用して、サーバー上で Gzip がアクティブであるかどうかを確認できます。

圧縮を使用する場合の唯一の注意点は、システムに圧縮したくないファイルやフォルダーを特定する必要があることです。すでに圧縮されているビデオ ファイルや圧縮ボリューム (ZIP、RAR、LZH) はそれ以上圧縮できないためです。