当ブログで使用のテーマSWELLのデモサイトをみる

【SWELL】WEBサイトの表示速度を改善する方法。モバイルスピード26が81に!

  • URLをコピーしました!
PVアクセスランキング にほんブログ村
ちぇり

サイトの表示速度を改善したい。高速化のためになにをすればいいのかな?

ブログ初心者によくある悩みでしょう。

導入するだけでサイトスピードが早くなると評判のSWELLですが、モバイルのスピードがなかなか改善されませんでした。

サイトスピードアップの対策をいろいろやりましたが、この数値です。

サイトA 

PC:82 モバイル:40

サイトB

PC:69 モバイル:26

ちぇり

モバイルの表示速度おそっ

PageSpeed Insightsでがっつりレッドゾーンです。

画像の圧縮やwebp化、プラグインの削除などやりましたが改善されないので、ふてくされてしばらく放置していました。

先日、ConoHaが無償で提供をはじめた高速化エンジンWEXAL(ウェクサル)を導入。

またサイト表示高速化のやる気スイッチが入りました。

ネットでみつけたそらいろさんのそらいろログを参考に高速化対策を実施した結果がこちらです。

 

サイトA 

PC:82→98 モバイル:40→77

サイトB

PC:69→97 モバイル:26→81

 

すごくないですか?!

ちぇり

SWELLの設定をポチポチしただけです

 

5分でできるので、さっそくやっていきましょう。

  • スピード測定はPageSpeed Insights を使用しています
  • プログラムやコードの知識は0です
目次

サイトの表示速度高速化のためにやった3つのこと

今回参考にした記事では7つの方法が示されていますが、今回わたしがやったのは下記の2つです。

不要なプラグインは削除
画像をWEBP対応にする
SWELLの高速化設定やった
ファーストビューに多くの要素を表示しない
記事の文字数を減らす
フォント設定を見直すやった
サーバーを高速なものにする
そらいろログおすすめの中でわたしがやったこと

もう1つは、ConoHaの無償高速化オプションWEXAL(ウェクサル)です。

①SWELLの高速化設定

ダッシュボード>SWELL設定>高速化 をひらきます。

キャッシュ機能の設定

SWELLでサイトスピード高速化
キャッシュ機能
SWELLでサイトスピード高速化
キャッシュ機能

公式がおすすめしているとおり、すべてONにします。

ブログカードのキャッシュ期間は30日に設定。

 

\くわしく知りたい人はSWELL公式へ/

SWELLで使用できるキャッシュ機能についてーSWELL公式

 

設定画面を下にスクロールしてください。

遅延読み込み機能

SWELLでサイトスピード高速化
遅延読み込み機能

以下に✔をいれる

  • 記事下コンテンツを遅延読み込みさせる
  • フッターを遅延読み込みさせる
  • loading=”lazy”を使用する
  • 外部スクリプトを遅延読み込みさせる

 

設定画面を下にスクロールしてください。

遅延読み込み対象にするスクリプトのキーワードの追加

SWELLでは、もともと次のキーワードが書き込まれています

  • twitter.com/widgets.js, ツイッター
  • instagram.com/embed.js, インスタグラム
  • connect.facebook.net, フェイスブック
  • assets.pinterest.com, ピンタレスト

