4/5(金) まで最大55%OFF1,000円クーポン(コノハウィング)

【手順8】SWELLで検索順位1位を取るための初期設定~サイト高速化

プロモーションが含まれる場合があります
swell-speedingup
  • URLをコピーしました!

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

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

質問

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

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

SWELL設定
SWELL設定

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

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

やたろう

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

この記事では、SEOがあがる「SWELL設定」をご紹介します。

この記事を書いている人
プロフィール
筆者のプロフィール画像
やたろう
  • ConoHaWINGユーザー4年目
  • SWELLユーザー3年目
  • SEO検定一級合格
  • 月収6ケタ(プラチナランク)
  • 某ASPの社員
A8プラチナ会員
A8:プラチナ会員

スクロール&拡大できます

SEO検定1級
SEO検定1級
登場人物
登場人物
この記事でわかること(もくじ)

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

SWELL設定
SWELL設定

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

それぞれ説明します。

「高速化」タブ

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

「高速化」タブでできること
  • キャッシュ機能の設定
  • ファイルの読み込み設定
  • ページ遷移の高速化
  • 遅延読み込み

SWELLのメリットは、高速化プラグインを入れずに、PageSpeed Insights(ページスピードインサイト)で100点取れること。

ブログ初心者でも100点とれる

SWELLスピード100点
Google:ページスピードインサイト100点
やたろう

JINやサンゴで使っていた高速化プラグインは削除しました。

不要になった高速化プラグイン
  • Flying Scripts by WP Speed Matters
  • Autoptimize(html、CSS、キャッシュ)
  • Async JavaScript
  • Scripts-To-Footer

高速化プラグインは、導入する工数が必要です。また、サイト不具合の原因になりますよね。

SWELLは、プラグインが最小限で済むので、サイトエラーが起きにくいメリットがあります。

やたろう

実際、わたしも3年間不具合が起きてません。無駄な作業がなくて快適にブログできてます。

キャッシュ機能の設定

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

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

8つのキャッシュ設定
  • 動的なCSS
  • ヘッダー
  • サイドバー
  • 下部固定メニュー
  • スマホ開閉メニュー
  • トップページ
  • 内部リンク
  • 外部リンク
やたろう

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

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

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

例えば、Yahooは、サクサク表示されませんか?あれはキャッシュを使っているので、すばやく表示できております。

SWELL設定でキャッシュにチェックを入れておけば、常にキャッシュ利用できます。ユーザーにストレスを与えない設定が、1秒で完了します。

遅延読み込み機能

遅延読み込み
遅延読み込みの例

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

「遅延読み込み」を設定していない場合、HTMLファイルに記載されてる画像は、全て読み込まれてから表示されてます。つまり、余分な画像も読み込まれてます。

Webサイトで大量の画像を使用していると、読み込みに時間がかかり、Webページの表示速度が低下してしまいます。結果的に、ユーザーの画面操作に支障が出たり、表示速度が遅いことによって検索エンジンからの評価が下がったりする恐れがあります。

遅延読み込みを設定すると、画像がユーザーの「視認範囲」になったタイミングで、画像を読み込むように変わります。

つまり、無駄な画像を読み込まないので、表示速度が上がります。結果、検索順位も上がるメリットがあります。

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

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

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

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

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

やたろうがチェックしている項目
  • SWELLのCSSをインラインで読み込む
  • Prefetch(プリフェッチ)
インラインで読み込む
参考:サルカワ

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

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

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

やたろう

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

「構造化データ」タブ

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

構造化データとは、Googleロボットにサイト構成を伝えるHTMLデータです。簡単に言えば、検索エンジン(Googleロボット)に、自分のサイトをよく知ってもらうための技術です。

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

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

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

やたろう

SEOに有利に働きます。

構造化データ

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

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

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

サイト運営組織(publisher情報)は、E-E-A-Tに関する設定。こちらも設定することで、SEOに有利に働きます。

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

引用:satori.marketing

SWELLは、ブロックから構造化設定できる

SWELLは、「構造化データタブ」の他に、SWELLブロックからも構造化設定ができます。

構造化
SWELLはブロックから構造化設定ができる
FAQブロック構造化
やたろう

ブロックから、構造化データを登録できるのは、SWELLだけです(2023年6月時点)。

SWELLで構造化データを登録する方法は、以下記事でご紹介しております。

構造化データは、SEOに有利に働く設定なので、必ず設定することをオススメします。

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

jQueryとは
jQueryとは

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

ライブラリとは、冷凍食品のようなもの。必要なときに必要なプログラムを呼び出す機能です。

ただし、jQueryは、ファイルを毎回読み込むため、サイト表示速度が重くなりがち。そのため、SWELLは「強制的に読み込むか、読み込まないか」選択できます。

jQuery(じぇいクエリ)読み込み
jQueryの読み込み
やたろうがチェックしている項目
  • jQueryをwp_footerで登録する
  • jquery-migrateを読み込まない

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

なぜなら、余計なコードを読み込まないからです。

jQueryファイルは、ヘッダーからフッターへ読み込まれます。そのため、ヘッダーから読み込む設定をしていると「都度jQueryファイルを読み」するので、サイト表示速度が遅くなる懸念があります。

ココがポイント

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

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

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

「jQuery Migrate plugin」は、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

Font Awesome(フォント・オウサム)は、

  • ボタン
  • キャプション
  • ヘッダーナビ

など、様々なシーンで「アイコン表示」ができます。

サンプル

ボタンやキャプションに表示させることで、CTA(コールトゥアクション)を目立たせることができます。結果、アフィリエイトで売れるようになるでしょう。

メリットデメリット
アイコン制作が不要。デザイン工数削減
画像より、読み込み速度がはやい。SEOに有利
ボタンを目立たせる。CTAと相性がよい
毎回、ファイルを読み込むため表示速度落ちる
アイコン使わない場合、無駄にファイルを読み込む
フォントオーサムのメリット・デメリット

「アイコンなんて一切使わない」という人は、Font Awesome(フォント・オウサム)はオフをおすすめします。

「広告コード」タブ

広告コード
広告コード

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

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

「リセット」タブ

リセット
リセット

リセットタブは、サイトのキャッシュを削除できます。設定する必要はございません。

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

こんなときにキャッシュタブを使います
  • サイトを更新したのに、反映されてない
  • サイトが重いので軽くしたい

正しいSWELL設定で、サイト高速化【手順8まとめ】

SWELL
まとめ

まとめです。

本記事通りにSWELL設定すれば、誰でもサイト高速化が実現できます。

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

正しくSWELL設定ができると「Googleページスピードインサイト」で100点取れます。Googleから評価され、ドメインパワーがあがります。

結果、記事を書くたびにページ評価が高まり、アフィリエイトで稼げるようになります。

やたろう

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

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

よかったらシェアしてね!
  • URLをコピーしました!
この記事でわかること(もくじ)