Pinto!

企業のマーケティングを支援する「ピント!」

【UX】Webサイトの表示速度を改善する3つの項目別対処法!

Writerライター

五十嵐 和希

株式会社PLAN-B プロジェクト推進室 ビジネス開発ユニット

2013年中途採用でPLAN-Bに入社。東日本エリアの営業マネージャーを経て、2017年にビジネス開発ユニットを立ち上げ、各種アライアンス構築活動中心とした事業開発や、SFA/MAなどを駆使した営業支援業務に従事。

目次
    1. サイトスピードと離脱率の関連性
    2. 01. 画像でのサイトスピード改善とツール
      1. 1. タイニーピング(TinyPNG)を用いた圧縮
      2. 2. JPEGミニ(=JPEGmini)を用いた圧縮
    3. 02. サーバーのレスポンス改善
    4. 03. ブラウザキャッシュ
    5. まとめ

Webサイトを運営する上で、覚えておきたいサイトスピード(=Webサイトのページを読み込み、表示させるまでの速度)の改善方法。サイトスピードの改善はSEO対策にも必要な項目です。

まだ対策をしていない・しきれていないという方は早急に対策を行いましょう。今回はそのサイトスピードの改善に必要な項目を順序立てて解説します。


サイトスピードと離脱率の関連性

みなさんは、Webサイトを開いたときにサイトの表示やレスポンスの遅さに負担を感じたことはありませんか?

Webサイトの表示が遅いと、クリックした直後に「別ページに移動する」「前のページに戻る」という行動が起きやすくなります。つまり、サイトスピードの遅さはユーザーの離脱率の上昇に繋がってしまうということにもなります。

一説には、サイト表示速度が2秒違うと、サイト直帰率が50%も増加するという話もあります。

また、それだけではなく、サイトスピードの遅さは単純に「ユーザビリティの悪さ」と捉えることもできます。「ユーザーにとって使いづらい」と認識されたサイトは、SEO評価が下がることも忘れてはなりません。

次に、サイトスピードを確認、改善する際に便利なツールPageSpeed Insightsをご紹介します。これは、Googleが公式に発表をしているサイトスピードを可視化するためのツールです。

このPageSpeed Insightsは、サイトスピードを100点満点で評価するほか、改善点の洗い出しを行い、より良いサイトを作り出すことを目的としています。

使い方を簡単にご紹介します。

トップページを起動後、調べたいWebサイトのURLを入力し、分析を実施すると、Webサイトの評価を行います。

評価は「修正が必要」「修正を考慮」「ルールに合格」の3つあります。

どの項目が改善項目なのか、またはどの項目が修正できているのかなどをそれぞれ確かめることができるので、この結果を元に対策を行うことが可能になります。

表記を確認しながら改善を進めることで、より良いサイト構築が行なえます。基本的にPageSpeed Insightsでは、70点を越えるとある程度評価の高いWebサイトと判断されるため、まずは、70点を目標に組み立てを行うといいでしょう。


01. 画像でのサイトスピード改善とツール

改善にはさまざまな方法が用いられますが、ここでは画像の最適化に焦点を絞りご紹介します。

画像を用いたWebサイトは見栄えもわかりやすさも格段にアップするため、便利な表現手段としてよく使われます。

しかし、画像は文字よりも容量が多いため、画像の重さがサイトスピードを遅くしている場合も考えられます。その場合、画像自体の重さを軽くする「ロスレス圧縮」を行うことで改善が見込めます。

ロスレス圧縮とは言葉の通り、「ロス(=ムダ)」を「レス(=少なく)」するために行う「圧縮」のことです。先ほどのPageSpeed Insightでの評価に「画像を最適化する」と記載があった場合に行うべき項目です。

1. タイニーピング(TinyPNG)を用いた圧縮

画像のロスレス圧縮は主に2つの方法があります。その2つは「画像の拡張子によって使い分ける」必要があるので、拡張子がどちらなのかで使い分けてください。

ここでご紹介するタイニーピング(TinyPNG)は、PNG形式で保存された画像ファイルをロスレス圧縮するために用いるツールです。

圧縮したい画像ファイルをドラッグ&ドロップで流し込むと圧縮したファイルを生成してくれます。

2. JPEGミニ(=JPEGmini)を用いた圧縮

画像ファイルがJPEGの場合に使用するツールがJPEGミニ(=JPEGmini)です。

画像ファイルの形式としては最も広く使用されているJPEGですが、使い方によっては画像が劣化してしまったりとデメリットも考えられます。このJPEGミニでは元の画像をほとんど劣化させることなく圧縮できるおすすめのツールです。

こちらも使い方はシンプルで、赤色の”TRY IT NOW”からアプリケーションをダウンロードして使用します。

実際のアプリケーションを開くとこのような画面が現れるので、圧縮したい画像を選択、もしくはドラッグ&ドロップで流し込みを行います。

それぞれのツールで圧縮を行なった後、Webサイトの画像差し替えを行うことで画像の最適化が完了します。


02. サーバーのレスポンス改善

Webサイトのページを読む込む時、ブラウザがサーバーの情報を素早くキャッチしてサイト上に表示しています。そのサーバーからの応答(=レスポンス)が滞っている時、サイトスピードが遅延してしまいます。

サーバーからのレスポンスをスムーズにするためには、読み込む情報を整理する必要があります。また、サーバーが重いと感じた場合には不要な画像や今後使用しないページやスクリプトを削除して整理整頓を行いましょう。

また、サーバーのメモリやCPUが足りなくなってしまった場合にはサーバーのアップグレードを行い、サーバーの処理をを最適な環境にすることを検討してるのもおすすめです。


03. ブラウザキャッシュ

最後に、サイトスピードの改善に必要なブラウザキャッシュについてご紹介します。

ブラウザキャッシュとは、以前閲覧したWebサイトやその中の画像の情報を記憶することを指します。1から読み込むよりも、1度見たことのある情報はキャッシュを残す方がサイトスピードが早くなり、快適に閲覧することができますす。

ブラウザキャッシュは.htaccess内(apacheの場合)に記述を行うことで設定できます。記述内容は使用しているバージョンによっても左右されますので、ご注意ください。

必要な記述まで変更してしまわないように、必ずバックアップを取って記述するようにしましょう。


まとめ

サイトスピードが遅くなる理由は、ひとつではありません。今回は、

  • 画像の最適化
  • サーバーのレスポンス改善
  • ブラウザキャッシュ

についてご紹介しましたが、他にもソースの圧縮やサーバーでのキャッシュなどサイトスピード改善にはいくつも手法があります。

ひとつずつ改善していくことでユーザビリティの高いサイトを構築することができます。

ぜひ、今回ご紹介した方法を実践して快適なWebサイト運営を行なってください。

SEOコンサルティングの最新事例 サービスページはこちら

関連する記事を読む