ブログのアクセス数を気にし始めると改善策の一つとして上がるのがページの表示速度の高速化です。自分のページがスマホや PC で見ると他のブログに比べて表示がゆっくりに感じたため今回は自身のブログの速度の計測、その結果を踏まえて WordPress のテーマ Simplicity ページ表示速度の高速化 をするために試みたことを紹介していきます。
ページ表示のスピードチェック
スマホから表示させた際に自分のブログの表示が遅い気がしたので、以下の3つのスピード測定サイトでテストを行いました。
Google Speed Testingでは、3G回線を用いたモバイルのアクセスを想定したテストを行ってくれます。
ページのスピード測定は、測定したいページの URL をコピーして計測ページに貼り付けます。そうすると以下のようにモバイルとPCの両方での表示速度を示してくれます。
結果は以下の通りでした。
まだスマホ表示は改善が必要です。
一点気をつけることは一度に計測できるページは入力した URL のページのみですのでサイト全体の速度ではないということです。つまり画像や動画を大量に載せているページとテキストのみの軽いページとの速度は当然のことながら違いが出ます。
点数と一緒に、最適化のための提案も示されます。
- キャッシュ処理を活用する
- 画像を最適化する
- レンダリングを妨げるJavaScriptの非同期化・保留
- Accelerated Mobile Pagesの導入
以下からはこれらの最適化の提案に従い改善するためにどのようなことを行ったかを紹介していきます。
キャッシュ処理を活用する
この方法はプラグインをインストールし有効化する処理ではなく、サーバー自身の速度を上げる処理になります。私はサーバーにX serverを用いているので、 以下の二つのサイトを参考にページの高速化を試みました。
サーバー自身での作業になるため、作業中に他の重要なコードを消してしまわないように注意が必要ですが、ひとたびキャッシュ処理をサーバーで行うことができればブログ全体の速度上昇につながりますのでおすすめです。
画像の最適化
大量にアップロードしている写真を、手作業で一個一個圧縮するのは手間だな、と思っていた私にとって朗報がありました。以下のサイトを参考にして既にアップロードされている画像もまとめて圧縮してくれました。
画像を最適化(圧縮)してWordpressブログを最適化する方法
EWWW Image Optimizerでメディアアップロードされた画像も一括圧縮
WordPress横の「メディア」から「一括最適化」を行うことで、アップロードされた画像を一括に変換することが出来ます。
最適化にかかった時間は15分ほどで、メディアファイル容量が小さくなっておりました。
しかし、気になる結果は…点数は変わりませんでした。
レンダリングを妨げるJavaScriptの非同期化・保留
プラグイン Speed Up-JavaScript To Footerインストール
SimplicityのテーマからJavaScriptの非同期化・保留の設定を直接変更することもできますが、私はこのプラグインをインストールしました。このプラグインは非常にシンプルでインストールと有効化するのみでその他に必要な設定や作業はございません。
しかしスピードチェッカーの点数変わらず。。まあ体感で早くなったので、今回はこれで良しとします。
プラグイン Autoptimizeインストール
Autoptimizeを参考にプラグインのインストール、有効化を行いましたがページの表示の一部に乱れ＋プラグイン有効時にスピードテストの点数が悪くなったため、CSS・Javaを設定しAutoptimize後は、つまり通常時の利用ではプラグインを無効化しています。
不具合が生じたプラグイン WordPress Popular Posts
記事の右サイドバー(もしくはページ下部)に今月の閲覧記事トップ10までを紹介するプラグインですが、CSSの設定の関係(?)で表示が乱れてしまいましたのでこのプラグインは無効化しました。
次回検討 AMP化
今回は導入できていませんが次回時間ができたら amp かにもチャレンジしたいと思っています。
Simplicity ページ表示速度の高速化 はほどほどに
ここまで行なってスコア面ではわずかに良くなっただけですが体感ではこれらの対応を行う前と後ではページ表示のスピードが全然違います。
しかし私がそうですが、これらの仕組みを理解しないまま利用すると思わぬところでプラグインやテーマ間で干渉しあい表示が乱れてしまう場合があります。
冒頭で紹介したページ表示スピードチェッカーのスピード測定原理や本記事で紹介したプラグインのインストールによるスピード改善にどれだけ相関性があるのかはわかりませんが、自身のサイトの表示が乱れない程度にこれらのプラグインを導入することをおすすめします。
コメント