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

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

Atom vs VSCode vs Brackets、もっとも使いやすいエディタはこれだ!…といいな

typewriter

真夜中WEBではWYSIWYGエディタを使用せず、テキストエディタを使ってホームページ制作を行っております。 具体的にはWindowsでは「サクラエディタ」を、Macでは「mi」を使用しているんですが、OSごとにエディタ…続きを読む

もっともっとモックアップを活用しよう 1

candle-mock-up

Mockup(モックアップ ※模型の意)とはデザインなどの現場で使われる手法の一つで、作成過程で完成イメージをビジュアル的に確認するために使われるもので、プレゼンテーションやブランディングイメージ作成シーンに欠かせないも…続きを読む

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

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

OSやブラウザで表示に違いが出てしまう絵文字を絵文字フォントで代替する

ブログの記事などで絵文字を使いたいなという場面がありますが、絵文字はOSやブラウザなどの環境によって表現に違いがあったりなどはまだいい方で、最悪表示されないことも想定しなければならないのが困るところです。&#x1F617…続きを読む

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

typography

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

DNSサーバーを切り替える前に切り替えた後の表示を確認する方法

理由は様々ですが、既存のホームページをまるごと他のサーバーに移転したいとのご依頼を承ることがあります。 通常の静的なサイトの移転でドメインが変わらない場合には基本的にサーバーに置いてあるフォルダ・ファイル群を古いサーバー…続きを読む