画像を高速に表示する方法(WebPの導入)

記事上部注釈
弊サイトでは実際に利用したサービスなどをアフィリエイトリンク付きで紹介することがあります

サイトを運営するうえで、忘れてはならないのはサイトの高速化です。遅い原因となるのは写真であることが多いですから、写真を高速化することが肝心です。その簡単な方法を記します。

写真1. 日本最高速の新幹線「はやぶさ」号

本記事のまとめ

本記事の要点は以下の通りです。

  • サイト速度を左右する大きな要素として、写真がある
  • 写真はWebPという表示形式を採用すると高速に表示される
  • WordPressの場合、WebP Converter for Mediaで対応可能

以下、その詳細を記します。

サイトの高速化の重要性と律速

サイト表示を高速化することの重要性は語りつくされています。では、何がネックとなるのでしょうか。思い浮かぶのは、以下のポイントです。

  1. 凝ったフォントを採用しているので、フォントを描くのに時間がかかる
  2. すべての画像を表示しているので、画像を表示するまでページ上部さえ表示できない
  3. 余計なプラグインを導入しているので、サイトが重くなる
  4. 写真のサイズが大きく、表示が重い

1については、多くのサイトさんがフォントにこだわっています。そのため、表示しはじめは汎用のフォント、そして次にサイト指定のフォントが表示されることがありましょう。これは速度低下の原因です。私は当初から(サイト開設1週間もしていないでしょう)フォントを指定していません(お使いのデバイスのフォントで表示されます)。そのため、この項目についてはすでにクリアしています(ほかのサイトさんも見習ってみてください)。

2については、2020年1月に実施しています。具体的には画像遅延読み込みという機能です。たいてい1つのページは縦長です。下のほうの表示を待つ前に画面上の画像と文字だけ表示させましょう、という機能です。

3については、サイトの機能のためには仕方ない部分があります。それでも、自分でサイトの表現技術について勉強し、プラグインではなくプログラムなどで代替できる箇所は、プログラムで解決しています。現在18ありますが、使っていないコンテンツの整理などで1つは減らせるはずです(2022年4月に実施予定)。

4については、当初から画像サイズを620ピクセルに圧縮した画像を表示しています。そのため、画像サイズは比較的小さいです。それでも、1枚100kB程度あり、90枚程度を入れる記事だとそれだけで9MBになってしまいます。

なお、この内容については、サイト表示速度を上昇させるためにをご覧ください。

※このときはモバイルは40点前後でしたが、2020年夏にロリポップ爆速宣言により、だいぶ高速化しています。弊サイトは2020年8月に対応済です。

4については、改善の余地はありそうです。

写真の表示形式

写真(画像)を表示する形式は様々なものがあります。従来はjpegを活用していました。ところが、現在は同じクオリティを保ちつつ、容量を下げることのできるWebP(ウェッピーと読みます)というフォーマットが採用されています。容量はおおよそ45%減というところです。100kBのファイルが55kBになるのは大きいです。90枚の画像がある記事であれば、4MB程度の節約になります。

そのため、ぜひともWebPを導入しようと思いました。画像の容量を下げるだけであれば、デメリットは薄いです。他の施策であれば、デザインや機能を制限することになりますが、画質が変わらず容量だけ下げるのであれば、デメリットはありません

WebPの導入とその効果

では、どのようにWebPを導入するのでしょうか。まだWebPに対応していないブラウザがあるので、一気に置換することは得策ではありません。「このブラウザではjpeg、このブラウザではWebP」という使い分けが適切です。そんなことはできるのでしょうか。答えは、WebP Converter for Mediaというプラグインを導入することです。プラグインの使いかたは私から述べることもないでしょう。外部サイトをご覧いただいたほうが早いと思います。

私は画像サイズ85%で変換しました。特に画質が悪化することもありませんでした。私は写真が上手ではないので、ある程度以下の画質でも問題ないという割り切りもあります。

では、実際の効果はどうでしょうか。今回使用するツールはPageSpeed Insightsです。このツールでは100点満点でサイトの表示速度を診断してくれます。0点~49点がダメ、50点~89点が普通、90点以上が良好というように診断されます。

画像で示しても良いのですが、要点だけを表でまとめます(表1)

表1. PageSpeed Insightsの測定結果

項目 モバイル PC
導入前 導入後 差異 導入前 導入後 差異
総合得点 81 84 3 93 91 -2
サーバー応答速度 0.6 0.6 0 1.01 0.77 -0.24
適切な画像サイズ 0.45 0.3 -0.15 1 0.63 -0.37
次世代の画像フォーマット 3.9 - - 0.76 - -
レンタリングを妨げる 1.09 0.85 -0.24 0.31 0.23 -0.08
使用していないJavaScript 1.59 0.9 -0.69 0.21 0.2 -0.01
使用していないCSS 0.45 0.45 0 - - -

最初に総合得点を示しました。WebP導入前はモバイル81点、PC93点だったものが、モバイル84点、PC91点になっています。今回はプラグインを1つ導入しており、それによるマイナスぶんと画像の表示されやすさのどちらが大きいかを確認したいという意味もありました。弊サイトで閲覧者の割合が高いモバイルの得点が向上していたので、モバイルの3点向上を選択しました。

また、PageSpeed Insightsでは改善点も示しています。モバイル、PCともに改善すべき点を列挙しました。これは点数ではなく、読み込み速度を秒単位で示しています。ここで私がポイントと考えた内容を示しましょう。

  • 適切な画像サイズの項目で所要時間が2/3倍(0.67倍)
  • ほかのチェック項目でも所要時間が増加している項目がない
  • 何より「次世代の画像フォーマット」の項目がなくなっている

画像フォーマット変更で、画像が表示されるまでの所要時間が短縮しているほか、次世代の画像フォーマット採用による速度向上が読み取れます。他の項目でも特に悪化している点はありませんので、トータル面で改善と解釈しました。

最後に

大阪に到着する223系新快速

写真2. 爆速の通勤電車、JR西日本の新快速

今回(といっても2021年10月下旬)、画像フォーマットを変更することで、わずかながらサイトの表示速度を改善しました。従来の高速化も含め、表示速度が速いサイトという自負があります。プロフェッショナルさんが眺めたら甘い部分は多いでしょうが、趣味レベルで運営しているサイトではかなり速いほうと自負しています。

サイトの高速化は一朝一夕でできることではありません。また、画像に頼らない方策での速度向上も必要です(同時期にトップページの画像リンクの下に文字リンクを貼り、実施的な速度向上を果たしています)。

今回は画像フォーマットの変更という1点でしたが、スピードアップは地道なスピードアップの積み重ねです。これからも何らかのタイミングで高速化を実施する心づもりです。

今回の改善のヒントをくれた書籍です。他にもサイト運営の本質を教えてくれる書籍と感じました。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする