今回は改善できる項目の内、「レンダリングを妨げるリソースの除外」についての改善施策をご紹介します。
レンダリングを妨げるリソースの除外をするということはそもそもどういうことでしょうか。
上記の画面より詳細を開いてみましょう。
“ページの First Paint をリソースがブロックしています。重要な JavaScript や CSS はインラインで配信し、それ以外の JavaScript やスタイルはすべて遅らせることをご検討ください。”
と記載されています。
First Paintとはスクロールせずに最初に表示される部分、いわゆるファーストビューのことですね。
そして、リソースするブロックとはCSSやJavaScriptのことを指します。
つまり、最初に表示される部分に必要なものだけ先に読み込んで、それ以外はあとで読み込んだ方が早く表示出来るということです。
では続いて具体的な方法を見ていきましょう。
1.WordPressの場合であればプラグイン「Autoptimize」を使用する
CSSやJavaScriptのどれを先に読み込んでどれを後回しにするのかという判断はサイトの設計そのものに影響を及ぼすため、コーダーやフロントエンドエンジニアなどの協力が不可欠で一般的に難易度は上がります。
ただ、WordPressであれば「AUTOPTIMIZE」という便利なプラグインがあります。
こちらのプラグインはCSS、JavaScriptの配信を最適化してくれる便利なプラグインです。
JavaScript コードの最適化
JavaScript コードの最適化とJS ファイルを連結するにチェックを入れます。
CSSの最適化
CSS コードを最適化、CSS ファイルを連結する、インラインの CSS も連結にチェック。
CSS のインライン化と遅延にチェックを入れると、ファーストビューだけのCSSを入力することでさらに高速化が望めます。
Critical Path CSS Generator（jonassebastianohlsson.com）などのツールを使ってファーストビューで使用するCSSだけを取得可能です。
ただし、メンテナンス性は落ちてしまうので状況により使用します。
HTMLの最適化
こちらのプラグインを使用する場合はHTMLコードも最適化してしまいましょう。
これらの設定で「レンダリングを妨げるリソースの除外」という部分については改善が見込めます。
続いてWordPress以外での対応を見ていきましょう。
2. CSS 配信の最適化
CSS の抽出とインライン化
先ほどご紹介したCritical Path CSS Generator（jonassebastianohlsson.com）などのツールを使ってファーストビューで使用するCSSだけを取得。
<head>
<meta charset=”UTF-8″>
<style> /* ファーストビュー用のCSS */ </style>
<link rel=”stylesheet” href=”../style.css”>
<title>無題ドキュメント</title>
</head>
取得したCSSをインラインでheadタグ内に直接記述します。
CSS を非同期に読み込む
linkタグのrel属性の値を rel=”preload” に変更し、as=”style” を追記。
<link rel=”preload” href=”../style.css ” as=”style”>
preload はURLのコンテンツを先読みするための指定でレンダリングブロックを回避しながらCSSを読み込むことが可能になります。
ただし、IEやFirefoxは未対応なのでoadCSS などのpolyfillを使用する必要があります。
polyfillとは最近の機能をサポートしていない古いブラウザーで、その機能を使えるようにするためのコードのことです。
もしくはpreload 機能の代用としてloadCSSというプラグインを使用する方法などもあります。
3. JavaScript 配信の最適化
JavaScriptをインライン化する
例えば以下のようにJavaScript を読み込んでいるとします。
<script type=”text/javascript” src=”../script.js”></script>
それをページ内でインラインで読み込むように変更します。
<script>
/* script.jsの中身 */
</script>
ただし、数行程度の小さいJavaScriptに限ります。
大量のJavaScriptをインラインで読み込むことは推奨されていません。
JavaScript を非同期にする
asyncを使用
<script type=”text/javascript” src=”script.js” async></script>
こちらのようにasync属性を追加します。
基本的にこれで非同期読み込みが可能になります。
ただファイルの読み込み順などが考慮されず、依存関係があるファイルではエラーが出る場合があります。
deferを使用
<script type=”text/javascript” src=”script.js” defer></script>
先ほどとは違い、deferを記載します。
こちらは読み込む順番が維持されるので
- 他のスクリプトファイルに依存されるjQueryなど
- 他のスクリプトファイルに依存するプラグインなど
- DOM要素をいじる場合
などにはdeferの方が良いでしょう。
まとめ
いかがでしたでしょうか。
WordPressであればプラグインを使用、そうでない場合はエンジニアさんとの協業が必要になってきます。
リソースの設計は後から変更すると労力がかかるので、可能であれば設計段階からページスピードを意識した構成に出来ればより効率的に開発を進めることが可能になります。
