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

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

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

typography

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

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

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

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

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

よく使うワードプレスのphp関数スニペット。随時追加

しょっちゅう使うわけではないけれど、ワードプレスを使うサイトが多くなってきたことに伴い使う頻度は増えてきたワードプレスの関数をその都度調べて記述するのもめんどくさくなってきたのでまとめてみました。 ● まずは、htmlフ…続きを読む

ホームページに3DCGコンテンツを埋め込んでブラウザでグリグリ動かす1

3D

3DCGコンテンツの埋め込み方法としては、 1、sketchfabという3DCGデータ投稿・共有サービスを利用してサクッと埋め込む方法 Sketchfab – Your 3D content on web, …続きを読む

facerigや3teneで動かせるようにLive2Dでモーションをつける

デモのため真夜中WEBのマスコットキャラクターを制作してみました。 制作の流れは以下のようになります。 ① ペイント系ソフトでキャラクターのイラストを制作して画像エクスポートする。 ② 画像編集ソフトで画像をインポートし…続きを読む