CSSインライン化
◯やりたいこと
複数あるCSSファイルの中身だけを取り出して、
HTMLに吐き出す
◯方法
WordPressのfunctions.phpに関数を追加する
◯記述内容
・wp_add_inline_style($trigger, $data)
dataにCSSコードを指定することでインラインに吐き出せる
・get_stylesheet_uri()
使用中テーマのCSSを取得する
CSSインライン化 記述例
function put_inline_style() {
wp_register_style( 'style', false );
wp_enqueue_style( 'style' );
// テーマスタイルの読み込み
$css = file_get_contents( get_stylesheet_uri(), true );
// 他にCSSファイルが複数存在する場合もここで読み込み、for loopなどで対応
wp_add_inline_style( 'style', $css );
}
add_action( 'wp_enqueue_scripts', 'put_inline_style' );
JavaScriptのDeferまわり1/2
◯やりたいこと
JavaScriptロード時のレンダリングブロックを最小限にする
◯方法
JavaScriptタグにdeferを付与する
◯対象
Googleの広告タグ以外のScript
◯記述内容
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
JavaScriptのDeferまわり2/2
◯懸念事項
Deferロードしたライブラリと依存関係のあるインラインScriptが存在する場合、
インラインScriptが先に実行されてしまいエラーとなる
◯たとえば
jQueryに依存したカルーセル・スライダーなどのScriptを読み込み
インラインで初期化処理をしている
◯解決策
<script defer>
window.addEventListener("load", () => {
$(document).ready(function() {
$("a .page-numbers").each(function() {
var replace = null;
var replace = $(this).attr('href').split('?');
var replace = $(this).attr('href', str[0])
});
});
})
</script>
トラブルシュート
◯Defer属性を付与したらスタイルが崩れる
崩れた内容を調査し、どのScriptが影響したかを特定する
→Deferが原因でStyleが崩れることはあまりなく、ほとんどはそれに付随したインライン処理によるものが多い
CSS&JavaScript Tips
By ohoshi
CSS&JavaScript Tips
- 130