おにちゃん塾の商品一覧

【SWELL高速化】表示速度32から72に改善した方法【コツ紹介】

【SWELL高速化】表示速度32から72に改善した方法【コツ紹介】
URLをコピーする
URLをコピーしました!
本記事の想定読者
  • SWELLの表示速度次第で購入を考えている
  • SWELLは既に購入しており、SWELLの表示速度を高速化させる方法を知りたい

本記事は、上記の方に向けて執筆しています。

おにちゃん

執筆者:cocoon→JIN→SWELLとWordPressテーマを変更した僕が『SWELLの表示速度+高速化』について詳しく解説させていただきます。

結論から言うと、下記に当てはまる方にSWELLはおすすめです。

  • 有料テーマを1つも持っていない
  • 有料テーマを持っているがかなり表示速度が遅い

僕は、有料テーマJINを持っていましたが、表示速度がかなり遅いのでSWELLを購入しました。

JIN使用時の表示速度:32

JIN使用時には、PageInsightsで合格が一度も出ませんでしたが、SWELLに変更してからは合格がもらえるようになりました。

SWELLスマホの表示速度
SWELLパソコンの表示速度

おにちゃん塾の特徴

  • 本記事執筆時点で270記事のコンテンツを所有
  • 画像を多用しているサイト
おにちゃん

おにちゃん塾のような重たいサイトでもSWELLで対策をすると、かなり軽くなります。

とは言え、SWELLやアフィンガーなどのWordPressテーマの表示速度はそこまで変わりません。

有名テーマの中で、JINが遅めなだけです。

有料テーマの購入を考えている方で表示速度を意識したい方はJIN以外で考えてると良さそうです。

シンプル美と機能性の両立-圧倒的な使い心地を追求するWordPressテーマ


目次

【簡単】SWELLの表示速度を高速化するための5つの設定

【簡単】SWELLの表示速度を高速化するための5つの設定

SWELL表示速度の高速化のために行った5つの施策は下記のとおりです。

SWELL表示速度の高速化
  1. キャッシュ機能
  2. 遅延読み込み機能
  3. ファイルの読み込み
  4. SWELLの機能
  5. WordPressの機能


高速化①キャッシュ機能

SWELL表示速度の高速化施策1つ目はキャッシュ機能を活用することです。

キャッシュ機能とは

キャッシュ機能とは、WEBブラウザが一度閲覧したサイトのデータを保存しておき、次回以降の表示速度を向上させてくれる仕組みです。

具体的な話に落とし込むと下記のような感じです。

  1. 読者Aが初めておにちゃん塾を閲覧する(読み込みに5秒)
  2. おにちゃん塾のデータを読者AのWEBブラウザが保存
  3. 2回目読者Aがおにちゃん塾を閲覧する(読み込みに3秒)

このような流れで、表示速度を高速化する仕組み=キャッシュ機能です。

SWELLでは9個のキャッシュ機能が搭載されています。

高速化①キャッシュ機能
おにちゃん

ぼくはすべてのキャッシュ機能をONにしています

キャッシュ関連のプラグインを導入している方はご自身で調整してください。


高速化②遅延読み込み機能

SWELL表示速度の高速化施策2つ目は『遅延読み込み機能』をONにすることです。

遅延読み込みとは:サイトを表示する際に画面に映らない下の方にあるコンテンツを読み込まない機能

高速化②遅延読み込み機能

画像のLazyload部分は個人の好み次第です。僕はWordPress標準機能を信用していないので、下記のものを選択しています。

SWELL機能以外にもプラグインでも遅延読み込みは可能です。

遅延読み込みプラグイン

  • a3 Lazy Load
  • Lazy Load
  • Lazy Loader
おにちゃん

とはいえ、遅延読み込み系のプラグインは不具合が生じやすいので、個人的にはあまりおすすめしません。


高速化③CSSファイルの読み込み

SWELL表示速度の高速化施策3つ目はCSSファイルの読み込みをインラインにすることです。

