【簡単高速化！】SWELLの表示速度を改善する方法5選

2021年10月11日2022年1月27日

サカイヨーキ

こんばんは、サカイです。

当ブログでは、「SWELL(スウェル)」というWordpressテーマ(デザインのテンプレート)を使っています。
オシャレで好きなデザインにも簡単に変更できるし、便利な機能が多いので快適です。

ただ一点、表示速度が遅い点だけ気になっていました。
正確には僕がした設定のせいで遅かっただけなのですが。

しかし、今回お伝えする5つの方法を実施することで速度が劇的に変わりました。
ひどいときはスマホ版の表示速度が40点程度でしたが、なんと今では98～99点になったんです。

この記事でわかること

なぜ表示速度が速いほうがいいのか？
表示速度が遅くなる原因
表示速度を改善する5つの方法

というわけで本日は、SWELLを爆速にするための方法を画像解説を交えながらお伝えしていきたいと思います。

表示速度は速いほうがいいのか？

結論から申しますと、表示速度は速ければ速いほどいいです。

理由は、以下の2点。

Googleの検索エンジンの評価が上がる
読者がストレスなく読むことができる

ネット検索といえばGoogleですので、やはりGoogleの検索エンジンから評価が高いサイトが望ましいです。
評価には表示速度も含まれるため、表示速度が速いほど高評価につながりやすくなります。

それに、読者は表示が遅いサイトが開き終わるまで待ってくれるとは限りません。

サカイヨーキ

通信環境や端末など読者側の起因による遅延もあり得ますから、
せめてサイト側は速く表示できたほうがいいのです。

SWELLの表示速度が遅くなる原因

再度ことわっておきますが、SWELLの本来の表示は速いです。
速いのに、他のテーマならプラグイン(WordPress用の追加アプリ)で別途追加する必要がある機能も最初から入っています。

遅くなる原因はSWELLではなく、以下のような部分です。

プラグインが多い
下書きがたまっている
画像が重たい
アニメーションを使っている
Javascript(ジャバスクリプト)が重たい

では、順に見ていきましょう。

プラグインが多い

たとえばスマホにアプリを入れたとします。
数十個程度であれば問題ないですが、100個、200個と追加していくとスマホはどんどん動作が重たくなりますよね。

それと同じで、WordPressのプラグインも必要最低限の数に絞ったほうがいいです。

そんなことを言いつつ僕もそこそこ入れてますが、現時点では14個ほどに抑えています。

サカイヨーキ

もちろん一桁が望ましいですが、
難しくても20個以内には抑えたいところですね。

下書きがたまっている

WordPressは記事をいきなり公開せず、下書きに保存することができます。
この下書きは自動保存で複数保存可能なので、実は放置するとどんどん増えて負荷がかかります。

その場合は、「WP Revisions Control」というプラグインが役に立ちます。

使い方は簡単です。

まず最初に、WordPressの管理画面の左側にあるメニューから「プラグイン」→「新規追加」を選択します。
画面右側中央の「キーワード」の横の検索ボックスに「WP Revisions Control」と入力。

作者: Erick Hitterと書かれているプラグインを「今すぐインストール」します。
インストール後は「有効化」を押すのを忘れずに。

次に、同じくWordPressメニューの「設定」→「投稿設定」を押して画面を少し下にスクロールしましょう。

「WP Revisions Control」と書かれた部分が追加されていますので、実際に保存しておきたい下書きの数に変更します。

サカイヨーキ

設定は以上です。

画像が重たい

ネットの表示は単純に使う色や動きの数が多くなるほどデータが増え、データが増えるほど負荷がかかります。
なので

テキスト＜音声・画像＜動画

の順番で表示がどんどん遅くなります。
そのため、ブログで使う画像はできるだけ圧縮してデータ容量を軽くしておきましょう。

画像圧縮には「Squoosh」というブラウザページがオススメです。
無料のブラウザソフトで、画像を放り込んで好きな容量に圧縮できます。

使い方は上記のページに画像を放り込み、容量を調整するだけ。

画像の拡張子はデフォルトの「mozJPEG」のままでいいです。
圧縮する容量を調整したら、右下にあるダウンロードマーク(下を向いた矢印)を押します。

ちなみに圧縮する容量ですが、僕の体感では記事内の画像は50MB～60MB台あたりがいいかなと。
アイキャッチ画像は大きく表示されるので、80MB～100MBはあってもいいですね。

どちらも荒く感じたらもう少し上げましょう。

なお、上記の操作をしても「過去にブログで使用した画像」「ブログに埋め込んだTwitter内の画像」に関しては何もしなければ容量は変わりません。
その場合、「EWWW Image Optimizer」というプラグインを使えば、保存済みの画像も新規の画像も圧縮できます。

サカイヨーキ

詳しい使い方や設定に関しては「hitodeblog」さんの記事が
参考になるのでご確認ください。

アニメーションを使っている

ここで言うアニメーションとは、ブログのなかで動く要素です。
たとえばSWELLには複数の記事をアニメーションでゆっくり回転しながら表示する「記事スライダー」という機能があります。

ブログの見栄えが良くなるので僕も最初は使っていたのですが、どうやら重たくなるのでやめました。

サカイヨーキ

SWELLの設定では「外観」→「カスタマイズ」→「トップページ」→「記事スライダー」で「設置しない」を選べばアニメーションを止められます。

Javascript(ジャバスクリプト)が重たい

僕は上記の対策を全部やってもまだ表示速度が大きくは改善しませんでした。
冒頭で紹介したスマホ版の速度63点は実は上記の対策を全部したうえでの速度で、全然爆速とはいかなかったんです。

というのも、実は表示が遅くなる最大の原因は、Javascriptという言語で書かれたプログラムのせいだったんですよね。
しかも、そのJavascriptを使う機能は、多くが検索エンジンを提供しているGoogleによるものだったんです。

Googleに評価されたいのにGoogleの機能が阻害していたというこの矛盾。

……とか言っても仕方ないので、とにかくJavascriptの読み込みを回避してしまいましょう。

今度は「Flying Scripts by WP Speed Matters」というプラグインを使っていきます。
これまでと同様、プラグインの新規追加画面から「作者: Gijo Varghese」と書いているプラグインをインストール→有効化してください。

次に、WordPressのメニューから「設定」→「Flying Scripts」と進みます。
「Include Keywords」のすぐ右にある空欄に、「～.js」と書かれたものを入れていきます。

確認は「Page Speed Insights」からでもできますが、ただこの確認方法では一部のJavascriptしかわかりません。
そこで僕は、「りんかネット」さんの「Flying Scripts – JavaScript 読み飛ばし高速化プラグインの使い方｜WordPress」という記事を参考にさせていただきました。

自分のブログの何もないスペースを右クリック→「検証」→出てきた画面の右上にある「Network(見えない場合は『>>』を押す)」を押します。
念のためここで再読み込みをすると、「Name」と書かれた部分を見てください。