サイトの表示速度が遅い要因は主に「画像」にあるということをご存知でしょうか。画像をサイト表示に適した解像度に下げたり最適化するだけで、表示速度が驚くほど改善する可能性があります。ここでは解像度の下げ方、画像を最適化する無料ツールなどをご紹介します。
ちょっと遅いだけ……？表示速度が遅いと命取りに！
どんなに良質なコンテンツを作成しても、サイトの表示速度が遅いだけでGoogleに嫌われてしまう。そんな現実をご存知でしょうか。
スマホの隆盛でモバイルサイトの方が重要度が高まってきたからです。Googleはモバイルファーストを掲げていて、スマホで見る時に負担のないサイトを高く評価すると発表しています。これからのサイトは、内容だけでなく表示速度も意識して制作しなければライバルに勝てません。
特にモバイルページの直帰率についてはシビアで、think with Googleの調査データでは
モバイルページの表示時間が1秒から3秒になると直帰率が32%増え、1秒から5秒では直帰率が90%になる
と公表しています。
サイト表示速度の改善に着手する前に、自社のサイトはどのくらいの表示速度なのかをチェックして、改善すべきポイントを確認しましょう。
こちらの記事も同時に読まれています。
→「サイトの表示速度の調べ方」
なぜサイト表示速度が遅くなるのか？
サイトの表示速度が遅くなる要因のほとんどが「画像」にあります。
画像って見た目は同じように見えても、データの重さは物によって全然違うんです。
その理由は、画像を表示する際に不要なデータも一緒に含まれてしまっていることが多いから。
サイトを作ったのは制作会社だけれど、ブログの運用は自社でやっているという人は多いはず。知らないうちに重い画像をバンバンアップしているかもしれません。
他にはCSSファイルが重い、 Javascriptを使用しているなどの要因がありますが
CSS、Javascriptを改善するのには専門知識が必要です。
サイト制作を専門会社に依頼している場合は「サイトの表示速度を改善したい」と改修を依頼しましょう。
表示速度の改善策 1問題が画像にあることを確認する
まずはサイトの表示速度をチェックして、改善ポイントを見てみましょう。
例として「イノウエPRマガジン」のURLを、速度チェックツールであるGoogle PageSpeed Insightsに入れてみます。
「改善できる項目」にある「次世代フォーマットでの画像の配信」、「適切なサイズの画像」の項目をクリックすると、画像のサイズ、改善方法が提案されています。
表示速度を遅くしている原因は、ほぼ画像だということがわかります。ほ、ほらね？？
（ひー。なんかスミマセン！恥ずかしい〜〜）
表示速度の改善策 2適切な解像度に下げる
解像度とは画像の密度のこと。単位は「dpi」で表します。
dpiは1インチ幅の中にどれだけドットが含まれているかを示します。
解像度については前に井上工業所のサイトにこれを書きました。参考にしてください。
⇒携帯で撮った画像を印刷に使えるか（解像度の解説）
昔から言われている標準的なWeb用画像の解像度は72dpiです。
この解像度に関しては、iPhone6以降から搭載されている高画素ディスプレイRetinaの登場によって
いろんな見解が出てきてはいますが、サイト用画像の解像度は72dpiで問題ありません。これまで解像度を気にしていなかった方は、もしかしたら印刷用に作られた350dpiなどのバカでかい画像をアップしている可能性があります。解像度を下げましょう。
世界中で使われている無料のソフトウェア、WordPressに画像を投稿する場合は、投稿した段階で適切なサイズに修正してくれるので、画像表示サイズは気にしないで大丈夫です。
元画像の解像度を下げるには、高額な画像編集ソフトなどを使用しなくても、無料のツールでもできます。
表示速度の改善策 3画像を最適化する
前述したように、画像にはサイト表示には不要な情報が含まれていることがよくあります。
その不要情報を取り除いて圧縮するのが、画像の最適化と呼ばれるもの。
ただ小さく粗い画像にしてしまうのではなく、
画質を保ちつつ、最小限のサイズにすることを指します。
この画像圧縮ツールは、オンラインで無料で使用できます。初心者でも簡単です。
使い方はホントに簡単！画像の最適化初心者の方でも絶対に大丈夫！
Optimizillaのサイトを開いたら、「ファイルをここにドラッグ＆ドロップしてください」のエリアに
最適化したい画像をドラッグ＆ドロップするだけ。
今回は僕の画像で試してみました。
（ああっ！サイトは閉じないでくださいね！）
どーですか？画像の見た目はほぼ変わらないのがわかりますよね。
でもオリジナル（左）は215K、圧縮後（右）は86K。
画像の重さが60%もカットできました！
（圧縮は一度に20枚までできますよ）
これだけで表示速度がかなり改善されるんじゃないでしょうか。
早速試してみて、ライバルサイトに差をつけちゃってください！
補足
Optimizillaで画像を圧縮する場合は、最後の仕上げにやってください。
せっかく最適化したのに、その後でリサイズしたり補正を行ったりすると、その加工によって再び無駄なデータが書き込まれてしまうためです。
以上、熱血野郎でした～！