ページ表示速度が遅いことの影響は?測定方法や改善方法について

サイトの表示速度は、ユーザーとサイト構築者の双方にとって非常に重要な指標です。表示速度の目安や、速度を改善するためには、どのような手法があるか知っておくことが大切です。表示速度が与える影響について解説します。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。「副業・複業」で、本業では経験できない、新しい環境/開発スタイルを経験しよう!

→「Offers」をもっと詳しくみる! かんたん60秒で副業を始めてみる

表示速度の重要性

表示速度は、検索結果で表示されたリンク先にアクセスし、そのリンク先ページが表示されるまでの時間を指します。

表示速度は『検索者が必要としているページを反映するまでの時間』であるため、時間がかかってしまうことは仕方ないと思われるでしょう。しかし、表示速度は、検索者とサイト構築者の双方にとって重視すべきポイントです。

SEOへの悪影響

SEOとはWebサイトの検索結果を上位に表示させるための取り組みを指し、基本的にSEO順位が高いほど、有益な成果を上げやすいものとされます。表示速度の悪化は、SEO順位にも悪影響を及ぼします。

PCとスマートフォンのそれぞれに表示速度が関係しており、検索結果の上位に表示させようと思うと、表示速度も重要な項目の一つです。

ユーザー離脱率や売上への悪影響

表示速度が遅いと、サイトに興味を持ったユーザーの離脱に繋がるケースもあります。

サイトの特性にもよりますが、『約3秒で、半数のユーザーが離脱する』という見解があります。3秒は非常に短い時間のように感じますが、ユーザーに快適な時間を過ごしてもらうには、表示速度の改善はマストであるといえます。

特にスマホ向けサイトは重要?

パソコンとスマートフォンでは、より重視すべきは『スマホでの表示速度』です。

2018年にGoogleから公式に、スマホでの表示速度をSEO順位により優先すると発表されました。名称は『モバイルファーストインデックス(MFI)』とし、この背景は、全体の検索のうち半数以上がスマホを使用していることが調査で明らかになったためです。

スマホの普及に伴い、場所や時間を問わず、気になったことをその場で検索できるだけでなく、ショッピングなども楽しめるようになりました。

現在では、パソコンとスマホが同一サイトであることも多いですが、それぞれのサイトが分かれている場合には、一度確認してみましょう。

表示速度の測定方法と目安

表示速度は、インターネット上のサービスを使って簡単に計測することができます。計測方法とあわせて、表示速度の目安についても紹介します。

測定サイトの利用

表示速度は測定サイトのサービスを用いて測定しましょう。

ここでは、多くの人が使用しているGoogleのサービスを紹介します。

Googleからリリースされている『PageSpeed Insights』は、ページ中央に表示されている検索窓に対象のURLを挿入し「分析」ボタンをクリックするだけで分析することが可能です。

表示速度の目安とは

表示速度は『2秒以内』が目安です。

膨大な情報量を取り込んだサイトをたった2秒で表示させることは難しいように感じますが、表示までの時間が3秒以上の場合には、半分以上のユーザーが離脱してしまいます。

サイト内の情報が多いほど表示速度は遅くなってしまうため、こまめに見直す習慣をつけましょう。

表示速度改善を図るためのポイント

表示速度が遅い原因は、さまざまです。サイト内には、サイトそのもののデザインだけでなく、テキストや画像・動画を用いることが多く、サイトの基盤によっても表示速度が変動するためです。

表示速度の遅延に繋がっている箇所を明確にし、ピンポイントに改善を図りましょう。

フロントエンドではサーバーへの負担減を

フロントエンド(HTML、JavaScript、CSSなどの技術)では、サーバーへの負担箇所を明確にすることで表示速度を速めることができます。具体的には、以下を見直してみましょう。

  • サーバーへの通信の回数
  • サーバーへの通信量
  • レンダリングの速度

フロントエンドでの改善は、HTMLコードを書けることがポイントです。HTMLコードを書くことができれば、表示速度が遅い箇所に対して、明確な打ち手を見つけられる可能性が高まります。

バックエンドではレスポンス速度向上を

フロントエンドに対してバックエンド(サーバサイド)では、状況に応じて対応すべきポイントが異なるため、専門的な知識が求められます。

サーバサイドで必要となる知識は、プログラミング言語(主に、Ruby、Perl、Python、Java、NodeJS、PHP等)ごとの特徴や、アプリケーションの対象ターゲット(BtoC、BtoBかなど)によっても異なります。

非常に複雑ですが、常に『どのポイントを改善すれば、ブラウザに返すレスポンスの速度を上げられるか』という点を意識しましょう。

参考例として、以下を紹介します。

  • データベースの見直し(使用しなくて済むものは使用しない)
  • キャッシュを積極的に使用する
  • 使われているSQLが最適かを見直す
  • 不要なデータを保存しない
  • データベースを分割する

フロントエンドの場合は、HTMLコードが書ければ比較的簡単に対処することができますが、バッグエンドは、自分だけで対処するのではなく、専門家の意見を参考にしてみるとよいでしょう。

まとめ

表示速度はSEO順位やサイトの売り上げにも関わる重要な指標です。また、表示速度は2秒が目安とされています。

速度は計測ツールを用いて計ることができ、速度の改善には、フロントエンドとバックエンドからのアプローチが可能です。フロントエンドに比べバックエンドでは、より専門的な知識が必要とされますが、ケースに応じてピンポイントに改善できます。

表示速度がユーザーへ与える影響は大きいため、積極的に見直しましょう。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。

いくつもの転職媒体を使って、企業を探し回るのはもう終わり。「副業」から始まる新しい働き方を実現します!

本業では経験できない、新しい環境/開発スタイルを経験しよう!



この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

Rubyエンジニア2名の爆速採用に成功!2ヶ月で30倍の事業拡大を支える農業ITスタートアップの複業活用法

野菜や米、果物などの生産者と消費者を繋ぐオンライン直販所『食べチョク』を運営するビビッドガーデン。在宅時間をより充実させたい消費者が集まり、事業が急成長している。そこで課題となったのがエンジニア...

オンライン面談のみでテックリードクラスを複数採用!注目ベンチャー企業のwithコロナ時代に向けた採用術とは

日本で唯一のeKYC対応のデジタル身分証アプリを提供するTRUSTDOCK。今後、身分証がデジタルに置き換わるであろう不可逆な未来を実現するためにもエンジニアが必要だった。同社にはコロナ禍にも関...

mrubyを採用したソフトウェアを広げた第一人者・松本亮介が、面倒を感じながらもC言語を愛する理由とは?

世の中にはさまざまなプログラミング言語が存在します。そして、人によってはただならぬ愛着を持つ人も。そこで本企画では、このプログラミング言語にフォーカス。お気に入りのプログラミング言語のことを中心...

エンジニアとして、社会に新しい価値を提供し続けたい。カンカク志甫氏が考える本業と副業のバランス術

本業と数々の副業を両立させてきた志甫氏。副業を受ける決め手や本業と副業を両立させるコツ、これからのエンジニアのチャンスの掴み方について伺った。

デザイン

お金

採用・組織

グルメ