手順8:検索順位1位をとる、正しいSWELL設定【高速化】

swell-speedingup

手順7では、ConoHaWING(コノハウィング)で、SWELLをインストールしました。

本記事は、手順7の続きです。

SWELLをインストールした後って、どうすればいいの?

SWELLをワードプレスにインストールした後は「SWELL設定」を確認します。

SWELL設定
SWELL設定

SWELLをインストールすると、ワードプレス管理画面左タブに「SWELL設定」が表示されます。

SWELL設定では「サイト表示速度」「SEO設定」「広告タグ設定」の設定ができます。

キャベツ太郎

家で例えるとブログの土台設定です。きちんと設定しましょう。

この記事では、SEOがあがりやすい「SWELL設定」をお伝えしますす。

この記事を書いている人
この記事を書いている人
登場人物
この記事でわかること(もくじ)

サイト高速化するSWELL設定【構造化データ】

SWELL設定
SWELL設定

SWELL設定では、7つの項目が設定できます。

1つ1つ説明します。

「高速化」タブ

「高速化」タブでは、サイト高速化を実現します。

高速化」タブでできること

  • キャッシュ機能の設定
  • ファイルの読み込み設定
  • ページ遷移の高速化
  • 遅延読み込み

チェックを入れるだけで、表示速度があがります。

SWELLは、別途、高速化プラグインを入れる必要はありません。

不要になった高速化プラグイン

  • Flying Scripts by WP Speed Matters
  • Autoptimize(html、CSS、キャッシュ)
  • Async JavaScript
  • Scripts-To-Footer

高速化プラグインを導入する場合、テスト含め、1時間の工数が発生しました。

SWELLなら、チェックを入れるだけで高速化できました。

浮いた時間は、記事の執筆に使えます。

キャッシュ機能の設定

キャッシュ機能の設定
キャッシュ機能の設定

SWELL設定の「高速化」では、8つのキャッシュ設定が可能です。

8つのキャッシュ設定

  • 動的なCSS
  • ヘッダー
  • サイドバー
  • 下部固定メニュー
  • スマホ開閉メニュー
  • トップページ
  • 内部リンク
  • 外部リンク
キャベツ太郎

私は全てチェックしてます。

キャッシュなし
キャッシュあり

キャッシュとは、サイトに訪問した「履歴データ」を、パソコンブラウザに「一時的に保存」しておく機能です。

例えば、Yahoo。サクサク表示されますよね。

キャベツ太郎

キャッシュを使っているので、すばやく表示できております。

SWELL設定で、キャッシュにチェックを入れておけば、キャッシュを利用できます。

ユーザーにストレスを与えない設定が、1秒で完了します。

遅延読み込み機能

遅延読み込み
遅延読み込み

「遅延読み込み」は、ファイルの読み込みを、わざと遅らせる技術です。

たとえば、上記の画像赤枠のような「Loading」画面みたことありませんか?

「遅延読み込み」を設定しない場合、すべての画像を読み込んでからサイトを表示します。

一方、遅延読み込みは、画面に表示されたときのみ、画像を読み込みます。

キャベツ太郎

必要なときだけ画像を読み込むので、余計なローディングが発生しません。結果、サイト表示速度が速くなります。

遅延読み込み
遅延読み込み

遅延読み込みも、キャッシュ同様、全てにチェックしてます。

ファイルの読み込み、ページ遷移高速化

ファイルの読み込み、ページ遷移高速化
ファイルの読み込み、ページ遷移高速化

ファイルの読み込み、ページ遷移高速化設定では、以下にチェックしてます。

筆者がチェックしている項目

  • SWELLのCSSをインラインで読み込む
  • Prefetch(プリフェッチ)
インラインで読み込む
参考:サルカワ

「SWELLのCSSをインラインで読み込む」設定にもチェックを入れます。

CSSをインラインで読み込むと、毎回ファイルを読み込まないので、表示速度が早くなります。(画像参照)

「Prefetch(プリフェッチ)」とは、利用が予測されるデータを、あらかじめ高速メモリに読み込んでおき、性能と速度の向上を図る技術です。

キャベツ太郎

インライン読み込み、プリフェッチは、専門的な知識が必要なので、とりあえずチェックしておけばOKです。

「構造化データ」タブ

構造化データ
構造化データ

構造化データとは、Googleロボットに、サイト構成を伝えるHTMLデータです。

検索エンジン(Googleロボット)のための技術です。

リッチリザルト
リッチリザルト

Googleロボットの理解は、SEOが強くなるだけではありません。例えば、Google検索結果に、リッチリザルトを表示できたりします(画像参照)。

リッチリザルトを表示すると、Google検索結果画面で目立つため、クリック率が高まり、サイト流入数が増加します。

キャベツ太郎

SEOに有利に働きます。

構造化データ

「構造化データ」タブで設定することは2点。

  • 「JSON-LDを自動生成する」をオンにする
  • サイト運営組織(publisher情報)を入力

JSON-LDとは、構造化データのファイルの形式です。SWELLは、Googleが推奨している「JSON-LD」形式で自動生成してます。

publisher情報は、E-A-Tに関することなので、SEOに有利に働きます。

E-A-TはGoogleの「検索品質評価ガイドライン」に提示されている「Expertise(専門性)、Authoritativeness(権威性)、 Trustworthiness(信頼性)」のことです。 SEOで重要視されるGoogle品質評価基準。

