遅いウェブサイトを修正する方法: 読み込み時間を短縮するための 13 の実行可能なステップ

遅い Web サイトを好む人はいません。 ページの読み込み時間が遅いと、潜在的な訪問者が遠ざかり、Web サイトの検索結果のランクが下がる可能性があります。

全体として、これは Web サイトにアクセスする人が減り、Web サイトにアクセスするユーザーのユーザー エクスペリエンスが低下することを意味します。

これは間違いなくビジネスにとって悪影響です。

幸いなことに、Web サイトの現在のパフォーマンスに不満がある場合でも、Web サイトの速度を上げるためにできることはたくさんあります。

以下に、望む読み込み時間を短縮するために今日から始められる13 の実行可能な手順を示します。

ただし、開始する前に、 Web サイトがどの程度遅いかを正確にベンチマークすることが重要です。 これにより、問題がどれほど大きいかを把握し、修正の効果を測定できるようになります。

遅い Web サイトの診断に役立つツール

Web サイトの速度を正確に測定するのに役立つ便利なオンライン ツールが多数あります。

これらのツールは、何が速度を低下させているのかを正確に特定し、速度を上げるために何ができるかを提案するのにも非常に役立ちます。

私のお気に入りの Web サイト速度レポート ツールを 2 つ紹介します。

Google ページ速度に関する洞察

Google のこの無料ツールは、あらゆる URL をチェックし、サイトのパフォーマンス テストを実行します。 デスクトップとモバイル プラットフォームの両方でサイトがどのように動作するかについて、異なる結果が得られます。

この記事で説明する領域の多くをカバーし、サイトの速度低下の具体的な原因についての提案を提供します。

ただし、このツールは非常に攻撃的で、場合によっては非現実的であるように見えるため、この点に留意してください。

Pingdom ウェブサイト速度テスト

Pingdom には、世界中の複数の場所からサイトをテストできる、優れた速度テスト ソリューションもいくつかあります (これが、CDN を使用することをお勧めする理由の 1 つです。詳細は後述します)。

また、速度を向上させるための実用的なソリューションも多数提供します。

遅いウェブサイトを修正する 13 の方法

1. より高速な Web ホスティングプロバイダーを使用する

私の経験では、Web ホスティングが遅いことが、おそらく Web サイトが遅くなる最大の要因です。 したがって、より高速な Web ホスティング プロバイダーに変更すると、通常、Web サイトの速度が最大に向上します。

もちろん、プロバイダーの変更は、このリストにあるすべての手順の中で最も重要で、最も費用がかかるものでもあります。 したがって、最初に残りの手順をぜひ試してみてください。確実に速度が向上することがわかります。

しかし、少なくとも私にとって、速度が最大に向上するのは、「思い切って」ウェブホスティングをアップグレードしたときです。

最速の Web ホスティング プロバイダーを選択するには、次の手順を実行します。

1. Web サイトのニーズを決定する:受信するトラフィックの量、必要なストレージ容量、必要なセキュリティのレベルなど、Web サイトのニーズを特定します。
2. ホスティング プロバイダーを比較する: Web サイトのニーズに基づいてホスティング プロバイダーを調査し、比較します。 稼働時間、ページの読み込み速度、セキュリティ機能、カスタマー サポートなどの要素を考慮してください。
3. サーバーの場所を考慮する:対象ユーザーの近くにサーバーが配置されている Web ホスティング プロバイダーを選択します。 これにより、遅延が軽減され、Web サイトの速度が向上します。
4. サーバー リソースを確認する: CPU や RAM などのサーバー リソースを確認して、ホスティング プロバイダーが Web サイト上のトラフィックを処理できることを確認します。

2. 画像を最適化する

最適化されていない画像も、 Web サイトが遅くなる最大の原因の 1 つです。 そして幸運なことに、それらは最も簡単に修正できるものの 1 つでもあります。

