【SEO対策】CSSの読み込み方の変更で高速化の記事で、




ブラウザとサーバ間のデータ転送のやり取りを減らすべく、


<html>
<head>
<title>sample</title>
</head>
<body>
コンテンツ
</body>
<link href="sample.css" rel="stylesheet" type="text/css">
</html>

上記のように外部CSSファイルでレイアウトの定義をしていたものをcms:moduleに書き換えて、

<html>
<head>
<title>sample</title>
</head>
<body>
コンテンツ
</body>
</html>
<!-- cms:module="html.stylesheet" --><!-- /cms:module="html.stylesheet" -->

のようにすることで転送するファイル数を減らすことを紹介した。


更に【SEO対策】HTMLの圧縮の記事に記載しているようにHTMLの記述から不要なスペースや改行コードを減らして、【SEO対策】最終産物のHTMLのキャッシュで高速化の方法でHTMLキャッシュを作成すれば尚良いのだけれども、本日の内容とずれるのでここまでにしておく。




今回の記事で紹介したいのが、cms:moduleにCSSの記述をするということを記載したが、モジュールに記載するとデザインの修正が何かと面倒になるので、最近私が行っている方法を紹介する。

共通箇所はHTMLモジュールで管理する - SOY CMSを使ってみよう


root
└── site
            ├── .module
            │       └── parts
            │                    └── stylesheet.php
            ├── css
            │       └── sample.css
            ├── files
            ├── im.php
            ├── image
            ├── index.php
            └── js
                      └── sample.js

上記のファイルの構成の際に、

<html>
<head>
<title>sample</title>
</head>
<body>
コンテンツ
</body>
</html>
<!-- cms:module="parts.stylesheet" -->
<link href="/site/css/sample.css" rel="stylesheet" type="text/css">
<!-- /cms:module="parts.stylesheet" -->

上記のようにcms:moduleタグの間にlinkタグをはさみ、cssファイルを読み込ませるようにしておく。


モジュール(./module/parts/stylesheet.php)の記述を、

<?php /* this script is generated by soyshop. */
function soycms_stylesheet($html,$htmlObj){

ob_start();
echo "<style>";
$css = file_get_contents(dirname(dirname(dirname(__FILE__))) . "/css/sample.css");
/** CSSの圧縮に関する記述 **/
$css = preg_replace( '!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $css); 
$css = str_replace(': ', ':', $css);
$css = str_replace( array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $css);
$css = str_replace(";}", "}", $css);
/** CSSの圧縮に関する記述 **/
echo $css;
echo "</style>";

ob_end_flush();

}
?>

上記のようにすることで、SOY CMSを介さない場合は外部CSSファイルを読み込み、SOY CMSを介して出力する場合は、圧縮されたCSSの記述がインライン化された状態で出力される。

CSSの記述をPHPで制御出来るようになったので、ページによってどれくらいのルールセットを読み込めるか?を出力されるページ毎に制御できるようなるので、転送量を更に減らす事が楽になった。

CSS の基本 - ウェブ開発を学ぶ | MDN


関連記事

【SEO対策】Core Web Vitals