はてなブログ

今スグできる、はてなブログの高速化・9つの対処法

皆さんも被害受けましたか?

グーグルが2019年3月に行ったアレです。

私はグーグルのアルゴリズムのアップデート以降、アクセス数が半減しちゃいました・・・。

結果的には、自分のブログを見直すいい機会だったと受け止めて、毎日もがいています。

アクセスが減った要因はいろいろあるでしょうが、結局は記事の質を上げて、ユーザーフレンドリーだったらアクセスは戻ると思っています。

そこで今取り組んでいるのは、ブログのリライトとサイトの表示速度を上げる事です。

特にブログの表示を遅くしていたのは、記事に使っている画像のせいでした

<2019年8月追記>今はWordpressを使っています。はてなからの引っ越しはお勧めしませんが、もしWordpressに変えたい方は、こちら「はてなからWordpressに引っ越し後にやる事」を読んでみて下さい。やる事がメチャクチャありますよ!

はてなブログは遅い

はてなブログ 遅い

まずはですが、はてなブログは遅いですよね。はい。遅いですね。

これは、はてなブログを使っている宿命とでも言いましょうか、運営会社が手を打ってくれることを待つしかないですね。

とは言っても、待っているだけじゃ何も変わらないので、ブログの高速化に挑みました。

やったことは以下の事です。

  1. 画像を軽くする
  2. 使っていないCSSを削除
  3. はてなブログの設定を変える

●はてなスターなどのアイコンを削除
●関連記事を非表示
●Jqueryが複数あったので、1つにまとめる
●トップページの表示形式→一覧
●キーワードリンクを付与しない、広告を非表示、ヘッダとフッタを表示しない、の全てにチェックを入れる
●ブログカードの使用をやめる
●TOPページの記事数を減らす

今後やる事・・・Lasyloadの導入(Lazyloadとは、オフスクリーン画像の遅延読み込みをするものです。)

結論から言いますと、劇的に改善したわけじゃないですが、最悪からは脱したので一安心です。記事にもよりますが、速度のスコアは28~40の間でしたが、今は50以上になっています。

注)他のブログでは基本的にトップページの速度を紹介していることが多いようですが、私は各記事のスピードで話を進めていきます。私のトップページのスコアは60~70です。

これが改善後のPagespeed Insightsのスコアです。モバイル47・パソコン84です。

PageSpeed Insightsの結果 PageSpeed Insightsの結果

もっと改善して52と85です。

個人的には、CSSをめっちゃいじって軽量化したりというのはお勧めしてないので、私は知識が無くても誰でもできる方法だけで、高速化をしています。

自分のブログの速度を調べる

まずは、自分のブログの速度を調べましょう。

これらのサービスは、ブログの表示速度も教えてくれますが、もっとも重要な事は、問題の改善点を教えてくれるので、指摘があった個所を改善するために使いましょう。

Pagespeed Insights

おそらくブロガーの全てが使っていると思いますが、Pagespeed Insights調べます。これはグーグルが提供しているサービスで、ブログの表示速度や改善点を教えてくれるサービスです。

使い方はいたって簡単で、速度を調べたいページのURLをコピペして、分析ボタンを押すだけです。

まずは自分のトップページ、他の全てのページの解析をしましょう。

PageSpeed Insights

スクロールダウンしていくと、問題点や改善点を教えてくれるので、チェックしていきます。

PageSpeed Insightsが提案する改善点

一番最初の項目の<オフスクリーン画像の遅延読み込み>というところをクリックすると、画像と画像のバイト数を表示しているので、ここでブログで使っている画像の大きさをチェックしました。
表示速度を早くするために、画像のサイズをチェックブログを早く表示するために画像サイズをチェック
上記のスクショは画像を小さくした後の情報なんで結構小さいですが、以前は300KBなど普通にありました。たた、最近は画像一枚当たり20KB以下になるようにしています。

Testmysite

これはモバイルサイトの速度を測るGoogleのサイトです。

Testmysite

ブログの速度チェック Testmysite

