~ モバイル版(スマートフォン)の操作 ~
左右にスワイプすると、前後の投稿へ移動します。
← 前の投稿 | 次の投稿 →
日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2015年2月25日水曜日

Navbarをオフにしました


スポンサーリンク

イントロダクション

Google のブログサービス「Blogger」では、ブログの上部に Navbar と呼ばれるバーが表示されます。

Blogger の Navbar (上部の黒い帯の部分)
Blogger の Navbar (上部の黒い帯の部分)

この Navbar ですが、このブログ「Dr.ウーパのコンピュータ備忘録」ではオフにすることにしました。

なぜ、Navbar をオフにすることにしたか?

以下の理由により、Navbar をオフにすることにしました。

ページ読み込み時に負荷がかかる

Navbar はいろいろな便利な機能を提供してくれますが、その分外部のファイルを読み込んだりと、ページの表示に負荷を与えます。

その点について、以下のページに調査結果をまとめました。

Blogger:Navbarの負荷を考える-ページの読み込み時にどの程度影響を与えているか


ページの表示が重く(遅く)なると、ページが表示される前に見るのを諦めてしまったり、他の関連するページへ行きたいと思わなくなってしまいます。

そのため、アクセスしてきた人に対しては快適な表示を提供したいものです。


Navbar をオフにしても、代替手段を提供できる用意が出来た

Navbar をオフにすると、Navbar にある機能が利用できなくなります。
その点については、以下のページで詳しく検討しています。

Blogger:Navbarをオフにする上で検討したいこと-その機能は必要か?代替可能か?
http://upa-pc.blogspot.com/2015/02/blogger-navbar-off-consideration.html


特に、Navbar の中では、ブログ内をキーワードで検索できる検索ボックスを大変重宝していたため、Navbar が無い生活は考えられないほどでした。


しかしながら、Navbar の検索ボックスを詳しく調べてみると、代替することが可能だったため、Navbar の検索ボックスの代わりに、代替手段を提供することにしました。

Blogger:Navbarの検索ボックスはいかにして検索動作を実現しているのか?
http://upa-pc.blogspot.com/2015/02/blogger-navbar-search-box-mechanism.html

Blogger:Navbarの検索ボックスを、疑似的に再現したHTMLガジェットを作成


Navbar をオフ

そして、実際に Navbar をオフにしてみました。
なお、ただオフにするだけでは、ページ上部に空白が表示されてしまうため、スタイルシートで Navbar があった部分の高さを 0 にしました。

Navbar をオフにする前と、オフにした後のページ表示負荷を参考までに、GTmetrix で調べてみました。(あくまで参考なので、とりあえず 1 回だけ測っています。)

Navbar をオフにする前
Summary
APage Speed Grade:(91%)
DYSlow Grade:(66%)

Page load time: 5.50s
Total page size: 2.23MB
Total number of requests: 160

Navbar をオフにした後
Summary
APage Speed Grade:(92%)
DYSlow Grade:(65%)

Page load time: 4.84s
Total page size: 2.03MB
Total number of requests: 147


配信される広告の違いなどもあり、正確には比較はできないのですが、事前の調査通り、request の数は 10 以上減少し、読み込みは早くなり、ページのサイズは小さくなっています。

しばらくはこれで様子を見てみようと思います。


スポンサーリンク

コメントを投稿

コメント投稿機能について