画像を見れば何となく分かる！！！
を、うちのモットーにしています。
そのため、画像がたくさんあって、ブログの読み込みが遅くなるのが欠点でした。
せっかく分かりやすいブログを目指しているのに、読み込みにもたついて帰ってしまうユーザーが頻繁に発生しているので、対策をすることにしました。
何がボトルネックになっているのか探す
読み込み速度を早くするって言っても、何が原因なのか分からなければ、対処のしようもありません。
天才プログラマーでも不可能です。
なので原因調査から入りました。
Google が提供している Web改善ツール「PageSpeed Insights」
とりあえず、パッと探して見つかったGoogleの「PageSpeed Insights」を使ってみました。
診断したいブログのURLを入力して分析を押せば、ウェブページを分析してどんな処理にどれだけ時間が掛かったかを、一覧で表示してくれます。
総合評価83点は納得できない
診断結果のトップに総合評価が出ます。
83点でした。よさそうだけど、90点以上じゃないから駄目です。
少しスクロールすると、ラボデータというのが見えてきます。
ウェブページが完全に表示しきるまでに掛かった詳しい内訳ですね。
私のブログの場合は、最大推定FIDが異様に高かったです。
最大推定FIDとはなんぞや、と思って調べてみたら、
(FID): 入力の推定待ち時間――ユーザーの入力に対して応答するまでの時間
First Input Delay
との事でした。
ぶっちゃけると、ブラウザがウェブページを表示するのに忙しすぎて、私達の相手が出来なかった時間のことです。
もっと、負荷を分散させようねって話なのかな。
ボトルネックは画像が重すぎる
また少しスクロールすると、改善出来る項目が見えてきます。
画像系の項目がほとんどを占めているので、画像が重いのが原因みたいです。
原因が分かりました一安心とはいきません。
対策を打たないといけません。
次世代フォーマットに変換して配信しよう
次世代フォーマットとはなんぞやと思ったら、WebP形式の画像のことでした。
Jpeg形式やPng形式よりも圧縮率が高いので、ウェブページには最適みたいです。
画像をWebP形式に変換する
そうと決まれば、画像を一括でWebP形式に変換してくれるツールを探さないといけません。
使いやすいツールが見つかりました。
コンパクトで高速な次世代画像フォーマット「WebPconv」
「WebPconv」は、複数のJPEGやPNG画像を一括でWebPファイルに変換できるみたいです。
ダウンロードもインストールも使い方も簡単で、直感で変換することが出来ました。
ポータブル版をダウンロード
公式サイトを少しスクロールすると、右側にダウンロードボタンが見えてくるので、「Download(Portable)」をクリックします。
ポータブル版を選んだ理由は、インストール作業が無くて解凍するだけですぐに使えるからです。
インストールするとパソコンが汚れちゃうし、要らなくなって消したいときも、フォルダ削除するだけでいいので、お手軽なんです。
画面はシンプルで分かりやすい
ダウンロードしたZipファイルを、適当な場所に解凍して、「WebPconv.exe」を開きます。
「Drop files here to encode.」のエリアに、変換したい画像ファイルをドラッグ＆ドロップして登録します。
最後に、上部にあるボタンを押せば変換が始まります。
デスクトップに「WebP_encoded」というフォルダが作られて、その中に変換されたWebP形式の画像が吐き出されます。
Hexoの画像タグを書き換える
Hexoの画像タグを書き換えて、WebP形式を優先して読み込むように修正します。
Hexo でブログを作っているので、サーバーの処理が書けません。
なので、JavaScriptやHtmlタグで、WebP画像を読み込むか通常のJpeg画像を読み込むか、切り分けしないと駄目なんですね。
画像のHtmlタグを修正してWebPに対応する
「WebPのブラウザ振り分けの仕組みを図解」こちらのサイトで、WebPの対応方法を詳しく説明してありますので、合わせてご覧ください。
サーバーでWebPに対応した方が簡単と説明されていますが、今回はサーバー処理が無理なので、Htmlタグでの対応を実施しました。
まとめ
最後の方、駆け足な説明になってしまいました。
無事にWebP形式を読み込むようになって、一安心です。
こんな方法もあるんだなと、少しでも興味を持ってくれたら幸いです。