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

悩んでいる人

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

悩んでいる人

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

こんなお悩みを解決します。

本記事の内容
  • SWELLを高速化する5つの設定
  • 表示速度をUPする方法
  • ページ表示速度を測定する方法

筆者情報

この記事を書いている僕はブログ歴半年、2020年8月からSWELLを愛用しています

当ブログのページ表示速度は次の通りです。

モバイル
 パソコン

今回はSWELLのページスピードを高速化する5つの方法をご紹介します。

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

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

目次

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

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

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

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

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

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

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

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

モバイルの表示速度
PCの表示速度
オウスケ

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

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

Noto santo JPフォントを変更

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

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

デフォルトの状態
オウスケ

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

フォントを変更した直後
オウスケ

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

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

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

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

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

引用:TIME&SPA

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

オウスケ

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

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

キャッシュを設定する

SWELL設定

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

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

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

オウスケ

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

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

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

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

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

オウスケ

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

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

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

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

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

オウスケ

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

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

【SWELL】>【高速化】

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

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

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

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

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

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

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

引用:SWELL公式サイト
オウスケ

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

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

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

ここまでお疲れさまでした。

オウスケ

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

>>PageSpeed Insights(外部サイト)

  • 外部サイトへ飛びます

どうでしょうか?

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

SWELLの設定以外で高速化させる方法

SWELLの設定以外で高速化させる方法を2つご紹介します。

はじめに設定した方法で高速化できているはずですが、さらに早くさせ

  1. ブログ内の画像を圧縮
  2. プラグインの数を減らす

1つずつご紹介します。

①:ブログ内の画像を圧縮

ブログで使う画像は必ず圧縮しましょう。

なぜなら画像ファイルがサイトを遅くする原因だからです。

画像を挿入するさいは、事前に圧縮ツール・サイトで圧縮するようにしましょう。

Tiny PNGという画像圧縮サイトで、このサイトで圧縮してアップロードするのが簡単ですよ。

オウスケ

圧縮系プラグインを入れたくない方におすすめです

②:プラグインの数を減らす

プラグインはできる限り減らしましょう。

SWELLの場合は、基本的な機能が備わっているので、あまりプラグインを必要ないです。

当ブログはプラグインを12個ほど入れていますが、目安として15個以内にするのおすすめです。

SWEL開発者さまが作ったSEO対策用のプラグインがあるため、合わせてご覧ください。

>>SEO SIMPLE PACKの使い方から初期設定を解説【25枚の画像付き】

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

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

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

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

オウスケ

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

今回は以上です

関連記事

スポンサーリンク

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

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

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

コメントする

目次
閉じる