｢レンダリングをブロックする JavaScript を除去してください｣の対応・対策方法をCDN化も含めて徹底解説！

昨日の記事「WordPress表示速度改善には画像サイズの見直しと「jquery」のフッターへの移動する方法が効果あり！」で対応方法については説明した。

しかし、何故「PageSpeed Insights」は｢レンダリングをブロックする JavaScript を除去してください｣と警告を表示するのか？もう少し詳細に対応策までを説明しようと思う。

まずHTMLのブラウザへの読込みは大抵は「head」タグ部分の読込みから始まるとはお分かりだろうか？上から下に読込みするから当然のことなのだが、この当然のことが大切な事実なのです。

もう少し簡単に言うと、優先度を高くして読込む必要がある「JavaScript」なのですか？と警告しているのである。

このポイントが一番大切です！

「head」タグで読込みする必要が無いものは排除する

恐らくであるがこのページに辿り着いた方は下図のようなものが、「PageSpeed Insights」の「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」項目で表示されたからだと思う。

「jquery」が対象になるケースが多いのですが、コレ何に使用されるか理解されていますか？APIの操作やCSSの操作、そしてアニメーションの操作と言ったようなものに使用されます。「head」タグ内でそのような事をする場合に関して言えば除去してはならないのですが、通常のウェブサイトだとまずそのようなことに利用していることはありません。

そうなってくると「敢えて最初から読込みする必要はない！」という事になります。もし記事内等で利用するとしてもHTML内のどこかに記述されていれば問題が無いことになります。

「head」の読込みが遅くなるとブラウザへの表示速度へ影響を与えます。ある程度サイト表示された後に「jquery」を読込みしても遅くない。これが大事なポイントです。ユーザーから見たらウェブサイトの表示が早くされた方が良いに決まっています。裏で「Javascript」の読込みをしていたとしても、文字表示が早いに越したことはない。

何となく理解できましたか？表示に影響しないものは後から読込みすると思ってもらえば良いと思います。

まずはJavascriptの読込みの仕組みについて解説

「jquery」を全く利用しないサイトであれば、「jquery」自体の読込みをしないというのも一つの選択肢です。ただ、アフィリエイトやアニメーション表示なんかをしていると必要となるケースがあるかと思います。その為、除去してしまうというのは現実的ではありません。

「head」ではなく「footer」で読込みするように変更するのが現実的かと思います。実はWordPressの親テーマの「function.php」を参照するとわかるのですが、WordPressで利用しているJavascriptの読込みを「footer」で行っています。

下の例は【twenty seventeen】となります。親テーマの「function.php｣を参照してもらえると分かると思います。「jquery」本体以外のJavascriptの読込みをfooter指定で行っていることがわかりますか？

function twentyseventeen_scripts() {
// Add custom fonts, used in the main stylesheet.
wp_enqueue_style( 'twentyseventeen-fonts', twentyseventeen_fonts_url(), array(), null );

// Theme stylesheet.
wp_enqueue_style( 'twentyseventeen-style', get_stylesheet_uri() );

// Load the dark colorscheme.
if ( 'dark' === get_theme_mod( 'colorscheme', 'light' ) || is_customize_preview() ) {
wp_enqueue_style( 'twentyseventeen-colors-dark', get_theme_file_uri( '/assets/css/colors-dark.css' ), array( 'twentyseventeen-style' ), '1.0' );
}

// Load the Internet Explorer 9 specific stylesheet, to fix display issues in the Customizer.
if ( is_customize_preview() ) {
wp_enqueue_style( 'twentyseventeen-ie9', get_theme_file_uri( '/assets/css/ie9.css' ), array( 'twentyseventeen-style' ), '1.0' );
wp_style_add_data( 'twentyseventeen-ie9', 'conditional', 'IE 9' );
}

// Load the Internet Explorer 8 specific stylesheet.
wp_enqueue_style( 'twentyseventeen-ie8', get_theme_file_uri( '/assets/css/ie8.css' ), array( 'twentyseventeen-style' ), '1.0' );
wp_style_add_data( 'twentyseventeen-ie8', 'conditional', 'lt IE 9' );

// Load the html5 shiv.
wp_enqueue_script( 'html5', get_theme_file_uri( '/assets/js/html5.js' ), array(), '3.7.3' );
wp_script_add_data( 'html5', 'conditional', 'lt IE 9' );

wp_enqueue_script( 'twentyseventeen-skip-link-focus-fix', get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ), array(), '1.0', true );

