CSSをPreload先読みしてレンダリングブロックしない方法

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>

 

 

  • またまたこのサイトのSSL証明書が期限切れになった。 Kusanagi の自動更新ができていない。 それで手動であれこれしてみても、こんなエラーが出る。# kusanagi update cert C ...
  • Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語 ...
  • Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alt ...
  • WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動い ...
  • Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではな ...
  • 目次 1 HTTPD アクセスログの日本語化 2 Logwatch も日本語化 HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエン ...
  • ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが ...
  • WordPressで使える頁カウンターをいくつか同時に使ってカウントの仕方の違いを比べてみた。WP-PostViews    長期常用中 Post Views Counter  新規インストール Go ...

タグクラウド

WordPress カテゴリ人気記事 Views most

WordPress カテゴリ人気記事 月間

20190727

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理
2019
GA-views: 3
20190727