軽量化・表示高速化

CSS(スタイルシート)の縮小、半インライン化

css3

PageSpeed Insightsで計測すると、cssを縮小しろ、との指導。外部cssファイルの読み込みに時間がかかるとおっしゃる。アドバイスのページでは、小さなcssデータはインライン化しろ、でも大きなデータはインライン化するな、とおっしゃる。お前はオレに、どうしろというのだ?

「じゃあ、htmlテンプレートの上部にスタイルシートのコードをまとめて入れちゃえ!」と考えた。html要素に直接スタイル書くインラインでもなく、外部ファイル読み込みでもないから、名付けて半インライン化。テンプレートから全部のページを自動生成するSIRIUSだからこそ出来る裏ワザ。ある程度コードの知識(ググればわかります)があることが前提。

やり方

  1. htmlテンプレートの編集画面で、スタイルシートの読み込みコードをぜんぶ消す。たとえば<link rel="stylesheet" href="<% pageDepth %>styles.css" type="text/css" />など。
  2. cssのテンプレートを開き、必要なコードをコピー。
  3. htmlテンプレートにペーストする。
  4. ペーストしたコードを<style>と</style>で囲む。
  5. 普段使わないcssコードは極力削除。(個別にスタイル割込で対応)

これをやって、PageSpeed Insightsでのエラー表示は、消えた。

SIRIUSカスタマイザーは上位版を選択!世界最強?サイト作成ソフトSIRIUS

投稿: 更新:2018/08/20 by