$twentyseventeen_l10n = array(
'quote' => twentyseventeen_get_svg( array( 'icon' => 'quote-right' ) ),
);

if ( has_nav_menu( 'top' ) ) {
wp_enqueue_script( 'twentyseventeen-navigation', get_theme_file_uri( '/assets/js/navigation.js' ), array( 'jquery' ), '1.0', true );
$twentyseventeen_l10n['expand'] = __( 'Expand child menu', 'twentyseventeen' );
$twentyseventeen_l10n['collapse'] = __( 'Collapse child menu', 'twentyseventeen' );
$twentyseventeen_l10n['icon'] = twentyseventeen_get_svg( array( 'icon' => 'angle-down', 'fallback' => true ) );
}

wp_enqueue_script( 'twentyseventeen-global', get_theme_file_uri( '/assets/js/global.js' ), array( 'jquery' ), '1.0', true );

wp_enqueue_script( 'jquery-scrollto', get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ), array( 'jquery' ), '2.1.2', true );

wp_localize_script( 'twentyseventeen-skip-link-focus-fix', 'twentyseventeenScreenReaderText', $twentyseventeen_l10n );

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'twentyseventeen_scripts' );

例えば下の行があると思うのですが、「wp_enqueue_script()」関数を使用して「/assets/js/jquery.scrollTo.js」というJavascriptの読込みをしています。この関数の最後の引数に「true」を指定すると「footer」での読込み指定となります。ここら辺はWordPressの関数リファレンスを見て貰えると詳細に記載されています。上記のコードでJavascriptの読込みが全て「footer」指定されているのわかりますか？

wp_enqueue_script( 'jquery-scrollto', get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ), array( 'jquery' ), '2.1.2', true );

この「function.php」コードを見て気付いた方いますか？実は「jquery」本体の読込み指定は記述されていません。え、じゃあどこで「jquery」本体の読込み指定をしているのか？疑問になるはずです。これかなり厄介な話で、下の「header.php」ファイルの22行目に「<?php wp_head(); ?>」という部分があｒと思うのですが、この「wp_head()」関数内で自動的に「jquery」本体の読込みを行ってしまっています。

<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

親テーマで勝手に「jquery」の読込みをされていてはどうすれば良いのか？

大丈夫です。WordPressはまず最初に子テーマの「function.php」ファイルを読込みした後に親テーマのプログラムが動作する仕組みとなっています。っと言うことは子テーマの「function.php」で親テーマの動作に制限を加えてしまえば良いのです。

実際の対応方法実践例

他サイトでよく見かける方法で、全てのプログラムが動作終了した後にHTMLを書き換えると言った様な方法で対応されるやり方もあるのですが、これですと無駄なプログラム動作が発生します。あくまでも速度改善が目的であれば、根本的に無駄な動作を無くすことが大切です！

このような速度改善をする時には、まずどのように動作しているのかの仕組みを解明することが大切です。「Head Cleaner」というプラグインは恐らく、HTMLが作成された後にHTMLを書き直すプラグインなんだと思います。だからHTMLソースは綺麗になりますが、場合によっては無駄な動作をさせるだけで速度改善が望めないということになるのです。

今回本サイトで対応した例

子テーマの「function.php」に下のコードを追記するだけです。たった5行のプログラムで親テーマを制御しました。しかも「add_action()」の第一引数に「init」を指定しているのですが、これはWordPressで一番最初に動作する初期化処理時の動作です。ここで動作指定をしてやれば無駄な親テーマ自体も無駄な動作を減らすことが可能です。「remove_action()」「add_action()」についてはWordPressの関数リファレンスをご参照ください。

// ヘッダー記載のものをフッターへ移動
function init_parent_action_child() {
    remove_action('wp_head','wp_print_head_scripts',9);
    add_action('wp_footer','wp_print_head_scripts',5);
}
add_action('init','init_parent_action_child');

他にも無駄な処理を制御したい場合について

また「wp_print_head_scripts」って何と思われる方いると思いますが、他にもCSS等色々無駄なものを制御したい場合には「Wordpress本体 / wp-includes / default-filters.php」の中を参照して下さい。

