Webサイトの読み込み速度を上げるためのJavaScript / css の最適化

Speeding Subway # 2 By: Randy Pertiet

Webサイトの読み込み速度を上げるため、JavaScriptとcssを最適化する方法を紹介します。

cssやJavaScriptに改善の余地がある場合は、以下のサイトにURLを入力すると「次のCSS 配信を最適化してください」や「レンダリングブロック JavaScript を削除してください」と表示されます。

JavaScript / css の最適化
  1. JavaScript / css のインライン化
  2. JavaScript / css の圧縮
  3. JavaScript / css の読み込み位置の変更

JavaScript / css のインライン化

JavaScript / css のインライン化とは、小さなコードを外部ファイル化せずにそのまま、HTML文書の一部として埋め込むことです。

例えば、以下の様なコードがあります。

HTML
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="./style.css" type="text/css">
    </head>
    <body>    
        <h1 class="sample1">タイトル</h1>
    </body>
</html>
style.css
.sample1{
    border: 1px dashed #00A8FF;
    border-left: 5px solid #00A8FF;
    background-color: #eee;
    padding:5px;
}

このような場合、外部ファイル化することでファイルのダウンロードするため余計にネットワークへの負荷がかかります。

そのため、以下の様に変更を行いネットワークへの負荷を軽減します。

HTML
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
        .sample1{
            border: 1px dashed #00A8FF;
            border-left: 5px solid #00A8FF;
            background-color: #eee;
            padding:5px;
        }
        </style>
    </head>
    <body>    
        <h1 class="sample1">タイトル</h1>
    </body>
</html>

これはあくまで小さなコードのみで行える方法であり、数百行もある大きなコードをインライン化するとページの容量が増え、かえってパフォーマンスを落としてしまうため注意が必要です。

大きなコードのインライン化を行うなどして問題がでるような場合は、上記で紹介した「PageSpeed Insights」が「ページのスクロールせずに見える範囲が大きすぎる」と警告してくれますので、インライン化した後はチェックをしてみて下さい。

※今回はcssでのインライン化を紹介しましたが、JavaScriptでも同様の方法でインライン化を行うとパフォーマンスが向上します。

JavaScript / css の圧縮

JavaScript / css の圧縮はその名のとおり、JavaScript / css のコード量を少なくすることです。

コード量が少なくなれば、その分容量が減り読み込みが速くなります。

下記のサイトを使用すると簡単にコードの圧縮が出来ます。

使い方は簡単で、コードを貼り付けてファイルタイプを選択し、実行するだけです。
YUI

実際に以下のcssを圧縮してみました

css(圧縮前)
.sample1{
    border: 1px dashed #00A8FF;
    border-left: 5px solid #00A8FF;
    background-color: #eee;
    padding:5px;
}
css(圧縮後)
.sample1{border:1px dashed #00A8FF;border-left:5px solid #00A8FF;background-color:#eee;padding:5px;

コードの圧縮を行うと改行などは、削除されてしまうため人間が理解しずらいコードとなってしまいます。

容量が減るため、読み込みの速度は向上し、コードが難読化するためセキュリティの観点からも良くなります。

ただし、コードの保守性は著しく落ちるため保守用に圧縮前のコードを別に管理することをお勧めします。

JavaScript / css の読み込み位置の変更

JavaScript / css の読み込み位置もパフォーマンスに影響を及ぼします。

HTML文書は上から順にレンダリング(ブラウザにHTML要素を表示すること)を実行して行きます。

しかし、以下の図の様にJavaScriptが実行されるとレンダリングを停止させ、JavaScriptの処理が完了した後に再度レンダリングを行って行きます。

そのため、あらかたのレンダリングが完了した後にJavaScriptを処理させたほうが、ページの表示速度が早く見えます。

またcssを最後に読み込ませると、再度HTML要素の装飾を行う必要があるため再レンダリングが発生して画面にHTML要素を表示する時間が遅くなります。

css_js

そのため、JavaScriptは<body>の直前 / 直後のどちらかに配置し、cssは<head>の中に記載すると最も効率良くレンダリングが行えます。

※上の図では、JavaScriptを<body>の直後に置いていますが、直前でも問題はありません。

divider

Trackback URL

http://webnonotes.com/web/speed/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>