ウェブサイトを高速化する方法

あなたが初心者で新しい Web サイト所有者である場合、ほとんどの場合、Web サイトの速度について心配する必要はありません。 

あなたの後 あなたのウェブサイトを構築する or ブログを始める、すべてが整っているように感じるかもしれません。 あなたのサイトは美しいので、正しく読み込まれるまであと数秒待っても問題ないということですよね?

いいえ、そうではありません。

による グーグルリサーチ、ページの読み込みに時間がかかるほど、Web サイトを放棄する人が増えます。

また、Google は、Web サイトの読み込み速度についてさらに詳しく説明する Web Core Vitals (Web サイトのランキング要素としてカウントされます) を導入しました。 ウェブサイトの速度が速いほど、Google 検索結果の最初のページに到達する可能性が高くなります。

ウェブサイトの速度を改善するための 14 のステップ

• ステップ 1: 速度テストを実行する
• ステップ 2: 高速で信頼性の高い Web ホスティングを取得する
• ステップ 3: コンテンツ配信ネットワーク (CDN) サービスを実装する
• ステップ 4: CSS および JavaScript ファイルを縮小する
• ステップ 5: ブラウザーのキャッシュを有効にする
• ステップ 6: WordPress データベースを最適化してクリーンアップする
• ステップ 7: 最適化/プレミアムおよびシンプルなテーマを使用する
• ステップ 8: ウェブサイト上のすべての画像を最適化する
• ステップ 9: 画像とビデオを遅延読み込みする
• ステップ 10: 画像のホットリンクを防止する
• ステップ 11: サードパーティ サービスでビデオをホストし、大容量メディアをオフロードする
• ステップ 12: プラグインを最小限に抑える/速度を低下させているプラ​​グインを見つける
• ステップ 13: Web サイトのリダイレクトを制御する
• ステップ 14: コンテンツを最適化する (抜粋を使用する、長い記事やコメントを分割するなど)

ステップ 1: 速度テストを実行する

何かを行う前に、適切なテストを実施することが重要です。 速度テストがなくてもできることはたくさんありますが、サイトのパフォーマンスと、すべての改善を完了した後の結果がどの程度良好であるかを理解するのに役立つベンチマークを得るために、少なくとも XNUMX つの速度テストを実行することを強くお勧めします。ステップ。

無料ツール

幸いなことに、誰でも利用できる無料の速度テストがあります。 どれかを選択し、URL を入力するだけで、ツールが魔法を実行します。

GoogleのPageSpeed Insights

ほとんどの人はサイトを Google 向けに最適化しているため、最初に説明するツールは Google の PageSpeed Insights です。 非常に簡単で、数秒で結果が得られます。

1. 開いた GoogleのPageSpeed Insights.
2. サイトの URL を入力します。
3. 「分析」ボタンをクリックします。

私の場合、テストが完了し、以下のスクリーンショットにある結果が表示されるまでにわずか 10 ～ 15 秒かかりました。

100 点のスコアを目指す上部の緑色の数字を確認したら、他にもいくつかのセグメントを精査する必要があります。 それらは：

• First Contentful Paint（FCP）
• 最大のContentful Paint（LCP）
• 累積レイアウトシフト（CLS）

XNUMX つの要素はすべて Web Vitals の一部であり、サイトの速さ、遅さを示す Google の主要な指標に含まれるようになりました。 Web Vitals について詳しくは、ガイドをご覧ください。 モバイルサイトを最適化する方法.

GTmetrix

最も人気のある Web サイト速度テストの XNUMX つは GTmetrix です。 これは完全に無料で、XNUMX 分以内に完了します。

1. 　 GTmetrix.
2. サイトの完全な URL を入力します。
3. 「テストの実行」ボタンを押して、約 30 秒待ちます。

その後、ウェブサイトの速度を示すグレードが表示されます。 このテストでは、サイトのパフォーマンスや構造、現在 Google のランキングの中核となっているウェブの重要性などの詳細も表示されます。 

サイトの速度の最適化にまだ積極的に取り組んでいない場合は、完璧なスコアを取得できない可能性があります。 ただし、心配しないでください。すべての手順に従い始めれば、それに向けて取り組むことができます。

ステップ 2: 高速で信頼性の高い Web ホスティングを取得する

高速な Web サイトは優れたホスティングから始まります。 最高のユーザー エクスペリエンスを提供するためにどれだけ努力しても、ホスティングが最悪であれば、Web サイトの速度が低下します。

