はてなブログを高速化するためにおこなった、大きくわけて4つのことについて、まとめておきます。なお、ブログのページの表示速度を改善するために一番効果があるのは、画像を最適化(圧縮)することだと思います。あとは使わない機能を無効にすることでしょうか。
画像の最適化
- PNG画像はTinyPNG、JPEG画像はOptimizilla(JPEG 圧縮)で圧縮しました。
- はてなフォトライフの設定は、画像サイズをオリジナルサイズの画像を保存、画質を100%としています。
- 最近は、PNGとJPEGをロスレス(品質劣化なし)で最適化(圧縮)する、Windows用ソフトのVoralent Antelopeを使っています。
Vector 新着ソフトレビュー 「Voralent Antelope」 - 画質の劣化なしにJPEG/PNGのファイルサイズを縮小できる、簡単操作の最適化ソフト
機能の無効化
JavaScriptの最適化
- JavaScriptの外部ファイル化
JavaScriptをClosure Compiler Serviceで圧縮、外部ファイルにして、Dropboxに保存し、読み込ませるようにしました。
FOXISM - はてなブログのcssをDropboxに保存して編集しやすくしよう
- JavaScriptの読み込みの最適化
JavaScriptのURLから「https:」と「type="text/javascript"」を省略しました。
海外SEO情報ブログ - JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法
- JavaScriptの非同期読み込み
外部ファイル化したJavaScriptにdefer属性をつけて非同期で読み込むようにしました。
(はてなブログに自動的に組み込まれるjQueryを強制的に先に読み込ませたり、「addEventListener("DOMContentLoaded"~」は使わないようにしました)
ゆっくりと… - scriptのdefer/asyncを理解し、ページの高速化方法を探る
- JavaScriptの読み込み位置
defer属性をつけたJavaScriptは、読み込んでも、HTMLの読み込みを止めない(ブロックしない)ため、ヘッダにJavaScriptを設置しました。
ContentLoaded.com - A playground of loading resources into a web page
CSSの最適化
- デザインテーマのカスタマイズ
Minimalism(アップデート前のデザイン)のカスタマイズしたCSSをCSSNanoで圧縮、デザインCSSに記述しました(head部分に埋め込むことまではしませんでした)。
Google Developers - リソース(HTML、CSS、JavaScript)を圧縮する
そのほか
- リンクをマウスオーバーしたときにページを先読み(instant.page)
コリス - スマホ対応の優れもの!クリック・タップの直前にページを先読み、高速表示する超軽量スクリプト -instant.page
あまり効果は感じられませんが、DNSプリフェッチとinstant.pageを設定しています。
まとめ
ブログをスピードアップするためにいろいろやりましたが、JavaScriptを使わない素の状態が一番速いのかなと思ったりしています。それと、やっぱり広告の表示が一番重い...。