昨今、表示の速さは検索エンジンが細かく評価するようになりました。
ページを表示する際に必要なスタイルだけ読み込み、重要でないスタイルは後で読み込むようにしたいとき、以下のサンプルを使います。
先に読み込みが必要なCSSはインラインで読み込む。
<style type="text/css">
.demo_class {
color:#red;
}
</style>重要でないCSSは、例えば「demo_styles.css」いうファイルに記載して以下のように読み込みます。
<link rel="preload" href="demo_styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="demo_styles.css"></noscript>
基本的に重要でないCSSは削除するべきなのですが、表示速度を優先にする場合に、使うtipsです。
