
PageSpeed Insightsで計測すると、cssを縮小しろ、との指導。外部cssファイルの読み込みに時間がかかるとおっしゃる。アドバイスのページでは、小さなcssデータはインライン化しろ、でも大きなデータはインライン化するな、とおっしゃる。お前はオレに、どうしろというのだ?
「じゃあ、htmlテンプレートの上部にスタイルシートのコードをまとめて入れちゃえ!」と考えた。html要素に直接スタイル書くインラインでもなく、外部ファイル読み込みでもないから、名付けて半インライン化。テンプレートから全部のページを自動生成するSIRIUSだからこそ出来る裏ワザ。ある程度コードの知識(ググればわかります)があることが前提。
やり方
- htmlテンプレートの編集画面で、スタイルシートの読み込みコードをぜんぶ消す。たとえば<link rel="stylesheet" href="<% pageDepth %>styles.css" type="text/css" />など。
- cssのテンプレートを開き、必要なコードをコピー。
- htmlテンプレートにペーストする。
- ペーストしたコードを<style>と</style>で囲む。
- 普段使わないcssコードは極力削除。(個別にスタイル割込で対応)
これをやって、PageSpeed Insightsでのエラー表示は、消えた。