[JS]Responsiveデザイン用のスタイルシートファイルのロードを最適化するスクリプト -eCSSential

Responsiveデザイン用に用意した複数のスタイルシートファイルのロードを最適化する超軽量(2KB)のスクリプトを紹介します。

サイトのキャプチャ

eCSSential -GitHub

スタイルシートファイルのロードの注意点

スタイルシートファイルのローディングの最適化、あるいは優先順位をつける方法は非常に難しいです。ウェブサイトがクリーンなロードをするためには、ページレイアウトのレンダリングに必要なスタイルシートがドキュメントのhead内に配置されなくてはいけません。
もし、スタイルシートがドキュメントより後ろに配置、あるいはJavaScriptで動的に配置される場合は、ページのレンダリングと共ににスタイルシートのロードが始まってしまうので、ページの表示が遅くなります。

Responsiveデザイン用に特定のサイズや特定のデバイス用のスタイルシートを複数使用している場合は、更に注意が必要です。もし何らかの理由でスタイルシートがロードするのに長い時間を必要とするなら、ブラウザはページのレンダリングに時間がかかるでしょう。

eCSSentialとは

eCSSentialはResponsiveデザイン用にファイルをダウンロードするように設計された軽量のスクリプトです。
head内に配置し、現在の表示サイズやデバイスに必要なスタイルシートだけをロードし、ロードさせるべきではないものを決定します。また、スタイルシートはページのレンダリングをブロックしないようロードします。

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」にスタイルシートファイルのロードの情報が表示されます。

top of page

©2017 coliss