【SWELL】3分で出来る高速化するためのおすすめの設定

3分で出来る高速化するためのSWELLのおススメの設定
困っている男性

SWELLのページ高速化設定をしたいんだけど、初心者にはちょっと理解が難しい。

困っている女性

この設定が最速!って設定を手っ取り早く教えてほしい。

今回はSWELLの設定で、ブログ初心者の方には少し難しいサイトの高速化設定について詳しく説明していきます。

この記事の内容
  • キャッシュ機能の設定
  • 遅延読み込み機能の設定
  • ファイルの読み込みの設定
  • ページ遷移高速化の設定
  • フォント変更で高速化

「キャッシュクリア」、「遅延読み込み」、「インライン読み込み」。

「高速化をしたいけど、何のことだか分からないので適当に設定している」

という方もいるのではないでしょうか。

しかし、ページ速度を最速にするには正しく設定する必要があり、間違った設定では逆に速度が低下してしまいます。

本記事では、ブログ初心者でも手順通り設定すれば表示速度を最速化できます

画像付きで順番に詳しく解説していきますので、手順に沿って設定してみてください。

目次

『キャッシュ機能』の設定でSWELLを高速化

ブログ初心者の中には、そもそも「キャッシュ」って何?と言う方もいると思うので、簡単に説明しておきます。

キャッシュとは、訪問したサイトの情報(履歴)を一時的に保存する仕組みのことです。

サイトを訪れた時、通常は画像やテキスト情報のデータをダウンロードしてページを表示するので、時間がかかるのですが、キャッシュという一時的な保存データがパソコンやスマホ内に残っていると、それらのデータを新たにダウンロードする必要がなくなるので、表示スピードが上がります。

通常はブラウザ(SafariやChrome、Microsoft Edgeなど)に保存されます。

SWELLでは、このキャッシュをブラウザではなくデータベースへ保存しています。

そのため、読者がブラウザでキャッシュをクリアにしてしまっていても、管理者側で一度表示させてキャッシュを作成しておけば、高速で表示させることができます。

Shindy

ひとまずこの設定をしておけば高速化できるので、理由までわからなくても大丈夫ですよ。

それでは設定方法を説明します。

「SWELL設定」>「高速化」に進みます。

SWELL設定の高速化

高速化にプラグインを入れている場合は、被っている機能はチェックを外します。

高速化を全てSWELLで行う場合は、全てにチェックを入れておきましょう。

SWELLでは標準で高速化機能があるので、プラグインによる不具合を起こさないためにも、キャッシュ系のプラグインは導入しないことをおススメします

ブログカードのキャッシュ期間はデフォルトのままでOKです。

SWELLで変更を加えた時に、変更が反映されない場合は、「SWELL設定」>「リセット」でキャッシュを削除すると解決するかもしれませんので試してみてください。

SWELLのキャッシュクリア
キャッシュのクリアで変更が反映されるかも

『遅延読み込み機能』の設定でSWELLを高速化

遅延読み込み機能とは、ページを訪れた時にはまだ見えないページ下部の読み込みを遅らせる機能です。

Shindy

例えば、フッターエリアに画像があった場合、ページを訪れた時はユーザーは見ないにもかかわらず、デフォルトではフッターの画像まで読み込みをしてしまうので表示速度が遅くなります。

この遅延読み込みは、「ページ下部にある見えない画像を読み込むのは後にして、ひとまずユーザーが見えるところだけ早く表示させよう」という機能です。

それでは遅延読み込み機能の設定方法を説明します。

「SWELL設定」>「高速化」に進みます。

SWELL設定の高速化で遅延読み込み機能を設定する

SWELLで読み込みを遅らせることができるパーツは以下の3つです。

  1. 記事下コンテンツ(記事本文より下側のエリア)
  2. フッター(フッター直前ウィジェットを含む)
  3. 投稿内の画像や動画

「記事下コンテンツを遅延読み込みさせる」「フッターを遅延読み込みさせる」にそれぞれチェックを入れます。

※「フッターを遅延読み込みさせる」にチェックを入れると、フッターでPC/SPで表示・非表示を変えている場合は、その機能が使えなくなります。

「画像のLazyload」の設定は、lazyloadではなくlazysizes.jsをおススメします。(「スクリプト(lazysizes.js)を使って遅延読み込みさせる」にチェック)

『ファイルの読み込み』の設定でSWELLを高速化

SWELL親テーマのスタイルシート(main.css)をインラインで読み込ませることがでます。

インラインとは、小さなコードを外部ファイル化せずに、そのままHTML内に埋め込むことです。大きなコードには適していません。

「SWELL設定」>「高速化」内にある、「ファイルの読み込み」で「SWELLのCSSをインラインで読み込む」にチェックを入れましょう。

※デフォルトではチェックが入っていません。

SWELL設定の高速化でファイルをインラインで読み込む

『ページ遷移高速化』の設定でSWELLを高速化

ここではページ遷移の高速化設定ができます。

SWELL設定の高速化で、ページ遷移高速化の設定

注意点として公式サイトには、

ここで紹介する機能はあくまでもページの「遷移」が高速化するだけのものです。
ファーストビュー時の表示速度は速くならない(むしろ、読み込むスクリプトが増える)ことに注意してください。

SWELL公式サイト

とあります。

SEOでオーガニック検索からやってくる場合、ページ遷移よりファーストビューの表示速度の方が重要です。

この機能を推奨しているサイトもありますが、ファーストビューの表示速度を犠牲にしてまで、ページ遷移を高速化する必要はないので、知識なくやたら使用するのはおススメしません。

PrefetchPjax
ファーストビュー
(PageSpeed Insightsで測定)
使用しない場合とほぼ同じ使用しない場合より減速
ページ遷移速度やや高速かなり高速
動作・追加で読み込まれるスクリプトが軽量。
・プラグインなどで追加するスクリプトに制限がかからない。
・IEやSafariでは動作しない
・プラグインなどで追加された機能がうまく動作しない可能性がある。
・アドセンスの自動広告が機能するかは未検証。

よく分からないのであれば使用しない、どうしても使いたいのであればPrefetchにチェックを入れましょう。

さらに高速化SWELLのフォント変更

実はあまり知られていないのですが、SWELLでは、フォントを変更すると、表示速度が早くなる事があります。

さらに高速化したい!という方は試してみましょう。

「外観」>「サイトデザイン」>「基本デザイン」に進みます。

フォント設定からフォントを変更します。

SWELLのフォント設定

当サイトでは

PC:游ゴシック≒メイリオ>Noto Sans JP>明朝体

SP:游ゴシック=メイリオ>明朝体>Noto Sans JP

の順で早い結果となりました。

フォントによるPSIスコア-PC
Shindy

游ゴシックメイリオを使うと速いです。

それでも速くならないという方は

色んな施策をしてみたけど速くならないという方は、サーバーの変更も検討してみるといいかもしれません。

サーバーの性能は、表示速度に大きな影響を及ぼすため、大きな効果が得られる可能性があります。

おすすめはConoHa WINGです。

理由はいたってシンプルで、「コスパがとてもいい」からです。

実際に僕も、レンタルサーバーをConoHa WINGにして、体感で分かるほど速くなりました。

もっと速度を速くしたい方だけ、下記の記事をご覧ください。

SWELLの高速化設定まとめ

以上で、高速化の設定は完了です。

SWELLでは正しく設定すれば、プラグインなしでも高速化の設定が可能です。

ユーザに快適な表示速度の最適化を目指しましょう!

その他、SWELLの初期設定は以下にまとめてありますので、あわせてどうぞ。

3分で出来る高速化するためのSWELLのおススメの設定

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる