こんにちは。はてなブログの読込スピードの遅さに悩んでいませんか。「読込スピードが速いテーマはないかな？」と日々テーマストアを見ていませんか。
私もその一人でした。
はてなブロガーの方が、軽量化するためのカスタマイズを提案していますが、限界があります。
読込スピードは、ブログテーマの作り方が影響しています。多くのテーマは、はてなブログ公式のサンプルテーマ「Boilerplate」から作られます。そのため、不必要なCSSが存在し、読込スピードが遅くなります。
しかし、CSSを一から設計しているテーマが存在します。その一つが、tak-kunさん設計した「Debriefing（デブリーフィング）」です。私が探した中では、このテーマが最速・最軽量であると考えています。
デブリーフィングへのテーマ変更で、どれくらい速度改善されたのか、使う上で知っておくと良いカスタマイズについて紹介します。
テーマ変更するか否かの参考にしていただければ、幸いです。
［6.17追記］残念ながら、テーマが非公開になっていました。
そのため、公式テーマSmoothを使用することにしました。カスタマイズ事例は、「 はてなブログのテーマ選びに悩みすぎたら、公式テーマSmoothがおすすめ 」で解説しました。
Page Speed Insightsのデータが大幅に改善
これまで、カード型の「ZENO-TEAL」を使っていました。このテーマは、デザイン良し、見やすさ良し、カスタマイズしやすさ良しと、かなり気に入っています。
実際にアクセスした感じでは、そこまで遅いとは感じていませんでした。
読込スピードの評価には、PageSpeed InsightsやGTmetrixが使用されます。これらの数値は日々変動しているので、なるべく同時間帯で評価し比較しましょう。
Page Speed Insightsにおいて、ZENO-TEAL使用時のデータは、次の通りでした。［2020.6.13時点］
- モバイル：20
- バソコン：66
一方、デブリーフィングに変更後のデータは、次の通りでした。
- モバイル：57
- パソコン：89
デブリーフィングでは、デザインはカード型ではなく、かなりシンプルになります。
このくらいシンプルでも良いかなーと思っています。
モバイルでは20→57、パソコンでは66→89と大幅に改善しているのがわかります。特に、パソコンでここまでスピードアップできるテーマは少ないです。
実際にアクセスした感じも、ストレスを感じないほど速くなりました。
両者のモバイルの改善できる項目を比較すると、短縮できる時間（推定）に差がありました。
ZENO-TEALでは合計16.35秒に対し、デブリーフィングでは8.76秒と、7.59秒少ないことがわかります。つまり、その分速いと考えられます。
最適化が必要と思われる部分には、カスタマイズで対応
デブリーフィングを使い始めて、スマートフォン表示において、2つだけ最適化が必要と思われる部分がありました。
- 目次において、目次名（h3タグ）が長いと折り返しがうまくいかない
- テキストリンクが長いと、折り返しがうまくいかず、改行される
これらについて、CSSのカスタマイズで最適化しましたので、その方法を解説します。
目次において、文字が長いと折り返しが上方向に向かい、変になっています。「・」の位置が短いときと異なるのがわかるはずです。
また、テキストリンクの文字列が長い場合に、その前後で改行が入ってしまいました。
対処法は簡単で、次のCSSを「デザインCSS」に記述するだけで、2つの問題が解決できます。
.entry-content a {
display: inline !important;
}
displayは表示に関するプロパティで、inlineは要素を横に並べる値を示します。!importantは、CSSがうまく機能しないときに使える優先順位を上げるコードです。
今回!importantなしだと反映されなかったので使用しました。
まとめ
現時点で、はてなブログの最速テーマは「デブリーフィング」であると思います。Page Speed Insightsでの数値も高かったです。
ぜひ、読込スピードが速いテーマを探している方は検討してみてください。また、さらにスピード速いテーマを知っているという方は、ぜひ教えてください。
関連記事
・SEO対策で重要！サーチコンソール「CLSに関する問題」の原因と対処法