はい。遅いらしいです。

3秒なら悪くないかなって思ったんですが、グーグル曰くアウトみたいですね・・・。ちなみにうっすら書いてあるんですが、「今月、お客様のサイトは1,1秒遅くなりました」と。

ってゆーことは、先月まで1.9秒で表示されてたんでしょうか?ぼちぼち早いですね。

ただ、なぜ表示速度がこんなに遅くなったかについては、分かりません。記事数が増えたからでしょうか?何も変えてないんですけどね。

テストマイサイトも、改善点を教えてくれるので、ぜひ使ってみましょう。

画像を軽くする方法

以前は「マックのスクリーンショットはPNGなので重い!」と思っていたのですが、結構圧縮も出来るし、写真のサイズを小さくしたらそこまで問題ないと思います。

画像によっては、PNGからJPEGに変えていますが、特別に重いわけじゃなければPNGを使っても問題ないと思っています。

ただ、最近ではJPEG2000などの次世代規格に代えるようにPagespeed Insightsでも通知が出てますが、アップロードできなかったり、表示されなかったりするようなので、見送ってます。

JpegファイルをJpeg2000に代えブログを高速化する

1・画像のサイズを小さくする

私はほとんどの記事で、記事中に入れる画像は250〜300px、アイキャッチ画像にもなる記事上の画像は400ピクセルにしています。やっぱり小さいと軽いです。

マックだったら、画像を開いて上にあるツールボタンから、画像のサイズ変更できます。Windowsはペイントで、出来ます。(すみません。ドイツのPC使っているので、ドイツ語表記です)

ペイントを使って画像のリサイズをする

2・PNGをJPEGに

png2jpg.comというオンラインでPNG画像をJPGに変換するものも使いました。

3・画像を圧縮

compressjpegという無料のサイトを使って圧縮しています。これはJPG・PNG・PDFを圧縮できます。

https://compressjpeg.com/ja/

使い方は簡単で、<アップロードをクリック>して、写真をアップし、圧縮が終わったら<ダウンロードをクリック>するだけです。

もし圧縮率が物足りないなら、サムネイルにカーソルを合わせると<設定>と出てくるので、それをクリックして自分でクオリティーを変更します。
ブログ高速化 画質を下げる方法

4・はてなフォトライフの設定画質を変える

画像のアップロードは、フォトライフを使った方が良いので皆さんもフォトライフからアップロードしましょう。

まずは画質設定を変えます。管理画面からフォトライフをクリック

はてなブログ フォトライフで画質を設定する 高速化

右上にある設定をクリック

画質を設定する。私は色々試した上で90%にしました。画質悪すぎるとみにくいですしね。

これで、Jpegcompressと、はてなの二重で画質を落としているので、かなり小さくなります。

5・すべての記事の画像を変える

ここからが結構きつい所なんですが、1ページ1ページ、全ての画像を差し替えていきます・・・。

きついですよね、コレ・・・。ただ、終わった後の達成感も大きいですね。




はてなブログの設定を変える

はてブやはてなスターはあったら励みになるし、これがあるからはてなブログを使う意義があるってものなのですが、私の様にはてな住民からのクリックが少ない人は、消していいと思います。

私は下の様に、「全てのボタン」と、「はてなスター」、「関連記事」を非表示にしました。

はてなブログの設定を変え、ブログの高速化をする

これでだいぶ軽くなりますが、やっぱりSNSからの流入も欠かせないので、CSSをカスタマイズしてSNSを表示してもOKです。

SHIROMAさんのコピペで簡単!はてなブログのSNSボタンをカスタマイズに詳しく書いているので、必要な人はやってみて下さい。

はてなのいらないサービスを非表示にする

次は、キーワードリンクなどの不必要な表示をしないように設定します。こだわりが無ければ以下の様に設定してください。

はてなブログの設定を変えて、ブログ高速化をする

ちなみに、トップページの記事数は10でもいいと思うのですが、私はトップページにインフィード広告を入れていて、5記事ごとに広告が出るようにしているので、あえて11記事にしています。