「最適化されていない」とは、ファイル サイズが不必要に大きい画像を意味します。 つまり、各イメージ ファイルのキロバイト (KB) またはメガバイト (MB) の数が必要以上に大きくなります。

理想的には、Web サイト上のすべての画像を100 KB 未満に抑えるように努めています。 これは常に可能というわけではありませんが、目指すべきことです。

画像ファイルのサイズに影響を与える属性が 3 つあります (これらは最適化する必要があるものです)。

1. 画像のピクセル単位の寸法
2. 画像形式（JPEG、PNG、GIFなど）
3. その画像に適用される圧縮量

画像サイズの最適化

画像のサイズが大きくなるほど、ファイル サイズも大きくなります。 したがって、Web サイト上の画像の幅と高さが必要以上に大きくならないようにする必要があります。

これは、幅 2000 ピクセルの画像があり、最終的に Web サイトでは幅 700 ピクセルとして表示される場合、ページに表示される前に幅 700 ピクセルになるようにファイルを編集する必要があることを意味します。

これは、Photoshop や GIMP などのプログラムを使用して Web サイトにアップロードする前に、または Kraken.io や Compressor.io などの Web サイトを通じて行うことができます。 これらの Web サイトの多くは、Web サイトに画像をアップロードした後に画像のサイズを変更する WordPress プラグインも提供しています (WordPress を使用している場合)。

最適な画像フォーマットの選択

画像をどの形式で提供するかは、さまざまな種類の圧縮を適用することによってファイル サイズに影響します (下記を参照)。 画像の種類に応じて、より適した形式が異なります。

JPEG は写真に適しており、PNG は背景が透明な画像やエッジがシャープなイラストに適しています。 GIF は最近ではアニメーション画像にのみ実際に使用されています。

さらに優れた圧縮レベルを提供するWebP などの新しい画像形式もあります。 ただし、一部のブラウザ (Internet Explorer 11 など) は依然として WebP をサポートしていないため、使用方法には注意する必要があります。

次世代の画像形式がサポートされているかどうかを検出し、画像を自動的に変換してこの形式で提供するサービス (下記を参照) により、速度がさらに向上します。

画質を維持しながら圧縮を最大限に高める

一般的な画像形式はすべて、画像を圧縮してファイル サイズを削減します。 通常、圧縮の程度を選択できますが、圧縮率が高くなると画質が低下するというトレードオフがあります。

したがって、画質は許容できるが、ファイル サイズが大きすぎないバランスを見つける必要があります。

画像のサイズを変更する同じアプリケーションや Web サイトも画像を圧縮します。 小さな PNG は別のものです。 多くの場合、プレビューで品質を確認しながら、必要な圧縮レベルを選択できます。

3. 遅延読み込みを使用する

画像について言えば、誰も見ていない場合はロードする必要はありません。 それは単なる不必要なオーバーヘッドです。

遅延読み込みは、必要な場合にのみ画像やビデオを読み込むことで Web サイトのパフォーマンスを向上させるために使用される手法です。

これにより、ユーザーに表示されるコンテンツのみが読み込まれるため、Web サイトの読み込みにかかる時間を大幅に短縮できます。

遅延読み込みを実装するには、次の手順を実行します。

1. どの画像とビデオを遅延読み込みするかを特定します。これらには、スクロールしないと見えない範囲にある画像やビデオ、またはユーザーにすぐには表示されない画像やビデオが含まれる場合があります。
2. 遅延読み込みプラグインまたはスクリプトをインストールする: WordPress などの一般的なコンテンツ管理システムで利用できる、遅延読み込みを簡単に実装できるプラグイン (以下を参照) が多数あります。 プラグインを使用できない場合は、自分でコードを簡単に追加できます。
3. 遅延読み込みを構成する: Web サイトのニーズに基づいて、遅延読み込みプラグインまたはスクリプトの設定を構成します。 これには、どのタイプのコンテンツを遅延読み込みするか、画像の読み込みを開始するタイミングのしきい値などの設定が含まれる場合があります。
4. 遅延読み込みをテストする:画像とビデオが正しく読み込まれていること、および Web サイトのパフォーマンスに問題がないことを確認します。

