<7つの裏技>

1. HTMLファイルにCSSやJavaScriptコードのインライン、埋め込みを避ける
2. Asyncで非同期JavaScriptをダウンロードする
3. DOM上での操作を避ける
4. 複数のCSSやJavaScriptファイルを１つにする
5. JavaScriptの前にCSSをダウンロードする
6. 非同期の読み込み技術を使用する
7. @importの使用を控える
8. ２NFに相談する

　ウェブサイトの最適化はどんなプログラマーも注目するテーマでしょう。最適化すればウェブサイトのパフォーマンスが改善され、読み込み時間を減らすだけでなく、Googleなどの検索エンジンに優先的に表示されるようになります。

　実際にOreillyの統計によると、

・Bing:　ベージが平均より２秒遅くなった場合、4.3％の利益のロスが発生する。
・Google：読み込みが400ミリ秒以上かかる場合、ユーザー一人当たり0.59％の検索結果が表示されなくなる。また、検索結果の表示優先度はページ速度を重視して決定される。
・Yahoo!：読み込みが400ミリ秒以上かかる場合、総トラフィックの5-9％が制限される。

などという結果もでています。

　しかし、ウェブサイトの最適化は正しい手順で行うことが必要となり、且つ使用しているフレームワークにも依存します。今回はHTML/CCS/JavaScript の最適化の際に使える裏技をご紹介します。

1.　HTMLファイルにCSSやJavaScriptコードのインライン、埋め込みを避ける

CSS／JavaScriptを挿入するには以下の３つのやり方があります。

インライン

Inline CSS

埋め込み(embed)

Embedded CSS

Embedded JS

外部ファイルの使用

External CSS

External JS

　インラインや埋め込みはサーバーへの接続を減らしますが、HTMLファイルのサイズを大きくしてしまいます。そのため、これらの方法はCSS・JSコードが少ない場合のみ有効です。一方外部ファイルの使用は、その他ほとんどの場合で適応でき、ソースコード管理が簡単になるだけでなく、ブラウザはこのファイルにキャッシュを保存することができるため、最も一般的な方法となっています。

2.　Asyncで非同期JavaScriptをダウンロードする

　非Async属性でJavaScriptをダウンロードする場合、ブラウザはHTMLファイルのロードを中断し、JSのロードと作動を優先します。

　以下の例において、script.jsファイルが作動する際、内部のテキストを変更するSecondのIDを持つh1タグが見当たりません。これは、ブラウザがh1タグをまだロードしていないためです。結果としてJSはエラーを表示し、内容は変更されません。

　Async属性でJavaScriptをダウンロードすれば、ブラウザがJSを優先せず、JSとHTMLを並行してロードします。そして、HTMLのロードが完了して初めてJSが起動されます。

以下のようにHTMLの内容は変更され、JSのエラーもでません。

しかし、各ファイルの作動する順番が変わる場合もあるので、ウェブサイトにAsyncを使用する前には何度かテストが必要です。

3.　DOM上での操作を避ける

　以下の例を見てみましょう。DOMでは２通りの操作があります。

１

２

　上記の２通りのパフォーマンスを比べると、DOMでの操作はウェブサイトの速度に大きな影響を与えることがわかります。

4.　複数のCSSやJavaScriptファイルを１つにする

　CSSやJavaScriptファイルを小さく分けると、コードの管理をしやすくなる一方で、ブラウザで読み込む時に多くの接続が必要になってしまいます。

　通常、リソースを読み込む場合、ドメイン一つあたり同時に４から８の接続が限界になります。

　つまり、簡単に考えると、10のCSSファイルと10のJSファイルを持つウェブサイト1ページがあれば、最大3回の接続を行って20ファイル全てを読み込みます。ただし、実際はファイルのサイズの影響を受けて結果は異なりますが、同時接続の制限は変わりません。

以上のことより、必要な接続を減らし、可能な限りページ読み込み速度を上げるには、CSSやJSファイルをまとめることは大切です。

5.　JavaScriptの前にCSSをダウンロードする

　ページの読み込み時、<script/>タグがあるとブラウザはHTMLの読み込みを止め、JavaScriptファイルの読み込みと作動を優先してしまいます。これによってHTMLファイルロードが中断されてしまいます。

　このため、JavaScriptファイルが特別な処理をするわけでないのであれば、JavaScriptは最後にロードしましょう。反対に、CSSはページの最初にセットし、ページを読み込んでいる間にCSSなしの画面をユーザーに見せてしまうことないようにしましょう。

6.　非同期の読み込み技術を使用する

　FacebookやTwitterなどのSNSへのシェアボタンのコードはおなじみでしょう。このコードにはウェブサイトにCSS／JSファイルをダウンロードすることが必要ですが、これがページの読み込み時間を遅らせる要因にもなります。

　外部JavaScriptファイルを非同期ロードするため、JavaScriptを使用する場合(例：Google Analyticsから)

Iframeを使用する場合(例：Facebookから)

7.　@importの使用を控える

CSSファイルをウェブサイトに挿入するには２つ方法があります。

External CSS Link

このやり方ではブラウザは同時に複数のCSSファイルをロード可能です。

CSS Import via external or inline style

@import file style.cssを使用した場合、オリジナルのCSSファイルのロード終了後にのみ読み込み可能で、ブラウザの同時にロードする機能を制限する。

8.　２NFに相談する

　HTML、CSS、JavaScriptを使った開発はソフトウェア開発の定番です。弊社2NFでは、開発経験の豊富さや製品の品質の高さを評価していただき、多くのお客様にご相談いただいております。ウェブサイトの新規作成から、既存のサイトの更新や改善まで弊社にお任せください。無料カウンセリングも行っていますので、お気軽にご利用ください。