また, 最高のホスティング会社 すべてに気を配り、密室で何が行われているかを理解する必要はありません。 高品質で手入れの行き届いたハードウェアから定期的に更新されるソフトウェア コンポーネントに至るまで、ホスティング サービスがサイトの速度を向上させるためにできることはたくさんあります。

正しい方法で始めるには、サイトを次の方法でホストします。 お申し込み, WordPress.org によって公式に推奨されている珍しいホスティング会社の XNUMX つです。 長年の経験と何百万もの Web サイトのホスティングにより、このホスティング会社はその分野で最高の企業の XNUMX つとなり、それは簡単に堅牢な Web サイトを持つことになります。

ステップ 3: コンテンツ配信ネットワーク (CDN) サービスを実装する

私たちの世界は広いです。 インターネットの速度はここ数年で大幅に向上しましたが、コンピューターとサーバー間の物理的な距離は依然としてオンラインの速度に重要な役割を果たしています。 これは、コーヒーテーブルを別の国で車で買うよりも、故郷のIKEAでコーヒーテーブルを買うほうが簡単であるのと同じように、自分の国のサーバーから情報をロードする方が、世界中からデータをロードするよりも一般に高速であることを意味します。 。

ここで、コンテンツ配信ネットワークが登場します。コンテンツ配信ネットワークを使用すると、Web サイトを世界中の複数のサーバーでホストできます。 CDN は、サイトを読み込んでいる各個人に最も近い場所を認識し、最も近いサーバーからコンテンツを読み込みます。 したがって、訪問者が米国からサイトをロードしようとすると、米国のサーバーの XNUMX つからコンテンツを取得することになりますが、ヨーロッパから訪問した訪問者は、ロンドンなどの近くにあるサーバーを介してサイトをロードします。

サイトをホストしている場合 お申し込み、TrueSpeed CDN はコントロール パネル内にあります。 設定するだけで、あなたのサイトはグローバルになり、世界中の人々がより速く読み込まれるようになります。

サードパーティの CDN サービスを利用することもできます。 の 最も人気のある CDN には次の値があります:

• CloudFlare
• KeyCDN
• StackPath
• GoogleクラウドCDN
• Rackspaceの
• キャッシュフライ
• アマゾンCloudFrontの

ステップ 4: CSS および JavaScript ファイルを縮小する

最近の Web サイトには、Web ページの見栄えを維持し、ユーザーに有利に機能するように連携する CSS ファイルと JavaScript ファイルが多数あります。 コードを XNUMX 行ずつ追加すると、ファイルが不必要に大きくなり、サイトの速度が急速に低下する可能性があります。

Web デザイナー (最終的に購入するテンプレートを作成しているのと同じ人) は、コードをきれいに保つことを好みます。 これは、コードの見栄えを良くし、理解しやすい状態に保つことを意味します。 ただし、これらの空白、余分な行、文字があるとファイルの重量が増えるだけであり、これは縮小することで簡単に減らすことができます。

簡単な CSS コードの例を次に示します。

これは次のように縮小できます。

この単純な違いがサイトに大きな影響を与えるわけではありませんが、何千もの不要な空白や行がある場合に何が起こるかを想像してみてください。

幸いなことに、CSS ファイルと JavaScript ファイルを縮小するために、コードを自分で調べて変更を加える必要はありません。 これを自動的に実行し、すべてが正しく動作することを保証するプラグインがあります。

ステップ 5: ブラウザーのキャッシュを有効にする

ブラウザーのキャッシュを有効にすると、コンテンツをユーザーのブラウザーに保存できるようになります。 つまり、訪問者がサイトに再度アクセスすることにした場合、ファイルはすでにブラウザに保存されているため、サーバーからすべてのファイルを再度ダウンロードする必要はありません。

ブラウザのキャッシュにより、再訪問ユーザーの Web サイトの速度が大幅に向上します。

サイトでこれを有効にするには、次のような無料の WordPress プラグインだけが必要です。

• W3合計キャッシュ
• WP最速キャッシュ
• WPスーパーキャッシュ

たとえば、W3 Total Cache を使用している場合、必要なのは次のことだけです。 プラグインをインストールします:

プラグインはキャッシュ設定を自動的にセットアップし、すぐに有利に機能し始めます。 さらに詳しく調べたい場合は、WordPress メニューの左側に表示される [パフォーマンス] タブを開くと、すべてのプラグイン設定が表示されます。 ここで、必要に応じて他のオプションを変更できます。

