最新コラム
-
-
-
Webサイト制作
【2023年版】国内・海外のおすすめVPS10選
-
Webサイト制作
初心者でも5分で分かる!SSL/TLSとは何か?
-
SEO外部対策SEO対策
Googleが推奨するnofollowの正しい使い方とは?
サイトを長く運用していると、画面表示速度が遅くなってきている気がする。。もしかしたら画像をそのままアップしていませんか?最初はサイトを運営しているときは特に問題なくても、徐々にサイトが遅くなっている場合は、、画像とjavascriptが原因となることが多いです。今回はサイトスピード改善に役立つ画像の最適化方法をご紹介します。
目次
今回画像を最適化しようとした背景は、ある運用サイトの表示が遅いと感じ、
ページスピードインサイトというツールで、計測したところ点数がかなり低く、その原因の多くが画像に起因するものだったからです。
ページスピードインサイトによると、以下の画像のように画像や読み込みに関する項目で
サイトスピードの改善が期待出来るようです。
ページスピードインサイトについては下記の記事でも解説しています。
ページスピードインサイトで引っかかった項目を説明していきます。
通常WEBで使用されている画像は拡張子が「.png」、「.jpg(.jpeg)」、「.gif」となっているものが多いです。
次世代フォーマットでの画像配信とは、JPEG2000やJPG XR、WebPといった画像フォーマットになります。
これらの画像フォーマットは、通常で配信されている、「.png」、「.jpg(.jpeg)」より圧縮性能が高く、ダウンロード時間やデータの配信量を抑えることができ、より表示されるスピードが上がりやすくなります。
なお2020年6月現在での、各3つのフォーマットのブラウザ対応状況は以下となっております。
https://caniuse.com/から弊社が独自で作成
ブラウザ名 | JPEG XR | JPEG 2000 | WebP | 備考 |
---|---|---|---|---|
IE | 〇 | × | × | |
Edge | △ | × | 〇 | Edge12~18はサポート済みだが |
Edge79~81,83は非サポート | ||||
Firefox | × | × | 〇 | |
Chrome | × | × | 〇 | |
Safari | × | 〇 | × | |
Opera | × | × | 〇 | |
iOS Safari | × | 〇 | × | |
Opera mini | × | × | 〇 | |
Android Browser | × | × | 〇 | |
Opera Mobile | × | × | 〇 | |
Chrome Android | × | × | 〇 | |
Firefox Android | × | × | 〇 |
(引用: https://caniuse.com/)
上記からすると、WebPはサポートしているブラウザが多いようですので、今後次世代フォーマットの画像配信を検討している方は、まずはWebPから始めたほうが良さそうです。
WebPにすると、PNG画像で26%、JPEG画像で 25-34%小さくできるとされています。
出典(引用: https://developers.google.com/speed/webp/)
なお次世代フォーマットでの画像配信するためには、フォトショップのプラグイン(https://github.com/fnordware/AdobeWebM)を使うのがよさそうですが、フォトショップ自体を持っていない運用担当の方がいるかと思います。
その場合はフォトショップを持っているWebデザイナーさんに頼むか、またはWeb上で変換するサービスがありますのでそれを使ってみて下さい(Web上で変換するサービスは後程ご説明します)。
WebPについては下記の記事で解説しています。
効率的な画像をフォーマットとは、一言で言うと画像のサイズは小さくしましょうということです。画像を小さくするためには以下の方法があります。
オフスクリーンの画像の遅延読み込みとは、画面にに表示されてない画像の読み込みを遅くさせる(スクロールし、画面が表示された段階で該当の画像を読み込む)事です。
通常は、1画面の画像やテキスト情報を全て読み込みます。画面に表示されていない画像が原因で画面表示が完了していないとなると、ユーザーにとってはストレスと感じそのサイトを離脱する可能性もあります。
そのため、ユーザーから見て表示されている部分だけ表示することで、その分表示速度も改善しますし、ユーザーのストレスも軽減されるでしょう。
今回のサイトは約400以上の画像があったため、1つ1つ画像を最適化していてはかなり時間がかかってしまいます。幸いワードプレスを使っており、ワードプレスには画像を最適化してくれるプラグインがありますので、今回はプラグインを使って対応しました。
今回使ったプラグインは主に以下の2つです。
更にjavascriptとcssの最適化で以下のプラグインも併せて使いました。
・Async JavaScript(https://ja.wordpress.org/plugins/async-javascript/)
・Autoptimize(https://ja.wordpress.org/plugins/autoptimize/)
検証前はモバイルサイトの点数で34点とあまりよくない点数。。
まずは、ewww image optimizerというプラグインをインストールします。
インストールの設定で、WebPの設定を行います。やり方は簡単で、図のように「リライトルールを挿入する」をクリックするだけです。
なお、ewww image optimizerには「イージーモード」で画像を遅延読み込みできます。
ただ検証したサイトでは、スライド画像が表示されなくなったので、チェックボックスから外しました。
メディア→一括最適化で、既存の画像を全て最適化します。
次世代フォーマット配信後の点数は以下のように60点となりました。
改善できる項目からは外れているので、かなり改善できたようです。そのかわりオフスクリーン画像の遅延読み込みが目立ってきました。
全項目で次世代フォーマットは改善できましたが、オフスクリーン画像の項目が目立ってきました。
これは、インストールするだけです。なぜなら、デフォルトで、オフスクリーン画像の遅延読み込みをしてくれているからです。
なんと、40点と下がってしまいました。。
原因は、レンダリングを妨げるリソースの除外との事で、cssやjavascriptに原因がありそうです。
これらも次で改善する必要がありそうです。
AutoptimizeとAsync JavaScriptをインストールして最適化します。
Async JavaScriptは以下のように設定します。
Autoptimizeは以下のように設定します。
以下のように「JavaScript コードの最適化」と「JS ファイルを連結する」にチェックを入れましょう。
以下のように「css コードの最適化」と「css ファイルを連結する」、「インラインのcssを連結」にチェックを入れましょう。
ほぼほぼ80点とかなり上がりました!
今回の検証でいくつかのプラグインを使って改善してみました。もちろんワードプレスにはほかにも最適化できるプラグインがありますので、それを使ってみても良いでしょう。ただ画像をあまりにも最適化すると画像が粗くなってしまうことに注意が必要です。