「SWELLの速度が遅い!」高速化させる5つの設定とプラグイン導入

悩む人

サイトスピードが遅くて困っています。
何か簡単にできる改善策はありますか?
テーマはSWELLを使っています。

こんな悩みを解決していきます。

本記事の内容
  • SWELL:高速化する5つの設定方法
  • 2つのプラグインを使ったサイト高速化
  • 画像の圧縮でサイト高速化

まず初めに、PageSpeed Insightsを使って今の数値を確認しておきましょう。

最低でもモバイル・パソコンどちらの数値も80以上はあったほうが良いです。

今回は、そのサイトスピードを向上させるいくつかの方法を解説していきます。

ちなみにですが、当サイトは今回紹介する方法を行った結果以下のように高速化する事ができました。

https://twitter.com/livingblog24/status/1401105744481513473?s=20

ブログ初心者でも、全く難しい操作は無いのでぜひ参考にしてみてくださいね!

それでは早速見ていきましょう!

\この記事で使用するWordpressテーマはコチラ/

目次

SWELL:高速化する5つの設定方法

SWELL:高速化する5つの設定方法

SWELLを高速化させる設定は、以下の5つです。

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

どれも簡単に設定できてしまうので、サクッと終わらせてしまいましょう!

SWELLの高速化①:フォント設定を変更

通常、SWELLを導入した直後の設定では、「Noto sant JP」というフォントになっています。

結構見逃している人いますが、これがサイトスピードを遅くしている原因の1つです。

りょう

フォントでサイトスピードが遅くなるなんて分からないですよね(笑)

Noto sant JPのフォントを変更

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

【外観】>【カスタマイズ】>【サイト全体設定】>【基本デザイン】を開きます。

りょう

SWELLを導入した直後は上のように設定されています。
これを、、、。

りょう

Noto sant JP以外のフォントに変更します!

Noto sant JP以外のフォントであれば何でもOKです。

SWELLの高速化②:キャッシュ機能の設定

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

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

「へえ~そうなんだー。」

ちょっと難しいので、これくらいで大丈夫です。

キャッシュ機能の設定

【ダッシュボード】>【SWELL設定】>【高速化】を開きます。

基本的に上記のように8つの項目にチェックを入れますが、プラグインで重複する機能があればそれは外しときましょう。

「ブログカードのキャッシュ期間」は30日でOKです!

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

SWELLの高速化③:遅延読み込みの変更

次は遅延読み込みの変更を説明していきます。

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

1度でサイトの情報を読み込もうとすると、サイトスピードが遅くなる原因となります。

後から読み込むといっても、記事を開いたときに違和感は感じないのでご安心を!

遅延読み込みの変更方法

【ダッシュボード】>【SWELL設定】>【高速化】を開きます。

設定画面に移ったら以下の3つにチェックをいれましょう。

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

②の「フッター…」にチェックを入れると表示・非表示が使えなくなることがあるので注意です!

SWELLの高速化④:ファイルの読み込みを改善

次に「ファイルの読み込みを改善」していきます。

先程と同様に、

【ダッシュボード】>【SWELL設定】>【高速化】を開きます。

設定画面を下方にスクロールしていくと、「ファイルの読み込み」があるので、上記の部分にチェックをいれましょう。

りょう

ファイルの読み込みはこれでOKです!

SWELLの高速化⑤:ページの遷移高速化の設定

最後に「ページの遷移高速化の設定」を行っていきましょう。

【ダッシュボード】>【SWELL設定】>【高速化】を開きます。

下方にスクロールすると、ページの遷移高速化があるので、「Prefetch」にチェックしましょう。

ちなみに、ページの遷移高速化の設定では以下のような注意事項があるので覚えておいてください。

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

引用:SWELL公式サイト
りょう

ここまでで、SWELLでの高速化設定は完了です。

>>PageSpeed Insights・・・サイトスピードを測定してみよう!

2つのプラグインを使ったサイト高速化

2つのプラグインを使ったサイト高速化
悩む人

SWELLの設定をしたけど、そんな変わらなかったな、、、。

正直、SWELLの設定だけではグッと数値が上がらない事もあるので、僕はプラグインも導入しました。

以下の2つが導入したプラグインです。

  • Async JavaScript
  • Autoptimize

全て無料で導入できるので安心してくださいね(笑)

それでは1つずつ紹介していきます。

Async JavaScript:レンダリングを妨げるリソースの除外を改善

Async JavaScript:レンダリングを妨げるリソースの除外を改善

