仮想通貨から投資信託へ移行して「ほったらかし」で資産形成しよう

続・サイトをプラグインで簡単に高速化してみた【WordPress】

ごきげんよう、バビです。

WodPressサイト高速化計画、ついに最終章です。

いや、まだ諦めてないのかよ!という感じですが、昔の偉人は言いました。

諦めたらそこで試合終了だよ

 

私も諦めません。試行錯誤の結果、ついに更なる高速化を達成することができました!

CSSを全てインライン化してみる

CSSなんて大した容量じゃなくない?

前回、CSSのうち最初に読み込む必要のある重要部分だけをインライン化(headタグ内に直接書き込むこと)して、それ以外は通常のcssファイルに記述する形にしていました。

そこでふと思いつきます。

別に全部インライン化すればよくないか?

そもそもCSSなんて文字だけで、大した量ではありません。追加で記述しているのもたかが知れています。

ただ、CSSをMinifyしてheadタグ内に書き込むのって、headタグがいっぱいになって分かりにくいじゃないですか。

なんか嫌だなー怖いなーと思っていたら、なんとこれもプラグイン「Autoptimize」で解決できました!

プラグイン「Autoptimize」で簡単インライン化

まずは「設定」から「Autoptimize」を開きます。

Autoptimizeの設定画面の右上の「高度な設定を表示」をクリックします。

すると下の設定項目のチェックボックスが増えるので、「CSSオプション」にある「すべてのCSSをインライン化」にチェックを入れて保存します。

注意

ただ、ここにも記載があるように、CSSが大きいとこれによって逆に読み込みが遅くなったりすることもあるので注意が必要です。

また、「追加CSS」はデータベースに保存されておりインライン化できないので、子テーマの「style.css」内に記述する必要があります。

で、またPageSpeed Insightsで速度を計測してみます。

  • モバイル:75→92
  • パソコン:75→77

え?速っ!

モバイル急にどうしたん?

表示を確認してみましたが問題ありません。むしろサクサク開くようになっています。

これは大成功でした。

前回無駄に分けてインライン化したcssもひとつにまとめてMinifyした上で子テーマのstyle.cssに戻しました。

まだ気になる最適化案

https://fonts.googleapis.com/css?family=・・・

上のは大活躍中の「Autoptimize」先生なのでいいのですが、下のはてっきりGoogleアナリティクスやらアドセンスの何かだと思っていたら、どうやらフォント関係のcssのようです。

こいつも別に最初に読み込む必要はなさそうです。

なんとこれも「Autoptimize」先生で解決可能です!

「Autoptimizeを開いたら、「追加」タブを開きます。

webfont.jsで非同期にフォントを結合して読み込む。」にチェックを入れればGoogle Web Fontsを非同期化することができます。

xserver.js

次に気になったのが「ブラウザのキャッシュを活用する」の「https;//webfonts.xserver.jp/js/xserver.js」というやつ。

なんかエックスサーバー系のものらしい。

調べてみたらエックスサーバーだと、月25,000PVまで30種類のwebフォントが使えるらしく、それを使うためのプラグインのものらしいです。

https://www.xserver.ne.jp/functions/service_webfont.php

いらないですね。このプラグインを消してしまいましょう。

TypeSquare Webfonts for エックスサーバー」というのがそれのようです。最初から入っていたので気にしてませんでしたが、停止して削除しました。

エックスサーバーの「mod_pagespeedの設定」

エックスサーバーだと、無料で「mod_pagespeed」というものを設定して高速化することができるようです。

「mod_pagespeed」は、Googleが開発した拡張モジュールで、ファイルを圧縮してデータ転送量を削減する、同種のファイルを一まとめにして無駄な通信を削減するなどの最適化処理を行ってページ表示速度を速くすることができます。

サーバーの負荷が上昇したり、画像の画質が落ちることがある、などのデメリットもあるみたいです。

https://www.xserver.ne.jp/manual/man_server_mod_pagespeed.php

もちろん設定してみます。

なんでも試してみて損はありません。

まずはエックスサーバーの「サーバーパネル」にログインします。

画面右下に「mod_pagespeedの設定」とあるのでこれを開きます。

設定するサイトのドメインの「選択する」をクリック。

mod_pagespeedの設定画面が開くので「ONにする」をクリックすれば設定完了です。

反映されるまでには少し時間がかかるようです。

最終的なページ表示速度は?

やった!ついにやりました!

画像の圧縮がまだ終わってないので、それが終わればPC側はもう少し速くなるかもしれません。

基本的にほとんど全部プラグインでできちゃいましたね。

WordPressおそるべしです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です