【Blogger】ブログをスマホ用に最適化する方法 / 表示速度の高速化を計る【その3】

・その1 / 【Blogger】ブログをスマホ用に最適化する方法 / 3つの最適化パターン
・その2 / 【Blogger】ブログをスマホ用に最適化する方法 / メディア・クエリの使い方

ブログをスマホ用に最適化シリーズ最後の記事です（予定）。

スマートフォンは、電話会社の回線で通信した場合、自宅のWi-Fiなどと比べると読み込み速度が遅いので、必要のないものは外すなど、徹底的に節約して表示速度の高速化を計る必要があります。

まず、Googleのウェブパフォーマンスツール「PageSpeed Insights」で自身のサイトを分析してみましょう。

速度の基準としては最低でも60 / 100を目指しましょう。

「JavaScriptを縮小する」、「画像を最適化する」など、主にGoogleから指示された問題点を改善すれば表示速度はアップしますので、１つずつ解決していきましょう。

1・スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する

個人的に最も効果を確認できたのはこれです。
主にソーシャルメディアボタンなど、JavaScriptをはずすと表示速度の改善を体感できると思います。
どうしてもはずせない場合は、JavaScriptを「非同期」し、JavaScriptを読み込む前でもページのスクロールを可能にしましょう。

<script src='～.js'/>の中に「async」を追加するだけですが、Bloggerの場合テンプレートに入力するとエラーになるので「async='async'」と記述しましょう。

（例）

<script async='async' src='http://bloggergadgets.googlecode.com/files/related_posts_min.js' type='text/javascript'/>

非同期化すると表示されなくなってしまうものもあるので、必ずテンプレートのバックアップを取り、非同期化後は自身で確認しましょう。

Facebookの場合は以下の通り。

<script >(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

これを非同期化するには「js.async = true;」を追加。

<script >(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async = true;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.4";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

関連記事
【Blogger】Facebookなどの公式SNSボタンの軽量化に挑む

2・JavaScript/CSSを縮小する

これはJavaScript/CSSコードの無駄な改行やスペースをなくすことです。
手動だと手間がかかるので、以下のサービスを使って下さい。

JavaScriptを縮小してくれるサービス
■Javascriptcompressor
「Paste your code: 」に縮小したいJavaScriptコードを入力→「Compress」クリック→「Copy:」に出力されたコードをコピー

CSSを縮小してくれるサービス
■CSS Compressor
「CSS Compressor」に縮小したいCSSコードを入力→「Compression Level:」でレベルを選択→「Compress」クリック→「Compressed JavaScript:」に出力されたコードをコピー

■Compress HTML
「HTML Compression Tool」に縮小したいCSSコードを入力→「Compress HTML」クリック→「New Compressed HTML」に出力されたコードをコピー

3・画像を最適化する

画像の容量を小さくすることです。

これは以下のサイトを使えば簡単にできます。

・Tiny Png
「Drop your .png or .jpg files here!」をクリックして容量を小さくしたい画像を選択。その後画像の軽量化が自動で始まるので、終了したら「Download」をクリック。

以上で「ブログをスマホ用に最適化する方法」シリーズは終了です。

楽しみつつカスタマイズシてみてください。

Related Posts