SWELLへの移行方法はこちら!CLICK!

[SWELL]モバイルの表示速度が遅い?-表示速度を爆上げる方法-

[SWELL]モバイルの表示速度が遅い?-表示速度を爆上げる方法-

こんにちは!まったりです。

悩む人

有料のブログテーマ「SWELL」に乗り換えたはいいけど表示速度が速くならない…。

と悩んでいる方は多いのではないでしょうか。

本記事ではこのような悩みを解決するために

「SWELLでブログの表示速度を高速化する方法」

について、実際に行ったことを解説します。

本記事で学べること
  • SWELLでモバイル表示速度を高速化する方法
作者情報
  • 理系大学院生ブロガー
  • まったりさんブログ運営中
  • 情報・ネットワーク関係の研究中

\\本ブログでは”SWELL”を使用しています//

  • ブロックエディタ対応で初心者も扱いやすい
  • シンプルで綺麗なデザイン
  • テーマ乗り換えサポートプラグインあり
  • サポートが充実

▼公式サイトから購入可能です▼

目次

1. SWELLの表示速度を高速化する方法

私がSWELLを導入した際の表示速度のスコアは

  • モバイル表示:30後半~50前半
  • パソコン表示:80後半~90前半

という結果でした。

パソコンの表示に関しては高スコアを出しているので特に問題はありませんでしたが、モバイルの表示速度に関しては圧倒的に低いスコアが出ていました。

そして、今回紹介する方法を実践した結果、次のようなスコアに改善することができました。

画像:モバイル表示速度スコア
画像:PC表示速度スコア

特にモバイル表示速度が70~80までスコアを向上することに成功しました。

私がここまでモバイル表示速度を改善するために行ったことは以下の4つです。

  1. ブログで使用している画像の圧縮・リサイズ
  2. SWELL高速化設定を行う
  3. SWELLで使用しているフォントの確認
  4. 使用していないjavaScriptの削減

以降では、それぞれについて解説していきます。

1) ブログで使用している画像の圧縮・リサイズ

ブログでは

  • アイキャッチ画像
  • タイトル画像

などの画像を使用していますが、これらの容量がブログの動作を遅くする原因の一つになります。

特に、画像のサイズなどを気にせず使用している人は確認してみてください。

これからブログに画像をアップロードする場合は

『TinyPNG』

というサイトで画像を圧縮することが可能ですので、使用する画像を必ずこのサイトで圧縮してからアップロードするようにしてください。

まったり

TinyPNGを使用することで従来の画像の70~80%程度サイズ削減することが可能です。

▼TinyPNGはこちらから▼

悩む人

TinyPNGの使い方がわからない…。

という方は以下の記事を参考にTinyPNGを使用してみてください。

▼TinyPNGの使い方はこちら▼

一方で、もうすでにブログに画像をアップロードしている場合は

『EWWW Image Optimizer』

というプラグインを用いて既存画像を一括で最適化することが可能です。

▼EWWW Image Optimizerの使い方はこちら▼

2) SWELL高速化設定を行う

SWELLには元々サイトを高速化する機能が搭載されています。

ここでは、その機能を有効化する方法についてご紹介します。

SWELL高速化設定は

「SWELL設定」→「高速化」

から行います。

はじめに、以下のように「高速化」の中にある「キャッシュ機能」欄の8つの項目全てにチェックを入れます。

画像:SWELL「高速化」画面

ブログカードのキャッシュ期間に関しては30日のままで問題ありません。

次に、下へスクロールして「遅延読み込み機能」の3つの欄にチェックを入れます。

画像:SWELL「高速化」画面

こちらが完了したあとは、更に下へスクロールして「ファイルの読み込み」の欄にあるチェックボックスにチェックを入れます。

画像:SWELL「高速化」画面

最後に、再び下にスクロールして「ページ遷移高速化」の中にある「Prefetch」にチェックを入れます。

画像:SWELL「高速化」画面

ここまでできたら、最後に変更を保存して終了です。

まったり

これでSWELLの高速化設定が完了しました。

3) SWELLで使用しているフォントの確認

2021年7月現在、SWELLで使用されているフォントはデフォルトで「遊ゴシック」に設定されています。

もしも、使用しているフォントが

『Noto Sans JP』

であった場合は他のフォントに変更してください。

まったり

他のブロガーさんの記事を拝見したところ、このフォントを変更するだけで大きく速度が向上する場合もあるみたいでした。

SWELLで使用するフォントの変更方法は

「外観」→「カスタマイズ」→「サイト全体設定」→「基本デザイン」→「フォント設定」

から変更可能です。

4) 使用していないjavaScriptの削減

これは個人的に表示速度のスコアを向上させた大きな要因だったものになります。

ここでは

『プラグイン:Flying Scripts by WP Speed Matters』

を使用して使用していなJavaScriptの削減を行います。

詳しい方法は以下の記事で解説しています。

▼Flying Scriptsを使ってJavaScriptを削減する方法はこちら▼

まったり

私はこれで大幅に表示スコアを上げることができました。

2. 最後に

今回は

「SWELLでモバイル表示速度を向上させる方法」

について解説しました。

今後、モバイル表示速度はGoogleの検索順位などに大きく影響すると発表があったのでこの機会に見直してみてはいかがでしょうか。

今回紹介した方法で大きく改善できるのでぜひお試しください。

まったり

最後までご覧いただきありがとうございました!

にほんブログ村 にほんブログ村へ
にほんブログ村

\\本ブログはSWELLを使用しています//

よかったらシェアしてね!

コメント

コメントする

目次
閉じる