【初心者でも出来る】画像を圧縮して表示速度を改善する3ステップ

Web活用

投稿日:    更新日:

少し前の話になりますが、昨年Googleでセミナーを受けました。

Googleのために仕事をしている訳ではありませんが、やはりWebを活用するという意味で、Googleの考え方や今後の向かうべき方向性を知ることは、重要だと思います。

いろいろと為になる話を聞けたのですが、
想像以上の数値に驚きを覚えたものがあります。

それは・・・
GoogleAdwords公式ブログでも公開されていますが、モバイルサイトの表示時間と訪問者の関係です。

  

スマートフォンの普及に伴い、ユーザーはどこにいても情報をすぐに検索することができるようになり、情報を手に入れるまでの時間が早くなっています。結果ページ表示の速さに対して、ユーザーの期待値は上がっています。モバイルサイトのページが表示される時間が 3 秒を超えると 53% の訪問者がサイトから離れてしまうという調査結果があり、サイトの表示が 1 秒遅れるごとにコンバージョンは 20% 下がるともいわれています。

この数字、恐ろしくありませんか?
特に後者のモバイルサイトの表示速度が遅く、たった1秒ロード時間が長くなるだけで、コンバージョンが20%も下がるとは、、、

このような数字もありますので、Webサイトの表示速度は早くしておくべきです。
しかし、あなた自身が表示速度を改善しようと思っても、専門知識がないとできないのでは?と思ってしまいますよね。

そこで、今回は、Webの専門知識がない、初心者の方でも簡単にできる、
画像を圧縮してサイズを小さくすることで表示速度をアップする方法をお伝えします。

ステップ1.Webサイトの表示速度を把握する

現在地を知らなければ、目的地に正しく向かうことはできません。
まずは、あなたの会社のWebサイトの表示速度を把握します。

Webサイトの表示速度を知るためのツールはたくさんありますが、
その中からGoogleが提供しているツールを2つご紹介します。

PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/?hl=ja

あなたのウェブサイトのURLを入力して、分析ボタンをクリックしてください。
次のような分析結果の画面が表示されます。

分析結果の「最適化についての提案」の中に「画像を最適化する」という項目があります。
画像サイズをあまり意識していない方が多いと思いますので、ほぼすべての方に「画像を最適化する」が表示されます。

次の画像のように、圧縮することでデータサイズが削減できる画像を一覧で表示してくれます。
削減できる画像のデータサイズをみると、画像の最適化が出来れば、表示速度を早くできそうな気がしてくるはずです。

見ていただくと分かりますが、Pagespeed InsightsでモバイルとPC、両方での評価を知ることができます。そのため、これだけでも十分ですが、せっかくなのでもう1つモバイルサイトの読み込み速度をテスト、評価してくれるGoogleのツールをご紹介します。

test my site

https://testmysite.withgoogle.com/intl/ja-jp

このツールは、モバイルサイトに特化したものになります。
冒頭でご紹介したGoogleの公式ブログの数値は、モバイルに関してでした。PCはどうでも良いわけではありませんが、現状では、モバイルサイトでいかに早くWebサイトを表示できるかが、とても大切な指標となります。

あなたの会社のURLを入力して右矢印をクリックしてください。分析が開始されます。
結果は、3つのパートに分けて表示されます。

1つ目は、3Gでの読み込み時間と訪問者の推定離脱率です。

2つ目は、同じ業種内の比較です。こちらは業種の細分化がそこまでされていないようですので、参考程度に捉えておけばよいでしょう。

3つは、サイトのスピードを上げる、ということで修正によりどのくらい表示速度を速められるかが示されます。

具体的にどのような改善をすれば良いか、
Pagespeed Insightsでの最適化についての提案と同じような内容が、無料レポートとして入手できます。

ステップ2.画像を圧縮して画像サイズを削減する方法

ステップ1のPagespeed Insightsの画像を最適化する対象としてリストアップされた画像を、圧縮していきます。圧縮といってもよく分からない、、、そんな方もいるかもしれません。

でも大丈夫です。jpgやpng、gifなどの画像形式を細かく説明しているサイトもありますが、、、
専門家になるわけでもないですので、圧縮される原理は知らなくて大丈夫です。
使うツールだけブックマークに保存しておきましょう。

https://tinypng.com/

次の画面のように、pngかjpgの画像ファイルを中央部にドラックアンドドロップするだけです。
簡単ですよね。

サンプル画面は写真ac(https://www.photo-ac.com)というサイトで入手した無料素材を、ブログのアイキャッチ画像で使うために圧縮したものです。80%近く圧縮できています。

やってみると分かりますが、tinypngのサイトで圧縮をしてもPagespeed Insightsで引き続き圧縮できるファイルとしてリストアップされることがあります。これはもう仕方がないので、無視して構いません。

Pagespeed Insightsの分析は1つの指標として大切ですが、そこで100点になることがゴールではないはずです。本来の目的を見失わないようにしましょう。

ステップ3.圧縮した画像ファイルをアップロードする

画像の圧縮が終わったら、今アップされているサイズの大きな画像を削除して、圧縮した画像ファイルをアップロードしましょう。

WordPressを使って自分で更新している方は、自分で簡単にできるはずです。
外注している場合も、ファイルを一式USBにでも保存して、画像を差し替えるように依頼してください。画像を加工するわけでもなく、画像を上書きするだけなので、そんなに費用がかからずやってくれるはずです。

圧縮した画像に差し替えたら、もう1度、ご紹介したツールで分析してみてください。
Before Afterをしっかり把握することが大切です。

Webサイトの表示速度を改善する画像を圧縮する方法まとめ

今回は、Webサイトの表示速度を改善する方法の中から、簡単に取り組める画像の圧縮をご紹介しました。

・ステップ1.ツールを使って表示速度を確認する
Pagespeed Insights
test my site
・ステップ2.JPGとPNGを圧縮できるサイトで圧縮をする
tinypng.com
・ステップ3.圧縮した画像ファイルをアップロードする

この記事を書いた人

代表写真

馬場 宏

インターネットに情報が氾濫する時代。テクニックやノウハウを追い求める人が多いことを憂う。中央省庁勤務時代に磨いた本質思考を武器に、テクニックやノウハウの背後にある普遍的な考えに基づくコンサルティングとWeb制作を行うことを得意とする。お客様に寄り添いながら、しつもんを駆使して問題解決を行う手法に定評がある。

最新の投稿

よく読まれている記事

テーマ

ページトップへ