ブログ表示速度のチェックと改善方法

最近、ブログに手を入れるのが楽しくて仕方ないWeekに突入していました。
ということで今回は、Googleのページ速度チェッカーを使ってブログの表示速度を測ってみたお話をしたいと思います。

ページ速度をチェックしよう

Webの表示スピードが遅いとイライラしますよね。
表示時間が待ちきれないからと、ページを閉じられてしまってはがっかりです。

ということで今回は、PageSpeed Insightsというツールを使って、本ブログのページの表示速度を見てみました。
使い方はとっても簡単。判定したいページのURLを入れて分析ボタンを押すだけです。

結果は…

PageSpeed Insights

PageSpeed Insights
悲しいことに、モバイル版の表示が遅いようです…
ということで、何か改善できないか、チェックしてみました。

画像を軽くしよう

一番簡単に対応できそうだったのが、画像の軽量化でしたので、やってみることにしました。

Bloggerの写真は全て Google アルバム アーカイブ内の「Bloggerの写真」という場所に保存されています。

1400枚以上の差し替えをしなければならない、と。
ちょっと遠い目になりました。

ひとまずこれらの画像を圧縮しましょう。
画質を落とすことなく圧縮できるという、Caesiumというフリーソフトを使いました。

使用前に、ツール>設定>圧縮で「圧縮後もEXIF情報を保持する」のチェックを外しておきましょう。これでさらにデータ圧縮になります。
日付データは残しておくことで、あとで手作業で差し替えるときに、どれがいつの写真か比較的わかりやすいです。

ファイルをドラッグアンドドロップで選択して、左下圧縮オプションの数字を選び、上部バー右から4つ目の「圧縮開始!」のボタンで圧縮できます。

右下の出力先を選択するのもお忘れなく。

この左下のスライダーの品質の数値を小さくすることで、画像をより軽量化できます(ただし、画質もその分落ちます)。
品質の数値を変え、どのように見えるのか検証してみました(必ず画像をタップ/クリックしてご確認ください)。

品質100(元画像)


品質80

品質70


品質55


品質80が推奨されていますが、70くらいでも意外とわかりませんよね笑

が、現在私が使用しているBloggerテンプレートでは、更に画質を落としたプレビューを記事内に埋め込んで表示する仕様になっているようですので、あまりに元画像の画質が低いと、かなりぼやけてしまいます。うーん。

とりあえず、今後画像アップロードする際にはCaesiumで画質を落としたものをあげていくようにして、差し替え作業もおいおい進めていこうかなと思います。

まとめ

ページ速度を上げるため、画像の軽量化は結構大事です。
私はこのことに気づくのに二年かかったので、差し替えが鬼のように大変になってしまいましたが、まだブログ記事数が少ない方、早めに手を打っておくとよいですよ…!


---以下、2019/4/2追記
海外の読者さんから、高画質のまま画像容量を大幅に圧縮するツールとして、以下のオンラインサービスを紹介いただきました。
https://www.websiteplanet.com/ja/webtools/imagecompressor/
png, jpgいずれも圧縮可能です。

Caesiumをわざわざダウンロードせずとも、オンラインで(しかも無料で)できる、というのが楽ですね。
ただ、オンラインツールの場合は、データを抜かれている可能性がないわけではないので、重要な機密画像、外に漏れてはいけない画像などの圧縮には使わない方がいいです(そもそもそんな画像はブログには載せないかと思いますが)。

こちらも使い勝手がよさそうなので、使っていきたいと思います。
情報提供ありがとうございました!