Webサイト高速化・表示速度改善のために知っておきたい基礎知識

Webサイト高速化・表示速度改善のために知っておきたい基礎知識

Webサイトを高速化をすることによって得られるメリットは様々です。ユーザーエクスペリエンスの改善といった話とは別に、サーバーの台数を減らせることも大きなメリットでしょう。

サーバーの台数が減ればコストも下がるし、運用も楽になりますので、Webサイトの高速化はSEO対策に限定せずに実現したいところです。

しかし、「高速化しよう」「表示速度を改善しよう」といっても、実際に高速化を阻害するような要因を知っていなければ、どう取り組んで良いか分かるはずもありません。

今回の記事では非エンジニアの方でもサイト高速化のポイントがある程度理解できるように、大まかに要点をまとめています。

\ナイルがリードを増やした秘密を公開/

banner_yellow02

高速化のための基礎知識

高速化という言葉の中には、大きく分けて2種類の概念が存在します。

  1. フロントエンド側での高速化
  2. サーバーサイド(バックエンド)側での高速化

フロントエンドとは

本記事で定義したいフロントエンドとは、ユーザーの目に触れる部分を指し、「HTML・CSS」「JavaScript」などの言語が用いられます。

噛み砕いて言えば、「ページがブラウザに表示される」部分がフロントエンドということです。

フロントエンドの領域では、ある程度「HTML・CSS」の知識があって、ポイントさえつかめればサイトを高速化することが可能です。

サーバーサイド(バックエンド)とは

サーバーサイド(バックエンド)とは、ユーザーの目に直接触れないサーバー内での処理を指します。

サーバーサイドの高速化は、状況によって見るべきポイントが異なりますし、ある程度専門的な技術知識が求められるので、「誰でも簡単に高速化」という訳にはいかないのが実情です。

本記事ではサーバーサイドの高速化をデータベースの扱い方に絞って解説します。

フロントエンドの高速化

フロントエンドの高速化に関しては様々な方法があります。本記事では以下の3つに限定して、フロントエンドの高速化を紹介します。

  1. サーバーへの通信の回数を減らす
  2. サーバーへの通信量を減らす
  3. レンダリングの速度を低下させない

1.サーバーとの通信の回数を減らす

まず、普段ウェブサイトを表示する時のブラウザの動作を考えてみましょう。ウェブページにアクセスする際には、リンクをクリックしたり、ブラウザに「http://xxxx.○○.html」といったURLを入力したりするといった動作を行います。

この動作において「サイトを開く場合にサーバーへのアクセスは何回になるか」と聞くと、「1回しか通信しない」と思っている人も多いのではないでしょうか。

実際のところ、「http://xxxx.○○.html」のページを開いて中のHTMLを確認するまで、サーバーとの通信が何回発生するかはわかりません。

通信回数はHTMLの中に記述されている、画像、外部CSSファイル、外部JavaScriptファイルの数によって変わってきます。

よって、HTMLに書かれている内容次第で通信回数も変化します。

外部ファイル化されたスタイルシート(CSS)やJava Scriptは、都度そのファイルの情報をサーバーから受け取ります。同じく画像ファイルも、都度サーバーから情報を受け取っているため、画像ファイルが多ければ多いほど通信も多く発生しています。ブラウザにキャッシュが残っている場合には、サーバーとの通信は発生せずキャッシュの情報を読み込みます。

単純に考えて画像の数、CSSの数、JavaScriptの数に応じてその分通信が発生してしまいます。

なお「304」のステータスコードを返す場合は通信は発生しません。

「304」や「404」といったステータスコードの意味や対処法に関しては以下の資料でまとめております。本記事とあわせてご確認ください。

通信回数が多いということは、その分だけ表示が遅れることにつながります。

なるべく少ない通信回数で表示を完了できるようにすることがまず大切です。もちろん、決して「通信を1回に押さえろ」というわけではなく、あくまで無駄な通信をしないということです。

2. サーバーへの通信量を減らす

サーバーへの通信量を減らす方法には以下の2つがあります。

  1. 画像ファイルを最適化する
  2. CSSとJavaScriptファイルを圧縮する

画像ファイルを最適化する

画像や動画はファイルサイズが大きいので、通信量が増えてしまいます。

ウェブサイトで読み込む画像ファイルの容量を減らすことでサーバーの通信量も減らすことができます。

画質を落としたくないときは画像の最適化を行いましょう。

通常の画像データにはウェブページに不要なデータまで含まれていることがあります。不要なデータを排除することでファイルサイズを軽くすることができます。

元の画像ファイルサイズによって、圧縮できるデータ量も変わってきますが、ファイルサイズを減らせるのでおすすめです。

画像を最適化する際は専用のソフトウェアがあるので、そちらを使いましょう。

