PageSpeed Insightsの結果が悪いのでJavaScriptとCSSをチェックしてみた

結果はモバイル22。パソコンは69でした。成績わるっ。

使用中のJavaScriptとCSSをチェック
順番に検証
レンダリングを妨げるリソースの除外
結果

使用中のJavaScriptとCSSをチェック

【WordPress】使用していない JavaScript の削除を参考に、使用中の JavaScriptと CSSをチェックしました。このコードを子テーマ「function.php」に貼り付けます。

function dc_css_js_dsp() {
$wp_styles = wp_styles();
$wp_scripts = wp_scripts();
$handlename = '<dl><dt>List styles</dt><dd><ul>';
foreach( $wp_styles->queue as $handle ) :
$handlename .= '<li>' . $handle .'</li>';
endforeach;
$handlename .= '</ul></dd>';
$handlename .= '<dt>List scripts</dt><dd><ul>';
foreach( $wp_scripts->queue as $handle ) :
$handlename .= '<li>' . $handle .'</li>';
endforeach;
$handlename .= '</ul></dd></dl>';
return $handlename;
}
add_shortcode( 'dc_dsp', 'dc_css_js_dsp');

Cocoonの場合は「//以下に子テーマ用の関数を書く」の下に記述します。

新規投稿画面に [dc_dsp] と入力し、プレビューしてみるとなにやらたくさん出てきました。

順番に検証

admin-bar

WordPressの投稿画面に表示されるツールバーになります。

プロフィール画面で「サイトを見るときにツールバーを表示する」のチェックを外して「プロフィールを更新」すると削除されます。削除しても大して変わりはないので削除推奨。

もしくは、functions.phpに次のコードを記載します。

//admin-bar削除
add_filter('show_admin_bar', '__return_false');

code-highlight-style

文字通り、コードをハイライトで表示する機能。Cocoonで設定してあるのですが保留。

baguettebox-style

良く分からないので保留。

スワイプ対応の画像ポップアップを実装できるJavaScriptプラグイン「baguetteBox.js」。WordPressでの使い方。

wp-block-library

WordPress 5.0で搭載された Gutenbergのデフォルトエディタの CSSになります。ブロックエディタが使いにくかったので、テーマ Cocoon設定から Gutenbergを無効にしてあります。

まあとにかく不要なので「functions.php」に記載して削除。

//GutenbergのデフォルトエディタのCSS削除
function dequeue_plugins_style() {
wp_dequeue_style('wp-block-library');
}
add_action( 'wp_enqueue_scripts', 'dequeue_plugins_style', 9999);

Contact-form-7

プラグインContact Form 7をお問い合わせページのみ読み込んでWordPressを軽くする

参考：必要な場合だけ JavaScript とスタイルシートをロードさせるには | Contact Form 7 [日本語]

dlm-frontend

プラグイン「Download Monitor」。削除しました。

web-font-lazy-load-js

WEBフォントを遅延して読み込むためのスクリプト。

jquery-core、jquery-migrate

jQuery用に開発された jQueryコードの互換性を維持するための JavaScriptライブラリ。「jquery-migrate」はコードを追記することによりレンダリングが解消されました（後述）。

comment-reply

コメント機能。

//コメント機能停止
add_filter('comments_open', '__return_false');
//comment-reply停止
function register_javascript() {
wp_deregister_script('wp-embed');
wp_deregister_script('comment-reply');
}
add_action('wp_enqueue_scripts', 'register_javascript');

AICP

プラグイン「AdSense Invalid Click Protector」。削除しました。

wp_slimstat

プラグイン「Slimstat Analytics」。

レンダリングを妨げるリソースの除外

		減らせるデータ量
jQuery 3.3.1	3.3.1/jquery.min.js?ver=3.3.1(ajax.googleapis.com)	1,080 ms
jQueryプラグイン	3.0.1/jquery-migrate.min.js?ver=3.0.1(cdnjs.cloudflare.com)	780 ms
Googleマップ	api/js?key=AIzaSyAoR…(maps.googleapis.com)	1,230 ms

全く分からないので「厳しくなったPageSpeed Insightsの評価をWordPressサイトで改善して得点&速度UP【その１】 | JetB株式会社」さんのコードを丸パクリさせていただきました。

結果、jquery-migrate.min.jsのレンダリングがなくなり、Googleマップのデータ量が1,230 ms→1,080 msに減りました。また、関連性は分かりませんがダッシュボードが軽くなりました。