手順7では、ConoHaWING（コノハウィング）を使ってSWELLをインストールしました。
本記事は手順7の続きです。
質問SWELLをインストールした後って、どうすればいいの？
SWELLをワードプレスにインストールした後は、「SWELL設定」を行ってください。
SWELLをインストールすると、ワードプレス管理画面の左タブに「SWELL設定」が表示されます。
SWELL設定では、「サイト表示速度」「SEO設定」「広告タグ設定」を行うことができます。
やたろう家で例えるとブログの土台設定です。きちんと設定しましょう。
この記事では、表示速度を向上させる「SWELL設定」をご紹介します。
「SWELL設定」でできること：高速化＆構造化データ登録
SWELL設定では、7つの項目が設定できます。
それぞれ説明します。
「高速化」タブ
高速化タブでは、サイトの読み込みを速くするための設定を行います。
基本的には項目を選んでチェックを入れるだけの手軽な作業で、ブログ運営に慣れていない方でもスムーズに調整できます。
- キャッシュ機能の設定
- ファイルの読み込み設定
- ページ遷移の高速化
- 遅延読み込み
外部のプラグインをわざわざ追加しなくても、PageSpeed Insightsで満点のスコアを狙えるほどの表示速度を実現できます。
やたろう以前のテーマであるJINやSANGOで利用していた高速化プラグインは、すべて削除しました。
- Flying Scripts by WP Speed Matters
- Autoptimize（html、CSS、キャッシュ）
- Async JavaScript
- Scripts-To-Footer
プラグインの入れすぎは、表示の遅延や予期せぬ不具合を招く原因になります。
SWELLは標準機能で多くを補えるため、追加のプラグインを最小限に抑えてシステムエラーのリスクを下げられます。
実際、私は3年間大きなトラブルもなく運用を続けてきました。不具合対応などの無駄な作業に時間を奪われず、執筆に専念できる環境はとても快適です。
キャッシュ機能の設定
SWELL設定の「高速化」では、8つのキャッシュ設定が可能です。
- 動的なCSS
- ヘッダー
- サイドバー
- 下部固定メニュー
- スマホ開閉メニュー
- トップページ
- 内部リンク
- 外部リンク
やたろう私は全てチェックしてます。
キャッシュは、一度訪れたサイトの情報をブラウザに一時保存しておく仕組みを指します。
Yahooなどの大手サイトが常に素早く開くのも、この機能を活用しているからです。
SWELLの設定画面で必要な項目にチェックを入れておけば、常に最適なデータ読み込みが可能になります。表示の待ち時間が大幅に短縮されるため、読者にストレスを感じさせることなく記事を読んでもらえるようになります。
遅延読み込み機能
遅延読み込みは、サイトの表示スピードを底上げするための技術です。この設定をしていない場合、ページを開いた瞬間に記事内の全画像を一度に読み込もうとします。
まだ画面に映っていない範囲のデータまで一括で処理するため、読み込みが終わるまで操作が重くなったり、画面が止まったような状態になったりしてしまいます。
やたろうつまり、余分な画像も読み込まれてます。
特に画像が多いサイトでは表示の遅れが顕著になり、読者が不満を感じるだけでなく、検索エンジンからの評価を下げる要因にもなりかねません。
遅延読み込みを導入すれば、読者のスクロールに合わせて必要な分だけを読み込むようになります。無駄な通信を抑えて快適な閲覧環境を整えることは、結果として検索順位の向上にもつながります。
ファイルの読み込み、ページ遷移高速化
ファイルの読み込み、ページ遷移高速化設定では、以下にチェックしてます。
- SWELLのCSSをインラインで読み込む
- Prefetch（プリフェッチ）
「SWELLのCSSをインラインで読み込む」設定にもチェックを入れます。
「CSSをインラインで読み込む」の原理は、遅延読み込みと同じです。毎回ファイルを読み込まないので、表示速度が早くなります。（画像参照）
Prefetch（プリフェッチ）とは、利用が予測されるデータをあらかじめ高速メモリに読み込んでおき、性能と速度の向上を図る技術です。
やたろうインライン読み込みとプリフェッチは専門知識が必要です。とりあえずチェックしておけばOKです。
「構造化データ」タブ
構造化データとは、Googleロボットにサイト構成を伝えるHTMLデータです。簡単に言えば、検索エンジン（Googleロボット）に、自分のサイトをよく知ってもらうための技術です。
Googleロボットの理解は、SEOが有利になるだけではありません。例えばGoogle検索結果に「リッチリザルト」を表示できるようになります（画像参照）。
リッチリザルトが表示されると、Google検索結果画面で目立ち、クリック率が高まるメリットを得られます。
結果、サイト流入数が増加して、検索順位が上がりやすくなります。
「構造化データ」タブで設定することは２点だけです。
- 「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での構造化データの登録手順は下記記事で解説しています。
検索エンジンに情報を正しく伝えるこの設定は、SEOの評価を左右します。忘れずに登録を済ませておきましょう。
「jQuery（じぇいクエリ）の読み込み」タブ
jQueryはJavaScriptを使いやすくまとめたライブラリです。
ライブラリとは、冷凍食品のようなもの。必要なときに呼び出す冷凍食品のような道具だと考えてください。
ただ、この機能は設定を整えないとページを開くたびにファイルを読み込むため、表示を遅らせる原因になります。そのためSWELLでは、読み込みを強制するかどうかを運営者が選べるようになっています。
- jQueryをwp_footerで登録する
- jquery-migrateを読み込まない
「jQueryをwp_footerで登録する」は、チェックをおすすめします。チェックすることで、jQueryがフッターで読込まれるようになります。
jQueryファイルは、ページの上部から順に読み込まれますが、そのままだと画面の中身が表示される前にファイルの処理が走り、速度低下を招く原因になります。
やたろうフッター側、つまり最後に読み込ませる設定に変えることで、まずは記事の内容を素早く表示させられます。
あわせてjquery-migrateにもチェックを入れておけば、プログラムの更新に伴う予期せぬ不具合を防ぐ保険になります。
jQueryを多用するサイト構成なら、トラブル回避のために設定を済ませておきましょう。
Font Awesome(フォント・オーサム)
WebアイコンフォントのFont Awesomeは、画像ファイルを使わずにコードだけでアイコンを表示できる仕組みです。サイトの表示を重くせずに済むため、高速化に役立ちます。
やたろう私も頻繁に活用していますが、アイコンを自作する手間がなくなるので、作業時間を大幅に短縮できました。
Font Awesomeを導入すると、SWELLの各パーツにアイコンを添えられるようになります。
- SWELLボタン
- SWELLのキャプション
- ヘッダーナビボタン
サンプル
ボタンやキャプションボックス、ヘッダーナビといった箇所に視覚的なアクセントを加えることで、読者の目を自然と誘導できるのが利点です。
単なるテキストよりも目を引くため、クリック率の向上も期待できます。購入ページへと進むユーザーを増やすことができれば、それだけアフィリエイトの成果にも結びつきやすくなるはずです。
もしアイコンを一切使う予定がないのであれば、Font Awesomeの設定はオフにしておきましょう。余計なデータを読み込まずに済む分、サイトの動作をさらに軽くできます。
「機能停止」タブ
機能停止タブでは、使わない機能を個別にオフにできます。ここはサイトの構成や好みに合わせて、自分なりに使いやすく整えてみてください。
SWELLの機能
SWELLの個別の機能については、これさえ選べば正解という決まりはありません。自分のサイトの構成や使い勝手に合わせて、必要なものにチェックを入れてみてください。
- ページ表示時のアニメーションを停止
- 投稿画像をクリックで拡大表示する機能を停止
表示速度をできるだけ高めるために、私はアニメーションとクリック拡大の機能を停止しました。
ただ、ファッションサイトのように画像の見せ方が重要になる場合は、こうした機能を制限せずに残しておくのが無難です。サイトの特性に合わせて調整してみてください。
カスタム投稿タイプ
カスタム投稿タイプの項目では、SWELL独自の投稿機能を管理できます。ブログ運営に役立つものばかりなので、ここは特にチェックを入れず、そのままの状態にしておきましょう。
WordPressの機能
WordPress本体の機能についても、ここで個別に有効・無効を切り替えられます。特にこだわりがなければ、基本的には初期設定のままで差し支えありません。
自分にとって必要かどうかを判断しながら、必要に応じて調整してみてください。
「広告コード」タブ
広告設定タブではGoogleアドセンスの連携が行えます。指定の入力欄にアドセンスコードを貼り付けるだけ。すぐに配信準備が整います。
インフィード広告や自動広告の細かな調整も可能で、サイトに合わせて柔軟に広告を配置できます。
「リセット」タブ
リセットタブは設定の変更ではなく、蓄積されたキャッシュを消去するために使います。
ブラウザが一時的に保存しているサイトデータが原因で、表示がうまくいかないことも少なくありません。記事を更新したのに変更が反映されなかったり、サイト全体の動作が重く感じたりしたときは、このタブからデータを一度クリアしてみてください。
SWELL設定：よくある質問（FAQ） 【実体験】
「SWELL設定」を設定する前に、よくある質問を確認しておきましょう。
やたろう筆者の実体験に基づいてます。
事前に失敗対策ができるので、時間とお金の節約に繋がります。
正しいSWELL設定で、サイト高速化【手順8まとめ】
まとめです。
本記の設定をマネすれば、誰でもサイト高速化が実現できます。
正しくSWELL設定をすることで以下メリットを得られます。
- Googleページスピードインサイト」で100点が取れる
- Googleから評価され、ドメインパワーがあがる
- 検索順位があがりやすいサイトになる
結果、アフィリエイトで稼げる可能性が高くなります。
次の記事では、SWELLのGoogleAnalytics（グーグルアナリティクス）設定方法をご紹介します。