考えうる限りの手を尽くし、廃人になりかけながらブログを限界まで高速化してみました。結果は以下のような感じです。

PageSpeed Insights

GTmetrix

Lighthouse

いやぁ、、、嬉しい。特にPSIのモバイル99点なんて、以前では信じられない結果でした。あきらめずに続けて良かったです。

高速化のためにしたこと

細かいものに関してはちょくちょくやってますが、高速化のために行った対策で効果の大きかったものを挙げておきます。

• 標準CSS/JavaScriptの無効化

  結構重たいので思い切って無効化。

• head内処理の最適化

  DNSプリフェッチなど。

• 不要なJavaScriptの削除

  Bloggerでは各所で不要なスクリプトが読み込まれていたりするので、いらないものは削除。

• JavaScriptの非同期処理

  主にdeferによる非同期処理で読み込み速度向上。

• 各種コード・ファイルの圧縮

  転送量が減るので読み込みが早くなる。

• 画像の最適化配信

  画像サイズを小さくしたり、次世代フォーマットに変換することで読み込み速度向上。

• 遅延読み込み

  img, iframeなどの遅延読み込み。

• 外部スクリプトのインライン化

  highlight.js等をCDNではなくインラインにすることで転送量を削減。

• HTML構造の簡略化

  HTML構造を簡略化することでレンダリング速度が向上。

• テンプレートの最適化

  独自タグによる条件分岐で読み込みを最適化。

遅延読み込みだけでも、スコアや実際の表示速度が結構変わります。画像やメディアはサイズが大きくなりがちなので、圧縮したり遅延させたりすると効果が発揮されやすいです。

Bloggerの高速化については、こちらの「バグ取りの日々」さんの記事で細かく紹介されています。詳しい内容に興味がある方におすすめです。

Bloggerの表示速度を高速化する

忘却録です。Bloggerの高速化です。 結果 次の結果になりました。画像が古いため、現在は更に高速化しているはずです。 PageSpeed Insights GTmetrix Lighthouse （Audits） ウェブページ共通の高速化 長くなったため、記事を分割しました。...

www.bugbugnow.net

特に効果が大きかったこと

高速化で特に効果が大きかったのは、標準CSS/JSの無効化と遅延読み込みです。

標準JS/CSSの無効化に関して

デフォルトのままだと、いろいろなCSSやJSが勝手に読み込まれます。代表的なのはbundle.css, plusone.js, widgets.jsあたりです。地味にサイズが大きいので、使わない機能が多いと正直なところ迷惑。

全部無効化してしまえば大幅に転送量を削減できますが、デザインやウィジェットの機能に関係しているものもあるので注意が必要です。

標準CSS/JSはそれぞれhtmlタグでb:css='false', b:js='false'と設定することで無効化できます。

標準JSを無効化した場合

標準JSを無効化すると、以下のような影響があります。

コメントに関しては、埋め込みにこだわらなければフルページかポップアップにすることで標準JSなしでも自然なやり取りを演出できます。コメント欄は標準JSの影響を一部受けるので、実用化の際は少し改造する必要が出てきます。

※コメント欄の対処方法について記事を書きました↓

Bloggerのコメントを標準JSなしで実現 | IB-Note

Bloggerのコメントを、標準JSなしで自然に表示する方法についてご紹介します。

itblogger-note.blogspot.com

確認した範囲では、通常のサイト内検索やラベル、投稿表示等は問題ありませんでした。

標準JSはfalse→trueにすればいつでも有効化できるので、レイアウトの調整時だけtrueにしておくと便利です。

遅延読み込みに関して

当ブログでは、画像その他の遅延読み込みのため独自に作成したスクリプトを導入しています。

ネイティブLazyloadよりも確実に遅延読み込みされるようになったため、画像などの転送サイズを大幅に減らすことができました。詳しくは以下の記事をご参照ください。

特定タグのリソースを遅延読み込みさせるスクリプト | IB-Note

img, iframeといったタグのリソースを遅延読み込みさせるスクリプトを作成しました。外部ライブラリを一切使用せず、JavaScriptのみで実現したシンプルな遅延読み込み機能です。

itblogger-note.blogspot.com

高速化のメリット

しばしば大きな犠牲（修正にかかる時間など）も付き物ですが、高速化には非常に良いメリットがあります。具体的には…

などなど。表示速度が速いほうが読者としても嬉しいですし、ユーザー第一なGoogle先生の評価も確実にアップすることが見込めます。

PSIで90点超えてからは完全に自己満の世界ですが、高速化に際していろいろ見ていると勉強になりますし、やりがいは十分。一度本格的に取り組んでみると良い経験になります。