CSSを遅延読み込みするためには、preload を使えばよいのだが、Firefox 、IEブラウザーでは動作しない。
それで、loadCSS cssrelpreload.js を併用する。
これだけだと、java script 非対応のブラウザでcss が読み込まれないのでもうひと工夫が必要。
これで完璧。
オリジナルをミニファイしてサーバーに設置する。
- https://makotoiwasaki.com/wp-content/themes/jstork_custom/library/cssrelpreload.js
functions.php に追記する。cssrelpreload.js を読み込む。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 100 );
function theme_enqueue_styles() {
wp_deregister_script( 'jquery' );
wp_register_script('jquery', 'https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js', array(), '1.12.4' );
wp_enqueue_script( 'loadCSS', get_stylesheet_directory_uri() . '/library/cssrelpreload.js', false, null, false );
}
style_loader_tag にフックし、タグ を書き換える。preload 、noscript 等。
<noscript>' . $tag . '</noscript> を入れておかないと、js が動かないブラウザでCSSが読み込まれない。
//Convert CSS scripts for use with loadCSS library - https://github.com/filamentgroup/loadCSS
function loadCSS_parser( $tag ){
//If not a stylesheet, do not edit
if ( FALSE === strpos( $tag, "rel='stylesheet'" ) ) return $tag;
//Set a variable which will hold the default script for a '<noscript>' tag
$noscript = '<noscript>' . $tag . '</noscript>';
//Change 'rel' value from 'stylesheet' to 'preload'
$tag = preg_replace("/='stylesheet'/", '="preload"', $tag);
//Add 'as' and 'onload' attributes
$tag = preg_replace("/type='text\/css'/", 'as="style" onload="this.onload=null;this.rel=\'stylesheet\'"', $tag);
//Remove media attribute
$tag = preg_replace("/media='.*'/", '', $tag);
return $tag . $noscript; //Return
}
add_filter( 'style_loader_tag', 'loadCSS_parser' );
JS を遅延読み込みするには、次を追加する。
if(!is_admin()){
function replace_script_tag ( $tag ) {
if ( ( $tag, 'jquery-X-X-X.min.js' ) ) {
return str_replace( "type='text/javascript' ", 'async ', $tag );
}
return str_replace( "type='text/javascript'", 'defer ', $tag );
}
add_filter( 'script_loader_tag', 'replace_script_tag' );
}基本的に全部 defer にする。
jquery もdefer にする。async にすると動作しないプラグインがでてくる。
その他のCSS、JSも以下のように配置し直した。
wp_register_script で最後に true と設定すると、header ではなく、 footer で読み込まれるようになる。
jquery のみヘッダーで defer 読込し、その他のJSはフッターで読み込む。
jqueryを先に読み込んでおかないと機能しないプラグインJSは、依存関係を明示し、array('jquery') を付加する。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 100 );
function theme_enqueue_styles() {
wp_deregister_script( 'jquery' );
wp_register_script('jquery', 'https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js', array(), '1.12.4' );
wp_register_script( 'doubletaptogo', '/wp-content/themes/jstork_custom/doubletaptogo.js', array('jquery'));
wp_enqueue_script( 'doubletaptogo' );
wp_enqueue_script( 'loadCSS', get_stylesheet_directory_uri() . '/library/cssrelpreload.js', false, null, false );
wp_dequeue_style( 'jetpack_css' );
wp_dequeue_style( 'tiled-gallery' );
wp_dequeue_script( 'tiled-gallery' );
wp_deregister_script( 'tiled-gallery' );
wp_deregister_style( 'tiled-gallery' );
wp_deregister_script( 'wpp-js' );
wp_dequeue_style('wp-block-library');
wp_dequeue_script( 'photoswipe-lib' );
wp_dequeue_script( 'photoswipe-ui-default' );
wp_dequeue_script( 'photoswipe-frontend' );
wp_dequeue_style( 'photoswipe-lib' );
wp_dequeue_style( 'photoswipe-skin' );
wp_dequeue_style( 'toc-screen' );
wp_dequeue_style( 'whats-new-style' );
wp_deregister_script( 'jquery-arcw' );
wp_dequeue_style( 'pz-linkcard' );
if(is_singular()){
//現在の投稿本文をショートコードを展開させて取得
$content = apply_filters( 'the_content', get_post_field('post_content', get_the_ID()) );
if(preg_match('/href=(\"|\')?([^<|>|\"|\'|\n] )\.(jpg|jpeg|png|gif)(\"|\')?/', $content)){
wp_enqueue_style( 'photoswipe-lib' );
wp_enqueue_style( 'photoswipe-skin' );
wp_enqueue_script( 'photoswipe-lib', '/wp-content/plugins/lightbox-photoswipe/lib/photoswipe.min.js', array('jquery'), false, true );
wp_enqueue_script( 'photoswipe-ui-default', '/wp-content/plugins/lightbox-photoswipe/lib/photoswipe-ui-default.min.js', array('jquery'), false, true );
wp_enqueue_script( 'photoswipe-frontend', '/wp-content/plugins/lightbox-photoswipe/js/frontend.min.js', array('jquery'), false, true );
}
if(strpos($content,'lkc-content') !== false){
wp_register_style( 'linkcard', '/wp-content/themes/jstork_custom/linkcard.css');
wp_enqueue_style( 'linkcard' );
}
if(strpos($content,'tiled-gallery') !== false){
wp_enqueue_script(
'tiled-gallery',
Jetpack::get_file_url_for_environment(
'_inc/build/tiled-gallery/tiled-gallery/tiled-gallery.min.js',
'modules/tiled-gallery/tiled-gallery/tiled-gallery.js'
),
array( 'jquery' ), false, true
);
wp_enqueue_style( 'tiled-gallery', ( '/wp-content/plugins/jetpack/modules/tiled-gallery/tiled-gallery/tiled-gallery.css' ), array(), '2012-09-21' );
wp_style_add_data( 'tiled-gallery', 'rtl', 'replace' );
}
if(strpos($content,'toc_container') !== false){
wp_enqueue_style( 'toc-screen' );
}
}
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('style') );
if( !(is_single()) ){
wp_enqueue_script( 'pop-tabs', get_stylesheet_directory_uri() . '/pop-tabs.js', array('jquery'), false, true );
}
if(is_date()){
wp_register_script( 'jquery-arcw', '/wp-content/plugins/archives-calendar-widget/admin/js/jquery.arcw-init.js', array( "jquery" ), ARCWV);
wp_enqueue_script( 'jquery-arcw' );
}
wp_dequeue_style( 'shortcode' );
wp_dequeue_script( 'devicepx' );
wp_dequeue_style( 'animate' );
wp_dequeue_script( 'wp-embed' );
wp_deregister_script( 'wp-embed' );
wp_deregister_script( 'fontawesome' );
wp_deregister_style( 'fontawesome' );
wp_deregister_style( 'dashicons' );
wp_deregister_style( 'wpstatistics' );
wp_deregister_script( 'masonry.pkgd.min' );
wp_deregister_script( 'wow' );
wp_deregister_script( 'imagesloaded' );
}
if(!is_admin()){
function replace_script_tag ( $tag ) {
if ( strpos( $tag, 'jquery1-12-4.min.js' ) ) {
return str_replace( "type='text/javascript' ", 'defer ', $tag );
}
return str_replace( "type='text/javascript'", 'defer ', $tag );
}
add_filter( 'script_loader_tag', 'replace_script_tag' );
}
//Convert CSS scripts for use with loadCSS library - https://github.com/filamentgroup/loadCSS
function loadCSS_parser( $tag ){
//If not a stylesheet, do not edit
if ( FALSE === strpos( $tag, "rel='stylesheet'" ) ) return $tag;
//Set a variable which will hold the default script for a '<noscript>' tag
$noscript = '<noscript>' . $tag . '</noscript>';
//Change 'rel' value from 'stylesheet' to 'preload'
$tag = preg_replace("/='stylesheet'/", '="preload"', $tag);
//Add 'as' and 'onload' attributes
$tag = preg_replace("/type='text\/css'/", 'as="style" onload="this.onload=null;this.rel=\'stylesheet\'"', $tag);
//Remove media attribute
$tag = preg_replace("/media='.*'/", '', $tag);
return $tag . $noscript; //Return
}
add_filter( 'style_loader_tag', 'loadCSS_parser' );
クリティカルCSSジェネレーター
ファーストビューで必要なCSSはインラインで読み込む。
クリティカルCSSジェネレーターを使用する。
投稿記事の頁、アーカイブの頁、カテゴリーの頁などの種類別にクリティカルCSSを読み込む。
header.php に記述。
<?php echo '<style type="text/css" id="firstview">';?> <?php if(is_singular()):?> <?php echo file_get_contents(get_stylesheet_directory_uri() . '/first-view/fv-post.css') ."\n";?> <?php elseif( is_front_page() || is_home() ) : ?> <?php echo file_get_contents(get_stylesheet_directory_uri() . '/first-view/fv-front.css') ."\n";?> <?php elseif(()): ?> <?php echo file_get_contents(get_stylesheet_directory_uri() . '/first-view/fv-cat.css') ."\n";?> <?php elseif(is_date()): ?> <?php echo file_get_contents(get_stylesheet_directory_uri() . '/first-view/fv-date.css') ."\n";?> <?php elseif(is_tag()): ?> <?php echo file_get_contents(get_stylesheet_directory_uri() . '/first-view/fv-tag.css') ."\n";?> <?php elseif(is_search()): ?> <?php echo file_get_contents(get_stylesheet_directory_uri() . '/first-view/fv-src.css') ."\n";?> <?php else : ?> <?php echo file_get_contents(get_stylesheet_directory_uri() . '/first-view/fv-front.css') ."\n";?> <?php endif; ?> <?php echo '</style>';?>
以上の設定で、PageSpeed Insights のテストで、レンダリング云々の警告はなくなるはず。
woff2 ヱブフォントの先読み込みについて
ヱブフォントをPreload してみる。
header.php の一番上の方に記述する。
<link rel="preload" href="/wp-includes/fonts/QuiMi-mincho.woff2" as="font" type="font/woff2" crossorigin> <noscript><link rel='font' id='QuiMi-mincho-fonts-css' href='https://makotoiwasaki.com/wp-includes/fonts/QuiMi-mincho.woff2' type='font/woff2' media='all' /> </noscript>