4. キャッシュを有効にする

キャッシュを有効にすると、リソースを取得するためにブラウザーがサーバーに対して行う必要があるリクエストの数が減り、遅い Web サイトを大幅に高速化できます。

ユーザーが初めて Web サイトにアクセスすると、ブラウザーは HTML、CSS、JavaScript、画像などの必要なファイルをすべてダウンロードします。 ユーザーが Web サイトを再訪問すると、ブラウザーはこれらのファイルを再度ダウンロードするのではなく、キャッシュから取得できるため、ページの読み込み時間が短縮され、ユーザー エクスペリエンスが向上します。

キャッシュを有効にするには、次の手順を実行できます。

1. キャッシュ ヘッダーを有効にする: 「Expires」や「Cache-Control」などのキャッシュ ヘッダーは、静的ファイルをキャッシュに保存する期間をブラウザーに指示します。 これらのヘッダーを設定すると、ファイルをキャッシュする期間を制御できます。
2. 有効期限の設定:キャッシュ内の静的ファイルの有効期限を設定すると、ファイルの更新時にユーザーが確実に最新バージョンをダウンロードできるようになります。 これは、キャッシュ ヘッダーに「max-age」値を設定することで実行できます。

繰り返しになりますが、WordPress を使用している場合は、これらすべてを自動的に実行してくれるキャッシュ プラグインが多数あります (以下を参照)。 それ以外の場合は、使用する Web サーバーの種類に応じて、基本的な作業を自分で行うのが非常に簡単です。

5. コンテンツ配信ネットワーク (CDN) を使用する

コンテンツ配信ネットワーク (CDN) は、地理的に異なる地域にあるサーバーのネットワーク全体に Web サイトのコンテンツを分散することで、遅い Web サイトを大幅に高速化できます。

ユーザーが Web サイトのコンテンツをリクエストすると、CDN はユーザーに最も近いサーバーからコンテンツを提供するため、データの移動距離が短縮され、読み込み時間が短縮されます。

CDN を使用するには、次の手順を実行する必要があります。

1. CDN サービスにサインアップする: Cloudflare、Amazon CloudFront、Akamai など、多くの CDN プロバイダーが利用可能です。 必要な機能を提供し、予算内に収まるプロバイダーを選択してください。
2. CDN を構成する: CDN サービスにサインアップしたら、Web サイトで動作するように CDN サービスを構成する必要があります。 ほとんどの CDN サービスには、プロセスを支援するための簡単なステップバイステップ ガイドが用意されています。
3. ネームサーバーが CDN を指すようにします。最後に、ドメイン レジストラーにログインし、Web ホストを直接指すのではなく CDN サービスを指すようにネームサーバーを変更します。

6. ファイルを結合する

ファイルを結合すると、Web サイトで行われるHTTP リクエストの数が減り、読み込み時間に大きな違いが生じる可能性があります。

これは、Web ページが読み込まれるたびに、ブラウザーがサーバーに複数のリクエストを送信して、HTML、CSS、JavaScript、画像などの必要なリソースをすべて取得するためです。

これらのリクエストごとにオーバーヘッドと遅延が追加されるため、特に低速のインターネット接続では読み込み時間が遅くなる可能性があります。

したがって、HTTP リクエストを最小限に抑えるには、次のようないくつかの手順を実行できます。

1. コード ファイルを結合する:複数の CSS ファイルと JavaScript ファイルを 1 つのファイルに結合します。 これにより、必要なファイルをすべてダウンロードするためにブラウザが行う必要のあるリクエストの数が減少します。
2. 画像スプライトを使用する:複数の画像をスプライトと呼ばれる 1 つの画像に結合し、CSS を使用して個々の画像を表示します。 これにより、実行する必要がある画像リクエストの数が減ります。

