こんにちは、ゆんつです。
この前Simplicity作者のわいひらさんのホームページ乗っていた「コピペ一発でSimplicityを結構高速化する方法 」を参考にしてブログの表示速度の改善をしました。
ブログの表示速度の測定にはPageSpeed Insightsを使っています。
結果はモバイルの表示速度が改善前56点→改善後70点になり、パソコンでの表示速度は改善前70点→改善後80点という著しい効果がありました。
ただ85点以上が表示がスムーズなブログの目安のようなので、85点以上を目指して今日もスピードアップに取り組みたいと思います。
取り組む前に今日の速度を測っておきます。
モバイルが70点で前回と同じ。
PCが79点で前回とほぼ同じですね。
それではスピードアップ化の作業をスタートします。
EWWW Image Optimizerで画像を圧縮してみる
「EWWW Image Optimizer」というプラグインを使用してブログにアップロードした画像を一括して圧縮しサイズを縮小することで表示速度をアップさせることができるようです。
EWWW Image Optimizerを探して
インストールして有効化します。
ダッシュボードから「メディア」を選択して「一括最適化」をクリック
次の画面で「最適されていない画像をスキャンする」というボタンを押してスキャンを開始します。
スキャンが終わると最適化対象の画像の数が表示されます。
どうやら14499個も最適化する画像があるようです。
「最適化を開始」ボタンをクリックします。
どんどん圧縮が進んでいくのでしばらく放っておきます。
約15分程で完了しました。
これでブログにアップロードされている画像が圧縮されてブログが軽くなったはずです。
計測してみましょう。
モバイル69点！
パソコン77点！
やる前よりちょっとだけ悪くなってる！！
なんで！？
まあ画像は圧縮されたし、点数は少ししか悪くなってないからこれでもいいです。
というか作業前のバックアップを取り忘れて元に戻そうにも戻しようがありません。
次だ、次！
Autoptimizeプラグインによる高速化
Autoptimizeというプラグインを使うことでHTMLやCSS、Javascriptのプログラムのサイズを縮小することができその結果サイトの表示が速くなるそうです。
Autoptimizeを探して
インストールして有効化します。
設定をクリックして
右上のほうにある「高度な設定を表示」をクリックすると詳細な設定が出来るようになるのでこの画面で設定していきます。
こんな感じに設定しました。
最後に「変更を保存してキャッシュを削除」ボタンをクリックして完了です。
計測してみます。
モバイル71点
パソコン81点
最初の状態から1点ずつあがった！！
嬉しい。
ブログのスピードアップはゲームでハイスコアを狙うような楽しさがあります。
まとめ
今日は2つのプラグインを使用してスピードアップを試みました。
僕の環境では「EWWW Image Optimizer」による画像の圧縮では点数がダウンし、「Autoptimize」ではわずかですが点数がアップしました。
原因はよく解りませんが作業開始前よりも点数が1点ずつ上がったので良しとします。
まだ85点には到達できませんが、これからも少しづつ改善を続けます。
ブログをいじる前にはバックアップを忘れずに（自戒）
それでは、またですー。
コメント