ステップ 6: WordPress データベースを最適化してクリーンアップする

WordPress ウェブサイトはデータベースなしでは機能しません。 あなたがサイト上で行ったことや行ったことはすべてそこに保存されます。 ご想像のとおり、テーマやプラグインによって常にクリーンな状態が保たれるわけではないため、特定のプラグインをアンインストールした場合でも、データベースに一部のデータが残ることになります。 時間が経つと、データベースが乱雑になり非効率になり、その結果 Web サイトが遅くなります。

データベースを手動でクリーンアップすることは可能ですが、その場合はその仕組みを理解する必要があります。 たとえそうしたとしても、それでも台無しにしてしまう可能性があります。

幸いなことに、データベースを最適化してクリーンアップしてくれる無料の WordPress プラグインが利用可能です。 ただし、何かをする前に必ず確認してください ウェブサイトの完全バックアップを作成する または変更を元に戻す方法があります。 それでも WP-Optimize はよく知られた安全なプラグインですが、データベースを直接編集すると失敗する場合があります。 

したがって、何か問題が発生した場合に備えて、私が提案するのは WP Reset。 このプラグインはサイトのスナップショットを作成し、行われた変更をすぐにロールバックできるようにします。 したがって、何か問題が発生した場合でも、完全バックアップの復元には時間がかかる場合がありますが、データベースは数分で復元できます。

ステップ 7: 最適化/プレミアムおよびシンプルなテーマを使用する

テンプレートとテーマは視覚的なものだけではありません。 これらを作成するには、Web デザイナーが機能、オプションをコーディングし、単一の作業テーマに組み合わされる画像を挿入する必要があります。

ご想像のとおり、たとえば、XNUMX つのファイルと XNUMX つの画像をロードするテンプレートは、XNUMX のファイルと XNUMX の画像が詰め込まれたテンプレートよりもはるかに高速にロードされます。 重要な要素はその数だけではありませんが、すべてがどの程度最適化されているかも考慮されます。

WordPress のテーマやテンプレートは非常にたくさんあるため、最適なものを判断するのは困難です。 その一部をご紹介します 人気のWordPressテーマ 見栄えが良く、素早く読み込まれるように設計されています。

• こんにちはelementor
• Astra
• GeneratePress
• OceanWP
• 東京 日本

ステップ 8: ウェブサイト上のすべての画像を最適化する

画像はサイトの速度に関する主な問題の XNUMX つになりやすいです。 最適化されていない画像は不必要に大きくなり、ダウンロードが困難になります。 使用するものが多すぎると、ユーザーは Web サイトのページ全体を読み込むのに苦労し、コンテンツを見る前に離脱してしまう可能性があります。

幸いなことに、画像を最適化した状態に保つことはそれほど難しいことではありません。 テーマ/テンプレートを調べて、必要な画像サイズを知ることが重要です。 その後、アップロードする前に、サイズを変更したり、品質設定を変更したりして、画像の処理を行うことができます。

いくつかの画像のみを最適化する必要がある場合は、次のようなサードパーティ サービスを使用できます。 TinyPNG。 この画像最適化ツールを使用すると、ソース画像をアップロードすると、自動的に最適化されます。 画像をドラッグ アンド ドロップするだけで、パンダに魔法をかけてもらいます。 その後、ウェブサイトに安全に掲載できる最適化されたバージョンの画像をダウンロードできるようになります。

すでにアクティブな Web サイトをお持ちで、画像を XNUMX つずつ最適化する時間がない場合は、すべての問題を解決するフリーミアム プラグインがあります。 ShortPixel画像オプティマイザ は、メディア ライブラリで利用可能なすべての画像を処理します。 NextGEN、Foo Gallery、その他のギャラリーやスライダーのプラグインともうまく連携します。

無料版では、最大 XNUMX 枚の画像を処理できます。 機能には次のようなものがあります。

• 画像のサイズと品質を最適化します。
• 形式を別の形式に変換する。
• WebP および AVIF で動作します。

あなたがしなければならないのは、プラグインをインストールし、必要に応じて設定をカスタマイズすることだけです。 必要な圧縮を選択し、画像のサイズを設定し、プラグインが最適化プロセスを開始する準備ができたらボタンを押します。

ステップ 9: 画像とビデオを遅延読み込みする