画像スプライトの例。 画像ソース

WordPress を使用している場合は、コード ファイルを結合するプラグインがいくつかあります (以下を参照)。 Gulp、Grunt、Webpack などのツールを使用したり、単純に手動で実行したりすることもできます (コードをコピーして 1 つのマスター ファイルに貼り付ける)。 それ以外の場合は、開発者を雇う必要があるかもしれません。

7. JavaScript と CSS を最小限に抑える

Web サイト上の JavaScript と CSS を最小限に抑えると、ダウンロードする必要があるファイルのサイズが減り、遅い Web サイトを大幅に高速化できます。 これは、未使用のコードを削除し、ファイルを結合し、コードを縮小することで実現できます。

JavaScript と CSS を最小限にするには、次の手順を実行できます。

1. 使用されていないコードを削除する: JavaScript と CSS を最小限に抑える最も簡単な方法の 1 つは、Web サイトで使用されなくなったコードを削除することです。 これにより、ダウンロードする必要があるファイルのサイズを減らすことができます。
2. コードの縮小: HTML、CSS、および JavaScript ファイルを縮小すると、不要な空白、コメント、その他の重要でないコードが削除され、ファイル サイズとダウンロード時間が短縮されます。 これは、UglifyJS、YUI Compressor、Google Closure Compiler などのツールを使用して実現できます。

繰り返しになりますが、WordPress を使用している場合は、JavaScript と CSS を自動的に最小化するプラグインが多数あります (以下を参照)。

8. Gzip圧縮を有効にする

Gzip 圧縮は、サーバーからブラウザに送信されるファイルのサイズをさらに縮小するために使用されるもう 1 つの技術です。 この技術は、HTML、CSS、JavaScript ファイルなどのファイルを圧縮し、ファイル サイズを最大 70% 削減します。

これにより、ファイル サイズが小さいほどブラウザでより速くダウンロードできるため、Web サイトのパフォーマンスが大幅に向上します。

Gzip 圧縮を有効にするには、次の手順を実行します。

1. Gzip 圧縮が有効かどうかを確認する: GIDZipTest や Gift of Speed などのオンライン ツールを使用して、Web サイトがすでに Gzip 圧縮を使用しているかどうかを確認できます。
2. Gzip 圧縮を有効にする: Gzip 圧縮が有効になっていない場合は、コード スニペットを .htaccess ファイルまたはサーバー構成ファイルに追加することで有効にできます。 コード スニペットは、ファイルをブラウザに送信する前にファイルを圧縮するように Web サーバーに指示します。
3. Gzip 圧縮をテストする:ブラウザーに送信されるファイルのサイズをチェックし、Gzip 圧縮によりファイルが小さくなることを確認します。

いつものように、Web サイト上のファイルに Gzip 圧縮を自動的に適用する WordPress プラグインが多数あります (下記を参照)。

9. データベースを最適化する

Web サイトのデータベースには、Web サイトの機能に必要なすべてのデータが保存されます。 ただし、データベースが大きくなるにつれて、不要なデータで乱雑になり、Web サイトのパフォーマンスが低下する可能性があります。

データベースの最適化には、不要なデータの削除とテーブルのインデックス作成が含まれ、Web サイトのパフォーマンスが向上します。

Web サイトのデータベースを最適化するには、次の手順を実行できます。

1. データベースのバックアップ: Web サイトのデータベースに変更を加える前に、エラーや問題が発生した場合のデータ損失を避けるために、必ずデータベースをバックアップしてください。
2. 不要なデータを削除する:投稿のリビジョン、ゴミ箱に入れられた投稿、スパム コメントなどの不要なデータを特定して削除します。 これは、プラグインを使用するか、データベース クエリを実行することで実行できます。
3. インデックスの再構築:データベース テーブルのインデックスを再構築して、検索パフォーマンスを向上させます。 これは、プラグインを使用するか、データベース クエリを実行することで実行できます。
4. データベース テーブルの最適化:データベース テーブルを最適化して、適切なストレージ エンジンとテーブル構造が使用されていることを確認します。 これは、プラグインを使用するか、データベース クエリを実行することで実行できます。
5. キャッシュを使用する:キャッシュを使用すると、データベース クエリの数が減り、Web サイトのパフォーマンスが向上します。

