Webサイトの重さの原因となる領域を知ろう

「ページの表示が遅い、原因はなんだろう？」

「この原因はサーバーのせいなの？」

普段、ご自身のWebサイトを運用していて、ページの速を調査してみたものの、
何がどうなっているのかわからなくてお手上げ状態になった経験はありませんか？
今回は「Webサイトを遅くする原因の領域」について解説したいと思います。

当記事はこんな方にオススメ

・パフォーマンスを改善したいけどどうすればいいかわからないWeb担当者

・Webサイトのパフォーマンスの基礎的な部分を知りたい方

・Webサイトが遅くて困っている方

表示までの流れ

まずはページが表示されるまでの流れをご説明します。

通常、静的なホームページやWebサイトはHTMLをはじめとしたファイル群で構成されています。
ファイル群をサーバーからユーザーのデバイスにダウンロードし、ブラウザで表示させるのが表示までの大まかな流れです。
前述の流れでポイントになるのが、ダウンロードの前後では異なる技術領域になるということです。
ダウンロードする前はサーバー側、主に”バックエンド”と呼ばれる領域で、
ダウンロードした後は”フロントエンド”と呼ばれる領域です。

バックエンド領域が原因となる問題

・サーバーのスペック

・サーバーが応答してから最初のレスポンスを返すまでの時間（DNSなども関係）

・キャッシュの有無

・転送容量の大きさ

データベースにアクセスする場合は構造やSQLなどが関係してきますが本稿では割愛します。
バックエンド領域は専門性が高く、少し触っただけでサイトがダウンしてしまうリスクがあるので、
プロにお任せしてメンテナンスしてもらいましょう。

フロントエンド領域が原因となる問題

・サーバーへのリクエストの総数

・画像容量の大きさ

・ブラウザ処理を妨げるJavaScript

・ブラウザ処理に負荷をかけるHTML/CSSのソースコード

・それぞれのソースファイル容量の大きさ

これらが主な要因でフロントエンド領域でブラウザに負荷がかかりWebサイトが遅くなります。
フロントエンド領域はバックエンド領域とは違い、比較的容易に改善が実施できるのがポイントです。
特に商品を売るようなサイトですと、公開後に広告タグを運用入れたり、画像を変えたりと公開後に手を加える事がほとんどで、
その際にレギュレーションなどが明確に定義されていないと担当者の自由にWebサイトが重くなるタグや画像を公開してしまう可能性があります。
また、ソースコード量が純粋に多いページなどではやはりプロの知見が必須となるのも事実です。