ホームページ制作の札幌真夜中WEBのトップページです 全国からご依頼承ります。

ユーザビリティ向上のためにサイトの表示スピードを改善する

  • 2018.10.09
  • SEO
ユーザビリティ向上のためにサイトの表示スピードを改善する

真夜中WEBがコンセプトとして掲げる3つの要素に「軽さ」があります。

軽さとは、サイトを構成するhtmlやcss、javascript、php、画像などのファイル群自体の容量の小ささを言いますが、このことだけにとどまらず、サーバーの応答時間の短縮、ファイル群の最適化や圧縮、キャッシュの利用などサイトの表示速度を改善するすべての施策全般を指します。

サイトの表示速度を改善するにあたって指標となるのが「Google PageSpeed Insights」です。

Google PageSpeed Insightsはページの表示スピードを100点を満点とする分かりやすい表示となっており、更に「緑(良い)」、「オレンジ(普通)」、「赤(問題あり)」というような色分けがなされます。

ページの表示スピード分析自体は簡単で、Google PageSpeed Insightsにアクセスしたら「ウェブページのURLを入力」の箇所に計測したいURLを入力して「分析」ボタンをクリックするだけです。

分析結果には「最適化についての提案」が付記されていて、提案に従って最適化していけば点数は改善していくんですが、「表示スピードの改善」と「サイトの見栄え」はある意味相反する関係にあるため、どのあたりでバランスをとるかのさじ加減が難しいんです。

例えばスピード重視に傾いている場合、SEO的に見ると高評価を受けやすく、ページもあっという間に表示されるため多くの人に見てもらいやすくはなるでしょうが、その分動きのないみすぼらしいサイトになってしまってはユーザーもそのサイトに興味を抱かないでしょう。

見栄え重視に傾いている場合、サイトを訪れてさえもらえればショーケースのように華やかで動きのある表現に興味を持ってもらえるでしょうが、せっかくサイトへのリンクをクリックしてもらえても読み込みマークが回っているだけでなかなか表示されなかったら表示を待てずに帰ってしまうユーザーも多いでしょう。

下記画像は真夜中WEBのトップページ(https://mayonaka-web.com/)の表示速度を計測したものです。
モバイル93点、パソコン92点です。

speedtest

※この計測結果は Google PageSpeed Insights にアクセスして真夜中WEBのトップページ(https://mayonaka-web.com/)のURLを入力して「分析」をクリックすればどなたでもご確認いただけます。

まだいくつか最適化の提案が残っているのがご確認いただけるかと思います。

具体的には「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」と「ブラウザのキャッシュを活用する」ですが、前者は最適化の提案に従いCSSを遅延読込した結果、ページ読み込み直後にほんの一瞬ではありますが表示崩れが確認されたため改善策が見つかるまでは現状維持としています。
後者はキャッシュを設定してしまうと設定期間の間はキャッシュが表示されページの更新がうまく適用されないため、ある程度ページの編集が固まるまでは一部キャッシュに期間を設けていないことによります。

SEOカテゴリの最新記事