Corredor

ウェブ、プログラミングの勉強メモ。

はてなブログのトップページの表示が重たいのを軽減する

あけましておめでとうございます。2017年も宜しくお願い致します。

それはさておき!! はてブロのトップページが重たい!!

既に色々なはてブロサイトで記事になっているのでいまさらだが、はてブロの表示が重たい。

しかし既存のテンプレを利用しているだけで、特段カスタマイズしたいとかチューニングを極めたいとかいう思いもそんなにないので、トップページの表示速度を手軽に改善する方法を紹介する。

トップページを「アーカイブ表示」にする

トップページの表示速度の遅さは、SNS ボタンが記事ごとに表示されることが大きな原因になっているらしい。

そこで、トップページを「記事一覧」にすることで、SNS ボタンを表示させないようにしつつ、記事のアイキャッチ画像と概要を並べてスッキリ見せようという魂胆。

はてブロの「設定」から「詳細設定」を選び、「head に要素を追加」欄に以下のコードを追加する。

<script>
  // トップページをアーカイブ表示にすることで表示速度を改善する
  if(location.href === "http://■自分のはてブロ URL■/") {
    location.href = "http://■自分のはてブロ URL■/archive";
  }
</script>

上記の「■自分のはてブロ URL■」部分を、管理しているはてブロの URL に変更してやる。このブログ「Corredor」の URL であれば、以下のようなコードになる。

<script>
  // トップページをアーカイブ表示にすることで表示速度を改善する
  if(location.href === "http://neos21.hatenablog.com/") {
    location.href = "http://neos21.hatenablog.com/archive";
  }
</script>

とても簡単な JavaScript で、トップページに相当する URL を踏んだときのみ「記事一覧」ページに遷移させるようにしてある。

「記事一覧」ページははてなスターぐらいしか表示されないので、表示速度がそれなりに速い。快適である。