341

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

WordPress

CSSを遅延読み込みするためには、preload を使えばよいのだが、Firefox 、IEブラウザーでは動作しない。

 

それで、loadCSS   cssrelpreload.js を併用する。

 

全ブラウザ対応！preload で CSS を非同期で読み込み高速化
ブラウザの対応を気にせず rel="preload" で CSS を非同期で読み込めるのが、 javascript ライブラリの loadCSS です。使い方は head タグにスクリプトを記述するだけと簡単です。 rel="preload" に対応しない IE を気にすることなく、レンダリングをブロックするスタイルシートを排除できサイトを高速化できます。
FirstLayout
 
https://firstlayout.net/load-css-asynchronously-with-loadcss/

 

これだけだと、java script 非対応のブラウザでcss が読み込まれないのでもうひと工夫が必要。

 

Ryan Fitton · Blog - Using loadCSS with WordPress
Use loadCSS with WordPress hook CSS, enqueue your own site's CSS files. Add Async/Defer to JavaScript files.
Ryan Fitton
 
https://ryanfitton.co.uk/blog/using-loadcss-with-wordpress/

これで完璧。

 

オリジナルをミニファイしてサーバーに設置する。

filamentgroup/loadCSS
A function for loading CSS asynchronously. Contribute to filamentgroup/loadCSS development by creating an account on GitHub.
GitHub
 
https://github.com/filamentgroup/loadCSS/blob/master/src/cssrelpreload.js

 

  • 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' );

 

Ryan Fitton · Blog - Using loadCSS with WordPress
Use loadCSS with WordPress hook CSS, enqueue your own site's CSS files. Add Async/Defer to JavaScript files.
Ryan Fitton
 
https://ryanfitton.co.uk/blog/using-loadcss-with-wordpress/

 

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ジェネレーターを使用する。

Critical Path CSS Generator - by Jonas Ohlsson
Production ready Critical Path CSS Generator. Specify web page and CSS and let this tool generate your Critical Path CSS for you, in seconds.
jonassebastianohlsson.com
 
https://jonassebastianohlsson.com/criticalpathcssgenerator/

 

投稿記事の頁、アーカイブの頁、カテゴリーの頁などの種類別にクリティカル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 のテストで、レンダリング云々の警告はなくなるはず。

PageSpeed Insights
developers.google.com
 
https://developers.google.com/speed/pagespeed/insights/

 

woff2 ヱブフォントの先読み込みについて

The Web Fonts: Preloaded—zachleat.com
A post by Zach Leatherman (zachleat)
Zach Leatherman
 
https://www.zachleat.com/web/preload/

 

ヱブフォントを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>

 

 

  • 106
    2679年11月5日
    WordPress

    Let’s Encrypt SSL証明書の期限切れ対策 certbot を使う

    またまたこのサイトのSSL証明書が期限切れになった。 Kusanagi の自動更新ができていない。 それで手動であれこれしてみても、こんなエラーが出る。＃ kusanagi update cert Challenge failed for domain makotoiwasaki.com Challenge failed for domain www.makotoiwasaki.com Attempting to renew cert (makotoiwasaki.com) from /etc/letsencrypt/renewal/makotoiwasaki.com.conf produced an unexpected error: Some challenges hav...
    ... >> つづき
  • 222
    2679年9月3日
    WordPress

    Google Indexing API プラグイン WordPress by Rank Math

    Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語だが、この通り： ⏱️ Get Google To Index Your Website Instantly Using the Indexing API ⚡Take a look at how you can use Google's new indexing API & to get your website's pages and content crawled instantly instead of waiting for Google to...
    ... >> つづき
  • 13
    2679年9月3日
    WordPress

    検索結果スニペット、抜粋 get_the_excerpt の設定

    Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alternative You Deserve - Rank Math SEO vs. Yoast SEORank Math SEO plugin for WordPress is hands down the best Yoast alternative WordPress plugin. And the best thing is, Rank Math is completely FREE!Rank Math
    ... >> つづき
  • 11
    2679年8月29日
    WordPress

    WP_CRON を停止して Linux crontab で自動バックアップする方法

    WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動いていない。やっと成功した設定方法を記録しておく。wp-config.php に次の行を追加する。define('DISABLE_WP_CRON', true);/var/spool/cron  に、  httpd という名前のファイルを作成し、次の1行を追加する。 所有者を httpd.www など、httpd nginx サーバーの稼働ユーザー名と同じにする。nginx.conf に書いてある。root@s4:/v...
    ... >> つづき
  • 109
    2679年8月29日
    WordPress

    Nginx の Fcache が効いていない時に効かせる方法

    Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではない。Nginx のアクセスログを眺めていると、  BYPASS MISS EXPIRED のみで、HITが殆どない。 トップ頁、アーカイブリストの頁ではHIT、 個別投稿頁では、BYPASS MISS EXPIRED ばかりでHITがない。Kusanagi fcache on とすると、fcache は有効になったかのように思えるが、本当にキャッシュが効いているのかどうかはログで確認しないとわからない。まず、Wordpressの編集画面にログインし...
    ... >> つづき
  • 271
    2679年8月25日
    WordPress

    httpdアクセスログを日本語デコードする方法

    HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエンコードされていて読めない。 そこで、デコードして表示させる。 ログのファイル名が ssl_access.log だとすると、tail -f ssl_access.log| perl -ne 'use URI::Escape; print uri_unescape($_);' tail -f access.log | php -R 'echo urldecode($argn)."\n";'で、日本語URlが読める状態で出力される。 Apacheのログをデコードする方法 - Life with ITプログラマ x ...
    ... >> つづき
  • 15
    2679年8月25日
    WordPress

    リロードなしにスタイルシートの更新を反映させる方法

    ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが、一般閲覧者はわざわざ再読み込みしたり、キャッシュを削除したりするはずはないので、変更が反映されていない崩れたデザインを見ているかもしれない。わざわざリロードしたりキャッシュを削除したりしなくても変更が確実に反映されるような設定方法を発見した。wp_enqueue_scripts で CSS、JS の読み込みを管理している場合には、次のようにfunctions.php に記述する。// 子テーマのstyle.cssを最後に読み込む add_acti...
    ... >> つづき
  • 2
    2679年8月25日
    WordPress

    頁カウンターの比較 WordPress

    WordPressで使える頁カウンターをいくつか同時に使ってカウントの仕方の違いを比べてみた。WP-PostViews    長期常用中 Post Views Counter  新規インストール Google Analytics Post Pageviews Pjaxblog の付属カウンター機能WP-PostViews は他のカウンターよりもカウントが多くなりがちなことに気づいた。一度のアクセスなのに2回カウントされることもあるようだ。ロボットクローラー Bots のリスト数も不十分に少ないような気がする。それで数が多くなりやすいのではないか。 それで Post Views Counter に乗り換えることにした。Post Views Cou...
    ... >> つづき

WordPress カテゴリ人気記事 Views most

タグ関連記事

閲覧履歴