Bloggerの読み込み速度向上（2）
新たに行った改善作業のメモです。
以前にも読み込み速度向上のための作業を行いましたが、続きです。
今回やったこと
CSS、JavaScriptの縮小
使用したツールは別の記事にまとめましたが、コメントアウトしていた部分が多かったこともあってかなりの縮小に成功しました。
Bloggerカスタマイズで役立つリンク集CSS optimizerは縮小するだけでなく最適化もしてくれるので、よりコンパクトになります。
テーマのHTML
ブログのトップページでは使わないCSSやJavaScriptの読み込みを止め、投稿ページや静的ページでのみ読み込むように変えました。
<b:if cond='data:view.isSingleItem'>
<!-- 投稿や静的ページで読み込みたいスタイルシート -->
<link href='style.min.css' rel='stylesheet'/>
</b:if><b:if cond='data:view.isSingleItem'>
<!-- 投稿や静的ページで読み込みたいスクリプト -->
<script src='script.min.js'/>
</b:if>このブログではコードをハイライト表示する「highlight.js」や画像のライトボックスを表示する「Luminous」が該当します。どちらも投稿ページ等でしか使っていません。
画像の最適化
関連記事のデフォルト画像をSVGにしました。PNGよりも綺麗でファイルサイズは小さくなります。
また、通常の画像の場合も画面の解像度に応じて画像が切り替わるようにしました。
結果
ここまで行った上での各種ツールによる測定結果です。
ChromeのAudits（監査ツール）
パフォーマンススコアはトップページで91まで改善しました。前回は87だったので、5ポイントの上昇です。（投稿ページのスコアは86。前回は測ってない）
PageSpeed Insights
モバイルで67、パソコンで83という結果でした。前回が64と80という結果だったので改善はしています。GTmtrix
GTmtrixのスコアはPageSpeed ScoreがA(95%)、YSlow ScoreがB(82%)でした。前回は測っていなかったので比較はできませんが、A評価とB評価なら悪くないと思います。ですが、できることならどちらもA評価にしたいです。
まとめ
PageSpeed InsightsとGTmtrixのYSlow Scoreの結果はいまいちですが、体感としては十分速くなったので取り敢えず良いかな、と思います。
新規コメント