引用:satori.marketing
FAQブロック構造化

SWELLのすごいところは、SWELLブロックから構造化データを設定できること。

ココがポイント

ブロックから、構造化データを登録できるのは、SWELLだけです(2022年9月現在)。

構造化

SWELLで構造化データを登録する方法は、以下記事で解説してます。

「jQuery(じぇいクエリ)の読み込み」タブ

jQueryとは
jQueryとは

jQueryとは、プログラム言語、Javascript(ジャバスクリプト)のライブラリです。

ライブラリとは、冷凍食品のようなもの。冷凍しておき、必要なとき回答すれば食べるように、必要な時にプログラムを呼び出します。

ただし、jQueryは、ファイルを毎回読み込むため、サイト表示速度が重くなりがち。

なので、SWELLは「強制的に読み込むか、読み込まないか」選択できます。

jQuery(じぇいクエリ)読み込み
jQueryの読み込み

筆者がチェックしている項目

  • jQueryをwp_footerで登録する
  • jquery-migrateを読み込まない

jQueryは、フッター読込みをおすすめします。

なぜなら、表示速度が速くなるからです。

jQueryファイルは、ヘッダーから読み込みます。

ヘッダーから読み込む設定をしていると、ブラウザバックするページも、jQueryを読み込んでしまっています。

つまり、サイト表示速度が遅くなっている要因です。

ココがポイント

フッターに設置しておけば、都度読み込まないで済むので、表示速度が改善します。

「jQuery Migrate plugin」は、jQueryのエラーを解決するプラグインです。

例えば「jQueryバージョンをアップしたら、動かなくなった……」という場合に、自動で修正してくれます。

jQueryを使う予定がある人は、チェックを入れておけば、予期せぬエラーを防ぐことができます。

「機能停止」タブ

機能停止タブは「不要な機能をオンオフ」できます。

SWELLの機能

SWELLの機能
SWELLの機能

「SWELLの機能」については、人それぞれ。正解がないです。好みに合わせてチェックを入れてください。

筆者がチェックしている項目

  • ページ表示時のアニメーションを停止
  • 投稿画像をクリックで拡大表示する機能を停止

私は、表示速度を改善するため「アニメーション」と「クリック拡大」機能を停止しました。

しかし、ファッションサイトのような「画像が主役のサイト」は、チェックを外さないほうがよいです。

カスタム投稿タイプ

カスタム投稿タイプ
カスタム投稿タイプ

カスタム投稿タイプでは、SWELLのカスタム投稿機能をコントロールできます。

キャベツ太郎

デフォルトのままで大丈夫です。

ブロガーには、全て必須の機能です。

WordPressの機能

WordPressの機能
WordPressの機能

この設定も、必要であればチェック、不要なら外します。

基本、デフォルトのままでOK

Font Awesome(フォント・オーサム)

Font Awesome
Font Awesome

Font Awesome(フォント・オウサム)とは「Webアイコンフォント」です。

画像を使わず、HTMLコードでアイコン表示できるため、サイト軽量化に繋がります。

Font Awesome
Font Awesome

ちなみにフォントオーサムは「SWELLボタン」に使うことができます。

キャベツ太郎

目立つボタンが作れるので、わたしは利用してます。

ブロスタヘッダーナビ
ブロスタヘッダーナビ

当サイトのヘッダーナビは、フォントオーサムでアイコン出力してます。

メリットデメリット
アイコン制作が不要。デザイン工数が削減できる
画像より、読み込み速度がはやい
アイコン種類が数千パターンあるので、デザインに飽きにくい
毎回、ファイルを読み込みするので表示速度が遅くなる
アイコン使わない場合、無駄にファイルを読み込む
アイコンをカスタマイズできない
フォントオーサムのメリット・デメリット

アイコンを使いたいならオン、「アイコンなんて一切使わないぜ」という人はオフをおすすめします。

「広告コード」タブ

広告コード
広告コード

広告設定タブでは、アドセンス広告の設定ができます。

画像の赤枠に、アドセンスコードを設定するだけで、アドセンスを開始できます。

インフィード広告や、自動広告設定も可能なので、カスタマイズもOKです。

「リセット」タブ

リセット
リセット

リセットタブでは、サイトのキャッシュを削除できます。

キャッシュとは、ブラウザが一時的に記憶しているWebサイトのデータのことです。

こんなときにキャッシュタブを使います

  • サイトを更新したのに、反映されてない
  • サイトが重いのでリフレッシュしたい

リセットタブは、特に設定する必要はございません。

まとめ【正しいSWELL設定で高速化 構造化データ】

SWELL
まとめ

まとめです。

SWELL設定は、サイト表示速度や、検索順位に関わる大切な設定です。

この記事の設定をマネすれば、サイト高速化ができます。

Googleページスピードインサイト100点
Googleページスピードインサイト100点

SWELL設定すると「Googleページスピードインサイト」で100点取れます

100点取ると、Googleから評価され、ドメインパワーがあがります。

結果、SEOが最適化され、収益化が進みます。

キャベツ太郎

本記事をマネするだけでOKです。必ず設定しましょう。

次の記事では、SWELLのGoogleAnalytics(グーグルアナリティクス)設定方法、を記載します。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


この記事でわかること(もくじ)