[JS]Responsiveデザイン用のスタイルシートファイルのロードを最適化するスクリプト -eCSSential
Post on:2012年6月12日
sponsors
Responsiveデザイン用に用意した複数のスタイルシートファイルのロードを最適化する超軽量（2KB）のスクリプトを紹介します。
[ad#ad-2]
スタイルシートファイルのロードの注意点
スタイルシートファイルのローディングの最適化、あるいは優先順位をつける方法は非常に難しいです。ウェブサイトがクリーンなロードをするためには、ページレイアウトのレンダリングに必要なスタイルシートがドキュメントのhead内に配置されなくてはいけません。
もし、スタイルシートがドキュメントより後ろに配置、あるいはJavaScriptで動的に配置される場合は、ページのレンダリングと共ににスタイルシートのロードが始まってしまうので、ページの表示が遅くなります。
Responsiveデザイン用に特定のサイズや特定のデバイス用のスタイルシートを複数使用している場合は、更に注意が必要です。もし何らかの理由でスタイルシートがロードするのに長い時間を必要とするなら、ブラウザはページのレンダリングに時間がかかるでしょう。
eCSSentialとは
eCSSentialはResponsiveデザイン用にファイルをダウンロードするように設計された軽量のスクリプトです。
head内に配置し、現在の表示サイズやデバイスに必要なスタイルシートだけをロードし、ロードさせるべきではないものを決定します。また、スタイルシートはページのレンダリングをブロックしないようロードします。
[ad#ad-2]
eCSSentialの使い方
eCSSentialは基本的にhead内に記述します。
当スクリプトを外部ファイルとし、Media Queriesのように各スタイルシートのパスを指定します。
<head>
...
<script src="dist/eCSSential.min.js"></script>
<script>
eCSSential({
"all": "css/all.css",
"(min-width: 20em)": "css/min-20em.css",
"(min-width: 37.5em)": "css/min-37.5em.css",
"(min-width: 50em)": "css/min-50em.css",
"(min-width: 62.5em)": "css/min-62.5em.css"
});
</script>
</head>
eCSSentialはJavaScriptなので、スクリプトがオフのユーザーにも用意します。
<noscript> <link rel="stylesheet" href="css/all.css"> <link rel="stylesheet" href="css/min-20em.css"> </noscript>
デモでは、eCSSentialのパフォーマンスを確認できます。
ウインドウのサイズを変更した場合は、リロードして確認してください。ページの真ん中辺りの「General information」にスタイルシートファイルのロードの情報が表示されます。
sponsors
