表示速度改善効果は出ていますか
まず、本サイトの表示速度はいかがでしょうか。管理者自身が体感で遅いと感じているくらいでしたので、いらいらされていた読者の方も多かったと思います。そこで、サーバホスティングサービスのプランをクラスアップ/グレードアップしました。
| 2019/12/26迄 | 2019/12/27以降 | |
|---|---|---|
| Webサーバ | Apache 2.4.x | LiteSpeed 5.4 |
| ストレージ | HDD | SSD |
| PHP | ver7.1 | ver7.3 |
| 転送量 | 60GB/日 | 100GB/日 |
孫引きで申し訳ないのですが、Googleが発表したという直帰率と表示速度に関するレポートは次の通りです。本サイトでは表示スピードをまずハードに頼って速めることにしました。
表示速度が1秒から3秒に落ちると、直帰率は32%上昇
表示速度が1秒から5秒に落ちると、直帰率は90%上昇
表示速度が1秒から6秒に落ちると、直帰率は106%上昇
表示速度が1秒から7秒に落ちると、直帰率は113%上昇
表示速度が1秒から10秒に落ちると、直帰率は123%上昇
ページの要素（テキストやタイトル、画像など）の数が400個から600個に増えると、コンバージョン率は95%下がる
表示スピードを具体的な数値で公表できればよかったのですが、第三期工事から前倒しで、第二期工事内にて表示速度の向上も並行して進めております。
これは、ある程度取り組み作業が落ち着きましたら、数値公表も考えてみたいです。
（言い換えるなら、まだ管理者の期待値に遠く及ばないところにあるということです）
それまでは、Googleが提供している下記ページ（PageSpeed Insights）で、このサイトに限らず、皆さんの興味を引くWebサイトのページの実測値をご確認ください。URLを入力するだけで、表示速度と問題点がすぐに明らかになる優れもののツールです。
前倒しで第二期工事 着工
リニューアル工事のスケジュールは下記の通り。
- 2019/12/10第一期工事（完了）
全体フレームワークを固める部分になります。読みやすいコンテンツ配置と検索性の向上を目的として作業しました。
- 2020/1/上旬第二期工事（予定）
見た目の読みやすさ（文章の装飾、図表レイアウトの規格化など）を向上させることを目的としています。ここは、現在デザインが崩れている各記事の見栄えをよくするとともに、Gutengerg というエディタ機能を使いこなすことが含まれています 。
- 2020/3/下旬第三期工事（予定）
画面表示時間の短縮など、裏方の仕上げをすることを目的としています。
現在、読者の可読性向上のため、各投稿記事を Gutenberg という WordPress の新エディタを使ってリライト、リンク切れ記事の解消、見出しや図版の標準化に取り組んでいます。
また、カテゴリとタグの各ページを読んで楽しいコンテンツにしようと鋭意努力しております。従来は、いずれも単なる集計ページでしたが、カテゴリページにつきましては、ヘッダーに、ポイントとサブカテゴリの案内、そのカテゴリ内での人気記事ランキングを掲載しております。
サブカテゴリページも同様に、そのサブカテゴリのサマリ情報を付記してあります。下記は「孫子の兵法（入門）」ですが、参考図書と「中田敦彦のYouTube大学」で取り上げられてた孫子の兵法の動画リンクの案内も記載されています。
サイト内であっちこっち移動するには
パンくずリスト
サイト運営側すれば、読者・ユーザの回遊率（そのサイトの複数のページを訪れて楽しんでもらうこと）を高めるのが一つの目標になっています。そのために、サイト内であっちこっちに移動する手段をもっとわかりやすくする必要があると考えています。
パンくずリスト：
階層化された現在位置を示す。
テキストをクリックすると移動
各投稿記事、カテゴリ、タグ、固定ページ（投稿型ではないページ。当サイトでは、「ナレッジマネジメント」「ダウンロード」等のページが該当）のすべてに、このパンくずリストが本文の上に表記されています。
現在表示されているページが本サイトのどこに位置しているかが一目で分かります。また、表示されているテキストをクリックすると、現在のページが何であろうが、そのテキストが示すページに瞬時に移動することができます。
グローバルナビメニュー
雪を冠した山々のヘッダー写真の下にあるメニューは、正式には「グローバルナビメニュー」というらしいです。トップメニューと呼んでもいいらしいですが。これは、ドロップダウンメニューになっています。マウスオーバー（メニューテキストの上にマウスポインタを置くこと）して頂くと、下位のメニューが次々と現れてきます。
ドロップダウンメニュー：
マウスオーバーで表示。
クリックすると移動できる
フッターメニュー
あまり目立っていないかもしれませんが、フッター（画面の最下部）にも、メニューを配置しています。
フッターメニュー：
本サイトのコンテンツ一覧。
クリックすると該当ページに移動
カルーセル（最新記事一覧）
当サイトの表示速度の関係で一時的に非表示にしてありましたが復活させようと考えています。人気記事、任意の記事、最新記事のいずれの条件でも表示・リスト化できるのですが、現在は、最新18投稿を表示するように設定してあります。
カルーセル：
オートで横にスライド表示される。
もちろん、手動でのスライドも可
クリックすると移動できる
それぞれの記事の下中央に、・・・が３つ並んでいます。現在表示されている記事以外に2セット後ろに隠れています。これは、サイト管理者である私がWebページの一読者であった頃から、お気に入りのビュー機能でした。そのせいで、今でも心理的になかなか外すことができない機能になっています。
最新記事一覧と人気記事ランキング
それぞれ、トップページにブログ全体の最新5記事と、人気上位5記事のみ、表示させています。マガジンタイプのトップページの体裁が個人的好みだったので、従来は、最新記事が各サブカテゴリごとにずらっと並んでおりました。
今回は、一覧性を重視して、ページ分割することにより、ユーザ・読者がドリルダウンでそれぞれのカテゴリーサブカテゴリを深く掘り進めていく仕様に変えてあります。
最新記事と人気記事：
ボタンをクリックすると詳細ページへ移動
以下に、ページ遷移図を掲載しておきます。
トップページには、最新記事、人気記事ともに５つずつ表示しています。いずれにもドリルダウンのボタンがリストの最下部にあるので、こちらをクリックしてください。それぞれ、カテゴリ別の最新記事一覧ページと、カテゴリ別人気記事ランキングに遷移することができます。
カテゴリ別最新記事一覧ページからは、各カテゴリページに移動することができます。当然、カテゴリページから、所属するサブカテゴリページにさらにドリルダウンしていけます。
カテゴリ別人気記事ランキングページからは、「さらにくわしく」ボタンで、そのカテゴリのランキングを、本日・今週・今月・全期間の4つのタイムスパン別にみることができる詳細ページに移動することができます。
また、「カテゴリページ」ボタンをクリックすると、同様に、各カテゴリページにも移動することができます。
前のページに戻りたい場合は、①ブラウザの戻るボタン、②パンくずリストが使えます。お試しください。
目下、次の書籍で、ユーザインタフェースを勉強中です。日々精進です。^^)
コメント
サーバホスティングサービスのクラスアップ/グレードアップをしてみました。ハード増強は最後の手段と考えていましたが、ネットで調べると、ずいぶん世の中の環境が変わっており、当サイト立ち上げ期とは様変わりしていました。表示スピードは確かに速くなりましたが、現在、ヘッダーロゴを含む貼付け画像が非表示という原因不明の不具合と格闘中です。対応策が分かり次第、手当てしたいと思います。