Blogger

Bloggerの読み込み速度向上

読み込み速度を向上させるために行ったことをまとめておきます。


この改善ではChrome DevToolsのAuditsのスコアと指摘を参考にしています。

Blogger

デフォルトで読み込むスクリプトとCSSをブロックします。

Vaster2

標準でレスポンシブ対応のメニュー機能が付いていますが、使わないので撤去します。メニューが欲しくなったときはMDLのメニューを使うことにします。

以下のコードをテーマ（旧名称テンプレート）の中から探し、削除もしくは、コメントアウトします。

<!--レスポンシブメニューのためのjavascriptコード-->
<script type='text/javascript'>
 /*<![CDATA[*/
$(function(){
if ($(window).width()<900) {
    $('nav').css('display','none');
    $('.button-toggle').on('click', function() {
        $('nav').slideToggle();
    });
 }
});
 /*]]>*/
</script>

続いてメニュー表示のために<head></head>内で読み込まれていたjQueryを撤去します。

jQueryは通常1つしか読み込まないもののようですが、Vasterではページ上部と下部でバージョンの違うものを2つ読み込んでいたので、これを1つにしました。上部は恐らくメニュー用で削除しても特に問題はありませんでした。

下部のものは使うので残しました。

MDL

Auditsの指摘によればMaterial Design LiteのCSSとスクリプトが圧縮されていない、とのことでした。

しかし、MDLの公式ページにはこうあります。

Just add the following <link> and <script> elements into your HTML pages (27kB gzipped)

gzippedとあるので圧縮されて配信されていると思っていたのですが違っていたみたいです。

必要なファイルをダウンロードしてGitHubに設置しました。こちらはgzipしてくれます。

ここで注意が必要なのがGoogleがホストしているMDLとダウンロードしたMDLではCSSの内容が少し違う点です。

ホスト版はiframeのスタイルがありますが、ダウンロード版にはありません。Bloggerの場合コメントボックスがiframeなのでどちらを使うかによって表示が変わります。ダウンロード版を使う場合にはiframeの幅を自分で調整する必要がありました。

icon font

VasterではFont Awesomeを使うことでくっきりきれいなアイコンを表示していますが、このブログではマテリアルデザイン用にMaterial Iconsも導入しているため2つのアイコンフォントを読み込んでいました。

軽量化のためこれらをIcoMoon Appを使ってまとめました。

結果

最終的なAuditsのPerformanceスコアは87まで向上しました。PageSpeed Insightsのスコアはモバイルで64、パソコンで80と微妙な結果ですが、CSSやスクリプトの縮小はまだ実施していないのでテーマのデザインが安定したところで実施しようと思います。

コメント

まだコメントはありません。