スマートに暮らしたい

健康と幸せのために、まずは心と部屋の片付けから。

ブログの表示速度を速くするためにやったこと

 こんばんわ。先日は、ブログのテーマ変更&カスタマイズをしてみて、ブログの表示速度が遅すぎることに気づいた所まで書きました。

www.smartseikatu.com

 今回は、それから「ブログ表示速度を速くするためにやったこと」をまとめておきたいと思います。

スポンサーリンク
 

1、そもそもはてなブログ自体が重い

 残念なのはそれなんですよね。表示速度にとことんこだわるなら、WordPressや他のブログにすればいいのです。でも私にとっては、このはてなブログのコミュニティー性の高さの方が重要で、だからこそ楽しめ続けられると思っているので、今のところ変更することは考えていません。悩ましいとこなんですけど。

 そこでまず、はてなブログを重くしている要素をできる限り排除するように考えました。

 

<対策したもの>

はてなによる広告の非表示

・プロフィールの「ツイッターフォローボタン」非表示

・フッタの非表示

 スマホ表示(レスポンシブデザインモード)にしたときに、フッタに大きく「あなたもはてなブログを始めませんか?」という表示が出ていてそれが重かったのです。なんとかその表示を消せないかとタグを入れたりもしたのですが消える気配がなく、フッタを非表示にしてみたら消えました。でも、フッタがないとなんだか締まりがない気がして気持ち悪かったので、スマホ表示で一番最下位に当たる部分にフッタもどきを作ってみました。ただの線だけど、少しは締まったかな(自己満足)。

 ちなみに「デフォルト表示」より「レスポンシブデザインモード」の方が軽くなるようです。

・記事内「はてなブックマークコメント」の非表示

・「ソーシャルボタン」を最小限に

 ソーシャルボタンは「はてなブックマークボタン」と「ツイートボタン」以外を非表示にしました。これは、今後別のものに差し替えることも検討中です。

・TOPの記事数を11から5に減らす

 

<重くしている要素と思われるけど残したもの>

・へッダ

 消すと、スマホで見た時にブログタイトルの「て」の部分に、丸いレスポンシブボタンがかぶってしまうので残すことにしました。パソコンのときも、ヘッダがあったほうがそこからダッシュボードに飛べたり何かと便利なので。

・プロフィールの「プロフィール画像」「はてなID」「読者になるボタン」

 「読者になる」ボタンは、個人的に登録者数が表示されているほうが登録しやすいので残すことにしました。

・記事内「はてなスター」「コメント機能」「ソーシャルボタン」の一部

 はてなスターを消したこともあったのですが寂しかったので、しばらくは表示のままにしておく予定です。こういったコミュニティー機能のすべてを消してしまうと、せっかくはてなにしている意味が無くなってしまうので。

 

2、テーマの再検討

 表示速度がなるべく早いテーマを選ぼうとすると、結局シンプルなものになってしまうんですね。でも、それだとなんだか楽しくない。この度のテーマはデザインが一番私のイメージにぴったりで選ばせていただいのですが、かわいいデザインの中では表示速度が速いほうだと分かりました。これは変える必要ないですね、このまま使わせていただきたいと思います。
 効率よりもブログを楽しみたい人は、速度にあまりこだわらず自分の好みに一番近いデザインを選ぶのが一番良さそうです。カスタマイズして自分の好み通りに変更することもできますが、手(HTMLやJavaScript)を加えれば加えるほど重くなっていきますから。

 

3、個人的要素の検討

アドセンス広告の見直し>

・ブログTOPのインフィード広告を外す

 これが一番効果がありました。はずすとモバイルの方は+10くらいスコアが上がり、パソコンの方はさらに良くなり黄色圏内に。ものすごく重かったんですね。

・記事上部のリンク広告を外す

 あまり記事を読む前にリンクを踏む人はいないかなと思い始めていたので、この機会に外してみました。

・記事下に2つ(スマホでは1つ)広告を表示→1つに変更

 自分が読者として見たときに、2つ広告があると若干引いてしまっているのに気がついたのでスッキリさせました。

 広告を見直したことでかなりの効果がありました。それで収益が減るかもしれないけど、まぁ、今のとこ収益ってあっても数円ですから・・・できるだけ沢山の人に読んでもらえるページを作って、楽しくブログを続けられることの方を優先です。

 

<画像圧縮と1記事に貼る画像の枚数を抑える>

・画像については、ブログを書き始めたときからフリーソフトの「縮小専用。」を使って画像サイズを縮小してから貼るようにしています。

forest.watch.impress.co.jp

 このソフト、とても使い勝手がいいのです。インストールする必要が無く、レジストリの書き換えもされないので安心ですし、何よりウィンドウに画像をドラッグ&ドロップするだけで、指定したピクセルサイズに縮小できるからとても簡単。文字を入れたりだとかの加工は出来ませんが、手っ取り早く画像サイズを小さくしたい人にはおすすめのソフトです。
 私の場合、ブログ用の画像はデジカメで撮っているので容量が大きく、そのまま使うと大変なことになるのは何となく感じていて、昔からヤフオクに貼る画像を縮小するのに使っていたこのソフトを使って適当に小さくしてから貼っていました。
 でも最初の頃の記事は、適当に縮小していたので、もう一度容量を見直す必要がありそうです。さらに一つの記事に何枚も画像を貼っていたりするので、そこも今後見直す予定です。

 

色々と対策をやった結果

改善後の表示速度(パソコン)

改善後の表示速度(パソコン)

改善後の表示速度(モバイル)

改善後の表示速度(モバイル)

 スマホの方はまだまだどうしたらいいんだ~という結果になりましたが、パソコンの方はかなり改善されました。
 あとは、どの辺で自分が納得するか・・でしょうか。とりあえず今回はこの辺で区切りをつけたいと思います。でもまだまだ他にも改善できそうなところがあれば、ちょくちょく手を加えていきたいと思います。

 同じようにブログの表示速度を速くしたいなと思っている方の、少しでも参考にしていただければ嬉しいです。