はてなブログ開発ブログ

はてなブログからの公式のお知らせを発信します。

画像の読み込み順の改善など、はてなブログの閲覧体験を改善しました

はてなブログでは、ブログが快適に閲覧できるよう改善する取り組みを続けております。背景や過去の取り組みについて詳しくは、下記の記事をご参照ください。

はてなブログの閲覧体験の現状

はてなブログでは、閲覧体験を図る指標として、以下の2つの指標を重視しています。

  • Core Web Vitals (ウェブに関する主な指標)
  • Page Speed Insights のパフォーマンススコア

Core Web Vitals については、Googleが検索順位を決定する際に考慮する要素の一つであることがアナウンスされています。現在、大きなカスタマイズ*1をしていないはてなブログをご利用の場合、Core Web Vitals は良好の状態にあり、SEOの観点から安心してご利用いただけます。
なお、SEOの観点では、Core Web Vitalsはあくまで検索順位を決定する際の要素のひとつであり、かつ影響はわずかですので、過度に気にする必要はありません*2。良いコンテンツであることが最も重要であり、はてなブログはコンテンツの作成に集中することができます。はてなブログのSEOの現状やコンテンツ作成のヒントについては「はてなブログをインデックスされやすくするために(寄稿:辻正浩)」をご参照下さい。

また、 2024年3 月にCore Web Vitalsに新しい指標「INP」が追加される予定ですが、大部分のページにおいて問題が発生していないことを確認しています。一部の記事で、INPについて「改善が必要」と判定される場合がありますが、引き続き改善を目指してまいります。

Page Speed Insights のパフォーマンススコアについては、サイト改善のための指標として利用しています。なお、このスコアは当然良いほうが望ましいですが、ブログやメディアの提供の目的によっては*3、スコアが下がることを許容して良いものであると考えています。
こちらも大きく改善が進んでおり、一例として本ブログ過去記事のデスクトップ環境のパフォーマンススコアは安定して90点を超えるまで改善が進んでいます。

本ブログ過去記事 のPage Speed Insights のスクリーンショット(デスクトップ環境)

今回行った改善

このセクションでは前回の告知以降に行った施策のうち代表的なふたつの施策について紹介します。

画像の読み込み順序の調整

  • 改善の影響のあるブログ・記事
    • ブログにタイトル画像・背景画像を設定しているブログ、冒頭に画像を掲載している記事
  • 改善内容
    • タイトル画像や背景画像、記事の冒頭画像は最初に読み込まれるように改善しました
  • 改善の詳細
    • タイトル画像や背景画像、記事の冒頭画像はページの読み込み後に最初に表示される要素のひとつです。そのためこれらのリソースの読み込みを早めることで、ページを開いた直後に見えるコンテンツの表示が完了するまでの時間、つまりLCPのスコアを改善します

スマートフォン版のJavaScriptの最適化

  • 改善の影響のあるブログ・記事
    • レスポンシブデザインを利用していないブログ
  • 改善内容
    • スマートフォン版のJavaScriptを最適化し、負荷の軽減、ファイルサイズの軽量化を行いました
  • 改善の詳細
    • スマートフォン版のJavaScriptを最適化し、負荷の軽減、ファイルサイズの軽量化を行い、全体的なパフォーマンスを改善します

今後の改善にご期待下さい

上記の通り様々な改善を進めておりますが、まだまだ改善を予定しております。ご期待下さい。

*1:Google Adsenseの導入など動的な要素の読み込み

*2: Google自身も記事で「ページ エクスペリエンスの構成要素はすべて重要ですが、ランキングでは、ページ エクスペリエンスの一部の要素が平均以下であっても、総合的に優れた情報を含むページが優先されます。優れたページ エクスペリエンスが関連性の高い優れたコンテンツに勝ることはありません。しかし、同様のコンテンツを含むページが複数ある場合は、ページ エクスペリエンスが検索ランキングで非常に重要になります。」と説明しています

*3:収益のために広告導入を必須とするなど