あなたが初心者で新しいウェブサ
あなたのウェブサイトを構築したり、ブログを開始した後、すべてが所定の位置にあるように感じるかもしれません。 あなたのサイトは美しいので、人々はそれが適切にロードできるように、より多くの秒のカップルを待っている問題を持っていないことを意味する必
いいえ、そうではありません。
Googleの調査によると、ページの読み込みに時間がかかるほど、ウェブサイトを放棄する人が増えます。
また、Googleはweb Core Vitals(webサイトのランキング要因としてカウントされます)を導入しており、webサイトの読み込み速度に関してはさらに詳細になります。 より速くあなたのウェブサイト、より良いあなたのチャンスは、Googleの検索結果の最初のページに取得します。
こんにちはが、Artem.
私たちの経験、開発チームの知識、そして私たち自身のウェブサイトの読み込み速度を向上させるために使用された技術を共有します(FirstSiteGuide.com).
このチュートリアルに従うことで、あなたのウェブサイトの速度に影響を与える要素を理解することができます。 各要素で、私はあなたがウェブサイトをスピードアップしたり、特定の問題を解決するのに役立ちますツールが表示されます。 また、可能であれば、研究に時間を費やすことなく、安全に使用できるサービスについても言及します。
このガイド内のいくつかの手順は、WordPressソフトウェアで構築されたwebサイトに固有のものです。 他のいくつかのウェブサイトビルダーツールを使用している場合は、利用可能な機能に基づいて同様の速度最適化手法を適用できます。
14 ウェブサイトの速度を向上させるための手順
- ステップ1:スピードテストを実行する
- ステップ2:高速で信頼性の高いwebホスティングを取得する
- ステップ3:コンテンツ配信ネットワーク(CDN)サービスを実装する
- ステップ4:CSSとJavaScriptファイルを縮小する
- ステップ5: ブラウザキャッシュを有効にする
- ステップ6:WordPressデータベースを最適化してクリーンアップする
- ステップ7:最適化/プレミアムとシンプルなテーマを使用する
- ステップ8:あなたのウェブサイト上のすべての画像を最適化する
- ステップ9:画像と動画を遅延ロードする
- ステップ10:画像のホットリンクを防止する
- ステップ11:動画をホストする
- ステップ12:プラグインを最小限に抑える/減速しているプラグインを見つける
- ステップ13:ウェブサイト上のリダイレクトを制御する
- ステップ14: コンテンツの最適化(抜粋の使用、長い記事やコメントの分割など)
ステップ1:スピードテストを実行する
何かをする前に、適切なテストを行うことが重要です。 あなたも、一つなしで多くのことを行うことができますが、私は強く、あなたのサイトがどのようにうまく実行するかを理解するのに役立ちますベ
無料ツール
幸いにも、誰にでも無料の速度テストがあります。 いずれかを選択し、URLを入力して、ツールに魔法を実行させるだけです。
GoogleのPageSpeed Insights
ほとんどの人がGoogle用にサイトを最適化しているので、私が言及する最初のツールはGoogleのPageSpeed Insightsです。 それは非常に簡単です、そしてあなたはほんの数秒で結果を得ることができます。
- サイトのURLを入力します。
- “分析”ボタンをクリックします。
私の場合、テストが完了し、下のスクリーンショットで共有されている結果を表示するのに10-15秒かかりました。
あなたが100のスコアを取得することを目指している上に緑色の数字を見た後、あなたが精査したいいくつかの他のセグメントがあるでしょう。 それらは:
- 最初のコンテンツフルペイント(FCP)
- 最大のコンテンツフルペイント(LCP)
- 累積レイアウトシフト(CLS)
すべての三つの要素は、現在、あなたのサイトがどのくらい速くまたは遅く表示されますGoogleの主な指標に含まれているWebバイタルの一部です。 あなたのモバイルサイトを最適化する方法についての私たちのガイドでWebバイタルの詳細を学ぶことができます。
GTmetrix
最も人気のあるウェブサイトの速度テストの一つはGTmetrixです。 それは完全に無料で、分未満で行うことができます:
- GTmetrixに移動します。
- あなたのサイトの完全なURLを入力します。
- “テストを実行”ボタンを押して、約30秒待ちます。
その後、あなたのウェブサイトがどのくらいの速さを示すグレードを取得します。 このテストでは、サイトのパフォーマンス、その構造、およびGoogleのコアランキング要因であるwebバイタルなどの詳細も表示されます。
速度のためのあなたの場所を最大限に活用することに既に積極的に働いていなければ、チャンスは完全なスコアを得ないである。 しかし、心配しないで、すべての手順を実行し始めると、それに向かって作業することができます。
ステップ2:速く、信頼できるウェブホスティングを得なさい
速いウェブサイトはよい催すことから始まる。 あなたのホスティングが吸う場合は、最高のユーザーエクスペリエンスを提供しようとするどのようにハードに関係なく、あなたのウェブサイ
最高のホスティング会社はすべての世話をする、そしてそれはあなたが密室に行くものを理解する必要はありません。 質およびよく維持されたハードウェアから規則的に更新されたソフトウェア部品への、催すサービスがあなたの場所の速度を改善するためにするこ
正しい方法を開始するには、Bluehost、正式に推奨されている珍しいホスティング会社の一つでホストされているあなたのサイトを取得しますWordPress.org。長年の経験と何百万ものホストされたウェブサイトは、このホスティング会社をその分野で最高のものにします。
ステップ3: コンテンツ配信ネットワーク(CDN)サービスを実装する
私たちの世界は大きな場所です。 インターネットの速度は長年にわたって大幅に改善されていますが、コンピュータとサーバー間の物理的な距離は依然としてオンラインの速度に重要な これは、あなたの国からのサーバーからの情報の読み込みは、一般的に世界中からのデータの読み込みよりも高速であることを意味します。
これがコンテンツ配信ネットワークの出番です。 それらは地球を渡る複数のサーバーで催されるあなたのウェブサイトを有することを可能にする。 CDNは、あなたのサイトをロードする各個人に最も近い場所を認識し、最寄りのサーバーからコンテンツをロードすることができます。 したがって、訪問者が米国からサイトをロードしようとすると、米国のサーバーのいずれかからコンテンツを取得しますが、ヨーロッパから来た人は、ロンドン
Bluehostでサイトをホストしている場合は、コントロールパネル内にTrueSpeed CDNを見つけることができます。 それを設定するだけで、あなたのサイトはグローバルになり、世界中の人々に速くロードされます。
サードパーティのCDNサービスを取得することもできます。 最も人気のあるCDNは次のとおりです:
- Cloudflare
- KeyCDN
- StackPath
- Google Cloud CDN
- Rackspace
- CacheFly
- Amazon CloudFront
ステップ4:CssとJavaScriptファイルを縮小する
現代のウェブサイトは、cssとJavaScriptファイルで満たされており、webページを見栄えよくし、ユーザーの好意で動作させ コードの行の後の行は、これらのファイルを不必要に大きくし、サイトをすばやく遅くする可能性があります。
Webデザイナー(あなたが購入することになるテンプレートを構築しているのと同じ人)は、コードをきれいに保つのが好きです。 これは、彼らがコードを見栄えが良く、簡単に理解できるように保つことを意味します。 ただし、これらの空白、余分な行、および文字を使用すると、ファイルの重さが増加するだけで、縮小することで簡単に減らすことができます。
単純なCSSコードの例を次に示します:
色:#f35123;
背景色:#f35123;
背景色:#f35123;
背景色:#f35123;
背景色:#f35123;
:#f22f12;
}
それはこれに縮小することができます:
ボディ{パディング:10px;色:#f35123;背景:#f22f12}
この単純な違いはサイトに大きな影響を与えることはありませんが、何千もの不要な空白や行がある場合に何が起こるか想像してみてください。
幸いなことに、CSSファイルとJavaScriptファイルを縮小するには、コードを調べて自分で変更する必要はありません。 あなたのために自動的にこれを行い、すべてが正しく動作することを保証するプラグインがあります:
- “プラグイン>新規追加”に移動します。
- “Autoptimize”を検索します。
- “Autoptimize”をインストールして有効にします。
- “設定->Autoptimize”に移動します。
- チェック”JavaScriptコードを最適化しますか?”と”集計JSファイル?”.
- チェック”Cssコードを最適化しますか?”と”集計CSS-ファイル?”.
ステップ5:ブラウザキャッシュを有効にする
ブラウザキャッシュを有効にすると、コンテンツをユーザーのブラウザに保存できます。 つまり、訪問者がサイトに戻ることを決定した場合、ブラウザに既に保存されているため、サーバーからすべてのファイルを再度ダウンロードする必要はあ
ブラウザキャッシュは、ユーザーを返すためにあなたのウェブサイトの速度を大幅に向上させることができます。
あなたのサイトでこれを有効にするには、次のような無料のWordPressプラグインが必要です:
- W3Total Cache
- WP Fastest Cache
- WP Super Cache
たとえば、W3Total Cacheを使用している場合は、プラグインをインストールするだけです:
- プラグイン->新規追加に移動します。
- “W3Total Cache”を検索します。
- プラグインをインストールしてアクティブ化します。
- プラグインにサイトとサーバーの設定をテストさせることで、セットアップを実行します。
プラグインは自動的にあなたのキャッシュ設定を設定し、彼らはすぐにあなたの好意で作業を開始します。 あなたはより多くの詳細に行くことにした場合は、プラグインの設定のすべてが表示されているWordPressのメニューの左側に表示されるようになりまし ここでは、必要に応じて他のオプションを変更できます。
ステップ6:WordPressデータベースを最適化してクリーンアップする
WordPressウェブサイトはデータベースなしでは動作しません。 あなたがサイト上で行っていることはすべてそこに保存されています。 あなたが想像できるように、テーマやプラグインは常にそれをきれいに保つわけではないので、特定のプラグインをアンインストールしても、それはあなたのデータベースにいくつかのデータを残します。 時間が経つにつれて、データベースは雑然として非効率的になり、ウェブサイトが遅くなります。
手動でデータベースをクリーンアップすることは可能ですが、それはあなたがそれがどのように動作するかを理解する必要があることを意味します。 そして、たとえあなたがしたとしても、チャンスはあなたがまだそれを台無しにする可能性があるということです。
幸いにも、あなたのためにデータベースを最適化し、きれいにする利用可能な無料のWordPressのプラグインがあります。 ただし、何かを行う前に、webサイトの完全バックアップを作成するか、変更を元に戻す方法を確認してください。 WP-Optimizeはよく知られており、安全なプラグインですが、直接データベースを編集することは時々間違って行くことができます。
だから、何かがうまくいかない場合には、WP Resetをお勧めします。 このプラグインは、あなたのサイトのスナップショットを作成し、すぐに行われた変更をロールバックすることができます。 そのため、何か問題が発生した場合は、時間がかかる可能性のある完全バックアップの復元とは対照的に、データベースを数分で復元できます。
- プラグイン->新規追加に移動します。
- WP-Optimizeを見つけて、インストールしてアクティブ化します。
- 必要なオプションを選択し、ボタンをクリックして最適化を開始します。
ステップ7:最適化された/プレミアムとシンプルなテーマを使用する
テンプレートとテーマは視覚的なだけではありません。 それらを作成するには、webデザイナーは、機能、オプションをコーディングし、すべてが単一の作業テーマに結合する画像を挿入する必要があります。
ご想像のとおり、例えば、5つのファイルと3つの画像をロードするテンプレートは、10つのファイルと20つの画像がパックされているものよりもはるかに高速にロードされます。 膨大な数だけが重要な要素ではありませんが、すべてがどれだけ最適化されているかも考慮されます。
利用可能なWordPressのテーマやテンプレートが非常に多くあるので、最高のものを決定するのは難しいです。 ここでは、よく見て、すぐにロードするように設計されている人気のあるWordPressのテーマのいくつか:
- Hello Elementor
- Astra
- GeneratePress
- OceanWP
- Sydney
ステップ8:ウェブサイト上のすべての画像を最適化する
画像は簡単にあなたのサイトの主な速度の問題の一つになることができます。.こんにちは、 最適化されていない画像は、不必要に大きく、ダウンロードが困難なままになります。 あなたがそれらのあまりにも多くを使用する場合、ユーザーはあなたのウェブサイトのページ全体をロードするのに苦労し、おそらく彼らがコンテンツを
幸いなことに、画像を最適化しておくのはそれほど難しくありません。 あなたが必要な画像サイズを学ぶためにあなたのテーマ/テンプレートを調べることが重要です。 その後、画像をアップロードする前に、サイズを変更して品質設定を変更することで、画像を処理できます。
いくつかの画像だけを最適化する必要がある場合は、TinyPNGのようなサードパーティのサービスを使用できます。 この画像最適化ツールを使用すると、ソース画像をアップロードできるようになり、自動的に最適化されます。 &をドラッグして画像をドロップし、パンダに魔法を働かせてください。 その後、あなたが安全にあなたのウェブサイトに置くことができるあなたのイメージの最適化されたバージョンをダウンロードするために取得します。
すでにアクティブなウェブサイトを持っていて、一度に画像を最適化する時間がない場合は、すべての問題を解決するフリーミアムプラグインがあ ShortPixel Image Optimizerは、メディアライブラリで利用可能なすべての画像を処理します。 また、NextGEN、Fooギャラリーだけでなく、他のギャラリーやスライダープラグインで素晴らしい作品。
無料版では、百までの画像を処理することができます。 機能のいくつかは次のとおりです:
- 画像のサイズと品質を最適化します。
- はWebPとAVIFで動作します。
あなたがしなければならないのは、プラグインをインストールし、あなたが望むように設定をカスタマイズすることだけです。 必要な圧縮を選択し、画像のサイズを設定し、プラグインが最適化プロセスを開始する準備ができたらボタンを押します。
ステップ9:遅延読み込み画像と動画
通常、ユーザーがウェブサイトを開くと、表示されるコンテンツ全体が自動的に読み込みを開始します。 したがって、ユーザーが上記の折り畳みコンテンツのみを必要としていても、そのページで利用可能なすべてのものがロードされています。
代わりに、画像や動画を遅延ロードすることで、画面に表示されるコンテンツのみをユーザーにロードさせることができます。 ユーザーがスクロールを開始すると、画面の可視領域に移動する画像やビデオの読み込みが開始されます。 このようにして、サイト全体がより速くロードされ、より良いユーザーエクスペリエンスが可能になります。
WordPressで遅延読み込みを有効にする方法:
- プラグイン->新規追加に移動します。
- WP Rocketで遅延負荷を検索します。
- プラグインをインストールしてアクティブ化します。
- レイジーロードしたい内容をチェックして設定を保存します。
ステップ10:イメージのホットリンクを防ぐ
ホットリンクは、あるwebサイトからイメージのソースをコピーして別のwebサイトで使用するアクションです。 画像は問題なく表示されますが、実際にはサーバーからロードされていません。 代わりに、元のサイトのすべてのリソースを使用し、実際には違法とみなされます。
ホットリンクを防止することで、他の人があなたの画像を盗むのを止めることができます。 これは、あなたのサイトがそれらのリソースを使用している唯一のものになることを意味し、あなたの訪問者のためのより速いウェブサイトにな
ホットリンクを防ぐにはいくつかの方法があります:
- CDNの使用:CloudflareやKeyCDNのような最も一般的なCdnには、すでにホットリンク保護が有効になっています。
- セキュリティプラグインの使用:オールインワンWPセキュリティ&ファイアウォールプラグインを使用すると、ホットリンクを制御できます。
- 画像上で右クリックを無効にする:コンテンツの盗難を防ぐようなプラグインを使用します。
- htaccessファイル:より高度なユーザーは、コードを変更することにより、直接ホットリンクを無効にすることができます。htaccessファイル。
ステップ11:サードパーティのサービスで動画をホストし、大きなメディアをオフロードする
ウェブサイトを起動するときは、すべての動画と大きなメディ しかし、あなたが欠けているかもしれないのは、大きなファイルを保存して再生することがサーバーリソースを占有するということです。 サイトの速度に関しては、帯域幅を節約するために、サードパーティのサービスでビデオや大きなメディアファイルをオフロードする方がはるかに便利です。
YouTubeからロードされた動画は、サーバーからロードされた動画よりも(良くないにしても)うまく動作します。 そしてより高い交通があれば、これはより速い場所で起因するあなたの帯域幅のより少ない影響を意味する。
ビデオになると、あなたはそれらをホストすることができます:
- YouTube;
- Vimeo;または
- Wistia.
ステップ12:プラグインを最小限に抑える/あなたを遅くしているプラグインを見つける
各プラグインはあなたのウェブサイトを強化します。 ただし、それぞれの新機能は、スペースと帯域幅を占有する新しいファイルも意味します。 また、すべてのプラグインが同じコード化されているわけではないので、気づいていない可能性のある不要な要素をロードすることでサイトを遅くす
すべてのプラグインを無効にする前に、速度テストを行うことをお勧めします。
- プラグイン->新規追加に移動します。
- P3(Plugin Performance Profiler)を検索します。
- プラグインをインストールしてアクティブ化します。
- ツール->P3プラグインプロファイラに移動します。
- スキャンを開始します。
このプラグインは、あなたのウェブサイト上でいくつかのテストを実行し、あなたのグラフと詳細が表示されます。 ここで興味があるのは、すべてのアクティブなプラグインとそのサイトへの影響を示すグラフを描画する”プラグインによるランタイム”タブです。
あなたのサイト上で最も遅いプラグインを示しているグラフ上の最大の”ケーキの部分”をチェックしてください。 これは、その特定のプラグインを取り除く必要があることを意味するものではないことに注意してください。
このテストでは、すべてのアドオンを分析できるため、長所と短所を比較し、アンインストールできる遅いプラグインを決定したり、代替手段を見つけ
ステップ13:あなたのウェブサイト上のリダイレクトを制御する
リダイレクトを持つことは、ユーザーエクスペリエンスを向上させ、正しく行われた場合、SEOを向上させることさえできます。 アクティブなリダイレクトを使用しても、サイトに悪影響はありません。 しかし、すべてのリダイレクトで、あなたのサイトは少し遅くなります。 したがって、リダイレクトが多すぎると(いわゆるリダイレクトチェーンを作成する)、ミリ秒が加算され、サイトが遅くなります。
リダイレクトを処理するための最も人気のあるツールの一つはScreaming Frogです。 また、チェックアウトすることができます:
- リダイレクトチェッカー
- Sitebulb
- Deepcrawl
ソフトウェアをインストールするか、オンラインスキャンを実行することで(選択したツールに応じて)、あなたのウェブサイトをスキャンすることができます。 それはあなたのウェブサイトの詳細な分析が表示され、すぐにあなたがリダイレクトされたUrlが表示されます。 URLがリダイレクトされていることを知っているだけではあまり意味がありませんので、リダイレクトのソースを示す機能が大好きです。 これはあなたのウェブサイトを理解するのに役立ち、必要のないものを削除することによってリダイレクトに作用することができます。
サイトが減速しているリダイレクトチェーンを見つけた場合、解決策は簡単です–リンクAからリンクBにリダイレクトするのではなく、リンクCに行
WordPressでリダイレクトを処理するために、あなたはあなたのリダイレクトのすべてを管理するのに役立ちます無料のWP301リダイレクトプラグインを使
ステップ14: コンテンツの最適化(抜粋の使用、長い記事やコメントの分割など)
時には、小さなものを変更することで多くのことを行うことができます。 あなたがブログを書く場合は、コンテンツを制御することによって、より高速なサイトを達成することができます。 ブログから最新の記事を表示するときは、記事全体を読み込むのではなく、抜粋を使用してください。
クラシックエディタを使用している場合、カスタム抜粋を表示するのは比較的簡単です:
- WordPressダッシュボード->投稿->新規追加に移動します。
- “画面オプション”ボタンをクリックします。
- 抜粋ボックスオプションを有効にします。
- 下にスクロールし、抜粋ボックスを見つけてカスタム要約を書きます。
今、あなたのホームページの抜粋を示すことはあなたの主題によって決まる。 それはすでにオンになっている可能性がありますか、あなたのテーマのどこかにオプションを確認する必要があるかもしれません。 各テーマが異なるため、ドキュメントを確認するか、サポートに連絡することをお勧めします。
長い記事を書く傾向がある場合は、すぐに二つ以上の部分に分割することができます。 ブロックエディタを使用している場合は、外部プラグインは必要ありません。 長い投稿を編集し、「プラス」記号をクリックして、記事を半分に分割する「改ページ」ブロックを見つけます。
古典的なエディタを使用している場合は、単に<を追加してください!–-nextpage–>同じことをするタグ。
最後に、多くのコメントを持っている人のために、一度にすべてをロードするのではなく、コメントをページネーションすることを選択できます:
- WordPressの設定->ディスカッションに移動します。
- “コメントをページに分割”オプションを見つけます。
- 単一のページに表示するコメントの数を入力します。
- 設定を保存します。
あなたのウェブサイトの速度をテストし続けてください
あなたはこのチュートリアルからすべてのステップを実行し、正常にあなたのウェブサイト 物事はすぐに変更することができ、あなたはあなたのサイトが明日または一ヶ月で動作しますどれだけ知っていることはありません。 これが、定期的な速度テストを行い、サイトを定期的に改善することが重要な理由です。
サイトをテストする場所と方法を忘れた場合に備えて、このチュートリアルをブックマークしたり、サイトを高速化するためにどの手順を実行すべきかを覚えたりすることができます。
遅いウェブサイトがあなたを傷つける方法
サイトがロードされるのを待っても構わないとしても、ほとんどの人はそれに問題があります。 あなたが問題を無視した場合、それは長期的にあなたを傷つける可能性があります。 どう?
- 直帰率が高い–訪問者がページがロードされるのを待つことにしたとしても、それは訪問全体を通して忍耐強くなるという意味ではありません。 彼らが最初のページを訪問した後人々をあなたの場所を去らせるより高い直帰率を危険にさらす。
- お金を失う–あなたのウェブサイトのプロダクトかサービスを販売すれば、遅い場所は潜在的なバイヤーおよび未来の顧客を撃退する。
- 交通を失う–あなたの場所を先に推進するより多くの交通がほしいと思うか。 その場合、あなたの場所がきちんと最大限に活用されないので訪問者を失うことをできることができない。
- SERPランキングの低下–Googleや他の検索エンジンは負荷速度を考慮しています。 遅いページはあなたの内容がよくてもサーチエンジンの結果のページの下で更に押されることで起因するかもしれません。
まだスピードが重要だとは思わない? 私はこれらの4つの理由がウェブサイトの速度がいかに重大であるか確信させ、あなたのをよりよくさせて準備ができていることを望む。
結論
誰もが美しく、うまく設計されたサイトを愛しています。 但し、それがウェブサイトが荷を積むために幾つかの余分秒を待っていることを意味すればチャンスは訪問者のあるパーセントを失うことである。
だから、あなたが何をしても、美学のためにスピードを犠牲にしないでください。 両方を持っていることは可能である;ちょうど忍耐強く、それを改良するためにあなたのウェブサイトで働く必要がある。