悩む人サイトスピードが遅くて困っています。
何か簡単にできる改善策はありますか？
テーマはSWELLを使っています。
こんな悩みを解決していきます。
本記事の内容
- SWELL：高速化する5つの設定方法
- 2つのプラグインを使ったサイト高速化
- 画像の圧縮でサイト高速化
まず初めに、PageSpeed Insightsを使って今の数値を確認しておきましょう。
最低でもモバイル・パソコンどちらの数値も80以上はあったほうが良いです。
今回は、そのサイトスピードを向上させるいくつかの方法を解説していきます。
ちなみにですが、当サイトは今回紹介する方法を行った結果以下のように高速化する事ができました。
ブログ初心者でも、全く難しい操作は無いのでぜひ参考にしてみてくださいね！
それでは早速見ていきましょう！
＼この記事で使用するWordpressテーマはコチラ／
SWELL：高速化する５つの設定方法
SWELLを高速化させる設定は、以下の5つです。
- フォント設定を変更
- キャッシュ機能の設定
- 遅延読み込みの変更
- ファイルの読み込みを改善
- ページの遷移高速化の設定
どれも簡単に設定できてしまうので、サクッと終わらせてしまいましょう！
SWELLの高速化①：フォント設定を変更
通常、SWELLを導入した直後の設定では、「Noto sant JP」というフォントになっています。
結構見逃している人いますが、これがサイトスピードを遅くしている原因の1つです。
りょうフォントでサイトスピードが遅くなるなんて分からないですよね（笑）
みかこれは早急に改善しないとだね！！
Noto sant JPのフォントを変更
それでは、フォントを変更していきましょう。
りょうSWELLを導入した直後は上のように設定されています。
これを、、、。
りょうNoto sant JP以外のフォントに変更します！
みか私達のおすすめは【游ゴシック】だよね、シンプルで丸っこくて好き！
Noto sant JP以外のフォントであれば何でもＯＫです。
SWELLの高速化②：キャッシュ機能の設定
みか「キャッシュ機能ってなにー？」
りょうんーとね、キャッシュ機能っていうのは、、、。
キャッシュ機能とは・・・訪問した “ ウェブページの情報 ” を一時的に保存する仕組み（またはその一時的なデータそのもの）のこと。
他の有料テーマはブラウザに保存しているのですが、SWELLはデータベースにキャッシュを保存しています。
「へえ～そうなんだー。」
ちょっと難しいので、これくらいで大丈夫です。
キャッシュ機能の設定
基本的に上記のように８つの項目にチェックを入れますが、プラグインで重複する機能があればそれは外しときましょう。
りょう「ブログカードのキャッシュ期間」は30日でOKです！
※設定が反映されない場合は、【SWELL】＞【リセット】を使ってキャッシュしてみましょう。
SWELLの高速化③：遅延読み込みの変更
次は遅延読み込みの変更を説明していきます。
遅延読み込みとは、ページを開いたとき表示されない下部の方を遅延読み込みさせる設定の事です。
1度でサイトの情報を読み込もうとすると、サイトスピードが遅くなる原因となります。
りょう後から読み込むといっても、記事を開いたときに違和感は感じないのでご安心を！
遅延読み込みの変更方法
設定画面に移ったら以下の３つにチェックをいれましょう。
- 記事下のコンテンツを遅延読み込みさせる
- フッターを遅延読み込みさせる
- スクリプト（(lazysize.js)を使って遅延読み込みさせる
りょう②の「フッター…」にチェックを入れると表示・非表示が使えなくなることがあるので注意です！
みか設定を変更すると、他の部分に影響が出るかもだし、早めに設定しておきたいね。
SWELLの高速化④：ファイルの読み込みを改善
次に「ファイルの読み込みを改善」していきます。
先程と同様に、
設定画面を下方にスクロールしていくと、「ファイルの読み込み」があるので、上記の部分にチェックをいれましょう。
りょうファイルの読み込みはこれでOKです！
SWELLの高速化⑤：ページの遷移高速化の設定
最後に「ページの遷移高速化の設定」を行っていきましょう。
下方にスクロールすると、ページの遷移高速化があるので、「Prefetch」にチェックしましょう。
ちなみに、ページの遷移高速化の設定では以下のような注意事項があるので覚えておいてください。
Prefetchに対応していないIEやSafariuでは動作しないので高速化しないブラウザには制限がありますが、Pjaxとは違ってプラグインなどで追加するスクリプトに制限がかかりません。
引用：SWELL公式サイト
りょうここまでで、SWELLでの高速化設定は完了です。
みか早速サイトスピードが上がっているか確認しよう！
2つのプラグインを使ったサイト高速化
悩む人SWELLの設定をしたけど、そんな変わらなかったな、、、。
正直、SWELLの設定だけではグッと数値が上がらない事もあるので、僕はプラグインも導入しました。
以下の2つが導入したプラグインです。
- Async JavaScript
- Autoptimize
りょう全て無料で導入できるので安心してくださいね（笑）
それでは1つずつ紹介していきます。
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」と同じ作者の物で、相性バツグン！
コチラも簡単に設定できるので見ていきます。
上記の手順で、設定画面に移りましょう。
その後、上記に表示される「JS,CSS＆HTML」を選択してください。
今回設定していく項目は以下の3つ！
- JavaScript オプション
- CSS オプション
- HTML オプション
JavaScript オプション
まずは、JavaScript オプションから見ていきます。
以下の部分にチェックを入れればOKです。
- JavaScript コードの最適化
- JS ファイルを連結する
CSSオプション
CSSオプションでチェックを入れるのは以下の3か所。
- CSS コードを最適化
- CSS ファイルを連結する
- インラインの CSS も連結
こちらもサクッと設定してしまいましょう。
HTML オプション
最後に以下の1か所にだけチェックを入れればＯＫです。
- HTML コードを最適化
全ての手順が終わったら、【変更の保存とキャッシュの削除】をクリックして完了！
りょうふぅ～お疲れ様です！
ここまでやれば結構スピード良くなってるはず、、、。
みか1つ1つは簡単だけど、結構時間かかったね（笑）
画像の圧縮でサイト高速化
悩む人ん～、もうちょっと数値上がらないかな、、、。
サイトスピードを測定して、数値が80を超えなかった人は画像の圧縮をしてみましょう。
ですが、妥協できる数値であればこのまま運営していても問題ないかとは思います。
りょう理由はですね、画像圧縮の作業はスゴイ面倒だからです（笑）
みか1日中その作業やってたもんね、大変そうだった。
次から使用する画像を圧縮するのは簡単ですが、問題は今まで貼りつけた画像の圧縮。
これを全てやるのはさすがに骨が折れます。
といっても、サイトスピードを改善するには必須なので、ちょくちょくやっていけば良いでしょう。
画像の圧縮はパンダにおまかせ
僕が実際に使用しているのは「https://tinyjpg.com/」コチラのサイト。
無料で利用出来て、画像の圧縮もサクッとやってくれるのでブックマークにしています。
りょう隙間時間とかを使って、ぜひ利用してみてくださいね！
まとめ：読者の為にサイトスピードを改善しよう
サイトスピードの改善は、簡単にできるのに置している人が多いです。
読者は読み込むのが遅いと違うサイトへ移動してしまうので、必ず改善はしておきましょう。
また、PV数を稼ぐためにはサイトスピードの他にも改善する箇所があったりします。
詳しくは「ブログ初心者がＰＶ数を増やす為にやるべき５つの事【月200万のブロガーから学ぶ】」で解説しているので参考にどうぞ。
それでは、今回紹介した方法を使ってグンッとサイトスピードの向上させてくださいね。
りょう/みか今回は以上になります。
最後まで読んでいただきありがとうございました！
コメント
コメント一覧 （1件）
[…] 関連記事>>「SWELLの速度が遅い！」高速化させる5つの設定とプラグイン導入 […]