ブラウザキャッシュを有効にしつつCSSファイルも更新させる方法【サイト軽量化＆高速化計画】
途中脱線しましたが（笑）speed insightsに言われるがままサイト表示速度アップ＆軽量化計画の続きですw
今回はついに（？）「ブラウザキャッシュを利用する」に挑戦した際のアレコレについて晒します。
ブラウザキャッシュを利用する
まあgoogleさんの説明って分かりにくいんですよね（冒頭からディスリw）
しかもキャッシュを設定すると「古いページを見に行くからなんちゃらかんちゃら●□@;*〜」とか意味不明なことばかり書かれてるし（理解力ゼロ）！ つうかこれあえて設定して大丈夫なの？
としばらく放置していたのですが、.htaccessに以下の記述を追記すれば良いという情報を見つけましたw
■.htaccess
<ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 30 minutes" ExpiresByType text/html "access plus 10 seconds" ExpiresByType image/jpg "access plus 10 seconds" ExpiresByType image/jpeg "access 10 seconds" ExpiresByType image/gif "access plus 7 days" ExpiresByType image/png "access plus 7 days" ExpiresByType text/css "access plus 7 days" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/javascript "access plus 7 days" ExpiresByType application/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 month" </ifModule>
speed insightsは「一週間以上」の期間を推奨してますが、画像とか特にcssファイルはほぼ毎日いじるので（笑）なるべく一週間以内、つうか10秒単位に設定したいw
※上書きの場合の話であって、新規アップする分には即時反映されます
というわけでデフォルトは30分、頻繁に更新しそうなjpg画像とcssファイルと一応htmlファイルは10秒（笑）、その他ファイルを一週間、一ヶ月に設定してみました。
これをやるとスコアがPC84/モバイル80にまで上がり、スコア部分の色が黄色から緑になりましたw
多分緑色＝合格ラインかと・・・w
しかし「修正を考慮」欄にしつこく残る「ブラウザキャッシュを利用する」。。しかし一週間未満に設定した10秒キャッシュのcssとjpg画像のみ指摘されていたのみで、後は指摘されませんでした。
まあトップページにはjpg使ってないからここは目をつぶるとして（笑）、cssをどうしたもんか。。
同じようなことでモヤる人がやはり世の中にはいるようで、調べてみると「cssファイルをブラウザキャッシュから除外する」というページがいくつかありました！
CSSファイルをブラウザキャッシュから除外する方法
答えは一言でいうと、cssファイルの読み込みタグのお尻にパラメーターをつける。サーバー上で別名ファイル扱いにしてしまえばいいんですね。（あれ、二言？）
具体的にはcssファイル読み込みタグ部分の記述を以下に書き換えればOK
※cssがstyle.cssの場合です
■header.php
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" />
■サーバー上のhtmlソース
<link rel="stylesheet" type="text/css" media="all" href="https://caicadesign.com/wordpress/wp-content/themes/hoge/style.css?1405321397" />
ただ、パラメーターがつくのはhtml上に読み込みタグで指定されたファイルのみのようです。
style.css内で@importで別cssファイルを読み込ませている場合はimportされたファイルにはパラメーターはつかないようです。
私はこれを機に、トップページのcssを2枚からstyle.cssにまとめました。
まとめたことで読み込み速度が上がってまたスコアは上がったのですが、「修正を考慮」に新たに「CSSファイルを圧縮する」項目が出てしまい、1枚にまとめたstyle.cssの中身を削れ、と指摘されたのですが（どないせえちゅーねんw）スコア上がってるのでそれはスルーしていますw
更新性等を考えてやはりstyle.cssに集約できん！という場合はこのような書き方ができます
■header.php
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(). '/css/blog.css?'. filemtime( get_stylesheet_directory().'/css/blog.css'); ?>" /> <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri().'/css/common.css?' . filemtime( get_stylesheet_directory() . '/css/common.css'); ?>" />
■サーバー上のhtml
<link rel="stylesheet" type="text/css" media="all" href="https://caicadesign.com/wordpress/wp-content/themes/hoge/css/blog.css?1405106308" /> <link rel="stylesheet" type="text/css" media="all" href="https://caicadesign.com/wordpress/wp-content/themes/hoge/css/common.css?1404971148" />
これで.htaccessにcssファイルの期間を10秒から1週間に設定できます！
これで結構精神的にも（笑）スッキリしたのですが、ヘッダー内に輝くjqueryどもの読み込みタグども。。。これ消したい。。
実は最もjs記述をヘッダーから追い出す作業が大変だったので、後日何度かに分けて綴りたいと思いますw