もやしさん家の～ブログを開始してから約15年。
当初は他のブログサービスを使っていましたが、2015年10月にはてなブログに引っ越してきました。
はてなブログに引越す前のアメブロはブログ専業サービスでなかったので自社サービスへの誘導がすさまじく、それだけならまだ良いとしてしばしば変更されるダッシュボードについていけませんでした（とはいえ、今でもコメントや連絡いただく多くの方と出会えた良さもあります！）。
はてなブログは硬派なダッシュボード＆アプリなので分かりやすい＆トラブル少ない（あっても早期に改善されるしサポートもちゃんとしている）ので非常に使いやすく、引っ越してきて正解だったな～と今でも思います。
さて。そんな当ブログですが、はてブロでの稼働開始から7年半が経ち、ベースとなっているCSS等を根本的に見直してみました。
- ブログ見直しの理由
- Google PageSpeed Insightsで状況把握
- 見直しの方向性
- 見直しに着手する前にバックアップサイトを作る
- 見直し後のブログテーマは”Silence”
- 修正完了(=ﾟωﾟ)ﾉ
ブログ見直しの理由
先日のオフ会で、このブログの応答性能が悪いとのご指摘をいただきました(^▽^;)
話を伺っていると、コメント入力後の反映に著しく時間がかかっているようでした。
はてなブログ開始当初からアレやってみたい、コレやってみたいといった実験によって、スクリプトやスタイルシートに手を入れてきたので、そういったものが重くなっている原因かもしれないなぁと思ったのが見直しの理由です。
Google PageSpeed Insightsで状況把握
Google PageSpeed Insights（グーグル ページスピード インサイト）は、Webページの読み込み速度をスコア測定してくれるGoogle謹製のサービスです。
URLを入力するだけで、そのページをモバイル・パソコンそれぞれで開いた場合のページ読込み速度や改善ポイントが分析されます。
見直し前のスコアはスマホ18、PC49で不合格(泣)
見直し前の当ブログのGoogle PageSpeed Insights結果は悲惨な状態でした。
パソコンで表示した際は「49」と平均にやや劣るラインでしたが・・・
スマホで表示した際は「18」Σ(･ω･ﾉ)ﾉ！
どれだけ遅いページなんだ・・・
普段からパソコンでしかアクセスしないので遅いという事実に気づけませんでした。
Google PageSpeed Insightsも万能ではないので、この値だけを追求することは推奨されませんが、たまには客観的に自分のサイトがどうなっているのか？を把握するのも良い機会になります。
さすがにスマホアクセス時のパフォーマンス18は看過できないので、見直しするんだ！という気持ちが強くなりました。
見直しの方向性
結論から先に申し上げると「素のテンプレートから最低限の変更だけ」で運用するように変更しました。
はてなでは、はてなの公式テーマ（カスタムテンプレートみたいなの）に加え、はてブロ有志の方からイロイロなテーマが提供されています。
レスポンシブデザイン対応のテンプレも多くなり、パソコン・スマホと区別して管理する必要もなくなりました。さらにはテンプレによっては、カスタマイズ用のコードジェネレーターも用意されていてまさに至れり尽くせりです。
雑記ブログなので、グローバルメニューの作成くらいに留めて、他はテンプレに委ねて運用することにします(^▽^;)
見直しに着手する前にバックアップサイトを作る
改造するぞ～！お～(=ﾟωﾟ)ﾉ！！
と勢いそのままに改造を始めると往々にしてトンデモナイことになるので、まず稼働中のブログのバックアップサイトを作ります。これにより、見直し中に何か問題が発生しても比較的スムーズに戻せるようになります。
はてなブログでは無料プランでも３つまでブログを持てるので、その空きを使います。
空きがないよ～という方は別アカウントを作…Ｐｒｏプランを契約しましょう！！(=ﾟωﾟ)ﾉ
Ｐｒｏだと最大10個まで作成可能になります。
このブログはだいぶスクリプトが入り組んでいたのでバックアップサイトを２つ作成しました。１つが問題発生時の切戻し用、もう１つを新しいサイトカスタマイズの実験用です。実験用である程度まともに動くことを確認したうえで、本番側に設定を移植する流れです。
なんかシステム屋さんっぽい～(´艸｀*)
見直し後のブログテーマは”Silence”
見直し後のテンプレはSilenceを使用しました。
レスポンシブデザイン対応ですし、グローバルメニューのジェネレーターが用意されています。
テストサイトに新しいテーマを適用
はてなブログのテーマストアで適用するテーマを探します。
Silenceを選択したのは・・・フィーリングです(^▽^;)
カスタマイズ箇所の手直し
テーマを変更するとCSSが初期化されます。
本番稼働中のCSSを再適用して、トップページや記事ページの表示や動作を確認していきます。
もともとCSSをはじめありとあらゆる場所にコードを書き込んでいたので1つずつ確認したのですが、記憶を辿りながらだったのでこれが一番時間がかかりました。
はてなブログでは次の場所にコード(スクリプト)を埋め込むことができます。
・設定＞詳細設定
・デザイン＞カスタマイズ＞ヘッダ＞ブログタイトル下
・デザイン＞カスタマイズ＞サイドバー＞各要素
・デザイン＞カスタマイズ＞フッタ
・デザイン＞カスタマイズ＞記事＞記事上HTML
・デザイン＞カスタマイズ＞記事＞記事下HTML
・デザイン＞カスタマイズ＞記事本文末尾＞各要素
・デザイン＞カスタマイズ＞デザインCSS
これらの中でお互いに干渉するコードを書いていたりしたのが遅延の原因かな？
コードの内容と記憶を元に移植するかしないか判断しましたが、コメントなしで追加しまくった過去の自分をぶん殴ってやりたくなりました;つД｀)
苦労はしましたが、最終的にはCSSとHEAD要素(詳細設定)、ヘッダー・フッターにほとんどを集約できました。
テストサイトで最終チェック
本番サイトへ反映させるにあたり、一通りのページが正常に表示されるかを確認します。
・トップページ（トップ表示・ページ送り）
・個別の記事ページ（ランダムに選択）
・カテゴリページ
・年／月／日選択時のページ
本番サイトへ適用
最終チェックしてこれ以上は手を入れる必要が無いことを確認できましたので、本番サイト（このブログ）にSilenceのテーマを適用しました。
その後、各設定欄にテストサイトの各種設定を移植します。
・設定＞詳細設定
・デザイン＞カスタマイズ＞ヘッダ＞ブログタイトル下
・デザイン＞カスタマイズ＞サイドバー＞各要素
・デザイン＞カスタマイズ＞フッタ
・デザイン＞カスタマイズ＞記事＞記事上HTML
・デザイン＞カスタマイズ＞記事＞記事下HTML
・デザイン＞カスタマイズ＞記事本文末尾＞各要素
・デザイン＞カスタマイズ＞デザインCSS
ナビゲーションメニューのURLは自サイトに書き換えないと、テストサイトに戻されてしまうので注意が必要です（←やらかした
修正完了(=ﾟωﾟ)ﾉ
見やすさはともかくとして、ページの表示速度はそれなりに早くなったような・・・気がします(´艸｀*)
テーマ修正後のGoogle PageSpeed Insights結果も52まで改善しました。
▼スマホ表示時のスコア比較
| 見直し前 | 見直し後 | |
| パフォーマンス | 18 | 52 |
| Largest Contentful Paint (LCP) | 1.4秒 | 1.4秒 |
| First Input Delay (FID) | 162ミリ秒 | 147ミリ秒 |
| Cumulative Layout Shift (CLS) | 0.06 | 0.06 |
| First Contentful Paint (FCP) | 1.2秒 | 1.2秒 |
| Interaction to Next Paint (INP) | 305ミリ秒 | 277ミリ秒 |
| Time to First Byte (TTFB) | 0.5秒 | 0.5秒 |
項目別としてはそこまで大きな値の改善ではないですが、パフォーマンスは向上するものですね(=ﾟωﾟ)ﾉ
とはいえ、時間帯によってはテーマのダウンロードに時間がかかることで、そのタイミングで計測すると劇的にスコアが悪化することがあります。
そういう意味で、Google PageSpeed Insightsのスコアはあくまでも参考に留めつつ、改善していくのが良いのかと思っています。
まぁ・・・いちばん大事なことは、ソースにしっかりコメントを残しておきなさい！(to自分)ってことですね(;・∀・)
