Webの表示速度を向上させるメリットと改善方法

WEB制作・開発実例・コラム
2019.04.30
2019.10.03

自分が検索してサイトを訪れたとき、ページが表示されるまで時間がかかった場合、 そのサイトをみようと思いますか?おそらくこのまま見たいと思う方はあまりいないと思います。 これが自分がサイトを運用している立場だったら。。

もしかしたらWebの表示速度が原因で、アクセス数が減ったり直帰率が高かったりするかもしれません。今回はWebの表示速度を向上させるメリットとその方法についてご紹介します。


Webの表示速度を向上させるメリット

Webの表示速度を向上させるメリットにはどのようなものがあるのか見ていきます。

ページの表示速度はSEOにも影響する!

PC版は2010年から、モバイル版は2018年の7月からランキング要因になっています(スピードアップデート)。 ただ、このスピードアップデートですが、表示速度が速ければ、速いほどというわけではなく、ページスピードが著しく遅い場合、ランキングが低くなることもあるとGoogleは発言しています。なおスピードアップデートの仕様は以下です。

  
  • スピードアップデートは本当に遅いサイトだけに影響する
  •   
  • スピードアップデートの影響を受けたサイトは、段階的に改善できる
  •   
  • サイトが十分に速いのであれば、それ以上に速くしても何も変わらない

  • つまりページの読み込みに数十秒かかるくらいでなければ、対応可能な範囲で速度を改善すればよいということになります。

    ユーザーの離脱率・直帰率が下げられる

    例えば自分が、サイトを訪れた時、どんなサイトかすぐに表示されるのと、サイトが表示されるまでに時間がかかるサイトではどちらが使いやすいのでしょうか?もちろん後者の方が使いやすいですね。

    また、2017年2月にGoogleが公表したのが、「ページが完全に表示されるまでに3秒以上かかると、53%の直帰する」「表示速度が1秒から7秒に落ちると直帰率が113%上昇」というデータです。 つまり、ページ速度が遅い場合、直帰率が高まってしまいます。

    Webの表示速度を向上させるための方法

    それでは、Webの表示速度を向上させるためにはどのようにすれば良いのでしょうか。主にHTMLやCSS・Javascript等ページがブラウザに表示される部分(フロントエンド)の改善と、データベース等サーバー側(バックエンド)の改善二つがあります。

    フロントエンド

    フロントエンド側の改善について見ていきましょう。

    サーバーへの通信量や通信回数を減らす

    画面を表示する際に単なるhtmlだけ取得するわけでなく、htmlに書かれているファイル化されたcssやJavascript、画像情報を取得するたびに通信が発生します。つまりこれらのファイルが多ければ多いほど通信が発生し、その分画面表示まで時間がかかってしまいます。

    また通信の際に回数を減らしてもファイルの容量が大きい場合も、それだけで画面を表示するまでに時間がかかってしまいます。特に画像はファイルの容量が大きくなりがちです。
    そのため以下のような無料の画像最適化ツールがあり、いずれも、パソコンにインストールすることなく、Web上で手軽に画像を最適化出来ます。

      
  • Optimizilla:https://imagecompressor.com/ja/
  •   
  • TinyPNG:https://tinypng.com/
  •   
  • JPEGmini:https://www.jpegmini.com/
  • キャッシュを効かせる

    静的な画像やあまり変更することがないcssファイルなどは、ページを読み込む度にファイルを取得していたのでは、読み込みに時間がかかり、それだけページの表示速度が遅くなります。 そのため、.htaccess等やキャッシュサービスを使って、なるべくサーバーとの通信回数を減らすと良いです。
    以下は、.htaccessでキャッシュを効かせる記述例です。以下では、とくにあまり変更することがない画像ファイルなどは1か月と長めに設定しています。

    <ifModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 seconds"
    ExpiresByType text/html "access plus 1 seconds"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 month"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    </ifModule>
    

    レンダリング

    実は通信だけでなく、HTMLの記述も表示速度に関わってきます。

    例えばJavascriptをヘッダータグの中に記述するとブラウザの表示速度が遅くなってしまうことがあります。これは、レンダリングの際に先にヘッダーにある情報を読み取るからで、そこに実行するスクリプトが記述されていると、そのスクリプトを処理してから、bodyの中にある表示の部分を読み込むことになるため、ページの表示速度に影響してきます。

    そのため、先に表示できるものを表示させておいて、最後にスクリプトを読み込ませるようにすると、ユーザーとしては、体感的に遅いと感じることは少なくなるでしょう。具体的には、bodyの閉じタグの直前に記述すると良いです。

    バックエンド(サーバー)

    次にバックエンド(サーバー)側の改善について見ていきましょう。

    不要なプラグインを削除する

    サイトを、ワードプレスなどCMSを使っているときは、不要なプラグインがないかチェックしましょう。不要なプラグインがあると、それだけでサーバーの応答速度が遅くなってしまいます。

    ひとつのプラグイン自体は問題なくても、プラグインが多ければ多いほど、サーバーの応答速度に影響する可能性がありますので、動作に影響ない不要なプラグインは削除すると良いです。

    SQL文の最適化

    SQL文一つでもパフォーマンスに影響します。そのため、本当に最適なSQL文になっているか確認しましょう。MySQLですと、処理に時間がかかったSQLはslowqueryとしてログに保存されますので確認してみると良いです。

    なお筆者の経験では、あるデータの突き合わせにサブクエリとして「in」句を使用していたが、データを参照する件数が多かったため、「inner join」に変更したところ速度が改善されたということがあります。

    このように構文を変えるだけでもパフォーマンスに影響がでますので、余裕があるときに確認してみると良いです。

    データベースのインデックスの見直し

    インデックスとは索引のことで、データベースの性能を向上させる方法の一つです。

    インデックスされていないと、基本的に全部のデータから該当するデータを抽出します。特にデータの件数が膨大だと1行ずつ検索するので、かなりパフォーマンスに影響します。
    ただ、無暗闇雲にインデックスするとかえって遅くなりますので、基本的には以下ような場合にインデックスさせると良いです。

      
  • データの件数が多い
  •   
  • データの重複や偏りが少ない
  •   
  • 更新頻度が比較的少ない
  •   
  • 表の追加や削除が比較的少ない
  • 思い切ってサーバーのスペックを見直す

    上記を改善してもなかなか表示速度が上がらない場合は、思い切ってサーバーのスペックを上げてみましょう。

    実はぺコプラのサイトも先月くらいまでは比較的安いスペックのサーバーにしていましたが、アクセス数がかなり伸びてきているので、サーバーのスペックを上げ、パフォーマンスが向上しました。

    Webの表示速度を確認するためのチェックツール

    最後に、Webの表示速度を確認するためのチェックツールをご紹介します。Webの表示速度が遅いと感じたら以下のチェックツールでどこが悪いのか確認してみましょう。

    ページスピードインサイト

    こちらは、Googleが提供しているツールで、検索窓にURLを入力すると現状のパフォーマンスと、パフォーマンス改善のために何をすればよいかヒントを与えてくれるツールです。 なお、このツールで出てくる項目については以下のURLで解説していますので、ご参照下さい。

    2018年11月にPageSpeed Insights(ページスピードインサイト)がリニューアル!使い方や見方を解説

    ページスピードインサイトのチェック結果(yahooのトップページ)

    Google Analytics

    Google Analyticsを導入しているならば、Google Analyticsにも「ページ速度」についての情報があります。ここではサイトのページを表示するまでにどのくらいかかったのか表示されます。 異なるページや過去の表示速度も見ることが出来るので、是非チェックすると良いです。

    Test My Site(テストマイサイト)

    Test My Siteは2017年6月に公開されたモバイルサイトの速度をチェックできるツールです。

    使い方は、先ほどご紹介した「ページスピードインサイト」と同様、検索窓にチェックしたいモバイルサイトのURLを入力して実行するだけです。
    チェックは2019年4月現在4Gネットワーク環境下での速度のようです。

    テストマイサイトのチェック結果(ぺコプラのトップページ)

    Chromeの開発ツール

    Google Chromeの開発ツールでもチェックすることが可能です。開発ツールをF12等で表示させ、「network」を選択し、該当ページをリロードすると、ページを読み込むのに必要なファイルや画像一覧が表示され、かつ各ファイルがどのくらいの速度で読み込まれたのか表示されます。

    chromeの開発ツール画面例

    まとめ

    いかがでしたでしょうか?まずWebサイトの現状をここで紹介したチェックツールを使用し現状を把握し、その後、改善できるところは改善して少しでもユーザーの直帰率を防ぐようにしましょう。

    SEOやWEB制作に関する情報を検索

    コラム

    ピックアップコラム

    最新コラム

    人気コラム

    過去の記事

    ご質問やご相談などお気軽にお問い合わせください。

    お電話でのお問い合わせはこちら

    03-5829-9912

    受付時間:平日10:00~19:00(土・日・祝日を除く)