ご依頼を検討されている方

【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記事のコンテンツを所有(現在300記事)
  • 画像を多用しているサイト
おにちゃん

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

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

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

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

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


目次

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

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

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

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


SWELL高速化①キャッシュ機能

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

キャッシュ機能とは

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

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

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

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

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

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

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

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


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

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

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

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

記事下コンテンツは絶対に見られる部分ではないので、遅延させておきましょう。footerも同様です。

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

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

遅延読み込みプラグイン

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

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


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

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

ファイルの読み込み方

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

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

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

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

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


SWELL高速化④SWELLの機能

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

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

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

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

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


SWELL高速化⑤WordPressの機能

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

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

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

おにちゃん

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

SWELL高速化5:WordPressの機能

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

SWELL高速化5:WordPressの機能
WordPressの機能概要
WordPressのバージョン情報を出力しない速度改善+セキュリティ対策|headタグ内に出力されてしまうバージョンを削除することができる
rel="prev/next"を出力しない以前はSEO効果があった。現在はGoogleがサポート停止したことが明らかになっているので不要
Windows Live Writeの連携停止マイクロソフトが開発しているブロガー向けのAPI
EditURI(RSD Link)を停止する外部ツールを使用せずに、管理画面のみから投稿している方は不要な項目です
絵文字用のスクリプトの読み込みをしない絵文字を使用しない方は不要な項目です。
セルフピンバックを停止するセルフピンバックとは、自分の記事同士でリンクを貼った時にくる通知です。かなり不要な項目です。
コアのサイトマップ機能を停止するサイトマップを使用している方は不要の項目です。
メディアライブラリの無限スクロールを停止する個人の自由|僕は停止しています。
meta="robots" content="max-image-preview:large"を出力しない検索結果のスニペットでどのように表示されるのかを細かく制御できる部分の一つ
REST API用のlinkタグを出力しないREST APIとは:簡単にいうと、Webシステムを外部から利用するためのAPI。普通に運営している分には不要
画像のsrcsetを出力しない画像読み込み機能|ブラウザによって異なる画像を読み込むことができる機能。個人的には必要な部分
記号の自動変換を停止する(wptexturize無効化)記号を自動的に変換する機能|例えば、..→‥と表示されたりする。正直必要のない項目です
RSSフィードを停止するクロール的にこの項目はチェックしないようにしましょう。



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

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

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対策として重要なのは表示速度や高速化ではなくコンテンツ制作です。

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

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

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