はてなブログを高速化するための大きくわけて4つのことについてまとめました。
はてなブログの表示速度を改善するために一番効果があるのは画像を最適化（圧縮）することだと思います。あとは、はてなブログの使わない機能を無効にするのと、ブログカードを貼りすぎないことくらいでしょうか。
画像の最適化
アイキャッチ（ロゴ）画像をGoogleの画像圧縮Webサービス（Webアプリ）のSquooshでPNGからWebPに変換し、Dropboxに保存した。
ｋ本的に無料ソフト・フリーソフト｜Squoosh の使い方
些細な日常｜Dropboxの共有リンクと直リンクの変更について
- 画像の圧縮（PNG、JPEG）はWindows用ソフトのVoralent Antelopeを使用した。
また、PNG画像の最後の仕上げにWindows用ソフトのPNGGauntletで圧縮した。
Vector｜「Voralent Antelope」 - 画質の劣化なしにJPEG/PNGのファイルサイズを縮小できる、簡単操作の最適化ソフト
窓の杜｜PNGイメージの品質を損なわずにファイルサイズのみ削減する「PNGGauntlet」
- 画像のリサイズ（拡大、縮小）はWindows用ソフトのRalphaを使用した。
Vector｜「Ralpha Image Resizer」 - 多彩な補間アルゴリズムを搭載した、高速・高機能な画像一括変換ソフト
機能の無効化
- はてなブログで無効にした機能
ソーシャルパーツ（シェアボタン）、はてなスター、はてなブックマークコメント、パンくずリスト、プロフィール、コメント欄、はてなブログタグのリンク
- はてなブログProで無効にした機能
はてなによる広告、ヘッダ、フッタ
CSSの最適化
- デザインテーマのMinimalism（アップデート前のデザイン）をカスタマイズしてCSSNANOで圧縮、デザインCSSに記述した。
JavaScriptの最適化
- JavaScriptのURLから「https:」と「type="text/javascript"」を省略した。
海外SEO情報ブログ｜JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法
- 外部ファイルのJavaScriptにdefer属性をつけて非同期で読み込むようにした。
わくわくBank｜スクリプトの非同期読み込み(async, deferの違い)
- defer属性をつけたJavaScriptは、読み込んでもHTMLの読み込みを止めない（ブロックしない）
ため、head部分にJavaScriptを設置した。
Qiita（@sadahry）｜自作JSの読み込みはbodyの最後に書いたほうがいいのに、なんで外部ライブラリはheadにあるんでしょうか？
- このブログ専用のJavaScriptを「<script type="module"> ～ </script>」で囲んでフッタの一番最後に設置した。
NER｜ライブラリ以外はとりあえず type="module" にしよう
- jQueryのコードをネイティブなJavaScript（Vanilla JS）に書き換えた。
そのほか
- link要素（Preload）を利用した先読み
近江通信｜【技術小話】「.webp」をResource HintsでPreloadさせることは正しいか
よっし～ずウェブサービス【Yws】｜webサイト高速化にプリロード（preload）する意味はある？
参考になるブログ
本記事では、無料はてなブログでのページ表示速度を本気で上げるために私が実施している軽量・高速化テクニックを書いています。高速化テクニックが訪問者全員が口を揃えて「ぜひやりたい！」というな内容だと全く思っていませんが、興味があれ…
koshishiraiまとめ
はてなブログをスピードアップするためにいろいろやってみましたが、はてなのサーバーやはてなのJavaScript、はてなブログ無料版の広告が重すぎてどうにもできませんでした...。
