SWELLの表示速度が遅い!高速化のためにやること【CocoonからSWELL】

WordPressは無料テーマで十分!という方、

オレは有料テーマにしたけどね!という方、

どちらも皆様ごきげんよう。マルビーネです。

私は先日、無料テーマ「Cocoon」から有料テーマ「SWELL」に変更しました。

「SWELL」に変更した理由の一つが、ネット上での口コミ「SWELLは表示速度が速いから」というのがありまして。

Googleからのこのようなお達しもあることですし。

Google Developers
More time, tools, and details on the page experience update
More time, tools, and details on the page experience update

ブログの表示速度(スコア)も評価に入ってくるみたいですのでそろそろページのレスポンスも意識しようかなって!

今回の記事の概要です。

テーマを「Cocoon」から「SWELL」に変更した直後、表示速度(スコア)は低下しました。

この記事で書いた対応で、表示速度(スコア)は改善しました。(トップページ)

スコア(PC)80→96 スコア 30→65

今日は「SWELLの表示速度」のこと、「速度改善の方法」について詳しくお話しします。

こんな方におすすめの記事です。
  • 有料テーマ「SWELL」を検討しているが表示速度はどうなの?
  • SWELLに変更したけど表示速度が出ない!どうしよう!
<スポンサーリンク>
目次

無料テーマ「Cocoon」と有料テーマ「SWELL」の速度を測った

表示速度の測定ツール

まずは速度を測るツールについて。

私は以下の「PageSpeed Insights」を使用しています。

あわせて読みたい
PageSpeed Insights

「SWELL」以前に使っていた無料テーマ「Cocoon」での測定結果

私は「SWELL」の前は「Cocoon」を使用していました。

テーマを変える直前に速度を測定しておきましたのでご覧ください。

「Cocoon」(PC)での速度

「Cocoon」(モバイル)での速度

「Cocoon」ではPCでの表示速度「95」モバイルでの表示速度「53」が出ています。

無料テーマでここまでの速度が出るのは相当素晴らしいのではないでしょうか!

「Cocoon」から「SWELL」に移行した直後の測定結果

無料テーマにもかかわらず大健闘している「Cocoon」から「SWELL」へ変えた私。

「SWELL」へ変えた直後、私は再度速度計測を行いました。

その際、以下の条件で測定を行ったことをご了承ください。

デザインはまだカスタマイズしていませんでした。(プレーンなSWELLのまま)

その時の測定結果をハードコピーには取れなかったのですが、結果を見た後の私のつぶやきがこちらです。

速度を求めてテーマをSWELLに変えたけどモバイルのサイトスピードが30台に💦
Cocoonより悪い💦
悔しい❗せめて80にはしたい❗
みなさんどのようにチューニングされましたか?!
キャッシュ関連、プラグインの削減までは限界までやりました。。。

めちゃくちゃ悔しがっています。

測定結果は、PCの表示速度「80台」モバイルの表示速度「30台」という散々な結果に。

自分のツイートみて今思い出したんですが

後述する「速度改善 【初期対応】」をある程度施してもこの速度だったんですね。

これは相当ショックな結果です。

頑張っている「Cocoon」から鞍替えしたからバチが当たったんでしょうか。

「SWELL」に期待していた分、私の失望は大きかったのです。

「SWELL」が速いという口コミはいったい・・・?

有料テーマの表示速度の比較をされているサイトはいくつかあります。

当然なんですが、測定条件として、

・プラグインは入れていない
・記事は少ないか入れていない
・設定も変更していない

というのがあるんですね。

上記のような一定の条件で複数テーマを比べた結果、

「複数テーマの中ではSWELLが最も早い」という結果になっていたのです。

複数テーマを実際に買い、環境を作ってテストするというのは並み大抵のことではなくご苦労がしのばれますし、この「一定の条件下における複数テーマの速度比較」という情報はものすごく有用でありがたかったです。

ありがとうございました。本当に。本当に感謝しております。

ただ私が期待しすぎただけなんです。

「SWELL」公式は、「速度爆速」とは1度も言っていない!

PCの表示速度「80台」モバイルの表示速度「30台」という数字を見て思わず荒ぶった私ですが、思えば「SWELL」公式は、「SWELL早いよ」とは一言も言っていないのですよね。

こちらの記事でも冒頭に書いたのですけれども、

もう一回書きますね。

SWELLの公式フォーラムで、「サイトの読み込み速度改善について」という質問があったのですが、テーマ開発者の方がはっきり「高速化に関しては、専門家に依頼するのが一番かと思います。」と言っておられます。

つまりね、公式としても高速化は最終的に「プロにでも頼んだら?」ということなんですよね。

それはもうしょうがないんですけど・・・

有料でこれが通るんだったら無料で頑張ってくれている「Cocoon」さんは?

めちゃくちゃ偉大じゃないですか?!

