【質問】ホームページの表示速度が遅いです。どういう点を見直せばいいですか？
今週の質問と回答
【Ｑ】
ホームページを作成してみましたが、表示に時間がかか
りいわゆる重いサイトとなっています。
ホームページの表示速度がSEOにも影響するという話も
聞きました。改善したいのですが、どういう点を見直せ
ばいいでしょうか？
─────────────────────
【Ａ】
ホームページの表示速度については、1秒遅くなることで
ページビューが11%下がり、顧客満足度が16%下がり、コン
バージョン率が7%下がるという調査結果があります。
皆さんにも表示が遅くて途中で利用をやめたという経験が
ある方も多いのではないでしょうか。
ホームページの表示速度には、もちろん使っているサーバ
の性能や回線速度も大きく影響してきます。
ただ、ここではホームページの作りに関して、どういう点
を見直せばいいかについて回答します。
─────────────────────
→ホームページの表示が遅い場合、その原因の多くは使っ
ている画像が多い、あるいは画像のデータサイズが大き
いというものです。
ひとつのページで利用する画像はできるだけ少なくし、
使う画像データに関しても、サイズの設定を適正化する
必要があります。
画像の適正化については、先日、松永先生がこのメール
マガジンで解説されていますので、そちらを参考にして
ください。
文字の修飾や背景色などは画像を使うのではなく、スタ
イルとして記述するようにします。
→スタイルを記述する場合、ホームページのHTML中に記述
するのではなく、カスケードスタイルシート（CSS）フ
ァイルとして、別で記述するようにします。
HTML中ではこのCSSファイルを呼ぶ記述のみにすること
で、表示速度の改善が図れます。
また、同様にホームページで利用するJavaスクリプトも
別ファイルに記述するようにします。
ホームページをWordPress等のCMSで作成するとこれらは
別ファイルで作成してくれます。
WordPressにはCSSファイルやJavaScriptファイルを圧縮
し、より表示速度を向上してくれるプラグイン”Online
JavaScript/CSS/HTML Compressor”もあります。
→表示速度を早くするために、端末側でキャッシュ（一時
保存）させる設定をすることも有効です。キャッシュを
有効にするには、htmlファイルと同じ場所にある.htacc
essファイルに以下の記述をすることで設定できます。
（記述は1例です。）
# キャッシュを有効にします。
ExpiresActive On
# 下記で設定したもの以外のキャッシュを1秒毎に更新
します。
ExpiresDefault “access plus 1 seconds”
# 要素単位にキャッシュを保存する期間を設定します。
ExpiresByType text/css “access plus 1 weeks”
ExpiresByType text/javascript “access plus 1 week
s”
ExpiresByType image/gif “access plus 1 weeks”
ExpiresByType image/jpeg “access plus 1 weeks”
ExpiresByType image/png “access plus 1 weeks”
ExpiresByType application/javascript “access plus
1 weeks”
ExpiresByType application/x-javascript “access pl
us 1 weeks”
WordPressでは、”WP Super Cache”や”W3 Total Cache”
といったプラグインがあります。
ただし、キャッシュを有効にすると古いコンテンツが更
新されずに表示される可能性があります。ホームページ
の更新期間を考慮してキャッシュの保存期間を設定して
ください。
→WordPressを使ってホームページを作成されている場合、
多くの便利なプラグインがあります。ただ、インストー
ルしても利用していないプラグインをそのままにしてい
るとホームページの表示速度に影響を与えます。セキュ
リティ的にも問題となるので、利用していないプラグイ
ンは削除しましょう。
→ホームページの表示速度の確認は、googleのPageSpeed
Insightsで行えますが、各ブラウザの開発ツールでも確
認することができます。
Chromeの場合は、ブラウザを起動してCTRL+CHIFT+Iを押
すと、開発ツールの画面が開きます。その画面に「Net
work」というタブがあるのでクリックしてから、ブラウ
ザで表示速度を確認したいホームページを表示します。
ページを構成する項目ごとの読み込み時間と、最後にペ
ージ全体の読み込みにかかった時間をグラフ化して表示
してくれます。
WordPressでは、Debug BarとDebug-Bar-Extenderという
プラグインで確認することもできます。
ホームページの表示速度が気になる場合は、これらのツ
ールでまず、どの要素が表示速度に影響しているかを確
認してください。
→以上、ホームページの表示速度について、ホームページ
の作成の仕方を中心にお話ししました。
皆様のホームページの表示速度改善のヒントとして、活
用して頂ければ幸いです。
■今回の授業の先生のプロフィール
──────────────────────────
WEB活認定コンサルタント
上野 貢（うえの みつぐ）
▼プロフィール・経歴
入社以来、大学を中心とした教育機関の業務・
教育システムの構築、開発に従事。
インターネットの黎明期よりWEBを利用したシス
テムの構築、開発を担当。
大学から中・高、専門学校、塾等の教育機関の
業務システム、教育システムの要件定義から
運用に至るまで業務支援を多数実施。
また、企業のeラーニングシステム導入・利用・
サービス提供に関しての支援も実施。
無料メルマガ「WEB活用の教科書」購読申し込み
お名前とメールアドレスと入力して[無料メルマガを購読する]をクリックすると、中小企業～個人事業主がWEBを活用してビジネスを展開するために必要なノウハウをお届けする無料メルマガ【WEB活用の教科書】を毎週水曜日にお届けいたします。いつでも配信解除ができますので、お気軽にご購読ください。
