SWELLの速度が気になる人SWELLを高速化するにはどうすればいいのか知りたい。思い切ってSWELLに移行したんですが、思ったより速度が遅いような・・・。表示速度はSEOに影響するって聞いたし、なんとかしたい！ブログのページスピードを速くして、たくさん読まれるブログに仕上げたい。
こんな悩みを持ってる人に向けての記事です。
この記事を書いてる僕は2020年10月からSWELL
ユーザー。
当ブログのPageSpeed Insightsでのスコアは下記のとおり「モバイル：99、パソコン：100」です。
多少数字が変化するものの割と高スコアなので百聞は一見にしかず、実際に測定してみてください。
>> ぽりけんブログのスコアを測定してみる
今回はSWELLを高速化する方法をコードとかわからない人にもわかりやすく解説していきます。
「SWELLは速い」と聞いてたのに思ったより速くないと「あれっ？なんか設定とか間違ってるのかな？」って思いますよね。
僕も実際にSWELLを使って速度に戸惑うことがありましたが、今回紹介してる方法でバッキバキの速度に仕上がりました。
ぽりけんおすすめの高速化設定 ＋ もっと速くする方法を書いてるので、読み終える頃には今よりSWELLが速くなりますよ。
また、記事後半にはページ速度を気にしすぎると本末転倒になる！と大事な大事なマインド面も書いてるので、最後まで読んでスッキリしてくださいね。
SWELLを高速化する7つのおすすめ設定
SWELLを高速化するには、下記７つの設定を見直してください。
- フォント設定
- キャッシュ機能
- 遅延読み込み
- ファイルの読み込み
- ページ遷移高速化
- jQueryの読み込み
- Font Awesomeの読み込み
１つずつ画像つきで説明していきますね。
高速化前と後の速度をわかりやすく比較できるように、現在の状態をPageSpeed Insightsで測定しておきましょう。
ここから先は、テスト用に立ち上げた「今回だけね。」というサンプルサイトを例にして解説していきます。
まずはわかりやすいように高速化前のスコアを貼り付けておきますね。
高速化設定前のスコア
設定①：フォント設定
フォント設定では「游ゴシック」 or 「ヒラギノゴシック > メイリオ」を選択しましょう。
「Noto Sans JP」「明朝体」にすると大量のデータが読み込まれて遅くなるからですね。
SWELLにはフォントが４種類用意されており、それぞれ測定してみました。
スクショからわかるように「游ゴシック」が最速。
続いて「ヒラギノゴシック」。
正直、どのフォントでも読みやすいので、それなら軽くて速い「游ゴシック」で良いですよね。
高速化したいなら「游ゴシック」を選択しましょう。
「外観」 → 「カスタマイズ」 → 「サイト全体設定」 → 「基本デザイン」 → 「游ゴシック」を選択
フォントって意外と「どれが読みやすいかな？」って悩みがちですが、読みやすさを考えるなら気にするべきはフォントより文章力です。
設定②：キャッシュ機能
SWELLに標準搭載されてるキャッシュ機能を有効にしていきます。
といっても、チェックを入れるだけなのでキャッシュ機能が標準機能されてるSWELLは便利ですね。
キャッシュとはパソコンやスマホに一時的にウェブページのデータを保存しておいて、次に同じページを開いたときに素早く表示させる仕組みのこと。
ブラウザのキャッシュとは？IT初心者でも分かるように解説：サルワカ
iPhoneで音楽を聞く時にストリーミングだとちょっと待つけど、オフライン保存してるとサッと再生できるのと似てますね。
と、まぁキャッシュの話は「なんか速くなるゾ」ぐらいの認識で良いので、大事な設定を見ていきましょう。
「SWELL設定」 → 「高速化」 → 「キャッシュ機能」
「SWELL設定」 → 「高速化」と進んで、８つある項目すべてチェックしてください。
ブログカードのキャッシュ期間は「30日」でOK。
これでキャッシュ機能が有効になり、SWELLが高速化されます。
簡単ですね。
設定③：遅延読み込み
続いては、遅延読み込みの設定です。
読んで字のごとく「読み込み遅らせる設定」のこと。
最初に読み込む必要のないものは、後で読み込めば負担が減って読み込み速度がアップ！ってことですね。
記事下のコンテンツや最後にある画像とか、最初に読み込む必要ないですから。
ということで、設定を見ていきましょう。
「SWELL設定」 → 「高速化」 → 「遅延読み込み機能」
２項目にチェックを入れつつ、「スクリプト（lazysizes.js）を使って遅延読み込みさせる」にチェックで完了。
これで最初に表示する必要ない画像などを後から読み込むようになるので、速くなるんです。
「フッターを遅延読み込みさせる」のチェックを入れると、スマホだとフッター非表示、PCだと表示するといった分岐機能が使えなくなります。
とはえい、今はスマホでもPCでも同じようにフッター表示させるほうがいいので、チェックを入れておいて問題なしですね。
設定④：ファイルの読み込み
4つ目の設定はファイルの読み込みです。
といっても『SWELLのCSSをインラインで読み込む』の１箇所にチェックを入れるだけなので簡単です。
書くと難しい話になるみたいですが、ちょっとしたコードはインラインにすることで外部に読み込みに行く手間がないので速くなるってことです。
ぽりけん「小さなモノなら棚に直さず机の上にあったほうがサッと用意できて作業しやすいよね」って感じでしょうか。
まぁここは難しく考えずチェックでOK。
「SWELL設定」 → 「高速化」 → 「ファイルの読み込み」
設定⑤：ページ遷移高速化
次はページ遷移（せんい）高速化の設定です。
ぽりけんちなみに、恥ずかしい話ですが「遷移」の読み方＆意味がわからずググりました（汗）
ページ遷移とはブログ内のページ移動のことで、遷移速度がアップすると『体感速度の高速化』につながります。
「SWELL設定」 → 「高速化」 → 「ページ遷移高速化」
高速化の種類は３つありますが、Prefetchがオススメ。
ただし、公式サイトにによると
ここで紹介する機能はあくまでもページの「遷移」が高速化するだけのものです。
ファーストビュー時の表示速度は速くならない（むしろ、読み込むスクリプトが増える）ことに注意してください。
ページ遷移高速化機能（pjax）の使い方と注意点：SWELL公式サイト
ということなので、あくまでページ移動が早くなる設定だということですね。
正直、高速化目的なら「Pjaxによる遷移」以外を選べば大丈夫です。
設定⑥：jQueryの読み込み
６つ目はjQueryの設定です。
標準だと下記のようになってます。
- jQueryをwp_footerで登録する：チェック
- jquery-migrateを読み込まない：チェック
- jQueryを強制的に読み込む：選ばない
上記そのままでOK。
「SWELL設定」 → 「jQuery」
余計なデータを読み込みページ速度が遅くなるのでスクショのとおりにチェックを入れてくださいね。
設定⑦：FontAwesomeの読み込み
最後はFont Awesome（フォントオーサム）の設定です。
Font Awesomeとはアイコンをフォントとして使える便利ツールですが、読み込むと重くなるのがデメリットありです。
「SWELL設定」 → 「Font Awesome」
上記のように、標準は「読み込まない」になってると思うので、そのままで大丈夫です。
SWELLにはあらかじめアイコンが用意されてるので、Font Awesomeがなくても特に困らないし、高速化するなら使わないほうが良いですよね。
ちなみにSWELLで用意されてるアイコンはショートコードでサクッと呼び出せて、むちゃくちゃ簡単に使えますよ。
Twitterアイコン「」やSWELLアイコン「」みたいな感じで、いい感じのアイコンがクリック使えます。
詳しい使い方などはSWELL公式記事で説明されてるのでチェックしてみてください。
以上７つがSWELLを高速化するおすすめ設定でした。
ここまでできたら、もう一度PageSpeed Insightsで計測してみましょう。
きっと少しは高速になってるはず。
テスト用サイトの高速化前後のスコアを見てみましょう。
高速化前と後でスコアが伸びてますよね。
あんまり変わってないなぁ…という方は、SWELLのキャッシュをクリアしてから再度測定してみてください。
「SWELL設定」 → 「リセット」 → 「キャッシュのクリア」
SWELLの表示速度を "さらに"速くする方法
ここから先は、「SWELLの高速化設定をやったけど、もうちょっと速くしたい！」という方に向けて、さらに速くする方法を紹介していきます。
具体的な方法は次の３つ。
- ブログの画像を軽くする
- プラグインを減らす
- 高速化プラグイン使う
上記の３つです。
Googleが掲げる10の事実に「遅いより速いほうがいい。」と書かれてるとおりで、表示速度は速いほうがいいので高速化してみましょう。
①：ブログの画像を軽くする
ブログに使う画像はリサイズ ＋ 圧縮して軽くしてから使いましょう。
リサイズ ＋ 圧縮することで、ファイルサイズが小さくなり表示速度アップにつながるからです。
Squoosh（スクワッシュ）というウェブサービスを使えばリサイズ ＋ 圧縮を同時にできて簡単にファイルサイズを減らせます。
Squooshの詳しい使い方は「画像を圧縮・最適化しよう（Squoosh編）」の記事でわかりやすく書かれてます。
サイトからダウンロードしたり画像やスマホで撮影した写真はそのままだと「画像デカすぎ＋重すぎ」の重さMAX状態。
面倒かもですが、こうしたひと手間がサイト速度アップにつながるので、アイキャッチやブログ内で使う画像はリサイズ ＋ 圧縮してから使いましょう。
ぽりけんちなみにSWELLの場合だと画像サイズは1000〜1200pxにリサイズすればOKです。
ブログ画像のサイズやツールについてさらに詳しく知りたいなら下記記事にまとめてるのでご覧ください。
>> 【発表】ブログにピッタリ！最適な画像サイズを軽量化とセットで解説
②：プラグインを減らす
プラグインは少なければ少ないほど速くなります。
プラグインが多ければそれだけ読み込む量が増えるので、単純に重たくなっちゃうからですね。
ついついあれこれプラグインを入れたくなりますが、必要最小限にしましょう。
できるだけ少ないのが理想で、目安は10〜15個ぐらいでしょうか。
ちなみにこのぽりけんブログでは現在14個のプラグインを使ってまして、3個ほどは使うときだけ有効化してる現状です。
- 1ヶ月使わないプラグインは削除する
- たまに使うものは使うときだけ有効化する
などして、必要なプラグインだけインストールしましょう。
SWELLにおすすめのプラグインは下記記事にてまとめてるので、チェックしてみてください。
③：高速化プラグイン使う
SWELLにはキャッシュ機能がありますが、高速化プラグインを上手く使えばさらに高速になります。
おすすめプラグインは次の４つ。
- Autoptimize：ソースコードを圧縮して高速化するプラグイン
- Async JavaScript：JavaScriptの読み込みを遅延化させて読み込み速度を速くするプラグイン
- EWWW Image Optimizer：画像を圧縮するプラグイン
- WP Rocket：多機能なのに簡単に使える、最強の高速化プラグイン
特に4つ目のWP Rocketは有料プラグインなだけあって、効果抜群。
多機能な高速化プラグインなので、アレコレ色んなプラグインを入れなくても、Wp Rocket１つあれば事足ります。
ぽりけん当ブログもWP Rocketのおかげで冒頭に紹介したサイト速度に仕上がりました。
年間約5,500円、月にすると約450円必要ですが、高速化の悩みが解決できて記事執筆に集中できるならそんなに高くないと思いますよ。
無料プラグインだと時間と労力かけた結果、１ミリも高速化できなかったり、最悪画面が表示されなくなった…とかもあるので…。
リスクと手間を考えると、有料プラグインは費用対効果高いのでオススメです。
導入方法については「【WordPress】世界で一番売れている高速化の有料プラグイン！WP Rocketの設定方法」の記事がわかりやすいです。
ページ速度を上げるより大切なこと
当たり前ですが、質の高い記事を書くこと、読者に120％満足してもらえる記事を書くことですね。
もちろんページ速度が速いほうが良いのは間違いないですが、ページ速度を上げることに必死になりすぎて一週間も消耗してしまった！とかだと本末転倒じゃないですか？ ということです。
ページ速度も大事だけど、あくまで優先順位は記事を書くことの方が上。
検索順位を見ても、ページ速度が低くても上位だったりするからですね。
例えば「テレワーク コーヒー おすすめ」の検索順位とスピードをまとめました。
上記の表のとおりで、サイト速度はほどほどで良さそうですよね。
読者目線に立って見ると、たしかに速度が速い方がストレスフリーかもだけど、それより中身が大事。
変な話、中身が良ければ少々遅くても読もうとするはずですから。
遅いより速い方が良いのはたしかに大事だけど、それより読者に120％満足してもらえる記事はもっと大事です。
ページ速度はほどほどでOKなので、本記事を読んで少しでもサイトが速くなったら完了して記事執筆にリソース全振りしましょう。
まとめ：SWELLを高速化して、記事を書きまくろう！
今回はSWELLを高速化する方法を紹介してきました。
ざーっとまとめます。
- フォントは「游ゴシック」にする
- キャッシュ機能を使う
- 遅延読み込みをONにする
- CSSはインラインで読み込む
- ページ遷移高速化は「Prefetch」にする
- jQueryは読み込まない
- Font Awesomeは読み込まない
上記が高速化のオススメ設定です。
さらにもっと高速化するには、
- ブログで使う画像はSquooshで『リサイズ ＋ 圧縮』してファイルサイズを軽くする
- プラグインは必要最低限にする。たまにしか使わないものは無効化する
- 高速化プラグインを活用する
といった感じですね。
ただし、高速化はある程度で切り上げましょう。トコトンまでやりだすと沼にハマりますよ…。
ページ速度より記事の質や中身が大事なので、時間を使うべき優先順位は「記事執筆 > 高速化」ですから。
簡単にできそうなことだけやってみる。今日１日だけ高速化作業にあてる。など、時間を区切ってSWELLの高速化に取り組んでみてくださいね。
それでは、今回は以上です。
同じSWELLユーザーとして、これからも一緒にブログがんばっていきましょうね。
それじゃあ、また！