データベースを適切に最適化するには、非常に複雑な作業が必要になる場合があります。 これは、MySQL データベースでこれを開始する方法に関する優れたステップバイステップ ガイドです。 ただし、より大きなプロジェクトには開発者を関与させる必要があるかもしれません。

10. 不要なプラグインを削除する

プラグインは Web サイトに幅広い機能を提供できますが、プラグインが多すぎると Web サイトのパフォーマンスが低下する可能性があります。 各プラグインには、読み込む必要がある独自のファイルとスクリプトのセットが付属しているため、Web サイトの読み込み時間が長くなる可能性があります。

不要なプラグインを削除すると、読み込む必要があるファイルやスクリプトの数が減り、Web サイトのパフォーマンスが向上します。

不要なプラグインを削除するには、次の手順を実行できます。

1. 未使用のプラグインを特定する:使用されておらず、Web サイトの機能に不要になったプラグインを特定します。
2. 使用していないプラグインを非アクティブ化して削除する: WordPress を使用している場合は、ダッシュボードから「プラグイン」セクションに移動し、「非アクティブ化」を選択してから「削除」を選択することで実行できます。 他の CMS にも同様の機能があります。
3. プラグインの機能を評価する:より軽量なソリューションに置き換えることができるプラグインがあるかどうか、または組み合わせることができるプラグインがあるかどうかを判断します。
4. プラグインを定期的に確認する: Web サイトで使用されているプラ​​グインを定期的に確認し、不要になったプラグインや Web サイトのパフォーマンスに影響を与えているプラ​​グインを削除します。

11. 広告の数を減らす

Web ページに広告が多すぎると、ページの読み込み時間が遅くなり、ユーザー エクスペリエンスがイライラする可能性があります。 これは、広告を挿入するスクリプトが非効率的である可能性があります。 あるいは、広告自体が適切に最適化されていない可能性があります。

ウェブサイト上の広告の数を減らすために実行できる手順をいくつか示します。

1. 広告のパフォーマンスを分析する: Web サイト上の広告のパフォーマンス データを調べて、大きな収益を生み出していない広告を特定します。 パフォーマンスの悪い広告を削除することを検討してください。
2. 各ページに適切な数の広告を使用する:広告が多すぎる、またはすでに他のコンテンツが多く含まれている特定のページでは、広告の数を減らすことを検討してください。
3. 広告の配置を最適化する:一般に、スクロールせずに見える範囲に配置された広告は視認性が高く、クリックスルー率も高くなります。 ただし、ユーザーエクスペリエンスに悪影響を与える可能性があるため、スクロールせずに見える範囲にあまりにも多くの広告を配置しないでください。
4. 煩わしい広告を削除する:ポップアップ広告や自動再生ビデオ広告など、煩わしい広告や煩わしい広告を削除します。 このようなタイプの広告は、ユーザー エクスペリエンスに悪影響を及ぼし、ページの読み込み時間を増加させる可能性があります。

12. 軽量のテーマまたはテンプレートを使用する

テーマまたはテンプレートはWeb サイトの視覚的なデザインであり、Web サイトの速度に大きな影響を与える可能性があります。 軽量のフレームワークを使用すると、Web サイトの速度とパフォーマンスを向上させることができます。

軽量テーマは、Web サイトの速度を低下させる可能性のあるデザイン要素や機能が少なく、最小限になるように設計されています。

軽量テーマを確実に使用するために実行できる手順をいくつか示します。

