【コピペCSS】トップページのはてなスターを消すべき理由とそのやり方

トップページのはてなスターは消した方がいい理由

ページの読み込みが遅くなる

ブログを初めて最初の頃は特にそうですが、検索流入に比べて割りとはてなプロフィールなどのトップから入って来る人が多いのでランディングがブログのトップになることが多いです

ですのでこの一番最初のトップページのページ表示スピードというのはかなり重要です

それにはてなのサービスではレンタルサーバーなどと違い自分で.htaccessのコントロールができないためブラウザのキャッシュを利用できません

この為ユーザーごとに１回１回ページの読み込みを新たにしています

はてなスターはつけばつくほどじわりじわりとページの読み込みが重くなりますのでこれは消去してしまったほうがいいと言えます

特にトップに記事表示数が多ければ多いほどはてなスターもそうですがアイキャッチ画像の数も増えますのでその分ページの読み込みにも時間がかかるため注意が必要です

せっかく自分のページに来てくれたにも関わらずなんだか表示されなくてイライラ、一回一回ページ表示が遅いと読者が不快に感じ離れていってしまいます

これは機会損失となりますので防ぎたいところです

読まないでスターを押していく輩

中には読んでいないだろうと思うほど一度にたくさんの記事にスターがつくことがあります

1分以内に3つの記事にスターがつく？

僕の記事は基本的に3000字から7000字までの記事、(少ないものは1500字程度もありますが)なので読むのにだいたい2〜5分はかかるはず

現に当ブログはアナリティクスでも平均滞在時間約2分程なのでそれから言ってもちょっと違和感があります

よって自分のブログで1分に3つの記事にスターがつく事は異様なわけです

そのついたスターに何か意味はあるのか？

よって消すことにしました

はてなのスターを消すためのCSS

これは消すために必要なclassが分かっていればなんの問題もありません

display: none;　で表示しなければいいだけなので。

ですので

こちらをコピペでデザインCSSに貼り付けでいけます


.page-index .hatena-star-add-button {
 display: none;
}
.page-index .hatena-star-user {
 display: none;
}
.page-index .hatena-star-star {
 display: none;
}
.page-index .hatena-star-inner-count {
 display: none;
}
.page-index .hatena-star-star-container {
 display: none;
}

ページスピードはどのように変化したでしょうか

こちらははてなスターを消す前

こちらは消した後

ページのスピードが１００中の４も上がりました

このPageSpeed Insightsをやられたことのある方ならおわかりかもしれませんが、これだけ簡単な方法で４も上げれるならやらない手はありません

読み込みが遅くてユーザーをイライラさせるくらいならページスピードを上げるべきでしょう

ちなみにこちらはモバイル

~~私の場合はid:codomisuさまが作られたMinimalismを使用しているため~~

現在はwordpressで運用しています。

モバイルでの表示時には導入時からはてなスターは表示されていません

よってこちらの変動はありませんでした

ページスピードが78あればひとまずは充分なんじゃないかと

Google神的には85以上でGoodとしているという話もありますが

僕の別のサイトでは82でGoodとなっていたのでその辺の誤差はよくわかりません

まとめ

はてなブログの良さの一つであるはてなスターは僕も好きです

スターがつくたびにいちいちテンション上がってしまうくらい

ですのでその存在自体を消すことはしないつもりですが

トップページやカテゴリやアーカイブなどの記事一覧ページには表示する必要はないのかなと

もちろん個人の自由ですのでするしないはお任せしますが

もしお考えの方がいましたらどうぞ

今回出てきた用語は下にまとめておきました

ランディングとは？

ランディングページ（landing page）とは、直訳すれば着地ページで、ユーザーが最初に訪問するWebページになります。この意味でいえば、どんなサイトにも着地ページは複数あり、それはユーザー毎に異なることになります。これが広義のランディングページです。

引用：うぇぶ　集客の開花塾より

.htaccessとは？

.htaccess(ドットエイチティーアクセス)とは

WebサーバーのApacheにおける、サーバーのディレクトリごとの設定情報を記しておくためのファイルのことである。 … 設定可能な内容としては、パスワードの設定（Basic認証）、特定のホストコンピュータからのアクセスの拒否、Webページのリダイレクトなどを挙げることができる。

引用：Weblio辞書より

ブラウザのキャッシュとは？

ブラウザのキャッシュとは

Google Chrome、Mozilla Firefox、Internet Explorerなどのウェブブラウザは、インターネット上にある情報を取得・閲覧するソフトウェアアプリケーションです。 … キャッシュとは、一度アクセスしたサイトのデータ（画像やHTMLなど）をブラウザで一時的に保管しておく仕組みです。

引用：HubSpot　ブラウザのキャッシュとは？より

以上、「【コピペCSS】トップページのはてなスターを消すべき理由とそのやり方」でした

最後までご覧いただきありがとうございました