- はてなブログは重くないがモバイルの評価は低い
- はてなブログを軽量化・高速化
- はてなブログをカスタマイズする方法
- はてなブログでもモバイル評価は70を超える
- 「使用していない JavaScript の削減」は改善できない
はてなブログは重くないがモバイルの評価は低い
よく「はてなブログは重い！」と言われますが、私の環境ではそこまで重さを感じません。
しかし、サイトのページ速度などを測る「PageSpeed Insights」では、評価が低めになります。
評価の測り方は、PageSpeed Insights に入り、枠にサイトのURLを入れ、分析ボタンを押すだけです。
以下は記事0の状態（作成したばかり）のこのブログの結果です。
モバイルは2回計測しています。
デスクトップの評価は85超え～96の高い水準です。
一方、モバイルはマイナスの方面にバラツキがある上に、平均が低いです。
はてなブログを軽量化・高速化
そこで、はてなブログをカスタマイズして、できるだけ軽量化・高速化します。
このブログでは記事が少なすぎるので、記事数が500記事以上ある別のはてなブログで改善してみました。
効果があったであろう試みは以下の7つです。
・プロフィールをHTMLで作る
・読者になるボタンの軽量化
・サイドバーの表示を減らす
・サイドバーをHTML化
・トップページの表示形式を一覧にする（proのみ）
・ヘッダとフッタの表示を消す（proのみ）
・ブログリンク、YouTube、Twitter などを埋め込みにしない（テキストリンクにする）
・画像をできるだけ縮小
これだけでもかなり改善します。
ポイントとしては、できるだけ表示するものを減らすことと、画像やリンクの容量を減らすことです。
他の方法としては、
・はてなスターを消す
・シェアボタンを消す
などもやってみましたが、そこまで劇的には変わらなかったと思います。
それに、これらははてなブログのメリットでもあるので、残しておいて良いと思います。
次は具体的なカスタマイズ方法を見ていきます。
はてなブログをカスタマイズする方法
まず、サイドバーの表示はできる限り減らします。
しかし、プロフィール、お問い合わせ、プライベートポリシーは必須になります。
次点でカテゴリーや注目記事などもサイトの情報として欲しいです。
そして、可能なものはHTMLで作ります。
中でも、はてなIDや読者になるボタンなどは重いため、HTML化した方が軽くなるからです。
HTMLに置き換える方法
管理画面の「デザイン」→「カスタマイズ」→「サイドバー」を選びます。
そして、「モジュールを追加」をクリックするとこうなるので、以下のHTMLに置き換えます。
置き換えるのは主にプロフィールとカテゴリーです。
プロフィールは、
<p>文字を入れる</p>
<br>
<p>文字を入れる</p>
この形が基本です。
リンクを入れたい場合は、
<p><a href="ページのURL">リンクの文字</a></p>
とします。
はてなブログを始める時やアドセンスに挑戦する時、お問い合わせフォームとプライベートポリシーを作るのに使った人も多いと思います。
カテゴリーをHTML化する方法
はてなブログのカテゴリーをHTML化する場合は、先ほどのHTMLにこのようなリンクを作ります。
<p><a href="カテゴリページのURL">カテゴリの名前1</a></p>
<p><a href="カテゴリページのURL">カテゴリの名前2</a></p><p><a href="カテゴリページのURL">カテゴリの名前3</a></p>
あとはこれを増やしていけば、カテゴリも増やすことができます。
ただ、どのカテゴリにいくつの記事があるのかは表示されなくなります。
読者になるボタンのHTML化
読者になるボタンのHTML化はこちらの記事を参考にさせて頂きました。
はてなブログの読者になるボタンをオリジナル化＆軽量化してみた - Debriefing［デブリーフィング］
この方法でリンクを作り、プロフィール欄に貼ります。
リンクはテキストリンクにする
リンクを貼る際は、できるだけテキストリンクにします。
↓このように「埋め込み」を選んでカードを作ると見栄えはいいのですが、重くなる原因にもなります。
できるだけタイトルかURLでリンクを貼ります。
YouTubeも可能なら埋め込みを使いません。
トップページのカスタマイズ
これははてなproのみ可能ですが、proを使っている人なら必ずやっておいた方が良いです。
見た目も良くなります。
方法は、「管理画面」→「設定」→「詳細設定」を選びます。
そこの「ブログ表示」にある「トップページの表示形式（PC版）」を「一覧形式」にします。
その下の「ヘッダとフッタ（PC版）」の「ブログにヘッダを表示しない」と「ブログにフッタを表示しない」にチェックを入れます。
ついでに「はてなブログ タグのリンク」の「記事本文にはてなブログ タグのリンクを付与しない」にチェックを入れます。
最後は一番下の「変更する」を押して更新すれば完了です。
画像を縮小する
ブログに貼る画像はできるだけ縮小します。
何より、最近はスマホで見る人の方が多いため、大きな画像は必要ありません。
はてなブログの場合、小さめ（500×500以内）でもきちんと表示してくれるので大丈夫です。
容量は50キロバイト以下（無理なら100以下）を目指します。
大事なのは、保存する際は必ずJPGファイル (.jpg)を選ぶことです。
PNGなどは重いのでブログには適しません。
はてなブログでもモバイル評価は70を超える
以下はモバイル評価で70超えた時のものです。
色々なものが重なってここまで伸びたと思いますが、はてなブログ（モバイル）でも70点代は可能です。
ちなみに、アドセンスは貼っています。
ただ、アドセンスはブログに影響を及ぼすので、その時に表示される広告によっては評価が下がります。
もちろん、一瞬上がっただけなので、このラインで安定はしません。
50点代（黄色）安定です。
そして、モバイルの評価だけが低い原因は、はてなブログの仕様にあります。
「使用していない JavaScript の削減」は改善できない
PageSpeed Insights で計測すると、改善できる項目の「使用していない JavaScript の削減」が大きな割合を占めています。
これは、はてなブログ側によるものなので、利用者がどうにかできる部分ではありません。
逆に、はてなブログ側に対策して貰えれば、評価が上がるはずです。
が、現状では今のままです。
よって、はてなブログ利用者が改善できる部分は、それ以外の部分になります。
