railsでトップページに画像を使用しているが、開発環境でも本番環境でも読み込みにすごく時間がかかっていました。
(カクカク表示されていてこれ絶対ユーザーの立場だとイライラするな〜と感じていました。)
その対策として自分が行ったことを記録しておきます。
環境は以下のとおりです。
ruby 2.6.5
Ruby on Rails 6.0.3.
本番環境はAWS(EC2)を使用
改善前の状況
先ほども記述しましたが、とにかく画像の読み込みでカクカクしていました。
ログで確認するとこんな感じでした。
Web閲覧に3秒かかると、半数がページを離れると聞いたことがありますがこの場合ビューの読み込みで４秒かかっているっためかかりすぎですね。(4秒を超えるのは初めて見ました。)
改善内容
何か改善できないかと調べていたところWebPというものを見つけました。
WebPとは
・読み方はウェッピー (私は初見で「ウェブピー」と読んでいました...。)
・Googleが新しく作った画像フォーマットでファイルの拡張子は「.webp」
・JPEGに比べてファイルサイズが小さく、画質も劣化しにくい
・一部非対応ブラウザがある。
ちなみに２０２０年１０月時点での対応プラウザは以下の画像のとおりです。
IEとMacOS版Safariが非対応(iOS版Safariは対応) という感じでしょうか。
今までは.JPGを使用していたため早速WebPに変更してみました。(ネットで検索するとjpg→webpに変換してくれるツールがあります。)
ちなみに私はImageMagickでWebPを使いました。
WebPが使えるかどうかは以下の記事を参考にさせていただきました。
ImageMagick と WebP
変換結果として以下のような違いがありました。
↓jpgファイル
↓webpファイル
確かにサイズが小さくなっていますね！
画質も確かに落ちてはいますが、個人的には気になりませんでした。
改善結果
ファイルをWebPに変更後、読み込み時間は以下のようになりました。
４秒から２秒に減らすことができました！気になっていたカクカクも無くなりすんなりと表示されるようになりました！
にしてもこれだけで２秒も減るのでしょうか？
あとまだ２秒かかっているので無駄なファイルやレンダリングを減らしていってなるべく短くできるようにしていきます。
参考記事
https://qiita.com/yoya/items/0848a6b0b39db4cd57c2
https://caniuse.com/webp
https://qiita.com/szaizen/items/6a5819925cf3fa5fe79e