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

悩む人

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

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

本記事の内容

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

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

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

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

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

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

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

SWELL：圧倒的に使いやすくシンプルなWordpressテーマ

17,600円（税込）

開発者「了」さんによって2019年に公開された比較的新しいWordpressテーマ。他の有料テーマを使用していた僕も虜になっている「扱いやすさ」と「洗練されたデザイン」は多くのブロガーを魅了中！！

SWELL公式サイト購入する

SWELL：高速化する５つの設定方法

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

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

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

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

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

りょう

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

Noto sant JPのフォントを変更

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

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

りょう

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

りょう

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

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

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

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

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

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

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

キャッシュ機能の設定

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

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

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

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

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

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

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

遅延読み込みの変更方法

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

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

りょう

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

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

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

先程と同様に、

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

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

りょう

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

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

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

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

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

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

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

引用：SWELL公式サイト

りょう

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

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

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

悩む人

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

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

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

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

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

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

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

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

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

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

Async JavaScriptの設定方法

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

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

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

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

①：Enable Async JavaScript

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

②：Quick Settings

「Apply Async」をクリック

③：jQuery

「Async」をクリック

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

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

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

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

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

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

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

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

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

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

JavaScript オプション

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

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

CSSオプション

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

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

HTML オプション

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

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

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

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

悩む人

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

りょう

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