// Actions
add_action( 'wp_head', '_wp_render_title_tag', 1 );
add_action( 'wp_head', 'wp_enqueue_scripts', 1 );
add_action( 'wp_head', 'wp_resource_hints', 2 );
add_action( 'wp_head', 'feed_links', 2 );
add_action( 'wp_head', 'feed_links_extra', 3 );
add_action( 'wp_head', 'rsd_link' );
add_action( 'wp_head', 'wlwmanifest_link' );
add_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
add_action( 'wp_head', 'locale_stylesheet' );
add_action( 'publish_future_post', 'check_and_publish_future_post', 10, 1 );
add_action( 'wp_head', 'noindex', 1 );
add_action( 'wp_head', 'print_emoji_detection_script', 7 );
add_action( 'wp_head', 'wp_print_styles', 8 );
add_action( 'wp_head', 'wp_print_head_scripts', 9 );
add_action( 'wp_head', 'wp_generator' );
add_action( 'wp_head', 'rel_canonical' );
add_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 );
add_action( 'wp_head', 'wp_custom_css_cb', 101 );
add_action( 'wp_head', 'wp_site_icon', 99 );
add_action( 'wp_footer', 'wp_print_footer_scripts', 20 );
add_action( 'template_redirect', 'wp_shortlink_header', 11, 0 );
add_action( 'wp_print_footer_scripts', '_wp_footer_scripts' );
add_action( 'init', 'check_theme_switched', 99 );
add_action( 'after_switch_theme', '_wp_sidebars_changed' );
add_action( 'wp_print_styles', 'print_emoji_styles' );

上記のようなコードがどこかに記載されています。これを見るとパラメーターが分かると思います。どの関数で実施されてどの様にアクションを発生させているのかが分かります。実行を取りやめたければ、これを参考にして子テーマで「remove_action()」を記載してやれば良いのです。

これで仕組みとどのように無駄なHTMLソースへの出力制御を行えば良いかが理解できたと思います。今回本サイトでは親テーマ実施前に「wp_head()」関数で実施するものを「wp_footer()」関数で実施するように変更しただけです。

ここまでで取り合えず「jquery」の「レンダリングをブロックする JavaScript を除去してください」の対応は完了です！

「jquery」をgoogleサーバ等から取得するCDN化について

これについては本サイトの場合では実施したところ、パフォーマンス改善が思った以上に出なかったので採用はしませんでしたが、環境によってはパフォーマンスが向上するケースもありますので説明いたします。

このCDN化ですが、サイト表示に関係する部品（Javascript・画像等）を色々なサーバーに分散させることにより一つのサーバーに負荷が集中しないというメリットがあります。恐らく、一日に1万PV以上のアクセスがあるようなサイトですとパフォーマンス向上が望めるような気がします。アクセス数が少ないサイトでは申し訳ありませんが、一つのサーバーで負荷に耐えられてしまう。負荷分散する必要なんて全くありません。むしろ逆効果になることもあり得ます。

この負荷分散のCDN化については人気サイトでアクセス数が非常に多いサイトでは、真剣に取組みし効果を発揮するものだという認識で良いと思います。

あくまでも「jquery」をgoogleサーバーから取得するケースでプログラム例をご紹介します。

本サイトで「jquery」をgoogleからのCDN化したプログラム例

下のコードを子テーマの「function.php」に記述するだけです。

//CDNの活用
if (!is_admin()) {
function wp_enqueue_scripts_child() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', false, '1.12.4', true );
    wp_enqueue_script('jquery');
    }
add_action('wp_enqueue_scripts','wp_enqueue_scripts_child');
}

これ少し説明すると、「jquery」の登録を一度解除し、googleの「jquery」を登録し直しているというコードになります。ちなみにGoogleの「jquery」を利用する場合にはバージョンを確認する必要がありますので、かならずコチラのサイト「Google Hosted Libraries」をご参照下さい。「jquery」のバージョンはWordPressが出力している「jquery」本体のバージョンと合わせてやれば良いだけです。

このプログラムはあくまでも一例です。もっと良い記述方法もあるかもしれませんので、ご利用するのはご自由にしてもらって構いませんが、速度改善がされるかは保証できません。

最後にまとめると

WordPressの速度改善ですが、まだまだ課題が残されています。プラグインに頼るのも良いのですが、根本的な仕組みを理解して取組みしていかないと悪影響が出る可能性もありますので注意しながら少しずつ取組みすることをお薦めします。どうしても動作検証も必要となります。特にサイトが見えなくなったり、今までと違うデザインになってしまったり、アフィリエイトプログラムが動作しなくなったりとかあると致命的なエラーとなります。あまり慌てず動作検証をしっかりしながら少しずつやっていきましょう。

恐らくここまで詳細に解説しているサイトや本はありません。皆様のお役に経つようでしたら、「はてブ」登録や「Twitter」のフォロー・ツイート等よろしくお願い致します。それが励みになり、これからも皆様のお役になてる記事を書いていく力になりますので。