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

【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)
上記参考サイトの1つ、IB-NoteのFumaさんからコメントいただきました。

Fumaさんコメント

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

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

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

  • Blogger 標準 CSS(bundle.css)のインライン化
  • loading="lazy" による画像の遅延読み込み
  • AdSense コードの遅延読み込み

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

  • Blogger 標準 JS の無効化
  • 記事と記事以外で、ページごとに CSS を出し分け
  • CSS、JavaScript を圧縮
  • highlight.js をインライン化
  • 目次、ShareThis のスクリプトを、head 内から body 内に移動
  • 関連記事のスクリプトを、QooQ のデフォルトからこちらに変更

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

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

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

  • 画像まわりの最適化
  • とりあえずインライン化してある標準 CSS の選別

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

PageSpeed Insights の数値としては、

  • パソコン:95 〜 97(作業前は 90 前後)
  • モバイル:65 〜 70(作業前は 50 前後)

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

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

ブログ運営日記 vol.6 この1ヶ月で実施したブログ工事の内容

ブログ運営日記 vol.6 この1ヶ月で実施したブログ工事の内容

8月から約1ヶ月間、時間をかけてブログに種々の変更を加えました。いやーなんか、ブログを始めてから今まで気づいてなかったこともたくさんあって勉強になりました。

こちらの記事もよく読まれています
ブログに画像を載せるときに知っておきたいこと

ブログに画像を載せるときに知っておきたいこと

今回は、画像をブログに載せるときの注意点を紹介します。 画像を適切に載せることでページ表示速度の向上が見込めますし、SEO 効果も期待できます。

記事へのコメント・ご質問は こちら まで
NEXT PREV