通常、ユーザーが Web サイトを開くと、表示されるべきコンテンツ全体の読み込みが自動的に開始されます。 したがって、ユーザーがスクロールせずに見える範囲のコンテンツのみを必要とする場合でも、そのページで利用可能なすべてのコンテンツが読み込まれます。

代わりに、画像やビデオを遅延読み込みすることで、画面に表示されているコンテンツのみをユーザーに読み込ませることができます。 ユーザーがスクロールを開始すると、画面の表示領域に移動する画像とビデオの読み込みが開始されます。 こうすることで、サイト全体の読み込みが速くなり、ユーザー エクスペリエンスが向上します。

WordPress で遅延読み込みを有効にする方法:

ステップ 10: 画像のホットリンクを防止する

ホットリンクとは、ある Web サイトから画像のソースをコピーして別の Web サイトで使用することを含むアクションです。 画像は問題なく表示されますが、実際にはサーバーから読み込まれていません。 代わりに、元のサイトのすべてのリソースが使用され、実際には違法とみなされます。

ホットリンクを防止することで、他の人があなたの画像を盗むのを防ぐことができます。 このようにして、独自のホスティング サービスのリソースを節約することになります。つまり、それらのリソースを使用するのはあなたのサイトのみとなり、その結果、訪問者にとって Web サイトが高速化されます。

ホットリンクを防ぐ方法はいくつかあります。

• CDNを使用する: Cloudflare や KeyCDN などの最も一般的な CDN では、ホットリンク保護がすでに有効になっています。
• セキュリティプラグインの使用: All In One WP Security＆Firewall プラグインを使用すると、ホットリンクを制御できます。
• 画像の右クリックを無効にする: 次のようなプラグインを使用します コンテンツの盗難を防ぐ [右クリックを無効にする].
• .htaccess ファイルの変更: 上級ユーザーは、.htaccess ファイル内のコードを変更することで、ホットリンクを直接無効にすることができます。

ステップ 11: サードパーティ サービスでビデオをホストし、大容量メディアをオフロードする

Web サイトを開始するときは、すべてのビデオと大きなメディア ファイルを独自のサーバー上に置くのが合理的です。 ただし、大きなファイルの保存と再生にはサーバー リソースが消費されるという点が欠けている可能性があります。 サイトの速度を考えると、ビデオや大きなメディア ファイルをサードパーティ サービスにオフロードして帯域幅を節約する方がはるかに便利です。

YouTube からロードされたビデオは、サーバーからロードされたビデオと同じように (それ以上ではないにしても) 機能します。 トラフィックが多い場合は、帯域幅への影響が少なくなり、サイトが高速化されることを意味します。

ビデオに関しては、次の場所でホストできます。

• YouTube;
• Vimeoの、または
• ウィスティア.

ステップ 12: プラグインを最小限に抑える/速度を低下させているプラ​​グインを見つける

各プラグインはあなたのウェブサイトを強化します。 ただし、各新機能は、スペースと帯域幅を占有する新しいファイルも意味します。 また、すべてのプラグインが同じようにコーディングされているわけではないため、気づかない不要な要素を読み込んでサイトの速度を低下させるプラグインが存在する可能性があります。

すべてのプラグインを無効にする前に、速度テストを実行することをお勧めします。

このプラグインは、Web サイトでいくつかのテストを実行し、グラフと詳細を表示します。 ここで興味があるのは、すべてのアクティブなプラグインとそれらがサイトに及ぼす影響を示すグラフを描画する「プラグイン別実行時間」タブです。

サイトで最も遅いプラグインを示すグラフ上で最大の「簡単な部分」を確認してください。 これは、その特定のプラグインを削除する必要があるという意味ではないことに注意してください。 

このテストでは、すべてのアドオンを分析できるため、長所と短所を比較検討し、どの遅いプラグインをアンインストールするか、代替プラグインを見つけるかを決定できます。

ステップ 13: Web サイトのリダイレクトを制御する

リダイレクトがあるとユーザー エクスペリエンスが向上し、さらに あなたのSEOを改善する 正しく行われた場合。 アクティブなリダイレクトがサイトに悪影響を与えることはありません。 ただし、リダイレクトするたびに、サイトの速度が少しずつ遅くなります。 そのため、リダイレクトが多すぎると (いわゆるリダイレクト チェーンが作成され)、ミリ秒単位の時間が増加し、サイトの速度が遅くなります。