1. 評判の良いテーマを選択する:軽量のテーマが多数用意されているため、速度とパフォーマンスで知られている評判の良いテーマを選択してください。
2. テーマのページ速度を自分で確認する:テーマを選択する前に、Google PageSpeed Insights、GTmetrix、Pingdom などのツールを使用してページ速度を確認してください。 これにより、テーマのパフォーマンスと読み込み時間のアイデアが得られます。
3. 複雑なデザインを避ける:アニメーション、視差スクロール、大きな画像ファイルなどのデザイン要素が少ない、シンプルなデザインのテーマを選択します。 これらの機能により、Web サイトの速度が低下し、ユーザー エクスペリエンスに影響を与える可能性があります。
4. テーマをテストする:テーマを Web サイトに展開する前に、テーマをテストして、Web サイトでどのように動作するかを確認します。 同じツールを再度使用して、ページの読み込み時間やその他のパフォーマンス指標を測定できます。
5. テーマを定期的に更新する:テーマを定期的に更新して、速度とパフォーマンスの最適化を維持します。 古いテーマや古いテーマを使用すると、Web サイトの速度が低下したり、他の問題が発生したりする可能性があります。

13. ウェブサイトのメンテナンスを定期的に実施する

Web サイトを定期的にメンテナンスすると、Web サイトの速度を低下させる可能性がある技術的な問題を防ぎ、全体的なパフォーマンスを向上させることができます。

Web サイトのメンテナンスを実行するために実行できる手順をいくつか示します。

1. Web サイトのソフトウェアを更新する: Web サイトのソフトウェア (プラグイン、テーマ、Web サイトを強化するコンテンツ管理システム (CMS) など) を定期的に更新します。 これらの更新には、バグ修正、セキュリティ パッチ、パフォーマンスの改善が含まれる場合があります。
2. 使用されていないプラグインとテーマを削除する: Web サイトで使用されていないプラグインとテーマを削除します。 未使用のプラグやテーマは貴重なサーバー リソースを占有し、Web サイトの速度を低下させる可能性があります。
3. Web サイトのパフォーマンスを監視する:ページの読み込み時間やその他の主要な指標など、Web サイトのパフォーマンスを追跡します。 Google Analytics や Pingdom などのツールを使用して、Web サイトのパフォーマンスを監視し、改善すべき領域を特定します。
4. データベースをクリーンアップする:時間が経つと、Web サイトのデータベースが古い投稿のリビジョンやスパム コメントなどの未使用のデータで乱雑になる可能性があります。 WordPress では、WP-Optimize や WP-Sweat などのプラグインを使用してデータベースをクリーンアップし、Web サイトのパフォーマンスを向上させます。

WordPress 最適化プラグイン

あなたの Web サイトが WordPress で構築されている場合 (世界中の Web サイトの 41% 以上が WordPress で作られているため、WordPress で構築されている可能性は十分にあります)、これらの各手順を支援するプラグインが大量にあります。

上記の各手順に特化したプラグイン (たとえば、JavaScript と CSS を最小化するだけのプラグイン) を見つけることは間違いなく可能ですが、これは通常、最も効率的な行動方針ではありません。

複数のプラグインはコード ベースの重みをさらに増し、すべてメンテナンスが必要になります。また、多くの場合、プラグインが相互に競合して Web サイトに技術的な問題を引き起こします。

遅いウェブサイトを修正するためのほとんどの機能を実行する1 つまたは 2 つのプラグインを見つける方がはるかに良いです。 たとえば、WP Rocket は、このリストにあるほぼすべての手順を実行できます。 使用するには料金を支払う必要がありますが、手間が省けます。

実際には、WordPress を高速化する方法について、さらに焦点を当てた記事があり、そのことやその他のことについて話しています。

結論

上記の各カテゴリはさらに詳しく調べることができますが、これらの手順に従えば、Web サイトの読み込み時間を半分以上に短縮できる可能性が非常に高く、Web サイトの速度も確実に向上します。サイト。

ご質問がございましたら、コメント欄にお知らせください。