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

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

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

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

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

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

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

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

という結果でした。

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

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

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

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

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

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

ブログでは

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

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

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

『TinyPNG』

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

▼TinyPNGはこちらから▼

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

▼TinyPNGの使い方はこちら▼

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

『EWWW Image Optimizer』

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

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

2) SWELL高速化設定を行う

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

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

SWELL高速化設定は

から行います。

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

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

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

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

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

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

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

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

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

『Noto Sans JP』

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

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

から変更可能です。

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

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

ここでは

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

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

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

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

2. 最後に

今回は

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

について解説しました。

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

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

にほんブログ村