CSSとJavaScriptファイルを圧縮する

CSSとJavaScriptのファイルを軽量化することでもサイトの表示速度を上げることができます。

画像に比べたらファイルサイズは小さいのですが、高速化を追求したいのであれば、CSSとJavaScriptも軽量化するべきでしょう。

ウェブサイトを長年運用していると、CSSやJavaScriptが追加され続け、気づいたら容量が増えていたなんてことがあります。

「不必要なJavaScriptやCSSは削除してしまえばいいんじゃないの?」って思われる方もいるかもしれません。

エディタ等の置換機能を駆使して、消していくこともできますが、何千行もあるCSSやJavaScriptファイルを手作業で削るのはとても大変です。

また、不必要だと思っていたら、必要だったCSSの記述やJavaScriptの関数を削除してしまうリスクもあります。

不必要なJavaScriptやCSSは削除するのではなく、簡単に軽量化できて、導入のしやすさもある「ファイルの圧縮」を行いましょう。

「ファイルの圧縮」とは不必要な空白や改行を削ってCSSファイルや、JavaScriptファイルを軽量化する手法です。

エディタ等の置換機能を駆使して、消していくこともできますが、何千行もあるCSSやJavaScriptファイルを手作業で削るのはとても大変です。

自動で変換してくれる便利なツールを使いましょう。

3.レンダリング(≒HTML解析~ブラウザ表示)の速度を低下させない

ブラウザの表示速度を遅くしてしまう要因は通信だけではありません。HTMLの記述の仕方一つでブラウザの表示速度も下がってしまう場合もあります。

例えば以前はJavaScriptをheadタグのなかに記述することが多かったと思いますが、最近ではbodyの閉じタグ直前への記述が推奨されています。

headタグ内への記述が推奨されない理由は、ブラウザの表示速度が低下してしまうからです。たとえばheadタグの中に外部JavaScriptの読み込みがあると、先にJavaScriptの読み込みと実行がされてしまいます。

JavaScriptを読み込んでいる間ブラウザは表示に関する処理を止めてしまうので、ページの表示をユーザーに遅く感じさせる原因となってしまいます。

headタグ内にJSのタグが存在すると、これらのスクリプトが先に処理、実行される。bodyタグ内のコンテンツの表示はJSの処理が完了してから行われるため、
体感として表示が遅くなってしまう。

そこで、先にブラウザに表示できるものを表示させて、あとからJavaScriptの処理をさせるという順序にすれば、体感的にユーザーに遅さを感じさせないようにすることができます。

body閉じタグ直前にコードが入っていれば、コンテンツの表示が完了してからその処理が実行されるため、その分ユーザーの体感速度は改善する。

もちろん1つ2つの処理であればそこまで影響が出ることは無いと思いますが、大量にJavaScriptファイルがある場合などは大きな影響が出る可能性があります。

\ナイルのサイト改善提案の紹介はこちらから!/

サーバーサイド(バックエンド)側での高速化

ここからサーバーサイド側の高速化の話を軽く触れていきます。どうしても技術よりの話題になりますので、普段全く技術に関わらない方は社内のエンジニアへご相談ください。

サーバーサイドは本当に様々な条件によって変わってきますので、個々の状況によって高速化の手法もバラバラです。

Ruby、Python、NodeJS、Perl、Java、PHPなどサイトのサーバーサイドで使われているプログラミング言語によっても違います。

また、BtoC向け 、 BtoB向けといったアプリケーションの種類、サーバーのスペックでも変わってしまいます。

複数の技術的な要素が絡むため、サーバーサイド側の高速化の手法を一概に言うことができません。

しかし、サーバーサイド側の高速化において重要な考え方は存在しており、「ブラウザに返すレスポンスの速度を上げる」ことを目的に据えて手法を選定すべきでしょう。

本記事では、特に速度が遅くなりやすい部分、アプリケーションによるデータベースの扱い方に絞ってやさしくご説明します。

使わなくていいデータにはデータベースを使わない

Webアプリケーションではほとんどの場合、何かしらのデータベースが使われています。データベースは非常に強力なソフトウェア(ミドルウェア)ですが、アプリケーションから使い方を間違えると速度の低下につながります。

ついつい、データベースで何でも管理したくなってしまいがちですが、データベースに入れなくていいデータを入れるのはNGです。

特にセッションデータをデータベースに入れることは、控えたほうがよいでしょう。

なぜならセッションデータは、ユーザーがアクセスする度にデータを取得して、更新して書き込むといった処理が発生します。

リクエストが発生する度に、データベースへの書き込み処理、読み込み処理が発生してしまうので、データベースに不要な負荷を与えてしまいます。

キャッシュを活用する

データベースはリクエストされるほど速度が低下します。

