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

highway

真夜中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を遅延読込した結果、ページ読み込み直後にほんの一瞬ではありますが表示崩れが確認されたため改善策が見つかるまでは現状維持としています。
後者はキャッシュを設定してしまうと設定期間の間はキャッシュが表示されページの更新がうまく適用されないため、ある程度ページの編集が固まるまでは一部キャッシュに期間を設けていないことによります。

WEB制作お役立ちツール1 (人型アイコン、アバター画像作成)

WEBサイト制作では、暫定的に使う、いわゆる「アテ」画像がほしいときがあります。 一言でアテといっても、写真ぽいアテ、無地画像のアテなど案件によって様々です。 このような画像は「ダミー画像」などで検索するとたくさん出てく…続きを読む

Google fontsで日本語Webフォントの正式版がリリースされたらしいので試してみた

typography

いままでもGoogle fontsは「Google Fonts + 日本語早期アクセス」として日本語WEBフォントを無料で提供していましたが、今回正式に8種類の日本語WEBフォントがリリースされたようです。 Google…続きを読む

画像をグループでソート、クリックでライトボックス表示し、かつjquery3.xに対応させる

サイト内で複数の画像をまとめて表示するときに項目でソートできるjqueryのプラグイン「Shuffle.js」。 まずはデモページをご覧ください Shuffle.jsCategorize, sort, and filte…続きを読む

Open Street MapはGoogle Mapの代替案となりえるのか

2018年7月16日よりgooglemapの仕様変更に伴ってgooglemapAPIを使って呼び出している地図(カスタマイズを施しているものを含む)を表示するにはAPIキーとお支払い情報の設定が必須となりました。 このこ…続きを読む

CSSだけで実装できる! スクロールした時に画像以外のコンテンツを挟んで背景画像を切り替える方法

タイトルを読んだだけではイマイチ分かりにくいので、下記デモページをご覧ください。 デモページを見る ご確認いただけましたか?そうです、よく見かけるやつです。 ※ただこの方法、ものすごく簡単なんですがスマートフォン(多分タ…続きを読む

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

highway

真夜中WEBがコンセプトとして掲げる3つの要素に「軽さ」があります。 軽さとは、サイトを構成するhtmlやcss、javascript、php、画像などのファイル群自体の容量の小ささを言いますが、このことだけにとどまらず…続きを読む