はてなブログ開発ブログ

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

はてなブログの閲覧体験改善の取り組みについて

機能修正・改善 閲覧体験改善

はてなブログでは、日々さまざまな機能修正・改善を行っています。本記事では、はてなブログでの閲覧体験の改善への取り組みを紹介いたします。

はてなブログの閲覧体験改善プロジェクト

「閲覧体験の改善」をひとことで言えば「快適にウェブページを閲覧するための改善施策」です。快適なウェブページの閲覧を妨げる要素は色々あります。
例えば、

  • ページの読み込み速度が遅い
  • 画像や要素の読み込みで画面にズレが発生する
  • 操作の反応が悪い
  • ユーザーの操作意図に沿わない動作をする

などです。

快適にウェブページが閲覧できることは、著者にとっても読者にとっても嬉しいことであり、ブログの性能のなかでも重要な要素のひとつです。
そういった考えの上、これまでも、はてなフォトライフ貼り付け時のレイアウトシフトを生じないようにする変更と画像の遅延読み込みを行う変更など、閲覧体験を改善するための施策を行ってまいりました。
しかしながら、まだまだ改善できていない部分が多くあり、改めてブログの閲覧体験を改善するプロジェクトを立ち上げて、しっかりと改善を行っていくべきと判断し、体制を整えました。

プロジェクトの指標と成果

プロジェクトでは、閲覧体験を定量的に測る指標として、Google が提唱する「Core Web Vitals」を使用し、この数値の改善を目標に進めています。

また、具体的な施策の検討に際しては、Google PageSpeed Insights や Sentry などサードパーティの計測ツールでページごとの実際のページ読み込み速度などを計測し、対応に必要な工数や期待できる効果から施策の絞り込みを行いました。

このような計測と分析を通して、最近いくつかの改善施策をリリースいたしました。

  • 新着記事、注目記事モジュールなどの画像の遅延読み込み
  • ブログの表示に必要なJavaScriptを見直してファイルサイズを削減
  • その他細かい改善

その結果、モバイル環境における Core Web Vitals の数値が大きく改善いたしました。

はてなブログのCore Web Vitalsの指標推移。モバイル環境での指標が大きく改善したことがわかります
はてなブログのCore Web Vitalsの指標推移。モバイル環境での指標が大きく改善したことがわかります

引き続き改善していきます！

上記の施策以降も閲覧体験の改善施策を進めており、今後も行っていく予定です。ぜひ今後の改善にご期待いただけますと幸いです。

注意事項

はてなブログはユーザー自身が自由にデザインを変更したり、自由に広告を挿入したりできる仕組みのため、ユーザー自身のカスタマイズが、閲覧体験を悪くしてしまうこともあります。
その場合、はてなブログ側での改善は困難です。ご理解の上、カスタマイズを行っていただけますと幸いです。