「速度が遅い…」そんな方がSWELLを高速化させる【5つの設定】

悩んでいる人

SWELLに移行したけど表示速度が遅いな…

悩んでいる人

ページスピードを高速化する方法を教えてほしい…

こんなSWELLに関するお悩みを解決します。

本記事の内容

  • 簡単に表示速度を上げる方法
  • 表示速度を高速化する5つの設定
  • ページ速度を測定してみよう

Osuke Blogのページスピード

モバイル パソコン
 パソコン
Osuke

当ブログのページ速度はこんな感じです。

今回はSWELLのページスピードを高速化する方法について解説していきます。

設定は5つほどありますが、記事を見ながら行えば簡単に設定することができますよ。

公式サイトにも載っていない設定もあるのでぜひ最後までご覧ください

もくじ

SWELLを高速化させる設定5つ

設定は次の5つになります。

  1. フォント設定を変更する
  2. キャッシュ機能の変更
  3. 遅延読み込みの変更
  4. ファイル読み込みを改善
  5. ページ遷移高速化の設定

ひとつずつ解説していきます。

【SWELLを高速化|フォントを変更

SWELLはを導入された直後は、デフォルトで【Noto sant JP】というフォントになっています。

実は、このフォントが表示スピードを遅くさせている原因だったんです。

フォントが【Noto santo JP】だった時の表示速度

モバイルの表示速度
PCの表示速度
Osuke

表示速度が速いはずのSWELLでこれはおかしい…

ということで色々と調べてみると、【Noto sant JP】というフォントが良くなかったみたいです。

Noto santo JPフォントを変更

ではフォントを変更していきましょう。

【外観】>【サイトデザイン】>【サイト全体】>【基本デザイン】を開きます。

デフォルトの状態
Osuke

SWELLを導入したばかりのデフォルトでは上のようになっています。

フォントを変更した直後
Osuke

Not sant JP以外ならフォントは何でもOKですよ

僕的には「游ゴシック」がバランスが良いのでオススメです。

SWELLを高速化|フォントを変更キャッシュ機能を変更

「キャッシュ機能ってなんですか?」という方に簡単にですが、説明します。

キャッシュとは・・・訪問した “ ウェブページの情報 ” を一時的に保存する仕組み(またはその一時的なデータそのもの)のこと。

引用:TIME&SPA

他の有料テーマはブラウザで保存しているのですが、SWELLはデータベースにキャッシュを保存しているのです。

Osuke

難しい話になってきたのでここで終わりにします

ではさっそく設定していきましょう。

キャッシュを設定する

SWELL設定

【SWELL】>【高速化】を開きます。

プラグインで高速化するような物を入れる場合は重複してしまうので、チェックを外すようにしましょう。

表示速度を高速化する場合は、8つの項目にチェックします。

Osuke

「ブログのキャッシュ期間」は30日のままでOKですよ

  • 設定の変更が反映されない場合は
  • 【SWELL】>【リセット】を使ってキャッシュをクリアしてみましょう。

SWELLを高速化|延読み込み機能の変更

3つ目は遅延読み込みの設定になります。

遅延読み込みとは…ページを開いたときに表示されない下部の読み込みを遅延させる設定のことです。

Osuke

一度ですべてを読み込むと遅延の原因となります

【SWELL】>【高速化】を開きます。

次の3つにチェックを入れるようにしましょう。

  • 記事下コンテンツを遅延読み込みさせる
  • フッターを遅延読み込みさせる
  • スクリプト(lazysize.js)を使って遅延読み込みさせる
Osuke

②の「フッター遅延読み込みさせる」にチェックを入れた場合、

Osuke

フッターの表示、非表示の機能が使えなくなることがあるので注意です

SWELLを高速化|ファイル読み込み

【SWELL】>【高速化】

「ファイルを読み込み」をインラインでを使って読み込ませるようします。

SWELLの高速化設定
  • ファイル読み込みの設定はこれで終了です。

SWELLを高速化|ページの遷移高速化

ラストの「ページの遷移高速化」となります。

【SWELL設定】>【ページ遷移高速化】>【Prefetch】にチェック

このページ遷移高速化を使うときに知っておいて欲しいことがあります。

Prefetchに対応していないIEやSafariuでは動作しないので高速化しないブラウザには制限がありますが、Pjaxとは違ってプラグインなどで追加するスクリプトに制限がかかりません。

引用:SWELL公式サイト
Osuke

この設定はあくまで、ブログ内の遷移速度を速めるための設定です

PageSpeed Insightsで高速化できているかチェック

pagespeed insightsでブログの速度をチェック

ここまで本当にお疲れさまでした!

Osuke

最後にサイトの表示速度を測ってみましょう

>>PageSpeed Insights(外部サイト)

  • 外部サイトへ飛びます

どうでしょうか?

若干ですが高速化されたのではないでしょうか。

まとめ:SWELLの表示速度を上げてユーザー満足度をアップ!

今回はSWELLを高速化するための5つの設定を紹介しました。

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

SWELLは余計な設定をしなくても、ページスピードを高速化することができます。

Osuke

表示速度を高めてユーザー満足度を高めていきましょう

今回は以上となります。

SWELLに関する記事をこちら

>>CocoonからSWELLに乗り換えた理由と移行方法

SWELLとの相性抜群のSEO対策プラグインはこちら

スポンサーリンク

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

SNSでシェアお願いします
URLをコピーする
URLをコピーしました!

質問はこちらへお願いします。

コメントする

もくじ
閉じる