つづきに以下のキーワードを書き加えました。
(厳密にはコピペしました)

  • googletagmanager.com/gtag/js,
  • gtag(,
  • adsbygoogle.js,
  • clipboard.min.js,
  • set_urlcopy.min.js,
  • luminous.min.js,
  • set_luminous.min.js,
  • rellax.min.js,
  • set_rellax.min.js,
  • prism.js,
  • hcb_script.js,
  • pochipp/dist/js/update.js,

コードの内容はつぎのとおりです

SWELLでサイトスピード高速化
キーワードのコード内容

 

サイトによっては遅延読み込みさせると正常に表示されないことがあるので、公式サイトをよく読んで判断してください。

「スクリプトの遅延読み込み」機能の使い方についてーSWELL公式

 

設定画面を下にスクロールしてください。

スクリプトの遅延読み込み機能をオフにするページ

SWELLでサイトスピード高速化

ここは空欄のままです。

 

遅延させる秒数

デフォルトは3秒ですが、そらいろさんの設定どおり7秒にしました。

※遅延させる秒数は、デフォルト3秒だとPageSpeedInsightの評価で「第三者コードの影響」のエラーが解消されないことがあるので自サイトにあった時間に調整すること。

引用:そらいろログ【SWELL高速化】SEOに強い最速設定方法!

 

設定画面を下にスクロールしてください。

ファイルの読み込み設定

以下の2つに✔します。

SWELLでサイトスピード高速化
  • SWELLのCSSをインラインで読み込む
  • コンテンツに合わせて必要なCSSだけを読み込む

重 要

追記2022.5.21

プラグイン(シンプルブログデザイン)の表示がおかしくなったので、つぎのチェックをはずしました

□コンテンツに合わせて必要なCSSだけを読み込む【β機能】

SWELLでサイトスピード高速化

ページ遷移高速化の設定

SWELLでサイトスピード高速化

高速化の種類

◉prefetch をえらぶ

Prefetchさせないページのキーワード 

空欄のままでOKです。

 

変更の保存とキャッシュのクリア

設定が終わりましたら、1番下にスクロールして【変更を保存】を押してください。

また、

キャッシュのクリアをおこなわないと設定が反映されないことがありますので、おわすれなく。

SWELL設定>リセット>キャッシュのクリア

SWELLでサイトスピード高速化
SWELLでキャッシュのクリアをする方法

②フォント設定

ちぇり

フォントがサイトスピードに影響するなんて知らなかった。

Noto Sans JPと明朝体(Noto Serif JP)はページの読み込み速度に影響をあたえるそうです。

(わたしは明朝体に設定していました)

 

外観>カスタマイズ>サイト全体設定>基本デザイン>フォント設定をひらきます。

游ゴシックまたはメイリオがいいそうです。

わたしの場合

フォントをかえただけで

PC・モバイルともに20アップしました。

ちぇり

メイリオが読みやすくてスキ

 

また

WEBフォントは表示速度に影響があるので、高速化を重視する人は使用を控えるとよいでしょう。

 

③ConoHa提供の高速化エンジンWEXAL導入

「WEXAL® Page Speed Technology®」とは、プライム・ストラテジー社が提供するWordPressの高速化を実現するエンジンです。導入することでWebサイトのモバイル表示・PC表示が劇的に変化します。

引用:Conohaホームページ

2022年4月、レンタルサーバーConohaがWEXAL(ウェクサル)の無償提供を開始しました。

WEXALの導入はかんたん。

Conohaのコントロールパネル>サイト管理>高速化>WEXALをONにするだけです。

SWELLでサイトスピード高速化
Conohaコントロールパネル

表示速度は6~10あがりました。

期間限定\スタート応援キャンペーン/

 

おわりに SWELL設定とフォントで高速化を実現できる

SWELLをいれるだけで表示速度がはねあがることはありませんでした。

プラグインをへらす、画像を圧縮する、画像をwebp(ウェッピー)にする

などやってみましたが表示速度はあがらず。

 

今回、表示速度アップに大きく影響をあたえたのは次の2つです

表示速度アップにつながったこと
  • SWELLの高速化設定
  • フォントを明朝→メイリオに変更

プログラムやコードをさわらず、設定をポチポチっとしただけです。

 

サイトA

(PC)82→98 (モバイル)40→77

SWELLでサイトスピード高速化
SWELLでサイトスピード高速化

サイトB 

(PC)69→97 (モバイル)26→81

SWELLでサイトスピード高速化
SWELLでサイトスピード高速化

今回参考にさせていただいた記事では、他にも

  • +αの高速化方法
  • 手を出すべきでない高速化対応

などをエンジニア目線でやさしく書かれています。

気になる人はお読みください。

 

ちぇり

サイト表示速度高速化のお役に立てればうれしいです

ではまた!

PVアクセスランキング にほんブログ村 ブログランキング・にほんブログ村へ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次