ということで今回は、Googleのページ速度チェッカーを使ってブログの表示速度を測ってみたお話をしたいと思います。
ページ速度をチェックしよう
Webの表示スピードが遅いとイライラしますよね。表示時間が待ちきれないからと、ページを閉じられてしまってはがっかりです。
ということで今回は、PageSpeed Insightsというツールを使って、本ブログのページの表示速度を見てみました。
使い方はとっても簡単。判定したいページのURLを入れて分析ボタンを押すだけです。
結果は…
悲しいことに、モバイル版の表示が遅いようです…
ということで、何か改善できないか、チェックしてみました。
画像を軽くしよう
一番簡単に対応できそうだったのが、画像の軽量化でしたので、やってみることにしました。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をわざわざダウンロードせずとも、オンラインで(しかも無料で)できる、というのが楽ですね。
ただ、オンラインツールの場合は、データを抜かれている可能性がないわけではないので、重要な機密画像、外に漏れてはいけない画像などの圧縮には使わない方がいいです(そもそもそんな画像はブログには載せないかと思いますが)。
こちらも使い勝手がよさそうなので、使っていきたいと思います。
情報提供ありがとうございました!