ファイルの読み込み方

  • 外部ファイルから読み込む
  • インラインで読み込む

外部からファイルを読み込んでしまうと、表示速度が比較的に遅くなってしまうので、インラインで読み込む方をおすすめします。

SWELLでは簡単に読み込みをインライン化させることができます。

高速化③CSSファイルの読み込み

コードがご自身でいじれる方は下記の記事を参考にしてみてください。


高速化④SWELLの機能

SWELL表示速度の高速化施策4つ目はSWELLの機能を停止させることです。

SWELLには標準でたくさんの機能が実装されています。正直、使わないものまで実装されているので、適時SWELL機能を停止させていきましょう。

高速化④SWELLの機能
おにちゃん

個人的には、ページ表示時のアニメーションが不要だと思っています。

アニメーションは表示速度の高速化最大の敵ですので、高速化したい方はこの機能を停止させておきましょう。


高速化⑤WordPressの機能

SWELL表示速度の高速化施策5つ目はWordPressの機能を停止させることです。

SWELL以上にWordPressの機能は多機能です。

また、WordPressの機能やSWELLの機能やプラグインで機能がバッティングしてしまうこともあるので、その点は気をつけましょう。

おにちゃん

僕はサイトマップがWordPressの機能とプラグインでバッティングしていたので、WordPressのサイトマップ機能を停止させました。

ご自身で不要だと考えている機能はチェックしておきましょう。


【中級者向け】SWELLテーマの表示速度を高速化する方法

【中級者向け】SWELLテーマの表示速度を高速化する方法

SWELLテーマの表示速度を劇的に高速化させるための方法を紹介していきます。

SWELLテーマの表示速度を高速化する方法
  • フォントを変更させる
  • プラグインを変える
  • 画像圧縮ツールを使いこなす


フォントを変えると表示速度が高速化される

劇的にSWELL表示速度を高速化させる方法はフォントを変更することです。

SWELLテーマ<外観<カスタマイズ<サイト全体設定<基本設定<フォント設定へ行きフォントを変更しましょう。

フォントを変えると表示速度が高速化される

游ゴシックが一番早かったです。


プラグインの数を減らしSWELLを高速化

SWELL表示速度を劇的に高速化させる方法2つ目はプラグインの数を減らすことです。

SWELLの機能は優秀なので、いらないプラグインは削除しましょう。

プラグインの数を減らしSWELLを高速化

プラグインについては下記の記事で深堀りしてみます。


画像圧縮ツールを活用すると表示速度が高速化されます

SWELL表示速度の高速化に必要なのは画像の圧縮です。

EWWのようなプラグインもよいのですが、個人的には画像圧縮はほかツールで行うことをおすすめしていまう。


SWELL表示速度の高速化を確認する方法→PageSpeed Insights

SWELL表示速度の高速化を確認する方法→PageSpeed Insights

まずはPageSpeed Insightsへ行きます。

URLを入力し、分析をクリックしましょう。

これで、表示速度が変化しているはずです。

SWELLに変更直後は数字として現れませんでした。

理由は、ページ速度は28日間のデータだからです

SWELL変更から1ヶ月したくらいのタイミングで試してみたらこのぐらい早くなりました。


まとめ:SWELL表示速度の高速化はまだまだありそうです

まとめ:SWELL表示速度の高速化はまだまだありそうです

ここまでで【SWELL高速化】表示速度32から65に改善した方法【コツ紹介】の解説は以上です。

まとめ:SWELL表示速度の高速化

1ヶ月に一度SWELL高速化の内容をアップデートするので興味がある方はぜひ御覧ください。

おにちゃん

本記事は以上です。最後までご覧下さりありがとうございました。

SEO対策として重要なのは表示速度や高速化ではなくコンテンツ制作です。

そのことをお忘れないように

【SWELL高速化】表示速度32から72に改善した方法【コツ紹介】

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

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