リダイレクトを処理するための最も人気のあるツールの XNUMX つは次のとおりです。 スクリーミングフロッグ。 以下もチェックできます:

• リダイレクトチェッカー
• サイトバルブ
• ディープクロール

ソフトウェアをインストールするか、オンライン スキャンを実行すると (選択したツールに応じて)、Web サイトをスキャンできるようになります。 Web サイトの詳細な分析が表示され、リダイレクトされた URL がすぐに表示されます。 URL がリダイレクトされることを知っているだけではあまり意味がないため、リダイレクトのソースを表示する機能は気に入っていただけるでしょう。 これにより、Web サイトを理解し、不要なリダイレクトを削除してリダイレクトに対処できるようになります。

サイトの速度を低下させているリダイレクト チェーンを見つけた場合、解決策は簡単です。リンク A からリンク B にリダイレクトしてリンク C に移動するのではなく、リダイレクトをチェーン内の最後のリンクに変更するだけです。

WordPress でリダイレクトを処理するには、無料の WP301リダイレクト すべてのリダイレクトの管理に役立つプラグイン。

ステップ 14: コンテンツを最適化する (抜粋を使用する、長い記事やコメントを分割するなど)

小さなことを変えることで多くのことができる場合があります。 もし、あんたが 書きます ブログでは、コンテンツを制御することでより高速なサイトを実現できます。 ブログの最新の記事を表示する場合は、記事全体を読み込むのではなく、抜粋を使用します。

従来のエディターを使用している場合、カスタムの抜粋を表示するのは比較的簡単です。

さて、ホームページに抜粋を表示するかどうかは、テーマによって異なります。 すでにオンになっているか、テーマのどこかでオプションをチェックする必要がある場合があります。 テーマごとに異なるため、ドキュメントを確認するかサポートに問い合わせることをお勧めします。

長い記事を書く傾向がある場合は、記事をすぐに XNUMX つ以上の部分に分割できます。 ブロックエディターを使用している場合は、外部プラグインは必要ありません。 長い投稿を編集し、「プラス」記号をクリックして、記事を半分に分割する「改ページ」ブロックを見つけるだけです。

最後に、コメントがたくさんある場合は、コメントを一度にすべて読み込むのではなく、ページ分割することを選択できます。

ウェブサイトの速度をテストし続ける

このチュートリアルのすべての手順を実行して Web サイトの高速化に成功したとしても、それで完了したわけではありません。 状況はすぐに変化する可能性があり、サイトが明日、または XNUMX か月後にどのように動作するかはわかりません。 このため、定期的に速度テストを実施し、サイトを定期的に改善することが重要です。

サイトをテストする場所と方法を忘れた場合や、サイトを高速化するためにどのような手順を実行する必要があるかを忘れた場合に備えて、このチュートリアルをブックマークできます。

Web サイトが遅いとどのような損害が生じるか

サイトが読み込まれるまで待つのは気にしなくても、ほとんどの人はそれに問題を抱えています。 そして、問題を無視すると、長期的には害を及ぼす可能性があります。 どうやって？

• より高いバウンス率 – たとえ訪問者がページが読み込まれるまで待つことに決めたとしても、訪問全体を通して辛抱強く待っているという意味ではありません。 直帰率が高くなり、ユーザーが最初のページにアクセスした後にサイトから離れてしまう危険性があります。
• お金を失う - もし、あんたが 製品やサービスを販売する ウェブサイトの速度が遅いと、潜在的な購入者や将来の顧客を遠ざけてしまいます。
• トラフィックの損失 – サイトを前進させるためにトラフィックを増やしたいですか? この場合、サイトが適切に最適化されていないために訪問者を失うわけにはいきません。
• SERPランキングが低い – Google やその他の検索エンジンでは、読み込み速度が考慮されます。 ページが遅いと、たとえコンテンツが優れていたとしても、検索エンジンの結果ページのさらに下の方に押しやられる可能性があります。

まだスピードが重要だと思いませんか? これら XNUMX つの理由で、Web サイトの速度がいかに重要であるかを理解していただき、Web サイトを改善する準備ができていることを願っています。

要約

誰もが美しく、優れたデザインのサイトを好みます。 ただし、Web サイトが読み込まれるまでさらに数秒待つ必要がある場合は、一定の割合の訪問者を失う可能性があります。

したがって、何をするにしても、美しさのために速度を犠牲にしないでください。 両方を持つことも可能です。 忍耐強くウェブサイトを改善するために取り組む必要があります。