△レンダリングを妨げるリソースの除外

サイトスピードを測定すると、上記のような問題点が上がる事がありますよね。

この問題を解決してくれるのが、「Async JavaScript」というプラグインです。

【ダッシュボード】>【外観】>【プラグイン】>【新規追加】をクリック

上記の手順でプラグインを追加して、有効にしましょう。

Async JavaScriptの設定方法

それでは設定方法をサクッと紹介します。

【ダッシュボード】>【設定】>【Async JavaScript】を選択

設定画面へ移動したら、上のタスク2番目の「Settings」を選択してください。

その後、以下のようにチェックを入れていきましょう!

①:Enable Async JavaScript

Enable Async JavaScript? 」にチェックを入れる。

②:Quick Settings

Apply Async」をクリック

③:jQuery

Async」をクリック

設定が完了したら、下方にある「Save Settings」を忘れずにクリック!

ちなみに、Asyncってどういう意味なの?

Asyncというのは、「非同期化」をする事で、Webページの表示スピードを改善できる効果があります。

Autoptimize:主要なリソースを軽量化・圧縮

次に、主要なリソースを軽量化・圧縮してくれるプラグインです。

先ほど紹介した「Async JavaScript」と同じ作者の物で、相性バツグン!

コチラも簡単に設定できるので見ていきます。

【ダッシュボード】>【設定】>【Autoptimize】を選択

上記の手順で、設定画面に移りましょう。

その後、上記に表示される「JS,CSS&HTML」を選択してください。

今回設定していく項目は以下の3つ!

  • JavaScript オプション
  • CSS オプション
  • HTML オプション

※「JavaScript オプション」しか表示されない場合は、画面右上ある「高度な設定を非表示」をクリックしてください。

JavaScript オプション

まずは、JavaScript オプションから見ていきます。

以下の部分にチェックを入れればOKです。

  1. JavaScript コードの最適化
  2. JS ファイルを連結する

CSSオプション

CSSオプションでチェックを入れるのは以下の3か所。

  1. CSS コードを最適化
  2. CSS ファイルを連結する
  3. インラインの CSS も連結

こちらもサクッと設定してしまいましょう。

HTML オプション

最後に以下の1か所にだけチェックを入れればOKです。

  1. HTML コードを最適化

全ての手順が終わったら、【変更の保存とキャッシュの削除】をクリックして完了!

ふぅ~お疲れ様です!
ここまでやれば結構スピード良くなってるはず、、、。

1つ1つは簡単だけど、結構時間かかったね(笑)

>>PageSpeed Insights・・・サイトスピードを測定してみよう!

画像の圧縮でサイト高速化

画像の圧縮でサイト高速化
悩む人

ん~、もうちょっと数値上がらないかな、、、。

サイトスピードを測定して、数値が80を超えなかった人は画像の圧縮をしてみましょう。

ですが、妥協できる数値であればこのまま運営していても問題ないかとは思います。

理由はですね、画像圧縮の作業はスゴイ面倒だからです(笑)

1日中その作業やってたもんね、大変そうだった。

次から使用する画像を圧縮するのは簡単ですが、問題は今まで貼りつけた画像の圧縮。

これを全てやるのはさすがに骨が折れます。

といっても、サイトスピードを改善するには必須なので、ちょくちょくやっていけば良いでしょう。

画像の圧縮はパンダにおまかせ

画像の圧縮はパンダにおまかせ

僕が実際に使用しているのは「https://tinyjpg.com/」コチラのサイト。

無料で利用出来て、画像の圧縮もサクッとやってくれるのでブックマークにしています。

隙間時間とかを使って、ぜひ利用してみてくださいね!

まとめ:読者の為にサイトスピードを改善しよう

まとめ:読者の為にサイトスピードを改善しよう

サイトスピードの改善は、簡単にできるのに置している人が多いです。

読者は読み込むのが遅いと違うサイトへ移動してしまうので、必ず改善はしておきましょう。

また、PV数を稼ぐためにはサイトスピードの他にも改善する箇所があったりします。

詳しくは「ブログ初心者がPV数を増やす為にやるべき5つの事【月200万のブロガーから学ぶ】」で解説しているので参考にどうぞ。

それでは、今回紹介した方法を使ってグンッとサイトスピードの向上させてくださいね。

りょう

今回は以上になります。
最後まで読んでいただきありがとうございました!

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

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

コメント

コメント一覧 (1件)

コメントする

目次
閉じる