トップページへのアドセンス・インフィード広告の設定は「収益アップ!トップページにインフィード広告を入れる方法」を参考にして下さい。

Jqueryの取得先を統一する

コピペでカスタマイズしている人は、Jqueryが複数ある場合があるので、有った場合は削除。(タイトル下、記事上、記事下、フッタ、デザインCSSをチェック)

こういったやつ↡

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

バージョンが違うと正常に動作しないカスタマイズもあるので、CSSなどは必ずコピペしてから削除をしましょう。

また、はてなブログはデフォルトでJqueryが組み込まれているので、上で紹介したJqueryをはてなのモノに替えます。2019年8月に確認したバージョンは、version=1.12.3です。

<script src=”https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3″></script>

めったにある事ではないですが、はてなぶろぐがJqueryのバージョンを変えたら作動しなくなるので注意してください!

ブログカードを使わないようにする

内部リンクを張る時は、「ブログカード」じゃなく「タイトル」を選びましょうね。埋め込みのカード型は大きいし、クリック率も上がるかもしれませんが、重いです。

このページのリンクを見てもらったら分かりますが、私はリンクの説明文とタイトルを書いています。

例えばですが、このページで使っているリンクはこんな感じです。

ちなみに、トップページの記事数は10でもいいと思うのですが、私はトップページにインフィード広告を入れていて、5記事ごとに広告が出るようにしているので、あえて11記事にしています。

トップページへのアドセンス・インフィード広告の設定は「トップページにインフィード広告を入れる方法」を参考にして下さい。

私はですが、ブログカードよりこちらの方がクリック率は高いです。しかもめっちゃ軽いし。

使っていないCSSを削除する

CSSをいじる時は、必ずバックアップを取ってからやりましょう!

みなさん、デザインCSSの中身どうなっています?

何が何だか分からないくらい、コピペしてカスタマイズしてないですか?

使わなくなったCSSや、ほぼ使っていないCSSも削除しましょう。

って言っても、めっちゃ見にくいですよね、このCSSのウィンドウ。はてなはわざとやってんのか?ってくらい見にくいし、Ctr+Fで検索もできないし・・・。

とりあえず、これを機に整理してみて下さい。カスタマイズしまくっている人は、ブログも重くなっているはずなので必要最小限にしましょうね。

CSS圧縮やHTML圧縮する方法もありますが、ほとんど改善されなかったので、私は使っていません。

オフスクリーン画像の遅延読み込み

色々調べたのですが、はてなブログだと正常に作動しないことが多いみたいなので、導入には至っていません。

「はてなブログ Lasyload」で調べてみて下さい。いろいろ出てくるので。もしかしたら、私が使っているInnocentと相性が悪いだけかもしれません。

矛盾している事を発見

スピードにはまだまだ納得がいってないのですが、今のところは、高速化はこのくらいです。

他のサイトはどうなのかな~と気になって、有名なブロガーのサイトや、調べ物をしたときの上位サイトをチェックしているんですが、驚愕の事実を発見しました。

というのは、他のサイトめちゃくちゃ評価悪い!!ってことです。本当に。

みなさんも何か検索して、1位のサイトをチェックしてみて下さい。評価悪いものがかなり多いですよ。

ちなみに、私のブログで一番アクセスが多い記事のスピードをチェックしてみたのですが、モバイル33とパソコン80でした。このページの平均検索ランクは1.2で、一日に200~300のビューがあります。

ですので、Page speed insightsの結果が全てではないと思います。

ただ、以前もGoogleはモバイルファーストインデックを推奨!レスポンシブデザインを使おう!で紹介したように、モバイルの速度は重要なので、改善するに越したことはないですね。

まとめ

写真を差し替える

多くの場合は、画像を軽くする・リサイズするで、かなり改善されますが、画像を一枚一枚差し替えていく作業は、記事数が多いと本当に時間と根気が掛かるので、大変な作業です。

ただ、やった分だけ報われるので、ぜひ頑張ってください。