つなろっく

イロトリドリな毎日

すぐできる!はてなブログの表示速度を改善させるためにできること

f:id:pea-nut:20190213130940j:image

おすっ!つな(@tu_na_69)です(*‘∀‘)

重いと言われがちなはてなブログですが、軽量化のためにできることまだあります!

重さが気になる人は、取り組んでみてね。

カスタマイズを行う前に

テーマ変更やカスタマイズで、これまでのデータが消えてしまったりデザインが崩れて元に戻せなくなることもあります。

必ずバックアップをとってから、行いましょう。

サブブログでテストページを作り、そちらで動作やデザインを確認してから行うのがおすすめです。

 

カスタマイズは自己責任でお願いします。

不要なコードを整理しよう

はてなブログのカスタマイズでは、ほとんどの方がJava ScriptやjQueryなどのプログラミングを利用していると思います。

カスタマイズをした時に、不要になったコードをそのまま残していることがあります(;^ω^)

HTMLやCSSやはいくらか見分けがつくようになりましたが、プログラミングはまったくの初心者なので、よくわからないコードはついそのままにしちゃうんですよね。

カスタマイズの多い方あるあるではないかと思うのですが、いかがでしょうか。

まずは、現在使っていないプログラミング言語が残っていないかチェック!不要なコードは削除しましょう。

はてなスター・はてブコメントを非表示

はてなスターやはてなブックマークのコメントはサイトが重くなる原因のひとつ。

はてなスターとはてブコメントを非表示にする

「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事」を開きます。

f:id:pea-nut:20190213103117p:plain

記事下に表示するソーシャルパーツから、それぞれのチェックを外して保存します。

はてなスターのトップページの表示を非表示にするだけでも違いますよ。

「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザイン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;
}

いつもみなさんのはてなスターに励まされているのですが、今回はサイトの表示速度をUPさせるため、非表示にさせていただきますね。

はてなヘッダー・フッターの非表示

はてなブログPRO限定の設定になります。

ヘッダーははてなブログの一番上に表示されるバーです。ダッシュボードを開いたり、お知らせがひとめでわかり便利なのですが、非表示にした方がサイトの表示速度は速くなります。

お好みで設定してください。

 「ダッシュボード」→「設定」→「詳細設定」→「ヘッダとフッタ」

f:id:pea-nut:20190213104836p:plain

フッターは、はてなブログの設定ではなくHTMLとCSSで設定しています。

はてなブログにフッタをつくってみました - つなろっく

 

はてなブログのシェアボタンをはずす

はてなブログで設定できるシェアボタンは重くなりがちなので、はずして別のSNSボタンを設定しています。

「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事」の「ソーシャルパーツ」のチェックをすべてはずしてください。

「はてなブログ SNS シェアボタン」などで検索するといろいろと探せると思います。

こちら参考になります。

https://blog.kaerucloud.com/entry/snsbutton/

タイトル画像を使わない

もしサイトの重さが気になるようなら、タイトル画像をはずしたり、画像を軽くしてみましょう。

タイトルはサイトの入り口。オリジナリティーを出して個性をアピールしたいですよね。画像を使わずに、Google Fontsで設定するものおしゃれ。

現在は、ロゴ画像を使っています。

画像の圧縮・軽量化

記事数が増えるほど、画像サイズによってサイトの表示速度は大きく左右されます。画像圧縮サイトを利用するなど、対応しましょう。

pea-nut.hatenablog.com

pea-nut.hatenablog.com

 

ブログカードをテキストリンクに 

はてなブログではURLを入力すると、リンクの表示形式をブログカードかテキストリンクか選ぶことができます。

ブログカードというのは↑上で紹介したような、タイトルや画像、文章の入ったカードタイプのリンク表示のこと。

ついクリックしたくなるおしゃれなデザインですが、テキストリンクに比べて若干重くなります。

リンク数が多いサイトでは、ブログカードをテキストリンクに変更するだけでも表示速度は変わってきます。

テキストリンクにも装飾をつけて、少し目立たせてあげるといいかもしれません。

↓こんな感じで。

やってみよう

いかがでしょうか。

ちょっとしたこと、簡単にできることばかりですが、積み重なりで表示速度に差が出ます。気になる人は取り組んでみてね。

今週のお題「わたしとバレンタインデー」

記事を紹介してくれたサイト

【コピペで超簡単!誰でもすぐ真似出来る】ブログに実装したカスタマイズを一挙公開! - はるとも育児ブログ