【Blogger】ブログデザインのプチ模様替えと、ちょっとした高速化

ブログデザインのカスタマイズって、どうしてこんなに中毒性が高いんだろう。

気分転換にデザインをちょっと変えてみようかなとカスタマイズし始めたら、次から次へといろんなことが気になり出して作業中は瞬く間に時間が過ぎていきます。

プチ模様替えのつもりでしたが、以前から気になっていたページ表示速度の改善にも少し取り組んで、結果的に表裏いろいろ修正を加えることになりました。

ブログデザインの変更。ミスも発見

デザインに関しては、記事タイトルやラベルの配置、文字色や hover のエフェクト、要素につけていた影などを変更。Blogger の海外テンプレートや Blogger 以外のブログも参考に変えていきました。

デザインが変わってブログの雰囲気もなんとなく変わると、また新鮮な気持ちでブログに取り組める気がします。

それから、サムネイル画像の適切なサイズを検討したり、使用していたブログカードジェネレーターの最新 CSS を導入・調整したり。特に画像が関わる CSS の調整は画面幅による表示崩れに注意が必要だし、自分が望む形を実現する最適な書き方を探っていたら時間がかかりました。

ここでミス発見。
記事内の画像には、遅延読み込みのために loading="lazy" をつけていたのですが、何も考えずに記事トップのアイキャッチ画像にも loading="lazy" をつけていた。ファーストビューなのに遅延読み込みしていたという（笑）。なんと愚かな自分よ。。

ページ表示を実機で確認する大切さも改めて認識。
たまたま、ふと自分の iPhone を横向きにしてブログを見てみたら、記事の文字サイズが想定外にでかく表示されていた。読みにくいというか、でかすぎて違和感が。

わざわざスマホを横向きにして見る人はほとんどいないと思うけど、気になったので調べてみると iOS Safari の仕様の様子。iPhone の縦横の向きによって文字サイズが自動調整されるということでした。


  -webkit-text-size-adjust: 100%;

上記を指定することで、自動調整されずに適切な文字サイズで表示されました。

PC も普段は Chrome を使っているけど、デザインを変えたら Firefox など他のブラウザでも表示を確認するように習慣づけていこう。

ブログの裏側カスタマイズに関しては、今できる範囲で高速化に取り組みました。この頃記事が増えていくたびに表示が遅くなるように感じていたので、デザインカスタマイズの勢いに乗って対応です。

さて以前から PageSpeed Insights で改善できる項目として上がっていたのは、画像関係の忠告と「最初のサーバー応答時間を速くしてください」。

画像まわりは、最適化が必要なのは認識していたもののどうしてもやる気が起きなくて結局ずっと対応をしていなかったもの。

「最初のサーバー応答時間を速くしてください」は、え、何すればいいんだろう（自分でできることなのか？）という状態。でもページ表示は以前に比べて確実に遅くなっているし、何かやりたい。特にサイドバーの表示や、記事内の目次の表示に時差を感じていたので、そこを多少でも改善したい。

というわけで、原因がよくわからないなかでの作業でしたが先人の知恵を借りながらできる範囲で対応しました。以下が参考サイトです。

※追記（2021/8/29）
上記参考サイトの１つ、IB-NoteのFumaさんからコメントいただきました。

Fumaさんコメント

「最初のサーバー応答時間を速くしてください」はあまり気にしなくても良いと思います。私もPageSpeed Insightsで何回となく試しましたが、場合によって出たり出なかったりといった感じで、単純にサーバーがビジーかどうか等に依存している気がします。

というわけで、サーバー云々のコメントに関しては Blogger ユーザー側でできることは特にないと考えて良さそうです。Fumaさんありがとうございます。

さて、今回までに高速化対応としてすでにやっていたことがこちら。

そして今回実施した作業。内容的には、上記の参考サイトで紹介されているものの中からできそうなものをピックアップした感じです。

※追記（2021/8/31）
標準 JS を無効化したところ、サイドバーのアーカイブリストにある▶︎マークが機能しなくなったようなので、再び有効化しました。

無効化すると、アーカイブの階層形式とフラットリスト形式ではリストの開閉ができなくなるようです。プルダウン形式なら、無効化しても動作させる方法があるようです。

未了の課題は以下。力尽きました。

課題は残ったものの、今回の作業で体感的にはけっこう速くなった気がしています。特にサイドバー表示までの時差が大幅に減った、ような気がする。

PageSpeed Insights の数値としては、

なので、モバイルはそこまで良くなってないんですが（笑）、いや、画像の影響が大きいのはわかっています。ここをやらないと、どうしようもないということですね。
たぶん、いつかやります。

※追記：この時期に実施したいろんなカスタマイズは以下の記事でリスト化しました。