どろんこあそび

子供のために本気で専業主夫になると決め会社を辞めた男の泥臭い子育て雑記ブログ

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

mac-monitor-nothing

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

 

 

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

loading

 

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

 

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

 

 

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

 

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

 

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

 

 

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

 

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

 

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

 

 

 

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

touch-star

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

 

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;
}

 

 

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

 

 

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

before-delete-hatenastar

 

こちらは消した後

after-delete-hatenastar

 

ページのスピードが100中の4も上がりました

 

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

 

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

 

 

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

after-delete-hatenastar-mobile

 

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

 

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

 

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

 

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

 

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

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

 

 

まとめ

cookie-star

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

 

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

 

 

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

 

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

 

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

 

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

 

 

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

 

ランディングとは?

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

 

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

 

.htaccessとは?

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

 

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

 

引用:Weblio辞書より

 

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

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

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

 

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

 

 

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

 

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

 

CSSに関しての参考本

こちらは本自体の色使いがきれいで読みやすいのでオススメです!