はてなブログ初心者のカスタマイズ記録（画像圧縮してみた編）

こんにちは、鈴木くんです。

色んな方にブログを見てもらえればと思いながらカスタマイズをしていますが、いじるにも限界がありますねー。

やりだしたらきりがないし、プログラミングとかできない僕には独自のカスタマイズってのも限りがありますから・・・

そんなわけで最近目線を変えてやっていることがあるので、紹介したいと思います。

ページの読み込み速度を改善したい

って思い立ったのは、勝手ながらブログ運営の教科書とさせていただいているgurigura (id:ayame253) さんのブログを見たときでした。

www.lifeport-gurigura.jp

正直、目から鱗でした。

ブログのカスタマイズっていったら、デザインを変えるとか、機能を追加するとかくらいしか考えてませんでしたから。

まさかページを読み込むスピードにまで着目してる人がいるなんて・・・

人の知恵を借りてデザイン変えたくらいで粋がっててすいません・・・

常識なのか応用なのかはわかりませんが、とりあえず自分も変えてみたいと思いました。

いざ見てみたらなかなかひどい結果だった

ということで僕もとりあえずGoogle PageSpeed Insightsで見てみることにしました。

ちなみにPageSpeed Insightsはモバイル（スマホ）、PCの両方を採点してくれて、修正点を教えてくれます。

モバイル

PC

PCは６０点、モバイルにいたっては４９点・・・

半分以下・・・高校のテスト以来・・・

思わぬ落とし穴でした。

とりあえず着目したのは「画像の最適化」

このままではいかんと思い対応しようと要修正内容を見たところ、

• ブラウザのキャッシュを活用する
• JavaScriptを縮小する　etc.

言葉は知ってるがどうしたらいいかわからん！

と挫けそうなときに見たのが「画像を最適化する」という指摘。

これならできそうと思って見てみることにしました。

画像最適化ツールを使ったら少し改善された

画像の最適化についてGoogleのヘルプを見ましたがよくわからず。

自分で探してみて行き着いたのが最適化ツールのOptimizillaでした。

optimizilla.com

このツールは画像をアップロードしたら自動で圧縮してくれるので、それをダウンロードするだけのスグレモノです。

（さらに圧縮したい時は手動で変えられます。）

それだけ続けてたら、少しですが改善されました。

モバイル

PC

モバイル６５点、PC７９点。

まだまだ黄色信号ですがマシになりました。

まとめ

正直これが正解かもわかりませんが、とりあえず少しでも改善が見られたのでよしとします。

これが他の誰かの知恵の足しになれば幸いですし、詳しい方は色々教えてくれると助かります。

でもこんだけキャプチャ貼ってたら本末転倒かな・・・