ちゃんと無料でいいもの提供してくれていた「Cocoon」を裏切ってしまった私。

でも大金を払って乗り換えた手前、もう後には引けません。

「Cocoon」の開発者様ごめんなさい・・・

速度改善 【初期対応】

行ったこと①

こちらのサイト様を参考にさせていただきました。

「速度が遅い…」そんな方がSWELLを高速化させる【5つの設定】

https://osukeblog.com/swell-page-speedup/

(Ousuke Blog様)

私はまず、以下のことを行いました。

  1. フォントを「游ゴシック」に変更する
  2. 「SWELL」のキャッシュ関連の設定を変更する
  3. プラグインの整理
  4. 画像を圧縮する

①~④は、基本的に上記サイト様を参考に設定しました。

ただ、④画像を圧縮するについては、これまでサーバーアップロード済みの画像もあったので、

以下のプラグインを使用して画像圧縮しました。

・EWWW Image Optimizer

・Smush

まあ①~③までぱぱっとやって、前述のとおりPCの表示速度「80台」モバイルの表示速度「30台」だったわけですけれども・・・!

このショックな計測後、画像の圧縮を行ったのですが、これはかなり効果あったのでは?と思います。

行ったこと②

これは私が勝手にやったことなんですが、「SWELL設定」の「機能停止」タブを変更しました。

私のシステム開発者のカンで要不要を判断したものです。あくまで「うちのブログには要らなさそう」というアバウトな基準です。それに効果があったかも定かではありませんので、ご参考程度にだけご覧ください。

「SWELL設定」>「SWELL設定」でページへ移動し、「機能停止」タブへ移動します。

以下の赤枠の部分のチェックボックスをONにします。

初期対応を行った後の設定はこうなっている

SWELLのキャッシュの設定を変更し、プラグイン対応を行った後の設定は、私は以下の通りになりました。

キャッシュ周り

「SWELL設定」>「SWELL設定」でページへ移動し、「高速化」タブをクリック。

赤枠で囲ったところがチェックボックスONになったところです。

プラグイン

今入っているプラグインは、以下の通りです。

  • Ad Invalid Click Protector
  • Classic Editor ※無効化
  • Contact Form 7
  • EWWW Image Optimizer ※無効化
  • Google XML Sitemaps
  • Highlighting Code Block
  • SEO SIMPLE PACK
  • Smush ※無効化
  • Wordfence Security
  • WP Revisions Control

画像圧縮系の「EWWW Image Optimizer」と「Smush」は、使うときにだけ有効化し、いつもは無効化しています。

「Classic Editor」は、もう使わないのですがしばらく置いておきます。

速度改善 【もうちょっと突っ込めそうなら】

「速度改善 【初期対応】」後の速度測定結果はハードコピーで残っていないのですが。

PCでの速度が「92~96」モバイルでの速度が「44~50」となり、PCはともかく、モバイルの結果がまだまだ悪く、私は満足できませんでした。

ここでさらに私を救ってくれるサイト様が。

デザノマ
【SWELL】サイトの高速化(コアウェブバイタル)に関する施策[WordPress] | デザノマ
【SWELL】サイトの高速化(コアウェブバイタル)に関する施策[WordPress] | デザノマ2021年5月のアップデートでCWV(コアウェブバイタル)が検索順位に影響を受けるようになります。※Web Vitals(ウェブ バイタル)とも呼ばれています。 コアウェブバイタル...

こちらのサイト様を参考に、行った対応が以下です。

JQueryの読み込み停止

「外観」>「テーマエディター」を選択し、「テーマのための関数」を選びます。

コードが出てくるので、緑の枠のコードを追加します。

子テーマのstyle.cssを読み込ませない

同じく、「テーマのための関数」のコードへ、青い枠のコードを追加します。

最終的な「SWELL」の速度は

速度改善の結果、PCの表示速度「80台」モバイルの表示速度「30台」だった当ブログの速度は以下のようになりました。

PCでの速度

モバイルでの速度

PCの表示速度「96」モバイルの表示速度「65」という結果に!

いやもう十分でしょう。

「モバイルの速度80までにしたい」なんぞといったやつ(私)がおりますが、

もうもう、

いったんこれまででしょう。

最初を絶望を思ってみたらいいよそれに比べたらもう、この速度は御の字でしょう?!

さあ、有料テーマ「SWELL」の表示速度は速いのかというと

テーマ変更直後は「遅くなることもある」

ただし

チューニング次第で合格ラインにすることは可能

ということになります。ですので、

「SWELL」に変えたからと言って、夢のように爆速になるかというとそれは違う

ということはお伝えしたいと思います。

末筆ながら、

無料テーマ「Cocoon」はものすごく頑張っている優秀テーマ

ということも併せてお伝えして、本稿を終わります!

私のSWELLに対する総合評価はこちらです。

<スポンサーリンク>
よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる