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