Navbarをオフにしました

イントロダクション

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

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

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

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

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

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

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

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

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

http://upa-pc.blogspot.com/2015/02/blogger-navbar-on-off-diff.html

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

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

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ガジェットを作成

http://upa-pc.blogspot.com/2015/02/blogger-navbar-search-box-same-gadget.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 以上減少し、読み込みは早くなり、ページのサイズは小さくなっています。

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