画像の読み込みが遅かったからWebP形式の画像に変えた

ブログ制作

画像を見れば何となく分かる!!!

を、うちのモットーにしています。

そのため、画像がたくさんあって、ブログの読み込みが遅くなるのが欠点でした。

せっかく分かりやすいブログを目指しているのに、読み込みにもたついて帰ってしまうユーザーが頻繁に発生しているので、対策をすることにしました。

何がボトルネックになっているのか探す

読み込み速度を早くするって言っても、何が原因なのか分からなければ、対処のしようもありません。

天才プログラマーでも不可能です。

なので原因調査から入りました。

Google が提供している Web改善ツール「PageSpeed Insights」

とりあえず、パッと探して見つかったGoogleの「PageSpeed Insights」を使ってみました。

診断したいブログのURLを入力して分析を押せば、ウェブページを分析してどんな処理にどれだけ時間が掛かったかを、一覧で表示してくれます。

総合評価83点は納得できない

診断結果のトップに総合評価が出ます。

83点でした。よさそうだけど、90点以上じゃないから駄目です。

少しスクロールすると、ラボデータというのが見えてきます。

ウェブページが完全に表示しきるまでに掛かった詳しい内訳ですね。

私のブログの場合は、最大推定FIDが異様に高かったです。

最大推定FIDとはなんぞや、と思って調べてみたら、

First Input Delay (FID): 入力の推定待ち時間――ユーザーの入力に対して応答するまでの時間

との事でした。

ぶっちゃけると、ブラウザがウェブページを表示するのに忙しすぎて、私達の相手が出来なかった時間のことです。

もっと、負荷を分散させようねって話なのかな。

ボトルネックは画像が重すぎる

また少しスクロールすると、改善出来る項目が見えてきます。

画像系の項目がほとんどを占めているので、画像が重いのが原因みたいです。

原因が分かりました一安心とはいきません。

対策を打たないといけません。

次世代フォーマットに変換して配信しよう

次世代フォーマットとはなんぞやと思ったら、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形式を読み込むようになって、一安心です。

こんな方法もあるんだなと、少しでも興味を持ってくれたら幸いです。

コメント

タイトルとURLをコピーしました