6/13まで最大52%オフコノハウィング

【手順8】検索順位で1位をとる。SWELL初期設定|サイト高速化

swell-speedingup
  • URLをコピーしました!

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

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

質問

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

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

SWELL設定
SWELL設定

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

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

キャベツ太郎

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

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

この記事を書いてる人
キャベツ太郎
キャベツ太郎

<プロフィール>

  • ConoHaWING3年目
  • SWELL3年目
  • SEO検定一級合格
  • 月収6ケタ(プラチナランク)
  • 某ASPの社員
実績&資格(クリックで開く)
A8:プラチナ会員

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

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

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

SWELL設定
SWELL設定

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

1つ1つ説明します。

「高速化」タブ

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

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

SWELLは、高速化プラグインを入れる必要はありません。チェックを入れるだけで、表示速度があがります。

キャベツ太郎

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

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

高速化プラグインは、導入工数だけでなく、サイト不具合の原因になります。

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
SWELLはブロックから構造化設定ができる
FAQブロック構造化

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

ココがポイント

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

構造化

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

Font Awesome(フォント・オウサム)は、SWELLブロックで併用できます。

サンプル

ボタンやキャプションで使えるので、CTA(コールトゥアクション)を目立たせることができます。

結果、アフィリエイト成約数があがります。

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

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

「広告コード」タブ

広告コード
広告コード

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

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

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

「リセット」タブ

リセット
リセット

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

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

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

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

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

SWELL
まとめ

まとめです。

本記事を真似して、正しいSWELL設定をすれば、誰でもサイト高速化が実現できます。

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

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

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

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

キャベツ太郎

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

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

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