比較的変更の少ない「商品マスタ」「ユーザー情報」といった固定データなどはキャッシュしておくべきです。

キャッシュの活用はユーザー数やアクセス数が多いサービスにはかなり有効です。

ただし、キャッシュを多用しすぎると、正しくないデータがブラウザに表示されてしまうこともあります。使用する際は注意してください。

実行しているSQLの最適化

データベースを使う場合に、本当に最適なデータベースの使い方をしているのか見直しましょう。データを取得する際にSQLを使用しますが、その際に実行されているSQLが意図としたSQLになっているのか見直してみましょう。

見直すと無駄があることも多いので、は慎重に確認するべきです。

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

データベースの高速化の技術の一つにインデックスというものが存在します。

インデックスは本で言うところの「索引」と同じようなものですが、インデックスの設定の仕方で速度が何倍も変わってきます。

良いインデックスというのはデータベースの設計やアプリケーションによって変わりますが、インデックスがしっかり使われているかを確認しましょう。

非同期処理でデータを保存する

データベースにデータを保存する際に、「保存しました」というレスポンスが返ってくるのを待つと、速度が遅くなってしまいます。書き込む量が多くなれば多くなるほど速度は遅くなってしまいます。

大切なデータに関しては同期的に対応するべきですが、そこまで重要じゃないデータに関しては非同期で保存するという方法が有効です。

不必要なデータは保存しない

データベースはデータ量が多くなれば多くなるほど、速度が低下してしまいます。不必要なデータを保存するのは避けた方がいいです。

分割を意識した設計

データ量が多くなってしまうデータベースでは、データベースやテーブルが分割されても大丈夫なように設計をするべきです。

まとめ

ウェブサイトの高速化というと「CSSスプライトを使いましょう」などのフロントエンド寄りの話題になりやすいです。

サーバーサイドでもしっかりと対応するために、「どの程度のユーザーが使うのか」「どの程度の規模のサービスなのか」といったことも意識しながらウェブサイトを設計・構築することが重要です。

サイトの高速化について要点を抜き出して書きましたが、本記事の内容以外にも高速化でやらなければいけないことは多数あります。

まずは今回紹介したポイントを意識して最適化することで、ウェブサイトの高速化を着実に進められるでしょう。

事業成長に貢献するコンサルティングを提供いたします!

SEOコンサルティングをはじめとする、各サービスの詳細、スケジュール、費用の目安を資料でご紹介しています!また「自社のWebマーケティングで悩みがある」「見積もりが欲しい」といった方は、お気軽に無料相談へお申し込みください!

無料で資料を受け取る

無料相談に申し込む

ナイルのSEOコンサルティングサービスはこちらで紹介しております!

編集者情報

大澤 心咲
大澤 心咲
新卒でアクセンチュア株式会社を経て、2018年ナイル入社。
コンサルタントとして大手企業SEO戦略策定・コンテンツマーケティング支援を担当。
現在はナイルのマーケティングとセールスの統括マネージャーとして従事。
著書:「ひとりマーケター成果を出す仕事術

監修者情報

ナイル編集部
ナイル編集部

2007年に創業し、約15年間で累計2,000社以上の会社にマーケティング支援を行う。また、会社としても様々な本を出版しており、業界へのノウハウ浸透に貢献している。(実績・事例はこちら

PIVOTにもスポンサード出演しました!

PIVOTにもスポンサード出演しました!
チャンネル登録者数が100万人を超えるYoutubeチャンネルPIVOTにスポンサード出演しました!
動画内では、マーケティング組織立ち上げのための新しい手段についてお話しています。
マーケティング組織に課題がある方はぜひご覧下さい。
動画を見る

関連記事

ペルソナマーケティングで成果を上げるコツ!具体的な設定方法と注意点を解説

ペルソナマーケティングで成果を上げるコツ!具体的な設定方法と注意点を解説

ランディングページ制作 < 完全ガイド >

ランディングページとは?LPの意味と構成、SEOとの相性を解説

【Web担当者向け】セミナーレポート「ユーザーをファン化するコンテンツ企画」(スライド付き)

新着記事

下層ページはSEO対策が必要 メリット、対策方法を詳しく解説

下層ページはSEO対策が必要!メリット、対策方法を詳しく解説

【初心者向け】オンページSEOとは?SEO対策との違いや対策方法を詳しく解説

【初心者向け】オンページSEOとは?SEO対策との違いや対策方法を詳しく解説!

SEO対策における検索ボリュームの目安は?対策方法や調べ方を解説

SEO対策における検索ボリュームの目安は?対策方法や調べ方を解説

サイト内検索

目次に戻る

もっと効果的な集客施策
してみませんか?

Web戦略の情報を
定期的に受け取りたい方

取材・メディア掲載に関するお問い合わせは、こちらからお問い合わせください。