NISA SCHOOL

独学で資産形成を目指すブログ

はてなブログ最速・最軽量のテーマはDebriefing(デブリーフィング)

f:id:nisaschool:20200613211302j:plain

こんにちは。はてなブログの読込スピードの遅さに悩んでいませんか。「読込スピードが速いテーマはないかな?」と日々テーマストアを見ていませんか。

私もその一人でした。

はてなブロガーの方が、軽量化するためのカスタマイズを提案していますが、限界があります。

読込スピードは、ブログテーマの作り方が影響しています。多くのテーマは、はてなブログ公式のサンプルテーマ「Boilerplate」から作られます。そのため、不必要なCSSが存在し、読込スピードが遅くなります。

しかし、CSSを一から設計しているテーマが存在します。その一つが、tak-kunさん設計した「Debriefing(デブリーフィング)」です。私が探した中では、このテーマが最速・最軽量であると考えています。

デブリーフィングへのテーマ変更で、どれくらい速度改善されたのか、使う上で知っておくと良いカスタマイズについて紹介します。

テーマ変更するか否かの参考にしていただければ、幸いです。

[6.17追記]残念ながら、テーマが非公開になっていました。

そのため、公式テーマSmoothを使用することにしました。カスタマイズ事例は、「 はてなブログのテーマ選びに悩みすぎたら、公式テーマSmoothがおすすめ 」で解説しました。

 

 

Page Speed Insightsのデータが大幅に改善

これまで、カード型の「ZENO-TEAL」を使っていました。このテーマは、デザイン良し、見やすさ良し、カスタマイズしやすさ良しと、かなり気に入っています。

実際にアクセスした感じでは、そこまで遅いとは感じていませんでした。

読込スピードの評価には、PageSpeed InsightsGTmetrixが使用されます。これらの数値は日々変動しているので、なるべく同時間帯で評価し比較しましょう。

Page Speed Insightsにおいて、ZENO-TEAL使用時のデータは、次の通りでした。[2020.6.13時点]

  • モバイル:20
  • バソコン:66

f:id:nisaschool:20200613221819j:plain

f:id:nisaschool:20200613221857j:plain

 

一方、デブリーフィングに変更後のデータは、次の通りでした。

  • モバイル:57
  • パソコン:89

f:id:nisaschool:20200613222359j:plain

f:id:nisaschool:20200613222406j:plain

 

デブリーフィングでは、デザインはカード型ではなく、かなりシンプルになります。

このくらいシンプルでも良いかなーと思っています。

モバイルでは20→57、パソコンでは66→89と大幅に改善しているのがわかります。特に、パソコンでここまでスピードアップできるテーマは少ないです。

実際にアクセスした感じも、ストレスを感じないほど速くなりました。

 

両者のモバイルの改善できる項目を比較すると、短縮できる時間(推定)に差がありました。

ZENO-TEALでは合計16.35秒に対し、デブリーフィングでは8.76秒と、7.59秒少ないことがわかります。つまり、その分速いと考えられます。

f:id:nisaschool:20200613223654j:plain

f:id:nisaschool:20200613232019j:plain

 

最適化が必要と思われる部分には、カスタマイズで対応

デブリーフィングを使い始めて、スマートフォン表示において、2つだけ最適化が必要と思われる部分がありました。

  • 目次において、目次名(h3タグ)が長いと折り返しがうまくいかない
  • テキストリンクが長いと、折り返しがうまくいかず、改行される

これらについて、CSSのカスタマイズで最適化しましたので、その方法を解説します。

目次において、文字が長いと折り返しが上方向に向かい、変になっています。「・」の位置が短いときと異なるのがわかるはずです。

f:id:nisaschool:20200613225126j:plain

また、テキストリンクの文字列が長い場合に、その前後で改行が入ってしまいました。

f:id:nisaschool:20200613225133j:plain

 

対処法は簡単で、次のCSSを「デザインCSS」に記述するだけで、2つの問題が解決できます。

.entry-content a {
display: inline !important;

displayは表示に関するプロパティで、inlineは要素を横に並べる値を示します。!importantは、CSSがうまく機能しないときに使える優先順位を上げるコードです。

今回!importantなしだと反映されなかったので使用しました。

 

まとめ

現時点で、はてなブログの最速テーマは「デブリーフィング」であると思います。Page Speed Insightsでの数値も高かったです。

ぜひ、読込スピードが速いテーマを探している方は検討してみてください。また、さらにスピード速いテーマを知っているという方は、ぜひ教えてください。

 

関連記事

SEO対策で重要!サーチコンソール「CLSに関する問題」の原因と対処法